Toggle Group

import { css, on, type Handle, type Props } from 'remix/component'

import { toggleVariants, type ToggleSize, type ToggleVariant } from './toggle.tsx'

interface ToggleGroupBaseProps extends Omit<Props<'div'>, 'defaultValue' | 'dir'> {
  variant?: ToggleVariant
  size?: ToggleSize
  /** Gap between items in spacing units (`0.25rem` each). `0` joins the items. */
  spacing?: number
  disabled?: boolean
  /** Arrow keys move focus between items and only one item is in the tab sequence. */
  rovingFocus?: boolean
  /** Arrow-key navigation wraps from the last item to the first and back. */
  loop?: boolean
  /** Restricts arrow keys to one axis; both axes navigate when unset. */
  orientation?: 'horizontal' | 'vertical'
  dir?: 'ltr' | 'rtl'
}

export interface ToggleGroupSingleProps extends ToggleGroupBaseProps {
  type: 'single'
  /** Controlled pressed item value; `''` when none is pressed. */
  value?: string
  defaultValue?: string
  onValueChange?: (value: string) => void
}

export interface ToggleGroupMultipleProps extends ToggleGroupBaseProps {
  type: 'multiple'
  /** Controlled pressed item values. */
  value?: string[]
  defaultValue?: string[]
  onValueChange?: (value: string[]) => void
}

export type ToggleGroupProps = ToggleGroupSingleProps | ToggleGroupMultipleProps

export interface ToggleGroupItemProps extends Omit<Props<'button'>, 'value'> {
  value: string
  variant?: ToggleVariant
  size?: ToggleSize
}

interface RegisteredItem {
  readonly value: string
  readonly disabled: boolean
  update(): void
}

interface ToggleGroupContext {
  readonly options: { variant?: ToggleVariant; size?: ToggleSize; spacing: number }
  readonly type: 'single' | 'multiple'
  readonly disabled: boolean
  readonly rovingFocus: boolean
  readonly orientation: 'horizontal' | 'vertical' | undefined
  isPressed(value: string): boolean
  setPressed(value: string, pressed: boolean): void
  isTabStop(value: string): boolean
  setTabStop(value: string): void
  register(item: RegisteredItem, signal: AbortSignal): void
  navigate(event: KeyboardEvent): void
}

const groupStyles = css({
  display: 'flex',
  width: 'fit-content',
  alignItems: 'center',
  gap: 'calc(0.25rem * var(--gap))',
  borderRadius: 'calc(var(--radius) - 2px)',
  '&[data-spacing="default"][data-variant="outline"]': {
    boxShadow: '0 1px 2px 0 rgb(0 0 0 / 0.05)',
  },
})

const itemStyles = css({
  width: 'auto',
  minWidth: 0,
  flexShrink: 0,
  paddingInline: '0.75rem',
  '&:focus': { zIndex: '10' },
  '&:focus-visible': { zIndex: '10' },
  '&[data-spacing="0"]': { borderRadius: 0, '--tw-shadow': '0 0 #0000' },
  '&[data-spacing="0"]:first-child': {
    borderTopLeftRadius: 'calc(var(--radius) - 2px)',
    borderBottomLeftRadius: 'calc(var(--radius) - 2px)',
  },
  '&[data-spacing="0"]:last-child': {
    borderTopRightRadius: 'calc(var(--radius) - 2px)',
    borderBottomRightRadius: 'calc(var(--radius) - 2px)',
  },
  '&[data-spacing="0"][data-variant="outline"]': { borderLeftWidth: 0 },
  '&[data-spacing="0"][data-variant="outline"]:first-child': { borderLeftWidth: '1px' },
})

const ITEM_SELECTOR = '[data-slot="toggle-group-item"]'

export function ToggleGroup(handle: Handle<ToggleGroupProps, ToggleGroupContext>) {
  let uncontrolledValue: string[] = toArray(handle.props.defaultValue)
  let items: RegisteredItem[] = []
  let tabStop: string | undefined
  // Before the first commit, items render while later siblings are still unregistered.
  let mounted = false

  let selectedValues = () =>
    handle.props.value === undefined ? uncontrolledValue : toArray(handle.props.value)
  let updateItems = () => {
    for (let item of items) item.update()
  }

  handle.context.set({
    get options() {
      return { variant: handle.props.variant, size: handle.props.size, spacing: handle.props.spacing ?? 0 }
    },
    get type() {
      return handle.props.type
    },
    get disabled() {
      return handle.props.disabled ?? false
    },
    get rovingFocus() {
      return handle.props.rovingFocus ?? true
    },
    get orientation() {
      return handle.props.orientation
    },
    isPressed: (value) => selectedValues().includes(value),
    setPressed(value, pressed) {
      let current = selectedValues()
      let next =
        handle.props.type === 'single'
          ? pressed
            ? [value]
            : []
          : pressed
            ? [...current, value]
            : current.filter((v) => v !== value)
      if (handle.props.value === undefined) {
        uncontrolledValue = next
        updateItems()
      }
      if (handle.props.type === 'single') handle.props.onValueChange?.(next[0] ?? '')
      else handle.props.onValueChange?.(next)
    },
    isTabStop(value) {
      let enabled = items.filter((item) => !item.disabled)
      if (tabStop !== undefined && enabled.some((item) => item.value === tabStop)) {
        return value === tabStop
      }
      let selected = selectedValues()
      let firstPressed = enabled.find((item) => selected.includes(item.value))
      if (firstPressed) return value === firstPressed.value
      if (!mounted && selected.length > 0) return false
      return value === enabled[0]?.value
    },
    setTabStop(value) {
      if (tabStop === value) return
      tabStop = value
      updateItems()
    },
    register(item, signal) {
      items.push(item)
      signal.addEventListener('abort', () => {
        items = items.filter((registered) => registered !== item)
        updateItems()
      })
    },
    navigate(event) {
      let { orientation, loop = true, dir } = handle.props
      if (event.metaKey || event.ctrlKey || event.altKey || event.shiftKey) return
      let key = event.key
      if (dir === 'rtl' && key === 'ArrowLeft') key = 'ArrowRight'
      else if (dir === 'rtl' && key === 'ArrowRight') key = 'ArrowLeft'
      if (orientation === 'vertical' && (key === 'ArrowLeft' || key === 'ArrowRight')) return
      if (orientation === 'horizontal' && (key === 'ArrowUp' || key === 'ArrowDown')) return

      let current = event.currentTarget as HTMLButtonElement
      let group = current.closest('[data-slot="toggle-group"]')
      if (!group) return
      let candidates = Array.from(group.querySelectorAll<HTMLButtonElement>(ITEM_SELECTOR)).filter(
        (item) => !item.disabled && item.closest('[data-slot="toggle-group"]') === group,
      )
      let index = candidates.indexOf(current)
      let target: HTMLButtonElement | undefined
      if (key === 'Home' || key === 'PageUp') target = candidates[0]
      else if (key === 'End' || key === 'PageDown') target = candidates.at(-1)
      else if (key === 'ArrowLeft' || key === 'ArrowUp') {
        target = index > 0 ? candidates[index - 1] : loop ? candidates.at(-1) : undefined
      } else if (key === 'ArrowRight' || key === 'ArrowDown') {
        target =
          index < candidates.length - 1 ? candidates[index + 1] : loop ? candidates[0] : undefined
      } else return

      event.preventDefault()
      target?.focus()
    },
  })

  handle.queueTask(() => {
    mounted = true
    updateItems()
  })

  return () => {
    let {
      type: _type,
      value: _value,
      defaultValue: _defaultValue,
      onValueChange: _onValueChange,
      variant,
      size,
      spacing = 0,
      disabled: _disabled,
      rovingFocus: _rovingFocus,
      loop: _loop,
      orientation,
      style,
      mix,
      ...props
    } = handle.props

    return (
      <div
        role="group"
        data-slot="toggle-group"
        data-variant={variant}
        data-size={size}
        data-spacing={spacing}
        data-orientation={orientation}
        style={{ '--gap': spacing, ...(style as object) }}
        {...props}
        mix={[groupStyles, mix]}
      />
    )
  }
}

export function ToggleGroupItem(handle: Handle<ToggleGroupItemProps>) {
  let group = handle.context.get(ToggleGroup)

  group.register(
    {
      get value() {
        return handle.props.value
      },
      get disabled() {
        return group.disabled || (handle.props.disabled ?? false)
      },
      update: () => handle.update(),
    },
    handle.signal,
  )

  return () => {
    let { value, variant: itemVariant, size: itemSize, disabled, mix, ...props } = handle.props
    let { options } = group
    let variant = options.variant || itemVariant
    let size = options.size || itemSize
    let pressed = group.isPressed(value)
    let isDisabled = group.disabled || (disabled ?? false)
    let single = group.type === 'single'

    return (
      <button
        type="button"
        data-slot="toggle-group-item"
        data-variant={variant}
        data-size={size}
        data-spacing={options.spacing}
        data-state={pressed ? 'on' : 'off'}
        data-disabled={isDisabled ? '' : undefined}
        data-orientation={group.orientation}
        role={single ? 'radio' : undefined}
        aria-checked={single ? pressed : undefined}
        aria-pressed={single ? undefined : pressed}
        tabIndex={group.rovingFocus ? (group.isTabStop(value) ? 0 : -1) : undefined}
        disabled={isDisabled}
        value={value}
        {...props}
        mix={[
          toggleVariants({ variant, size }),
          itemStyles,
          mix,
          on('click', (event) => {
            if (event.defaultPrevented || isDisabled) return
            group.setPressed(handle.props.value, !group.isPressed(handle.props.value))
          }),
          on('focus', () => {
            if (group.rovingFocus) group.setTabStop(handle.props.value)
          }),
          on('keydown', (event) => {
            if (group.rovingFocus) group.navigate(event)
          }),
        ]}
      />
    )
  }
}

function toArray(value: string | string[] | undefined): string[] {
  if (value === undefined || value === '') return []
  return typeof value === 'string' ? [value] : value
}