shadcn_phlexcomponents 0.1.11 → 0.1.16

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

@@ -1,15 +1,18 @@
+import { Controller } from '@hotwired/stimulus'
+import { useClickOutside } from 'stimulus-use'
 import {
-  initFloatingUi,
-  showOverlay,
-  hideOverlay,
+  focusTrigger,
+  getFocusableElements,
+  showContent,
+  hideContent,
   lockScroll,
   unlockScroll,
-  ON_OPEN_FOCUS_DELAY,
-  getFocusableElements,
+  handleTabNavigation,
+  focusElement,
 } from '../utils'
+import { initFloatingUi } from '../utils/floating_ui'
 import { Calendar, Options } from 'vanilla-calendar-pro'
 import Inputmask from 'inputmask'
-import PopoverController from './popover_controller'
 import dayjs from 'dayjs'
 import customParseFormat from 'dayjs/plugin/customParseFormat'
 import utc from 'dayjs/plugin/utc'
@@ -18,7 +21,8 @@ dayjs.extend(utc)
 
 const DAYJS_FORMAT = 'YYYY-MM-DD'
 
-export default class extends PopoverController {
+const DatePickerController = class extends Controller<HTMLElement> {
+  // targets
   static targets = [
     'trigger',
     'triggerText',
@@ -28,31 +32,42 @@ export default class extends PopoverController {
     'hiddenInput',
     'inputContainer',
     'calendar',
+    'overlay',
   ]
-
-  static values = { isOpen: Boolean, date: String }
-
+  declare readonly triggerTarget: HTMLElement
   declare readonly triggerTextTarget: HTMLElement
+  declare readonly hasTriggerTextTarget: boolean
+  declare readonly contentContainerTarget: HTMLElement
+  declare readonly contentTarget: HTMLElement
   declare readonly inputTarget: HTMLInputElement
+  declare readonly hasInputTarget: boolean
   declare readonly hiddenInputTarget: HTMLInputElement
   declare readonly inputContainerTarget: HTMLElement
   declare readonly calendarTarget: HTMLElement
-  declare onClickDateListener: (event: any, self: any) => void
+  declare readonly overlayTarget: HTMLElement
+
+  // values
+  static values = { isOpen: Boolean, date: String }
+  declare isOpenValue: boolean
+  declare dateValue: string
+
+  // custom properties
   declare format: string
   declare mask: boolean
-  declare dateValue: string
   declare calendar: Calendar
-  declare readonly hasInputTarget: boolean
-  declare readonly hasTriggerTextTarget: boolean
+  declare isMobile: boolean
+  declare DOMKeydownListener: (event: KeyboardEvent) => void
+  declare cleanup: () => void
+  declare onClickDateListener: (self: Calendar) => void
 
   connect() {
-    super.connect()
-    this.onClickDateListener = this.onClickDate.bind(this)
     this.format = this.element.dataset.format || 'DD/MM/YYYY'
     this.mask = this.element.dataset.mask === 'true'
 
-    const options = this.getOptions()
+    this.DOMKeydownListener = this.onDOMKeydown.bind(this)
+    this.onClickDateListener = this.onClickDate.bind(this)
 
+    const options = this.getOptions()
     this.calendar = new Calendar(this.calendarTarget, options)
     this.calendar.init()
 
@@ -61,30 +76,50 @@ export default class extends PopoverController {
     }
 
     this.calendarTarget.removeAttribute('tabindex')
+
+    useClickOutside(this, { element: this.contentTarget, dispatchEvent: false })
+  }
+
+  contentContainerTargetConnected() {
+    // Datepicker is shown as a dialog on small screens
+    const styles = window.getComputedStyle(this.contentContainerTarget)
+    this.isMobile = styles.translate === '-50%'
+  }
+
+  toggle() {
+    if (this.isOpenValue) {
+      this.close()
+    } else {
+      this.open()
+    }
+  }
+
+  open() {
+    this.isOpenValue = true
+  }
+
+  close() {
+    this.isOpenValue = false
   }
 
   inputBlur() {
     let dateDisplay = ''
     const date = this.calendar.context.selectedDates[0]
-
     if (date) {
       dateDisplay = dayjs(date).format(this.format)
     }
-
     this.inputTarget.value = dateDisplay
     this.inputContainerTarget.dataset.focus = 'false'
   }
 
   inputDate(event: KeyboardEvent) {
     const value = (event.target as HTMLInputElement).value
-
     if (value.length === 0) {
       this.calendar.set({
         selectedDates: [],
       })
       this.dateValue = ''
     }
-
     if (value.length > 0 && dayjs(value, this.format, true).isValid()) {
       const dayjsDate = dayjs(value, this.format).format(DAYJS_FORMAT)
       this.calendar.set({
@@ -98,38 +133,23 @@ export default class extends PopoverController {
     this.inputContainerTarget.dataset.focus = 'true'
   }
 
-  onOpenFocusedElement() {
-    const focusableElements = getFocusableElements(this.contentTarget)
-
-    const selectedElement = Array.from(focusableElements).find(
-      (e) => e.ariaSelected,
-    ) as HTMLElement
-
-    const currentElement = this.contentTarget.querySelector(
-      '[aria-current]',
-    ) as HTMLElement
-
-    if (selectedElement) {
-      return selectedElement
-    } else if (currentElement) {
-      const firstElementChild = currentElement.firstElementChild as HTMLElement
-      return firstElementChild
-    } else {
-      return focusableElements[0]
-    }
+  clickOutside(event: MouseEvent) {
+    const target = event.target as HTMLElement
+    // Let trigger handle state
+    if (target === this.triggerTarget) return
+    if (this.triggerTarget.contains(target)) return
+    if (this.triggerTarget.id === target.getAttribute('for')) return
+    this.close()
   }
 
-  referenceElement() {
-    return this.hasInputTarget ? this.inputTarget : this.triggerTarget
-  }
-
-  onOpen() {
-    if (this.isMobile()) {
-      lockScroll()
-      showOverlay({ elementId: this.contentTarget.id })
-    }
+  isOpenValueChanged(isOpen: boolean, previousIsOpen: boolean) {
+    if (isOpen) {
+      showContent({
+        trigger: this.triggerTarget,
+        content: this.contentTarget,
+        contentContainer: this.contentContainerTarget,
+      })
 
-    setTimeout(() => {
       // Prevent width from changing when changing to month/year view
       if (!this.contentTarget.dataset.width) {
         const contentWidth = this.contentTarget.offsetWidth
@@ -139,32 +159,121 @@ export default class extends PopoverController {
         this.contentTarget.style.minWidth = `${contentWidth}px`
       }
 
-      if (this.isMobile()) {
-        // Prevent position from changing when toggling between month/year on mobile
-        if (!this.contentTarget.dataset.top) {
-          const rect = this.contentTarget.getBoundingClientRect()
-          this.contentTarget.dataset.top = `${rect.top}`
-          this.contentTarget.style.top = `${rect.top}px`
-          this.contentTarget.classList.remove('-translate-y-1/2', 'top-1/2')
+      if (this.isMobile) {
+        lockScroll(this.contentTarget.id)
+        this.overlayTarget.style.display = ''
+        this.overlayTarget.dataset.state = 'open'
+      } else {
+        this.cleanup = initFloatingUi({
+          referenceElement: this.hasInputTarget
+            ? this.inputTarget
+            : this.triggerTarget,
+          floatingElement: this.contentContainerTarget,
+          side: this.contentTarget.dataset.side,
+          align: this.contentTarget.dataset.align,
+          sideOffset: 4,
+        })
+      }
+
+      let elementToFocus = null as HTMLElement | null
+      const focusableElements = getFocusableElements(this.contentTarget)
+
+      const selectedElement = Array.from(focusableElements).find(
+        (e) => e.ariaSelected,
+      ) as HTMLElement
+
+      const currentElement = this.contentTarget.querySelector(
+        '[aria-current]',
+      ) as HTMLElement
+
+      if (selectedElement) {
+        elementToFocus = selectedElement
+      } else if (currentElement) {
+        const firstElementChild =
+          currentElement.firstElementChild as HTMLElement
+        elementToFocus = firstElementChild
+      } else {
+        elementToFocus = focusableElements[0]
+      }
+
+      focusElement(elementToFocus)
+
+      this.setupEventListeners()
+    } else {
+      hideContent({
+        trigger: this.triggerTarget,
+        content: this.contentTarget,
+        contentContainer: this.contentContainerTarget,
+      })
+
+      if (this.isMobile) {
+        unlockScroll(this.contentTarget.id)
+        this.overlayTarget.style.display = 'none'
+        this.overlayTarget.dataset.state = 'closed'
+      }
+
+      if (previousIsOpen) {
+        focusTrigger(this.triggerTarget)
+      }
+
+      this.cleanupEventListeners()
+    }
+  }
+
+  dateValueChanged(value: string) {
+    if (value && value.length > 0) {
+      const dayjsDate = dayjs(value)
+      const formattedDate = dayjsDate.format(this.format)
+
+      if (this.hasInputTarget) this.inputTarget.value = formattedDate
+      if (this.hasTriggerTextTarget) {
+        this.triggerTarget.dataset.hasValue = 'true'
+        this.triggerTextTarget.textContent = formattedDate
+      }
+
+      this.hiddenInputTarget.value = dayjsDate.utc().format()
+    } else {
+      if (this.hasInputTarget) this.inputTarget.value = ''
+
+      if (this.hasTriggerTextTarget) {
+        this.triggerTarget.dataset.hasValue = 'false'
+        if (this.triggerTarget.dataset.placeholder) {
+          this.triggerTextTarget.textContent =
+            this.triggerTarget.dataset.placeholder
+        } else {
+          this.triggerTextTarget.textContent = ''
         }
       }
-    }, ON_OPEN_FOCUS_DELAY)
+
+      this.hiddenInputTarget.value = ''
+    }
+  }
+
+  disconnect() {
+    this.cleanupEventListeners()
   }
 
-  onClose() {
-    if (this.isMobile()) {
-      hideOverlay(this.contentTarget.id)
-      unlockScroll()
+  protected onClickDate(self: Calendar) {
+    const date = self.context.selectedDates[0]
+
+    if (date) {
+      this.dateValue = date
+      this.close()
+    } else {
+      this.dateValue = ''
     }
   }
 
-  // Popover is shown as a dialog on small screens with position: fixed
-  isMobile() {
-    const styles = window.getComputedStyle(this.contentTarget)
-    return styles.position === 'fixed'
+  protected setupEventListeners() {
+    document.addEventListener('keydown', this.DOMKeydownListener)
+  }
+
+  protected cleanupEventListeners() {
+    if (this.cleanup) this.cleanup()
+    document.removeEventListener('keydown', this.DOMKeydownListener)
   }
 
-  getOptions() {
+  protected getOptions() {
     let options = {
       type: 'default',
       enableJumpToSelectedDate: true,
@@ -184,7 +293,7 @@ export default class extends PopoverController {
         ...JSON.parse(this.element.dataset.options || ''),
       }
     } catch {
-      options = options
+      // noop
     }
 
     if (options.selectedDates && options.selectedDates.length > 0) {
@@ -194,29 +303,15 @@ export default class extends PopoverController {
     return options
   }
 
-  onDOMKeydown(event: KeyboardEvent) {
+  protected onDOMKeydown(event: KeyboardEvent) {
     if (!this.isOpenValue) return
 
     const key = event.key
 
-    const focusableElements = getFocusableElements(this.contentTarget)
-
-    const firstElement = focusableElements[0]
-    const lastElement = focusableElements[focusableElements.length - 1]
-
     if (key === 'Escape') {
       this.close()
     } else if (key === 'Tab') {
-      // 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()
-      }
+      handleTabNavigation(this.contentTarget, event)
     } else if (
       ['ArrowUp', 'ArrowDown', 'ArrowRight', 'ArrowLeft'].includes(key) &&
       document.activeElement != this.inputTarget
@@ -225,50 +320,15 @@ export default class extends PopoverController {
     }
   }
 
-  onClickDate(self: Calendar) {
-    const date = self.context.selectedDates[0]
-
-    if (date) {
-      this.dateValue = date
-      this.close()
-    } else {
-      this.dateValue = ''
-    }
-  }
-
-  setupInputMask() {
-    const im = new Inputmask(this.format.replace(/[^\/]/g, '9'), {
+  protected setupInputMask() {
+    const im = new Inputmask(this.format.replace(/[^/]/g, '9'), {
       showMaskOnHover: false,
     })
     im.mask(this.inputTarget)
   }
+}
 
-  dateValueChanged(value: string) {
-    if (value && value.length > 0) {
-      const dayjsDate = dayjs(value)
-      const formattedDate = dayjsDate.format(this.format)
-
-      if (this.hasInputTarget) this.inputTarget.value = formattedDate
-      if (this.hasTriggerTextTarget) {
-        this.triggerTarget.dataset.hasValue = 'true'
-        this.triggerTextTarget.textContent = formattedDate
-      }
-
-      this.hiddenInputTarget.value = dayjsDate.utc().format()
-    } else {
-      if (this.hasInputTarget) this.inputTarget.value = ''
-
-      if (this.hasTriggerTextTarget) {
-        this.triggerTarget.dataset.hasValue = 'false'
-        if (this.triggerTarget.dataset.placeholder) {
-          this.triggerTextTarget.textContent =
-            this.triggerTarget.dataset.placeholder
-        } else {
-          this.triggerTextTarget.textContent = ''
-        }
-      }
+type DatePicker = InstanceType<typeof DatePickerController>
 
-      this.hiddenInputTarget.value = ''
-    }
-  }
-}
+export { DatePickerController }
+export type { DatePicker }

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

@@ -1,5 +1,5 @@
 import { Calendar, Options } from 'vanilla-calendar-pro'
-import DatePickerController from './date_picker_controller'
+import { DatePickerController } from './date_picker_controller'
 import dayjs from 'dayjs'
 import customParseFormat from 'dayjs/plugin/customParseFormat'
 import utc from 'dayjs/plugin/utc'
@@ -9,26 +9,28 @@ dayjs.extend(utc)
 const DELIMITER = ' - '
 const DAYJS_FORMAT = 'YYYY-MM-DD'
 
-export default class extends DatePickerController {
+const DateRangePickerController = class extends DatePickerController {
+  // targets
   static targets = [
     'trigger',
     'triggerText',
-    'contentWrapper',
+    'contentContainer',
     'content',
     'input',
     'hiddenInput',
     'endHiddenInput',
     'inputContainer',
     'calendar',
+    'overlay',
   ]
+  declare readonly endHiddenInputTarget: HTMLInputElement
 
+  // values
   static values = {
     isOpen: Boolean,
     date: String,
     endDate: String,
   }
-
-  declare readonly endHiddenInputTarget: HTMLInputElement
   declare endDateValue: string
 
   inputBlur() {
@@ -88,80 +90,6 @@ export default class extends DatePickerController {
     }
   }
 
-  getOptions() {
-    let options = {
-      type: 'multiple',
-      selectionDatesMode: 'multiple-ranged',
-      displayMonthsCount: 2,
-      monthsToSwitch: 1,
-      displayDatesOutside: false,
-      enableJumpToSelectedDate: true,
-      onClickDate: this.onClickDateListener,
-    } as Options
-
-    const selectedDates = []
-
-    const startDate = this.element.dataset.value
-    const endDate = this.element.dataset.endValue
-
-    if (startDate && dayjs(startDate).isValid()) {
-      const date = dayjs(startDate).format(DAYJS_FORMAT)
-      selectedDates.push(date)
-    }
-
-    if (endDate && dayjs(endDate).isValid()) {
-      const date = dayjs(endDate).format(DAYJS_FORMAT)
-      selectedDates.push(date)
-    }
-
-    options.selectedDates = selectedDates
-
-    try {
-      options = {
-        ...options,
-        ...JSON.parse(this.element.dataset.options || ''),
-      }
-    } catch {
-      options = options
-    }
-
-    if (options.selectedDates && options.selectedDates.length > 0) {
-      this.dateValue = `${options.selectedDates[0]}`
-      this.endDateValue = `${options.selectedDates[1]}`
-    }
-
-    return options
-  }
-
-  onClickDate(self: Calendar) {
-    const dates = self.context.selectedDates
-
-    if (dates.length > 0) {
-      const startDate = dates[0]
-      const endDate = dates[1]
-
-      this.dateValue = startDate
-
-      if (endDate) {
-        this.endDateValue = endDate
-        this.close()
-      } else {
-        this.endDateValue = ''
-      }
-    } else {
-      this.dateValue = ''
-      this.endDateValue = ''
-    }
-  }
-
-  setupInputMask() {
-    const pattern = this.format.replace(/[^\/]/g, '9')
-    const im = new Inputmask(`${pattern}${DELIMITER}${pattern}`, {
-      showMaskOnHover: false,
-    })
-    im.mask(this.inputTarget)
-  }
-
   dateValueChanged(value: string) {
     this.onClickDateListener = this.onClickDate.bind(this)
 
@@ -228,6 +156,7 @@ export default class extends DatePickerController {
     }
 
     if (this.hasInputTarget) this.inputTarget.value = datesDisplay
+
     if (this.hasTriggerTextTarget) {
       const hasValue = (!!value && value.length > 0) || !!startDate
       this.triggerTarget.dataset.hasValue = `${hasValue}`
@@ -240,4 +169,85 @@ export default class extends DatePickerController {
       }
     }
   }
+
+  protected getOptions() {
+    let options = {
+      type: 'multiple',
+      selectionDatesMode: 'multiple-ranged',
+      displayMonthsCount: 2,
+      monthsToSwitch: 1,
+      displayDatesOutside: false,
+      enableJumpToSelectedDate: true,
+      onClickDate: this.onClickDateListener,
+    } as Options
+
+    const selectedDates = []
+
+    const startDate = this.element.dataset.value
+    const endDate = this.element.dataset.endValue
+
+    if (startDate && dayjs(startDate).isValid()) {
+      const date = dayjs(startDate).format(DAYJS_FORMAT)
+      selectedDates.push(date)
+    }
+
+    if (endDate && dayjs(endDate).isValid()) {
+      const date = dayjs(endDate).format(DAYJS_FORMAT)
+      selectedDates.push(date)
+    }
+
+    options.selectedDates = selectedDates
+
+    try {
+      options = {
+        ...options,
+        ...JSON.parse(this.element.dataset.options || ''),
+      }
+    } catch {
+      // noop
+    }
+
+    if (options.selectedDates && options.selectedDates.length > 0) {
+      this.dateValue = `${options.selectedDates[0]}`
+      if (options.selectedDates[1]) {
+        this.endDateValue = `${options.selectedDates[1]}`
+      }
+    }
+
+    return options
+  }
+
+  protected onClickDate(self: Calendar) {
+    const dates = self.context.selectedDates
+
+    if (dates.length > 0) {
+      const startDate = dates[0]
+      const endDate = dates[1]
+
+      this.dateValue = startDate
+
+      if (endDate) {
+        this.endDateValue = endDate
+        this.close()
+      } else {
+        this.endDateValue = ''
+      }
+    } else {
+      this.dateValue = ''
+      this.endDateValue = ''
+    }
+  }
+
+  protected setupInputMask() {
+    const pattern = this.format.replace(/[^\/]/g, '9')
+    const im = new Inputmask(`${pattern}${DELIMITER}${pattern}`, {
+      showMaskOnHover: false,
+    })
+    im.mask(this.inputTarget)
+  }
 }
+
+type DateRangePicker = InstanceType<typeof DateRangePickerController>
+
+export { DateRangePickerController }
+export type { DateRangePicker }