aeon-ui-engine 1.0.0 → 1.0.2

package/packages/react/src/radio-group/index.tsx

@@ -0,0 +1,199 @@
+import { partAttrs, partOnlyAttrs, radioGroupAnatomy } from '@aeon-ui/core'
+import { tabsMachine } from '@aeon-ui/primitives'
+import {
+  createContext,
+  forwardRef,
+  useContext,
+  useEffect,
+  useMemo,
+  type ButtonHTMLAttributes,
+  type HTMLAttributes,
+  type KeyboardEvent,
+  type MouseEvent,
+  type ReactNode,
+} from 'react'
+import { useAeonMachine } from '../hooks/use-aeon-machine.js'
+import { mergeProps } from '../utils/merge-props.js'
+
+interface RadioGroupContextValue {
+  value: string
+  send: ReturnType<typeof useAeonMachine<typeof tabsMachine>>[1]
+}
+
+const RadioGroupCtx = createContext<RadioGroupContextValue | null>(null)
+
+function useRadioGroupCtx() {
+  const ctx = useContext(RadioGroupCtx)
+  if (!ctx) throw new Error('RadioGroup parts must be used within RadioGroup.Root')
+  return ctx
+}
+
+interface RadioGroupItemContextValue {
+  value: string
+  selected: boolean
+}
+
+const RadioGroupItemCtx = createContext<RadioGroupItemContextValue | null>(null)
+
+function useRadioGroupItemCtx() {
+  const ctx = useContext(RadioGroupItemCtx)
+  if (!ctx) throw new Error('RadioGroup item parts must be used within RadioGroup.Item')
+  return ctx
+}
+
+export interface RadioGroupRootProps {
+  value?: string
+  defaultValue?: string
+  onValueChange?: (value: string) => void
+  children?: ReactNode
+  className?: string
+}
+
+const Root = forwardRef<HTMLDivElement, RadioGroupRootProps>(function RadioGroupRoot(
+  { value, defaultValue = '', onValueChange, children, className, ...rest },
+  ref,
+) {
+  const [snapshot, send] = useAeonMachine(tabsMachine, {
+    input: { value: defaultValue, disabled: false },
+  })
+
+  const resolvedValue = value ?? snapshot.context.value
+
+  useEffect(() => {
+    onValueChange?.(resolvedValue)
+  }, [resolvedValue, onValueChange])
+
+  useEffect(() => {
+    if (value !== undefined) send({ type: 'SET_VALUE', value })
+  }, [value, send])
+
+  const ctx = useMemo(() => ({ value: resolvedValue, send }), [resolvedValue, send])
+
+  return (
+    <RadioGroupCtx.Provider value={ctx}>
+      <div
+        ref={ref}
+        role="radiogroup"
+        className={className}
+        {...mergeProps(
+          partAttrs(radioGroupAnatomy.scope, radioGroupAnatomy.root),
+          rest as HTMLAttributes<HTMLDivElement>,
+        )}
+      >
+        {children}
+      </div>
+    </RadioGroupCtx.Provider>
+  )
+})
+
+export interface RadioGroupItemProps extends HTMLAttributes<HTMLDivElement> {
+  value: string
+}
+
+const Item = forwardRef<HTMLDivElement, RadioGroupItemProps>(function RadioGroupItem(
+  { value: itemValue, children, ...rest },
+  ref,
+) {
+  const { value } = useRadioGroupCtx()
+  const selected = value === itemValue
+  const itemCtx = useMemo(() => ({ value: itemValue, selected }), [itemValue, selected])
+
+  return (
+    <RadioGroupItemCtx.Provider value={itemCtx}>
+      <div
+        ref={ref}
+        {...mergeProps(
+          partOnlyAttrs(radioGroupAnatomy.item, {
+            state: selected ? 'selected' : 'unselected',
+          }),
+          rest,
+        )}
+      >
+        {children}
+      </div>
+    </RadioGroupItemCtx.Provider>
+  )
+})
+
+const ItemControl = forwardRef<HTMLSpanElement, ButtonHTMLAttributes<HTMLSpanElement>>(function RadioGroupItemControl(
+  { onClick, onKeyDown, ...rest },
+  ref,
+) {
+  const { send } = useRadioGroupCtx()
+  const { value: itemValue, selected } = useRadioGroupItemCtx()
+
+  const select = () => send({ type: 'SELECT', value: itemValue })
+
+  return (
+    <span
+      ref={ref}
+      role="radio"
+      aria-checked={selected}
+      tabIndex={selected ? 0 : -1}
+      {...mergeProps(
+        partOnlyAttrs(radioGroupAnatomy.itemControl, {
+          state: selected ? 'selected' : 'unselected',
+          highlighted: selected,
+        }),
+        {
+          onClick: (e: MouseEvent<HTMLSpanElement>) => {
+            onClick?.(e)
+            select()
+          },
+          onKeyDown: (e: KeyboardEvent<HTMLSpanElement>) => {
+            onKeyDown?.(e)
+            if (e.key === ' ' || e.key === 'Enter') {
+              e.preventDefault()
+              select()
+            }
+          },
+        },
+        rest,
+      )}
+    />
+  )
+})
+
+const ItemIndicator = forwardRef<HTMLSpanElement, HTMLAttributes<HTMLSpanElement>>(function RadioGroupItemIndicator(
+  props,
+  ref,
+) {
+  const { selected } = useRadioGroupItemCtx()
+  if (!selected) return null
+
+  return (
+    <span
+      ref={ref}
+      {...mergeProps(
+        partOnlyAttrs(radioGroupAnatomy.itemIndicator, { state: 'selected' }),
+        props,
+      )}
+    />
+  )
+})
+
+const ItemLabel = forwardRef<HTMLSpanElement, HTMLAttributes<HTMLSpanElement>>(function RadioGroupItemLabel(
+  { onClick, ...rest },
+  ref,
+) {
+  const { send } = useRadioGroupCtx()
+  const { value: itemValue } = useRadioGroupItemCtx()
+
+  return (
+    <span
+      ref={ref}
+      {...mergeProps(
+        partOnlyAttrs(radioGroupAnatomy.itemLabel),
+        {
+          onClick: (e: MouseEvent<HTMLSpanElement>) => {
+            onClick?.(e)
+            send({ type: 'SELECT', value: itemValue })
+          },
+        },
+        rest,
+      )}
+    />
+  )
+})
+
+export const RadioGroup = { Root, Item, ItemControl, ItemIndicator, ItemLabel }

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

@@ -15,10 +15,9 @@ import {
   type MouseEvent,
   type ReactNode,
 } from 'react'
+import { FloatingPositioner } from '../floating/FloatingPositioner.js'
 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 {
@@ -39,6 +38,9 @@ interface SelectContextValue {
 
 const SelectCtx = createContext<SelectContextValue | null>(null)
 
+/** Set when `Select.Content` is a descendant of `Select.Positioner`. */
+const SelectPositionerCtx = createContext(false)
+
 function useSelectCtx() {
   const ctx = useContext(SelectCtx)
   if (!ctx) throw new Error('Select parts must be used within <Select.Root>')
@@ -263,44 +265,49 @@ const Positioner = forwardRef<HTMLDivElement, SelectPositionerProps>(function Se
   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 (
+    <SelectPositionerCtx.Provider value={true}>
+      <FloatingPositioner
+        ref={ref}
+        open={open}
+        scope={selectAnatomy.scope}
+        part={selectAnatomy.positioner}
+        triggerRef={triggerRef}
+        positionerRef={positionerRef}
+        portalled={portalled}
+        matchAnchorWidth
+        className={className}
+        {...rest}
+      >
+        {children}
+      </FloatingPositioner>
+    </SelectPositionerCtx.Provider>
   )
-
-  return renderPortalled(node, portalled, mounted)
 })
 
-const Content = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>(function SelectContent(
-  { onKeyDown, children, className, ...rest },
+export interface SelectContentProps extends HTMLAttributes<HTMLDivElement> {
+  /**
+   * When `Select.Content` is not wrapped in `Select.Positioner`, portal to body (default true).
+   * Ignored when a `Select.Positioner` ancestor is present.
+   */
+  portalled?: boolean
+}
+
+const Content = forwardRef<HTMLDivElement, SelectContentProps>(function SelectContent(
+  { portalled = true, onKeyDown, children, className, ...rest },
   ref,
 ) {
-  const { open, listboxId, contentRef, highlightedValue, onListboxKeyDown } = useSelectCtx()
+  const inPositioner = useContext(SelectPositionerCtx)
+  const { open, listboxId, contentRef, highlightedValue, onListboxKeyDown, triggerRef, positionerRef } =
+    useSelectCtx()
 
   if (!open) return null
 
   const activeId =
     highlightedValue && open ? `${listboxId}-option-${highlightedValue}` : undefined
 
-  return (
+  const listbox = (
     <div
       ref={(node) => {
         contentRef.current = node
@@ -323,6 +330,22 @@ const Content = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>(funct
       {children}
     </div>
   )
+
+  if (inPositioner) return listbox
+
+  return (
+    <FloatingPositioner
+      open={open}
+      scope={selectAnatomy.scope}
+      part={selectAnatomy.positioner}
+      triggerRef={triggerRef}
+      positionerRef={positionerRef}
+      portalled={portalled}
+      matchAnchorWidth
+    >
+      {listbox}
+    </FloatingPositioner>
+  )
 })
 
 export interface SelectItemProps extends ButtonHTMLAttributes<HTMLButtonElement> {

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

@@ -35,6 +35,27 @@ describe('Select', () => {
     expect(trigger).toHaveAttribute('aria-expanded', 'false')
   })
 
+  it('portals listbox when Content is used without Positioner', async () => {
+    const user = userEvent.setup()
+
+    render(
+      <Select.Root value="a">
+        <Select.Trigger>
+          <Select.ValueText>Alpha</Select.ValueText>
+        </Select.Trigger>
+        <Select.Content>
+          <Select.Item value="a">Alpha</Select.Item>
+        </Select.Content>
+      </Select.Root>,
+    )
+
+    const root = screen.getByRole('button').parentElement!
+    await user.click(screen.getByRole('button'))
+
+    const listbox = screen.getByRole('listbox')
+    expect(root).not.toContainElement(listbox)
+  })
+
   it('closes on escape', async () => {
     const user = userEvent.setup()
 

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

@@ -0,0 +1,23 @@
+import { partAttrs, separatorAnatomy } from '@aeon-ui/core'
+import { forwardRef, type HTMLAttributes } from 'react'
+import { mergeProps } from '../utils/merge-props.js'
+
+export interface SeparatorRootProps extends HTMLAttributes<HTMLDivElement> {
+  orientation?: 'horizontal' | 'vertical'
+}
+
+const Root = forwardRef<HTMLDivElement, SeparatorRootProps>(function SeparatorRoot(
+  { orientation = 'horizontal', ...rest },
+  ref,
+) {
+  return (
+    <div
+      ref={ref}
+      role="separator"
+      aria-orientation={orientation}
+      {...mergeProps(partAttrs(separatorAnatomy.scope, separatorAnatomy.root), rest)}
+    />
+  )
+})
+
+export const Separator = { Root }

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

@@ -0,0 +1,264 @@
+import { partAttrs, partOnlyAttrs, sliderAnatomy } from '@aeon-ui/core'
+import { sliderMachine, snapSliderValue } from '@aeon-ui/primitives'
+import {
+  createContext,
+  forwardRef,
+  useCallback,
+  useContext,
+  useEffect,
+  useMemo,
+  useRef,
+  type HTMLAttributes,
+  type KeyboardEvent,
+  type PointerEvent,
+  type ReactNode,
+} from 'react'
+import { useAeonMachine } from '../hooks/use-aeon-machine.js'
+import { mergeProps } from '../utils/merge-props.js'
+
+interface SliderContextValue {
+  value: number
+  min: number
+  max: number
+  step: number
+  disabled: boolean
+  dragging: boolean
+  send: ReturnType<typeof useAeonMachine<typeof sliderMachine>>[1]
+  onValueChange?: (value: number) => void
+  setValueFromClientX: (clientX: number) => void
+  trackRef: React.RefObject<HTMLDivElement | null>
+}
+
+const SliderCtx = createContext<SliderContextValue | null>(null)
+
+function useSliderCtx() {
+  const ctx = useContext(SliderCtx)
+  if (!ctx) throw new Error('Slider parts must be used within Slider.Root')
+  return ctx
+}
+
+function percent(value: number, min: number, max: number) {
+  if (max <= min) return 0
+  return ((value - min) / (max - min)) * 100
+}
+
+export interface SliderRootProps {
+  value?: number
+  defaultValue?: number
+  min?: number
+  max?: number
+  step?: number
+  disabled?: boolean
+  onValueChange?: (value: number) => void
+  children?: ReactNode
+  className?: string
+}
+
+const Root = forwardRef<HTMLDivElement, SliderRootProps>(function SliderRoot(
+  {
+    value,
+    defaultValue,
+    min = 0,
+    max = 100,
+    step = 1,
+    disabled = false,
+    onValueChange,
+    children,
+    className,
+    ...rest
+  },
+  ref,
+) {
+  const trackRef = useRef<HTMLDivElement>(null)
+  const [snapshot, send] = useAeonMachine(sliderMachine, {
+    input: {
+      value: defaultValue ?? min,
+      min,
+      max,
+      step,
+      disabled,
+    },
+  })
+
+  const resolvedValue = value ?? snapshot.context.value
+  const dragging = snapshot.matches({ interaction: 'dragging' })
+
+  useEffect(() => {
+    onValueChange?.(resolvedValue)
+  }, [resolvedValue, onValueChange])
+
+  useEffect(() => {
+    if (value !== undefined) send({ type: 'SET_VALUE', value })
+  }, [value, send])
+
+  const setValueFromClientX = useCallback(
+    (clientX: number) => {
+      const track = trackRef.current
+      if (!track || disabled) return
+      const rect = track.getBoundingClientRect()
+      if (rect.width <= 0) return
+      const ratio = Math.min(1, Math.max(0, (clientX - rect.left) / rect.width))
+      const next = snapSliderValue(min + ratio * (max - min), min, max, step)
+      send({ type: 'SET_VALUE', value: next })
+      if (value === undefined) onValueChange?.(next)
+    },
+    [disabled, min, max, step, send, value, onValueChange],
+  )
+
+  useEffect(() => {
+    if (!dragging) return
+    const onMove = (e: globalThis.PointerEvent) => setValueFromClientX(e.clientX)
+    const onUp = () => send({ type: 'POINTER_UP' })
+    window.addEventListener('pointermove', onMove)
+    window.addEventListener('pointerup', onUp)
+    return () => {
+      window.removeEventListener('pointermove', onMove)
+      window.removeEventListener('pointerup', onUp)
+    }
+  }, [dragging, setValueFromClientX, send])
+
+  const ctx = useMemo(
+    () => ({
+      value: resolvedValue,
+      min,
+      max,
+      step,
+      disabled,
+      dragging,
+      send,
+      onValueChange,
+      setValueFromClientX,
+      trackRef,
+    }),
+    [resolvedValue, min, max, step, disabled, dragging, send, onValueChange, setValueFromClientX],
+  )
+
+  return (
+    <SliderCtx.Provider value={ctx}>
+      <div
+        ref={ref}
+        className={className}
+        {...mergeProps(
+          partAttrs(sliderAnatomy.scope, sliderAnatomy.root, {
+            state: dragging ? 'dragging' : 'idle',
+            disabled,
+          }),
+          rest as HTMLAttributes<HTMLDivElement>,
+        )}
+      >
+        {children}
+      </div>
+    </SliderCtx.Provider>
+  )
+})
+
+const Track = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>(function SliderTrack(
+  { onPointerDown, ...rest },
+  ref,
+) {
+  const { disabled, send, setValueFromClientX, trackRef } = useSliderCtx()
+
+  return (
+    <div
+      ref={(node) => {
+        trackRef.current = node
+        if (typeof ref === 'function') ref(node)
+        else if (ref) ref.current = node
+      }}
+      {...mergeProps(
+        partOnlyAttrs(sliderAnatomy.track),
+        {
+          onPointerDown: (e: PointerEvent<HTMLDivElement>) => {
+            onPointerDown?.(e)
+            if (disabled || e.button !== 0) return
+            e.currentTarget.setPointerCapture(e.pointerId)
+            send({ type: 'POINTER_DOWN' })
+            setValueFromClientX(e.clientX)
+          },
+        },
+        rest,
+      )}
+    />
+  )
+})
+
+const Range = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>(function SliderRange(
+  { style, ...rest },
+  ref,
+) {
+  const { value, min, max } = useSliderCtx()
+  return (
+    <div
+      ref={ref}
+      {...mergeProps(partOnlyAttrs(sliderAnatomy.range), rest, {
+        style: { ...style, width: `${percent(value, min, max)}%` },
+      })}
+    />
+  )
+})
+
+const Thumb = forwardRef<HTMLSpanElement, HTMLAttributes<HTMLSpanElement>>(function SliderThumb(
+  { onKeyDown, onPointerDown, style, ...rest },
+  ref,
+) {
+  const { value, min, max, step, disabled, dragging, send } = useSliderCtx()
+
+  return (
+    <span
+      ref={ref}
+      role="slider"
+      tabIndex={disabled ? -1 : 0}
+      aria-valuemin={min}
+      aria-valuemax={max}
+      aria-valuenow={value}
+      aria-disabled={disabled || undefined}
+      {...mergeProps(
+        partOnlyAttrs(sliderAnatomy.thumb, { state: dragging ? 'dragging' : disabled ? 'disabled' : 'idle' }),
+        {
+          style: { ...style, left: `${percent(value, min, max)}%` },
+          onPointerDown: (e: PointerEvent<HTMLSpanElement>) => {
+            onPointerDown?.(e)
+            if (disabled || e.button !== 0) return
+            e.stopPropagation()
+            send({ type: 'POINTER_DOWN' })
+          },
+          onKeyDown: (e: KeyboardEvent<HTMLSpanElement>) => {
+            onKeyDown?.(e)
+            if (disabled || e.defaultPrevented) return
+            if (e.key === 'ArrowRight' || e.key === 'ArrowUp') {
+              e.preventDefault()
+              send({ type: 'STEP', delta: step })
+            }
+            if (e.key === 'ArrowLeft' || e.key === 'ArrowDown') {
+              e.preventDefault()
+              send({ type: 'STEP', delta: -step })
+            }
+            if (e.key === 'Home') {
+              e.preventDefault()
+              send({ type: 'HOME' })
+            }
+            if (e.key === 'End') {
+              e.preventDefault()
+              send({ type: 'END' })
+            }
+          },
+        },
+        rest,
+      )}
+    />
+  )
+})
+
+const ValueText = forwardRef<HTMLSpanElement, HTMLAttributes<HTMLSpanElement>>(function SliderValueText(
+  props,
+  ref,
+) {
+  const { value } = useSliderCtx()
+  return (
+    <span ref={ref} {...mergeProps(partOnlyAttrs(sliderAnatomy.valueText), props)}>
+      {props.children ?? value}
+    </span>
+  )
+})
+
+export const Slider = { Root, Track, Range, Thumb, ValueText }

package/packages/react/src/toast/primitives.tsx

@@ -7,6 +7,7 @@ import {
   useEffect,
   useId,
   useMemo,
+  useRef,
   type ButtonHTMLAttributes,
   type HTMLAttributes,
   type MouseEvent,
@@ -44,13 +45,19 @@ export const Root = forwardRef<HTMLDivElement, ToastRootProps>(function ToastRoo
   const [snapshot, send] = useAeonMachine(toastMachine, { input: { durationMs } })
   const visible = snapshot.matches('visible')
   const titleId = useId()
+  const hasBeenVisible = useRef(false)
 
   useEffect(() => {
     if (defaultVisible) send({ type: 'SHOW' })
   }, [defaultVisible, send])
 
   useEffect(() => {
-    onVisibleChange?.(visible)
+    if (visible) {
+      hasBeenVisible.current = true
+      onVisibleChange?.(true)
+      return
+    }
+    if (hasBeenVisible.current) onVisibleChange?.(false)
   }, [visible, onVisibleChange])
 
   const value = useMemo(() => ({ visible, send, titleId }), [visible, send, titleId])

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

@@ -0,0 +1,40 @@
+import { render, screen } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import { describe, expect, it } from 'vitest'
+import { Toast, useToast } from './index.js'
+
+function PublishButton() {
+  const { publish } = useToast()
+  return (
+    <button
+      type="button"
+      onClick={() =>
+        publish({
+          title: 'Saved',
+          description: 'Your preferences were updated.',
+          durationMs: 4000,
+        })
+      }
+    >
+      Show toast
+    </button>
+  )
+}
+
+describe('Toast', () => {
+  it('shows a published toast in the viewport', async () => {
+    const user = userEvent.setup()
+
+    render(
+      <Toast.Provider>
+        <PublishButton />
+        <Toast.Viewport />
+      </Toast.Provider>,
+    )
+
+    await user.click(screen.getByRole('button', { name: 'Show toast' }))
+
+    expect(screen.getByRole('status')).toHaveTextContent('Saved')
+    expect(screen.getByRole('status')).toHaveTextContent('Your preferences were updated.')
+  })
+})