aeon-ui-engine 1.0.0

package/packages/react/src/select/index.tsx

@@ -0,0 +1,372 @@
+import { selectAnatomy, partAttrs, partOnlyAttrs } from '@aeon-ui/core'
+import { popoverMachine } from '@aeon-ui/primitives'
+import {
+  createContext,
+  forwardRef,
+  useCallback,
+  useContext,
+  useId,
+  useMemo,
+  useRef,
+  useState,
+  type ButtonHTMLAttributes,
+  type HTMLAttributes,
+  type KeyboardEvent,
+  type MouseEvent,
+  type ReactNode,
+} from 'react'
+import { useAeonMachine } from '../hooks/use-aeon-machine.js'
+import { useAnchorPosition } from '../hooks/use-anchor-position.js'
+import { useOutsideClick } from '../hooks/use-outside-click.js'
+import { renderPortalled, usePortalledMount } from '../hooks/use-portalled.js'
+import { mergeProps } from '../utils/merge-props.js'
+
+interface SelectContextValue {
+  value: string
+  open: boolean
+  listboxId: string
+  highlightedValue: string | null
+  send: ReturnType<typeof useAeonMachine<typeof popoverMachine>>[1]
+  triggerRef: React.RefObject<HTMLButtonElement | null>
+  positionerRef: React.RefObject<HTMLDivElement | null>
+  contentRef: React.RefObject<HTMLDivElement | null>
+  onValueChange?: (value: string) => void
+  moveHighlight: (delta: number) => void
+  highlightValue: (value: string | null) => void
+  selectValue: (value: string) => void
+  onListboxKeyDown: (e: KeyboardEvent) => void
+}
+
+const SelectCtx = createContext<SelectContextValue | null>(null)
+
+function useSelectCtx() {
+  const ctx = useContext(SelectCtx)
+  if (!ctx) throw new Error('Select parts must be used within <Select.Root>')
+  return ctx
+}
+
+function optionValuesFromDom(listboxId: string, content: HTMLElement | null): string[] {
+  if (!content) return []
+  const prefix = `${listboxId}-option-`
+  return Array.from(content.querySelectorAll<HTMLButtonElement>('button[role="option"]:not(:disabled)'))
+    .map((el) => (el.id.startsWith(prefix) ? el.id.slice(prefix.length) : ''))
+    .filter(Boolean)
+}
+
+export interface SelectRootProps {
+  value: string
+  onValueChange?: (value: string) => void
+  children: ReactNode
+  className?: string
+  disabled?: boolean
+}
+
+const Root = forwardRef<HTMLDivElement, SelectRootProps>(function SelectRoot(
+  { value, onValueChange, children, className, disabled },
+  ref,
+) {
+  const [snapshot, send] = useAeonMachine(popoverMachine, { input: { open: false } })
+  const [highlightedValue, setHighlightedValue] = useState<string | null>(null)
+  const triggerRef = useRef<HTMLButtonElement>(null)
+  const positionerRef = useRef<HTMLDivElement>(null)
+  const contentRef = useRef<HTMLDivElement>(null)
+  const rootRef = useRef<HTMLDivElement>(null)
+  const listboxId = useId()
+
+  const open = disabled ? false : snapshot.matches('open')
+
+  const close = useCallback(() => {
+    send({ type: 'CLOSE' })
+    setHighlightedValue(null)
+  }, [send])
+
+  useOutsideClick([rootRef, positionerRef], open, () => send({ type: 'POINTER_DOWN_OUTSIDE' }))
+
+  const getOptionValues = useCallback(
+    () => optionValuesFromDom(listboxId, contentRef.current),
+    [listboxId, open],
+  )
+
+  const selectValue = useCallback(
+    (next: string) => {
+      onValueChange?.(next)
+      close()
+    },
+    [onValueChange, close],
+  )
+
+  const highlightValue = useCallback((next: string | null) => {
+    setHighlightedValue(next)
+  }, [])
+
+  const moveHighlight = useCallback(
+    (delta: number) => {
+      const options = getOptionValues()
+      if (options.length === 0) {
+        setHighlightedValue(null)
+        return
+      }
+      const idx = highlightedValue ? options.indexOf(highlightedValue) : -1
+      let next = idx + delta
+      if (next < 0) next = options.length - 1
+      if (next >= options.length) next = 0
+      setHighlightedValue(options[next]!)
+    },
+    [getOptionValues, highlightedValue],
+  )
+
+  const onListboxKeyDown = useCallback(
+    (e: KeyboardEvent) => {
+      if (e.defaultPrevented) return
+
+      if ((e.key === 'Enter' || e.key === ' ') && !open) {
+        e.preventDefault()
+        send({ type: 'OPEN' })
+        return
+      }
+
+      if (e.key === 'ArrowDown') {
+        e.preventDefault()
+        if (!open) send({ type: 'OPEN' })
+        else moveHighlight(1)
+        return
+      }
+      if (e.key === 'ArrowUp') {
+        e.preventDefault()
+        if (!open) send({ type: 'OPEN' })
+        else moveHighlight(-1)
+        return
+      }
+      if (e.key === 'Home' && open) {
+        e.preventDefault()
+        const first = getOptionValues()[0]
+        if (first) highlightValue(first)
+        return
+      }
+      if (e.key === 'End' && open) {
+        e.preventDefault()
+        const options = getOptionValues()
+        const last = options[options.length - 1]
+        if (last) highlightValue(last)
+        return
+      }
+      if ((e.key === 'Enter' || e.key === ' ') && open) {
+        e.preventDefault()
+        const pick = highlightedValue ?? getOptionValues()[0]
+        if (pick) selectValue(pick)
+        return
+      }
+      if (e.key === 'Escape') send({ type: 'ESCAPE' })
+    },
+    [open, send, moveHighlight, getOptionValues, highlightValue, highlightedValue, selectValue],
+  )
+
+  const ctx = useMemo(
+    () => ({
+      value,
+      open,
+      listboxId,
+      highlightedValue,
+      send,
+      triggerRef,
+      positionerRef,
+      contentRef,
+      onValueChange,
+      moveHighlight,
+      highlightValue,
+      selectValue,
+      onListboxKeyDown,
+    }),
+    [
+      value,
+      open,
+      listboxId,
+      highlightedValue,
+      send,
+      onValueChange,
+      moveHighlight,
+      highlightValue,
+      selectValue,
+      onListboxKeyDown,
+    ],
+  )
+
+  return (
+    <SelectCtx.Provider value={ctx}>
+      <div
+        ref={(node) => {
+          rootRef.current = node
+          if (typeof ref === 'function') ref(node)
+          else if (ref) ref.current = node
+        }}
+        className={className}
+        {...partAttrs(selectAnatomy.scope, selectAnatomy.root, {
+          state: open ? 'open' : 'closed',
+        })}
+      >
+        {children}
+      </div>
+    </SelectCtx.Provider>
+  )
+})
+
+const ValueText = forwardRef<HTMLSpanElement, HTMLAttributes<HTMLSpanElement>>(function SelectValueText(
+  props,
+  ref,
+) {
+  return <span ref={ref} {...partOnlyAttrs(selectAnatomy.value)} {...props} />
+})
+
+const Trigger = forwardRef<HTMLButtonElement, ButtonHTMLAttributes<HTMLButtonElement>>(function SelectTrigger(
+  { children, onClick, onKeyDown, ...rest },
+  ref,
+) {
+  const { open, send, listboxId, triggerRef, onListboxKeyDown } = useSelectCtx()
+
+  return (
+    <button
+      ref={(node) => {
+        triggerRef.current = node
+        if (typeof ref === 'function') ref(node)
+        else if (ref) ref.current = node
+      }}
+      type="button"
+      aria-haspopup="listbox"
+      aria-expanded={open}
+      aria-controls={open ? listboxId : undefined}
+      {...partAttrs(selectAnatomy.scope, selectAnatomy.trigger, { state: open ? 'open' : 'closed' })}
+      {...mergeProps(rest, {
+        onClick: (e: MouseEvent<HTMLButtonElement>) => {
+          onClick?.(e)
+          if (!e.defaultPrevented) send({ type: 'TOGGLE' })
+        },
+        onKeyDown: (e: KeyboardEvent<HTMLButtonElement>) => {
+          onKeyDown?.(e)
+          onListboxKeyDown(e)
+        },
+      })}
+    >
+      {children}
+      <span {...partOnlyAttrs(selectAnatomy.icon)} aria-hidden />
+    </button>
+  )
+})
+
+export interface SelectPositionerProps extends HTMLAttributes<HTMLDivElement> {
+  /** Mount listbox in document.body (default true). */
+  portalled?: boolean
+  children?: ReactNode
+}
+
+const Positioner = forwardRef<HTMLDivElement, SelectPositionerProps>(function SelectPositioner(
+  { portalled = true, children, className, ...rest },
+  ref,
+) {
+  const { open, triggerRef, positionerRef } = useSelectCtx()
+  const mounted = usePortalledMount()
+
+  useAnchorPosition(triggerRef, positionerRef, open && portalled)
+
+  if (!open) return null
+
+  const node = (
+    <div
+      ref={(el) => {
+        positionerRef.current = el
+        if (typeof ref === 'function') ref(el)
+        else if (ref) ref.current = el
+      }}
+      className={className}
+      {...mergeProps(
+        partAttrs(selectAnatomy.scope, selectAnatomy.positioner, { state: 'open' }),
+        rest,
+      )}
+    >
+      {children}
+    </div>
+  )
+
+  return renderPortalled(node, portalled, mounted)
+})
+
+const Content = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>(function SelectContent(
+  { onKeyDown, children, className, ...rest },
+  ref,
+) {
+  const { open, listboxId, contentRef, highlightedValue, onListboxKeyDown } = useSelectCtx()
+
+  if (!open) return null
+
+  const activeId =
+    highlightedValue && open ? `${listboxId}-option-${highlightedValue}` : undefined
+
+  return (
+    <div
+      ref={(node) => {
+        contentRef.current = node
+        if (typeof ref === 'function') ref(node)
+        else if (ref) ref.current = node
+      }}
+      id={listboxId}
+      role="listbox"
+      aria-activedescendant={activeId}
+      className={className}
+      data-aeon-scroll=""
+      {...partAttrs(selectAnatomy.scope, selectAnatomy.content, { state: 'open' })}
+      {...mergeProps(rest, {
+        onKeyDown: (e: KeyboardEvent<HTMLDivElement>) => {
+          onKeyDown?.(e)
+          onListboxKeyDown(e)
+        },
+      })}
+    >
+      {children}
+    </div>
+  )
+})
+
+export interface SelectItemProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+  value: string
+  disabled?: boolean
+}
+
+const Item = forwardRef<HTMLButtonElement, SelectItemProps>(function SelectItem(
+  { value, disabled = false, children, onClick, ...rest },
+  ref,
+) {
+  const { value: selected, listboxId, highlightedValue, selectValue } = useSelectCtx()
+  const selectedState = value === selected
+  const highlighted = value === highlightedValue
+
+  return (
+    <button
+      ref={ref}
+      type="button"
+      role="option"
+      id={`${listboxId}-option-${value}`}
+      aria-selected={selectedState}
+      disabled={disabled}
+      {...partAttrs(selectAnatomy.scope, selectAnatomy.item, {
+        state: selectedState ? 'selected' : highlighted ? 'highlighted' : 'idle',
+        highlighted,
+      })}
+      {...mergeProps(rest, {
+        onClick: (e: MouseEvent<HTMLButtonElement>) => {
+          onClick?.(e)
+          if (!e.defaultPrevented && !disabled) selectValue(value)
+        },
+      })}
+    >
+      {children}
+    </button>
+  )
+})
+
+export const Select = {
+  Root,
+  Trigger,
+  ValueText,
+  Positioner,
+  Content,
+  Item,
+}

package/packages/react/src/select/select.test.tsx

@@ -0,0 +1,60 @@
+import { render, screen } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import { describe, expect, it, vi } from 'vitest'
+import { Select } from './index.js'
+
+describe('Select', () => {
+  it('opens listbox and selects an option', async () => {
+    const user = userEvent.setup()
+    const onValueChange = vi.fn()
+
+    render(
+      <Select.Root value="a" onValueChange={onValueChange}>
+        <Select.Trigger>
+          <Select.ValueText>Alpha</Select.ValueText>
+        </Select.Trigger>
+        <Select.Positioner portalled={false}>
+          <Select.Content>
+            <Select.Item value="a">Alpha</Select.Item>
+            <Select.Item value="b">Beta</Select.Item>
+          </Select.Content>
+        </Select.Positioner>
+      </Select.Root>,
+    )
+
+    const trigger = screen.getByRole('button', { name: /alpha/i })
+    expect(trigger).toHaveAttribute('aria-expanded', 'false')
+
+    await user.click(trigger)
+    expect(trigger).toHaveAttribute('aria-expanded', 'true')
+
+    const beta = screen.getByRole('option', { name: 'Beta' })
+    await user.click(beta)
+
+    expect(onValueChange).toHaveBeenCalledWith('b')
+    expect(trigger).toHaveAttribute('aria-expanded', 'false')
+  })
+
+  it('closes on escape', async () => {
+    const user = userEvent.setup()
+
+    render(
+      <Select.Root value="a">
+        <Select.Trigger>
+          <Select.ValueText>Alpha</Select.ValueText>
+        </Select.Trigger>
+        <Select.Positioner portalled={false}>
+          <Select.Content>
+            <Select.Item value="a">Alpha</Select.Item>
+          </Select.Content>
+        </Select.Positioner>
+      </Select.Root>,
+    )
+
+    await user.click(screen.getByRole('button'))
+    expect(screen.getByRole('listbox')).toBeInTheDocument()
+
+    await user.keyboard('{Escape}')
+    expect(screen.queryByRole('listbox')).not.toBeInTheDocument()
+  })
+})

package/packages/react/src/switch/index.tsx

@@ -0,0 +1,215 @@
+import { partAttrs, switchAnatomy } from '@aeon-ui/core'
+import { toggleMachine } from '@aeon-ui/primitives'
+import {
+  createContext,
+  forwardRef,
+  useContext,
+  useEffect,
+  useMemo,
+  type ButtonHTMLAttributes,
+  type InputHTMLAttributes,
+  type KeyboardEvent,
+  type MouseEvent,
+  type PointerEvent,
+  type ReactNode,
+} from 'react'
+import { useAeonMachine } from '../hooks/use-aeon-machine.js'
+import { mergeProps } from '../utils/merge-props.js'
+
+interface SwitchContextValue {
+  checked: boolean
+  disabled: boolean
+  controlled: boolean
+  onCheckedChange?: (checked: boolean) => void
+  send: ReturnType<typeof useAeonMachine<typeof toggleMachine>>[1]
+  pressState: string
+}
+
+const SwitchCtx = createContext<SwitchContextValue | null>(null)
+
+function useSwitchCtx() {
+  const ctx = useContext(SwitchCtx)
+  if (!ctx) throw new Error('Switch parts must be used within Switch.Root')
+  return ctx
+}
+
+export interface SwitchRootProps {
+  checked?: boolean
+  defaultChecked?: boolean
+  disabled?: boolean
+  onCheckedChange?: (checked: boolean) => void
+  children?: ReactNode
+  className?: string
+}
+
+const Root = forwardRef<HTMLLabelElement, SwitchRootProps>(function SwitchRoot(
+  { checked, defaultChecked = false, disabled = false, onCheckedChange, children, className, ...rest },
+  ref,
+) {
+  const [snapshot, send] = useAeonMachine(toggleMachine, {
+    input: { checked: defaultChecked, disabled },
+  })
+
+  const controlled = checked !== undefined
+  const resolvedChecked = checked ?? snapshot.context.checked
+  const pressState = snapshot.matches({ interaction: 'pressed' }) ? 'pressed' : 'idle'
+
+  useEffect(() => {
+    if (checked === undefined) onCheckedChange?.(resolvedChecked)
+  }, [resolvedChecked, onCheckedChange, checked])
+
+  useEffect(() => {
+    if (checked !== undefined) send({ type: 'SET_CHECKED', checked })
+  }, [checked, send])
+
+  const value = useMemo(
+    () => ({
+      checked: resolvedChecked,
+      disabled,
+      controlled,
+      onCheckedChange,
+      send,
+      pressState,
+    }),
+    [resolvedChecked, disabled, controlled, onCheckedChange, send, pressState],
+  )
+
+  const toggle = () => {
+    if (disabled) return
+    const next = !resolvedChecked
+    if (controlled) onCheckedChange?.(next)
+    else send({ type: 'TOGGLE' })
+  }
+
+  return (
+    <SwitchCtx.Provider value={value}>
+      <label
+        ref={ref}
+        className={className}
+        {...mergeProps(
+          partAttrs(switchAnatomy.scope, switchAnatomy.root, {
+            state: `${resolvedChecked ? 'checked' : 'unchecked'} ${pressState}`,
+            disabled,
+          }),
+          {
+            onClick: (e: MouseEvent<HTMLLabelElement>) => {
+              const target = e.target as HTMLElement
+              if (target.closest(`[data-aeon-part="${switchAnatomy.control}"]`)) return
+              toggle()
+            },
+          },
+          rest as ButtonHTMLAttributes<HTMLLabelElement>,
+        )}
+      >
+        {children}
+      </label>
+    </SwitchCtx.Provider>
+  )
+})
+
+const Control = forwardRef<HTMLSpanElement, ButtonHTMLAttributes<HTMLSpanElement>>(function SwitchControl(
+  { className, onClick, onPointerDown, onPointerUp, onPointerLeave, ...rest },
+  ref,
+) {
+  const { checked, disabled, controlled, onCheckedChange, send, pressState } = useSwitchCtx()
+
+  const toggle = () => {
+    if (disabled) return
+    const next = !checked
+    if (controlled) onCheckedChange?.(next)
+    else send({ type: 'TOGGLE' })
+  }
+
+  return (
+    <span
+      ref={ref}
+      role="switch"
+      aria-checked={checked}
+      tabIndex={disabled ? -1 : 0}
+      className={className}
+      {...mergeProps(
+        partAttrs(switchAnatomy.scope, switchAnatomy.control, {
+          state: `${checked ? 'checked' : 'unchecked'} ${pressState}`,
+          disabled,
+        }),
+        {
+          onClick: (e: MouseEvent<HTMLSpanElement>) => {
+            onClick?.(e)
+            toggle()
+            e.stopPropagation()
+          },
+          onPointerDown: (e: PointerEvent<HTMLSpanElement>) => {
+            onPointerDown?.(e)
+            if (!disabled) send({ type: 'POINTER_DOWN' })
+          },
+          onPointerUp: (e: PointerEvent<HTMLSpanElement>) => {
+            onPointerUp?.(e)
+            send({ type: 'POINTER_UP' })
+          },
+          onPointerLeave: (e: PointerEvent<HTMLSpanElement>) => {
+            onPointerLeave?.(e)
+            send({ type: 'POINTER_LEAVE' })
+          },
+          onKeyDown: (e: KeyboardEvent<HTMLSpanElement>) => {
+            if (e.key === ' ' || e.key === 'Enter') {
+              e.preventDefault()
+              toggle()
+            }
+          },
+        },
+        rest,
+      )}
+    />
+  )
+})
+
+const Thumb = forwardRef<HTMLSpanElement, ButtonHTMLAttributes<HTMLSpanElement>>(function SwitchThumb(
+  { className, ...rest },
+  ref,
+) {
+  const { checked, pressState } = useSwitchCtx()
+  return (
+    <span
+      ref={ref}
+      className={className}
+      {...mergeProps(
+        partAttrs(switchAnatomy.scope, switchAnatomy.thumb, {
+          state: `${checked ? 'checked' : 'unchecked'} ${pressState}`,
+        }),
+        rest,
+      )}
+    />
+  )
+})
+
+const Label = forwardRef<HTMLSpanElement, ButtonHTMLAttributes<HTMLSpanElement>>(function SwitchLabel(
+  props,
+  ref,
+) {
+  return (
+    <span
+      ref={ref}
+      {...mergeProps(partAttrs(switchAnatomy.scope, switchAnatomy.label), props)}
+    />
+  )
+})
+
+const HiddenInput = forwardRef<HTMLInputElement, InputHTMLAttributes<HTMLInputElement>>(function SwitchHiddenInput(
+  props,
+  ref,
+) {
+  const { checked } = useSwitchCtx()
+  return (
+    <input
+      ref={ref}
+      type="checkbox"
+      checked={checked}
+      readOnly
+      tabIndex={-1}
+      aria-hidden
+      {...mergeProps(partAttrs(switchAnatomy.scope, switchAnatomy.hiddenInput), props)}
+    />
+  )
+})
+
+export const Switch = { Root, Control, Thumb, Label, HiddenInput }