shadcn_phlexcomponents 0.1.11 → 0.1.16

data/app/javascript/controllers/select_controller.ts

@@ -1,200 +0,0 @@
-import DropdownMenuRootController from './dropdown_menu_root_controller'
-
-export default class extends DropdownMenuRootController {
-  static targets = [
-    'trigger',
-    'contentContainer',
-    'content',
-    'item',
-    'triggerText',
-    'group',
-    'label',
-    'select',
-  ]
-
-  static values = {
-    isOpen: Boolean,
-    selected: String,
-    setEqualWidth: { type: Boolean, default: true },
-    closestContentSelector: {
-      type: String,
-      default: '[data-select-target="content"]',
-    },
-  }
-
-  declare selectedValue: string
-  declare searchString: string
-  declare searchTimeout: number
-  declare groupTargets: HTMLElement[]
-  declare triggerTextTarget: HTMLElement
-  declare selectTarget: HTMLSelectElement
-  declare itemsInnerText: string[]
-
-  connect() {
-    super.connect()
-    this.itemsInnerText = this.items.map((i) => i.innerText.trim())
-    this.setAriaLabelledby()
-    this.searchString = ''
-  }
-
-  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
-      }
-    })
-  }
-
-  onOpenFocusedElement(event: MouseEvent | KeyboardEvent) {
-    let itemIndex = null as number | null
-
-    if (this.selectedValue) {
-      const item = this.itemTargets.find(
-        (i) => i.dataset.value === this.selectedValue,
-      )
-
-      if (item && !item.dataset.disabled) {
-        itemIndex = this.items.indexOf(item)
-      }
-    } else {
-      if (event instanceof KeyboardEvent) {
-        const key = event.key
-
-        if (['ArrowDown', 'Enter', ' '].includes(key)) {
-          itemIndex = 0
-        }
-      }
-    }
-
-    if (itemIndex !== null) {
-      return this.items[itemIndex]
-    } else {
-      return this.contentTarget
-    }
-  }
-
-  onSelect(event: MouseEvent | KeyboardEvent) {
-    const item = event.currentTarget as HTMLElement
-    const value = item.dataset.value as string
-    this.selectedValue = value
-  }
-
-  onDOMKeydown(event: KeyboardEvent) {
-    super.onDOMKeydown(event)
-
-    const { key, altKey, ctrlKey, metaKey } = event
-
-    if (
-      key === 'Backspace' ||
-      key === 'Clear' ||
-      (key.length === 1 && key !== ' ' && !altKey && !ctrlKey && !metaKey)
-    ) {
-      this.handleSearch(key)
-    }
-  }
-
-  // https://www.w3.org/WAI/ARIA/apg/patterns/combobox/examples/combobox-select-only/
-  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 = ''
-    }
-  }
-
-  filterItemsInnerText(items: string[], filter: string) {
-    return items.filter((item) => {
-      const matches = item.toLowerCase().indexOf(filter.toLowerCase()) === 0
-      return matches
-    })
-  }
-
-  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
-  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
-    }
-  }
-
-  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
-    }
-  }
-}

data/app/javascript/shadcn_phlexcomponents.ts

@@ -1,57 +0,0 @@
-import AccordionController from './controllers/accordion_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 CommandController from './controllers/command_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 DropdownMenuSubController from './controllers/dropdown_menu_sub_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 SliderController from './controllers/slider_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,
-  avatar: AvatarController,
-  checkbox: CheckboxController,
-  collapsible: CollapsibleController,
-  combobox: ComboboxController,
-  command: CommandController,
-  'date-picker': DatePickerController,
-  'date-range-picker': DateRangePickerController,
-  dialog: DialogController,
-  'dropdown-menu': DropdownMenuController,
-  'dropdown-menu-sub': DropdownMenuSubController,
-  'form-field': FormFieldController,
-  'hover-card': HoverCardController,
-  'loading-button': LoadingButtonController,
-  popover: PopoverController,
-  progress: ProgressController,
-  'radio-group': RadioGroupController,
-  select: SelectController,
-  sidebar: SidebarController,
-  'sidebar-trigger': SidebarTriggerController,
-  slider: SliderController,
-  switch: SwitchController,
-  tabs: TabsController,
-  'theme-switcher': ThemeSwitcherController,
-  'toast-container': ToastContainerController,
-  toast: ToastController,
-  tooltip: TooltipController,
-}

data/app/javascript/utils.ts

@@ -1,437 +0,0 @@
-import {
-  computePosition,
-  flip,
-  shift,
-  offset,
-  autoUpdate,
-  size,
-  Placement,
-  Middleware,
-  arrow,
-} from '@floating-ui/dom'
-
-const ANIMATION_OUT_DELAY = 100
-const ON_OPEN_FOCUS_DELAY = 100
-const ON_CLOSE_FOCUS_DELAY = 50
-
-const OPPOSITE_SIDE = {
-  top: 'bottom',
-  right: 'left',
-  bottom: 'top',
-  left: 'right',
-}
-
-const ARROW_TRANSFORM_ORIGIN = {
-  top: '',
-  right: '0 0',
-  bottom: 'center 0',
-  left: '100% 0',
-}
-
-const ARROW_TRANSFORM = {
-  top: 'translateY(100%)',
-  right: 'translateY(50%) rotate(90deg) translateX(-50%)',
-  bottom: `rotate(180deg)`,
-  left: 'translateY(50%) rotate(-90deg) translateX(50%)',
-}
-
-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.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 = '',
-  elementId,
-}: {
-  classNames?: string
-  elementId: string
-}) => {
-  const element = document.createElement('div')
-
-  let defaultClassNames = [
-    'data-[state=open]:animate-in',
-    'data-[state=closed]:animate-out',
-    'data-[state=closed]:fade-out-0',
-    'data-[state=open]:fade-in-0',
-    'fixed',
-    'inset-0',
-    'z-[48]',
-    'bg-black/50',
-    'pointer-events-auto',
-  ]
-
-  defaultClassNames = defaultClassNames.concat(
-    classNames.split(' ').filter((c) => !!c),
-  )
-
-  element.classList.add(...defaultClassNames)
-  element.dataset.state = 'open'
-  element.dataset.shadcnPhlexcomponentsOverlay = elementId
-  element.ariaHidden = 'true'
-
-  document.body.appendChild(element)
-}
-
-const hideOverlay = (elementId: string) => {
-  const element = document.querySelector(
-    `[data-shadcn-phlexcomponents-overlay=${elementId}]`,
-  )
-
-  if (element && element instanceof HTMLElement) {
-    element.dataset.state = 'closed'
-
-    setTimeout(() => {
-      element.remove()
-    }, ANIMATION_OUT_DELAY)
-  }
-}
-
-const lockScroll = () => {
-  if (window.innerHeight < document.documentElement.scrollHeight) {
-    document.body.dataset.scrollLocked = '1'
-    document.body.classList.add(
-      'data-[scroll-locked]:pointer-events-none',
-      'data-[scroll-locked]:!overflow-hidden',
-      'data-[scroll-locked]:!relative',
-      'data-[scroll-locked]:px-0',
-      'data-[scroll-locked]:pt-0',
-      'data-[scroll-locked]:ml-0',
-      'data-[scroll-locked]:mt-0',
-    )
-    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
-    document.body.classList.remove(
-      'data-[scroll-locked]:pointer-events-none',
-      'data-[scroll-locked]:!overflow-hidden',
-      'data-[scroll-locked]:!relative',
-      'data-[scroll-locked]:px-0',
-      'data-[scroll-locked]:pt-0',
-      'data-[scroll-locked]:ml-0',
-      'data-[scroll-locked]:mt-0',
-    )
-
-    const originalMarginRight = document.body.dataset.marginRight
-
-    if (originalMarginRight && parseInt(originalMarginRight) === 0) {
-      document.body.style.marginRight = ''
-    } else {
-      document.body.style.marginRight = `${originalMarginRight}`
-    }
-
-    delete document.body.dataset.marginRight
-  }
-}
-
-const openWithOverlay = (elementId: string) => {
-  showOverlay({ elementId })
-  lockScroll()
-}
-
-const closeWithOverlay = (elementId: string) => {
-  hideOverlay(elementId)
-  unlockScroll()
-}
-
-const initFloatingUi = ({
-  referenceElement,
-  floatingElement,
-  side = 'bottom',
-  align = 'center',
-  sideOffset = 0,
-  alignOffset = 0,
-  arrowElement,
-}: {
-  referenceElement: HTMLElement
-  floatingElement: HTMLElement
-  side?: string
-  align?: string
-  sideOffset?: number
-  alignOffset?: number
-  offsetPx?: number
-  arrowElement?: HTMLElement
-}) => {
-  let placement = `${side}-${align}`
-  placement = placement.replace(/-center/g, '')
-
-  let arrowHeight = 0,
-    arrowWidth = 0
-
-  if (arrowElement) {
-    const rect = arrowElement.getBoundingClientRect()
-    arrowWidth = rect.width
-    arrowHeight = rect.height
-  }
-
-  const middleware = [
-    transformOrigin({ arrowHeight, arrowWidth }),
-    offset({ mainAxis: sideOffset, alignmentAxis: alignOffset }),
-    size({
-      apply: ({ elements, rects, availableWidth, availableHeight }) => {
-        const { width: anchorWidth, height: anchorHeight } = rects.reference
-        const contentStyle = elements.floating.style
-        contentStyle.setProperty(
-          '--radix-popper-available-width',
-          `${availableWidth}px`,
-        )
-        contentStyle.setProperty(
-          '--radix-popper-available-height',
-          `${availableHeight}px`,
-        )
-        contentStyle.setProperty(
-          '--radix-popper-anchor-width',
-          `${anchorWidth}px`,
-        )
-        contentStyle.setProperty(
-          '--radix-popper-anchor-height',
-          `${anchorHeight}px`,
-        )
-      },
-    }),
-  ]
-
-  const flipMiddleware = flip({
-    // Ensure we flip to the perpendicular axis if it doesn't fit
-    // on narrow viewports.
-    crossAxis: 'alignment',
-    fallbackAxisSideDirection: 'end', // or 'start'
-  })
-  const shiftMiddleware = shift()
-
-  // Prioritize flip over shift for edge-aligned placements only.
-  if (placement.includes('-')) {
-    middleware.push(flipMiddleware, shiftMiddleware)
-  } else {
-    middleware.push(shiftMiddleware, flipMiddleware)
-  }
-
-  if (arrowElement) {
-    middleware.push(arrow({ element: arrowElement, padding: 0 }))
-  }
-
-  return autoUpdate(referenceElement, floatingElement, () => {
-    computePosition(referenceElement, floatingElement, {
-      placement: placement as Placement,
-      strategy: 'fixed',
-      middleware,
-    }).then(({ middlewareData, x, y }) => {
-      const arrowX = middlewareData.arrow?.x
-      const arrowY = middlewareData.arrow?.y
-      const cannotCenterArrow = middlewareData.arrow?.centerOffset !== 0
-
-      floatingElement.style.setProperty(
-        '--radix-popper-transform-origin',
-        `${middlewareData.transformOrigin?.x} ${middlewareData.transformOrigin?.y}`,
-      )
-      if (arrowElement) {
-        const baseSide = OPPOSITE_SIDE[side as keyof typeof OPPOSITE_SIDE]
-
-        const arrowStyle = {
-          position: 'absolute',
-          left: arrowX ? `${arrowX}px` : undefined,
-          top: arrowY ? `${arrowY}px` : undefined,
-          [baseSide]: 0,
-          transformOrigin:
-            ARROW_TRANSFORM_ORIGIN[side as keyof typeof ARROW_TRANSFORM_ORIGIN],
-          transform: ARROW_TRANSFORM[side as keyof typeof ARROW_TRANSFORM],
-          visibility: cannotCenterArrow ? 'hidden' : undefined,
-        }
-
-        Object.assign(arrowElement.style, arrowStyle)
-      }
-      Object.assign(floatingElement.style, {
-        left: `${x}px`,
-        top: `${y}px`,
-      })
-    })
-  })
-}
-
-const transformOrigin = (options: {
-  arrowWidth: number
-  arrowHeight: number
-}): Middleware => {
-  return {
-    name: 'transformOrigin',
-    options,
-    fn(data) {
-      const { placement, rects, middlewareData } = data
-      const cannotCenterArrow = middlewareData.arrow?.centerOffset !== 0
-      const isArrowHidden = cannotCenterArrow
-      const arrowWidth = isArrowHidden ? 0 : options.arrowWidth
-      const arrowHeight = isArrowHidden ? 0 : options.arrowHeight
-
-      const [placedSide, placedAlign] = getSideAndAlignFromPlacement(placement)
-      const noArrowAlign = { start: '0%', center: '50%', end: '100%' }[
-        placedAlign
-      ] as string
-
-      const arrowXCenter = (middlewareData.arrow?.x ?? 0) + arrowWidth / 2
-      const arrowYCenter = (middlewareData.arrow?.y ?? 0) + arrowHeight / 2
-
-      let x = ''
-      let y = ''
-
-      if (placedSide === 'bottom') {
-        x = isArrowHidden ? noArrowAlign : `${arrowXCenter}px`
-        y = `${-arrowHeight}px`
-      } else if (placedSide === 'top') {
-        x = isArrowHidden ? noArrowAlign : `${arrowXCenter}px`
-        y = `${rects.floating.height + arrowHeight}px`
-      } else if (placedSide === 'right') {
-        x = `${-arrowHeight}px`
-        y = isArrowHidden ? noArrowAlign : `${arrowYCenter}px`
-      } else if (placedSide === 'left') {
-        x = `${rects.floating.width + arrowHeight}px`
-        y = isArrowHidden ? noArrowAlign : `${arrowYCenter}px`
-      }
-      return { data: { x, y } }
-    },
-  }
-}
-
-function getSideAndAlignFromPlacement(placement: Placement) {
-  const [side, align = 'center'] = placement.split('-')
-  return [side, align] as const
-}
-
-const focusTrigger = (triggerTarget: HTMLElement) => {
-  setTimeout(() => {
-    if (triggerTarget.dataset.asChild === 'false') {
-      const childElement = triggerTarget.firstElementChild as HTMLElement
-
-      if (childElement) {
-        childElement.focus()
-      }
-    } else {
-      triggerTarget.focus()
-    }
-  }, ON_CLOSE_FOCUS_DELAY)
-}
-
-const getFocusableElements = (container: HTMLElement) => {
-  return Array.from(
-    container.querySelectorAll(
-      'button, [href], input:not([type="hidden"]), select:not([tabindex="-1"]), textarea, [tabindex]:not([tabindex="-1"])',
-    ),
-  ) as HTMLElement[]
-}
-
-const getSameLevelItems = ({
-  content,
-  items,
-  closestContentSelector,
-}: {
-  content: HTMLElement
-  items: HTMLElement[]
-  closestContentSelector: string
-}) => {
-  let sameLevelItems = [] as HTMLElement[]
-
-  items.forEach((i) => {
-    if (
-      i.closest(closestContentSelector) === content &&
-      i.dataset.disabled === undefined
-    ) {
-      sameLevelItems.push(i)
-    }
-  })
-
-  return sameLevelItems
-}
-
-const showContent = ({
-  trigger,
-  content,
-  contentContainer,
-  setEqualWidth,
-}: {
-  trigger?: HTMLElement
-  content: HTMLElement
-  contentContainer: HTMLElement
-  setEqualWidth?: boolean
-}) => {
-  contentContainer.classList.remove('hidden')
-
-  if (trigger) {
-    if (setEqualWidth) {
-      const triggerWidth = trigger.offsetWidth
-      const contentContainerWidth = contentContainer.offsetWidth
-
-      if (contentContainerWidth < triggerWidth) {
-        contentContainer.style.width = `${triggerWidth}px`
-      }
-    }
-
-    trigger.ariaExpanded = 'true'
-    trigger.dataset.state = 'open'
-  }
-
-  content.dataset.state = 'open'
-}
-
-const hideContent = ({
-  trigger,
-  content,
-  contentContainer,
-}: {
-  trigger?: HTMLElement
-  content: HTMLElement
-  contentContainer: HTMLElement
-}) => {
-  if (trigger) {
-    trigger.ariaExpanded = 'false'
-    trigger.dataset.state = 'closed'
-  }
-
-  content.dataset.state = 'closed'
-
-  setTimeout(() => {
-    contentContainer.classList.add('hidden')
-  }, ANIMATION_OUT_DELAY)
-}
-
-export {
-  ANIMATION_OUT_DELAY,
-  ON_CLOSE_FOCUS_DELAY,
-  ON_OPEN_FOCUS_DELAY,
-  showOverlay,
-  hideOverlay,
-  lockScroll,
-  unlockScroll,
-  openWithOverlay,
-  closeWithOverlay,
-  initFloatingUi,
-  focusTrigger,
-  getFocusableElements,
-  getSameLevelItems,
-  showContent,
-  hideContent,
-}