shadcn_phlexcomponents 0.1.9 → 0.1.11

data/app/javascript/{shadcn_phlexcomponents.js → shadcn_phlexcomponents.ts}

@@ -1,13 +1,14 @@
 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 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'
@@ -17,6 +18,7 @@ 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'
@@ -26,15 +28,16 @@ import TooltipController from './controllers/tooltip_controller'
 
 export default {
   accordion: AccordionController,
-  'alert-dialog': AlertDialogController,
   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,
@@ -44,6 +47,7 @@ export default {
   select: SelectController,
   sidebar: SidebarController,
   'sidebar-trigger': SidebarTriggerController,
+  slider: SliderController,
   switch: SwitchController,
   tabs: TabsController,
   'theme-switcher': ThemeSwitcherController,

data/app/javascript/utils.ts

@@ -0,0 +1,437 @@
+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,
+}

data/app/stylesheets/date_picker.css

@@ -1,139 +1,34 @@
-[data-vc='calendar'] {
-  @apply relative flex flex-col outline-none p-3;
-}
-
-[data-vc='controls'] {
-  @apply absolute z-20 -left-1 -right-1 -top-1.5 flex justify-between items-center pt-5 px-4 pointer-events-none box-content;
-}
-
-[data-vc='grid'] {
-  @apply grid grid-cols-1 md:grid-cols-2 gap-6;
-}
-
-[data-vc='column'] {
-  @apply flex flex-col;
-}
-
-[data-vc='header'] {
-  @apply relative flex items-center mb-3;
-}
-
-[data-vc-header='content'] {
-  @apply grid grid-flow-col auto-cols-max items-center justify-center px-4 whitespace-pre-wrap grow;
-}
-
-[data-vc='month'],
-[data-vc='year'],
-[data-vc-months-month],
-[data-vc-years-year] {
-  @apply inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-base;
-  @apply font-medium transition-colors focus-visible:outline-none focus-visible:ring-1;
-  @apply focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50;
-  @apply [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 cursor-pointer;
-  @apply hover:bg-accent hover:text-accent-foreground px-2 h-10 md:h-8 md:px-3 pointer-events-auto;
-}
-
-[data-vc-months-month],
-[data-vc-years-year] {
-  @apply md:text-sm;
-}
-
-[data-vc='wrapper'] {
-  @apply flex grow;
-}
-
-[data-vc='content'] {
-  @apply flex flex-col grow;
-}
-
-[data-vc='months'] {
-  @apply grid gap-y-4 gap-x-2 grid-cols-3 md:grid-cols-4 items-center grow;
-}
-
-[data-vc='years'] {
-  @apply grid gap-y-4 gap-x-2 grid-cols-3 md:grid-cols-5 items-center grow;
-}
-
-[data-vc='week'] {
-  @apply grid grid-cols-[repeat(7,_1fr)] justify-items-center mb-2;
-}
-
-[data-vc-week-day] {
-  @apply text-muted-foreground font-normal text-xs flex items-center justify-center;
-}
-
-[data-vc='dates'] {
-  @apply grid gap-y-1 grid-cols-[repeat(7,_1fr)] justify-items-center items-center grow pointer-events-none;
-}
-
-[data-vc-date-btn] {
-  @apply inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-base md:text-sm;
-  @apply font-medium transition-colors focus-visible:outline-none focus-visible:ring-1;
-  @apply focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50;
-  @apply [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 cursor-pointer;
-  @apply hover:bg-accent hover:text-accent-foreground md:h-9 md:w-9 h-10 w-10 pointer-events-auto;
-}
-
-[data-vc-years-year-selected],
-[data-vc-months-month-selected] {
-  @apply bg-primary text-primary-foreground;
-}
-
-[data-vc-date-today] [data-vc-date-btn] {
-  @apply bg-accent text-accent-foreground font-bold;
-}
-
-[data-vc-date-btn][aria-selected='true'] {
-  @apply bg-primary text-primary-foreground hover:bg-primary/90;
-}
-
-[data-vc-arrow] {
-  @apply inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm;
-  @apply font-medium transition-colors focus-visible:outline-none focus-visible:ring-1;
-  @apply focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50;
-  @apply [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 cursor-pointer;
-  @apply border border-input bg-transparent shadow-sm hover:bg-accent hover:text-accent-foreground;
-  @apply pointer-events-auto w-7 h-7;
-}
-
 [data-vc-arrow='next']:before {
-  @apply bg-accent-foreground h-7 w-7;
+  @apply bg-current size-4 mask-size-[auto_16px] mask-center mask-no-repeat absolute content-[''];
   mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevron-right-icon lucide-chevron-right"><path d="m9 18 6-6-6-6"/></svg>');
-  mask-repeat: no-repeat;
-  position: absolute;
-  content: '';
-  mask-size: auto 16px;
-  mask-position: center;
 }
 
 [data-vc-arrow='prev']:before {
-  @apply bg-accent-foreground h-7 w-7;
+  @apply bg-current size-4 mask-size-[auto_16px] mask-center mask-no-repeat absolute content-[''];
   mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevron-left-icon lucide-chevron-left"><path d="m15 18-6-6 6-6"/></svg>');
-  mask-repeat: no-repeat;
-  position: absolute;
-  content: '';
-  mask-size: auto 16px;
-  mask-position: center;
-}
-
-[data-vc-date-month='prev'] [data-vc-date-btn],
-[data-vc-date-month='next'] [data-vc-date-btn] {
-  @apply text-muted-foreground;
 }
 
-[data-vc-date-disabled] [data-vc-date-btn] {
-  @apply pointer-events-none opacity-50 text-muted-foreground;
+[data-vc='grid'][data-vc-grid='hidden'] [data-vc='column'] {
+  pointer-events: none;
+  opacity: 0.3;
 }
 
-[data-vc='grid'][data-vc-grid='hidden'] [data-vc='column'] {
-  @apply opacity-30 pointer-events-none;
+[data-vc='grid'][data-vc-grid='hidden'] [data-vc='column'] * {
+  pointer-events: none;
 }
 
 [data-vc='grid'][data-vc-grid='hidden']
   [data-vc='column'][data-vc-column='month'],
 [data-vc='grid'][data-vc-grid='hidden']
-  [data-vc='column'][data-vc-column='year'] {
-  @apply opacity-100 pointer-events-auto;
+  [data-vc='column'][data-vc-column='month']
+  *,
+[data-vc='grid'][data-vc-grid='hidden']
+  [data-vc='column'][data-vc-column='year'],
+[data-vc='grid'][data-vc-grid='hidden']
+  [data-vc='column'][data-vc-column='year']
+  * {
+  pointer-events: auto;
+  opacity: 1;
 }
 
 [data-vc-date][data-vc-date-hover] [data-vc-date-btn] {
@@ -177,36 +72,3 @@
 [data-vc-date][data-vc-date-selected='middle'] [data-vc-date-btn] {
   @apply rounded-none;
 }
-
-/* [data-vc-date][data-vc-date-disabled]
-  + [data-vc-date-selected]
-  [data-vc-date-btn],
-[data-vc-date][data-vc-date-disabled]
-  + [data-vc-date-hover]
-  [data-vc-date-btn] {
-  @apply rounded-l-md;
-} */
-
-/* [data-vc-date][data-vc-date-hover]:has(+ [data-vc-date-disabled])
-  [data-vc-date-btn],
-[data-vc-date][data-vc-date-selected]:has(+ [data-vc-date-disabled])
-  [data-vc-date-btn] {
-  @apply rounded-r-md;
-} */
-
-[data-vc-date-hover] [data-vc-date-btn] {
-  @apply bg-accent text-accent-foreground;
-}
-
-[data-vc-date-selected] [data-vc-date-btn] {
-  @apply bg-primary text-primary-foreground;
-}
-
-[data-vc-date-selected='middle'][data-vc-date-selected] [data-vc-date-btn] {
-  @apply bg-primary/20 hover:bg-primary/20 text-accent-foreground;
-}
-
-[data-vc-date-hover='last'] [data-vc-date-btn],
-[data-vc-date-hover='first'] [data-vc-date-btn] {
-  @apply bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground;
-}