aeon-ui-engine 1.0.0

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

@@ -0,0 +1,195 @@
+import { menuAnatomy, partAttrs } from '@aeon-ui/core'
+import { popoverMachine } from '@aeon-ui/primitives'
+import {
+  createContext,
+  forwardRef,
+  useCallback,
+  useContext,
+  useEffect,
+  useId,
+  useMemo,
+  useRef,
+  type ButtonHTMLAttributes,
+  type HTMLAttributes,
+  type KeyboardEvent,
+  type MouseEvent,
+  type ReactNode,
+} from 'react'
+import { useAeonMachine } from '../hooks/use-aeon-machine.js'
+import { useOutsideClick } from '../hooks/use-outside-click.js'
+import { mergeProps } from '../utils/merge-props.js'
+
+interface MenuContextValue {
+  open: boolean
+  send: ReturnType<typeof useAeonMachine<typeof popoverMachine>>[1]
+  triggerId: string
+  menuId: string
+}
+
+const MenuCtx = createContext<MenuContextValue | null>(null)
+
+function useMenuCtx() {
+  const ctx = useContext(MenuCtx)
+  if (!ctx) throw new Error('Menu parts must be used within Menu.Root')
+  return ctx
+}
+
+export interface MenuRootProps {
+  open?: boolean
+  defaultOpen?: boolean
+  onOpenChange?: (open: boolean) => void
+  children?: ReactNode
+  className?: string
+}
+
+const Root = forwardRef<HTMLDivElement, MenuRootProps>(function MenuRoot(
+  { open, defaultOpen = false, onOpenChange, children, className, ...rest },
+  ref,
+) {
+  const [snapshot, send] = useAeonMachine(popoverMachine, { input: { open: defaultOpen } })
+  const resolvedOpen = open ?? snapshot.context.open
+  const rootRef = useRef<HTMLDivElement>(null)
+  const triggerId = useId()
+  const menuId = useId()
+
+  useEffect(() => {
+    onOpenChange?.(resolvedOpen)
+  }, [resolvedOpen, onOpenChange])
+
+  useEffect(() => {
+    if (open !== undefined) send({ type: 'SET_OPEN', open })
+  }, [open, send])
+
+  const close = useCallback(() => send({ type: 'CLOSE' }), [send])
+  useOutsideClick([rootRef], resolvedOpen, close)
+
+  const value = useMemo(
+    () => ({ open: resolvedOpen, send, triggerId, menuId }),
+    [resolvedOpen, send, triggerId, menuId],
+  )
+
+  return (
+    <MenuCtx.Provider value={value}>
+      <div
+        ref={(node) => {
+          rootRef.current = node
+          if (typeof ref === 'function') ref(node)
+          else if (ref) ref.current = node
+        }}
+        className={className}
+        {...mergeProps(
+          partAttrs(menuAnatomy.scope, menuAnatomy.root, { state: resolvedOpen ? 'open' : 'closed' }),
+          rest as HTMLAttributes<HTMLDivElement>,
+        )}
+      >
+        {children}
+      </div>
+    </MenuCtx.Provider>
+  )
+})
+
+const Trigger = forwardRef<HTMLButtonElement, ButtonHTMLAttributes<HTMLButtonElement>>(function MenuTrigger(
+  { onClick, ...rest },
+  ref,
+) {
+  const { open, send, triggerId, menuId } = useMenuCtx()
+  return (
+    <button
+      ref={ref}
+      type="button"
+      id={triggerId}
+      aria-haspopup="menu"
+      aria-expanded={open}
+      aria-controls={open ? menuId : undefined}
+      {...mergeProps(
+        partAttrs(menuAnatomy.scope, menuAnatomy.trigger, { state: open ? 'open' : 'closed' }),
+        {
+          onClick: (e: MouseEvent<HTMLButtonElement>) => {
+            onClick?.(e)
+            if (!e.defaultPrevented) send({ type: 'TOGGLE' })
+          },
+        },
+        rest,
+      )}
+    />
+  )
+})
+
+const Positioner = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>(function MenuPositioner(
+  props,
+  ref,
+) {
+  const { open } = useMenuCtx()
+  if (!open) return null
+  return (
+    <div
+      ref={ref}
+      {...mergeProps(partAttrs(menuAnatomy.scope, menuAnatomy.positioner, { state: 'open' }), props)}
+    />
+  )
+})
+
+const Content = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>(function MenuContent(
+  { onKeyDown, ...rest },
+  ref,
+) {
+  const { open, send, menuId } = useMenuCtx()
+  if (!open) return null
+  return (
+    <div
+      ref={ref}
+      id={menuId}
+      role="menu"
+      {...mergeProps(
+        partAttrs(menuAnatomy.scope, menuAnatomy.content, { state: 'open' }),
+        {
+          onKeyDown: (e: KeyboardEvent<HTMLDivElement>) => {
+            onKeyDown?.(e)
+            if (e.key === 'Escape') send({ type: 'ESCAPE' })
+          },
+        },
+        rest,
+      )}
+    />
+  )
+})
+
+export interface MenuItemProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+  /** Close menu after selection (default true). */
+  closeOnSelect?: boolean
+}
+
+const Item = forwardRef<HTMLButtonElement, MenuItemProps>(function MenuItem(
+  { closeOnSelect = true, onClick, ...rest },
+  ref,
+) {
+  const { send } = useMenuCtx()
+  return (
+    <button
+      ref={ref}
+      type="button"
+      role="menuitem"
+      {...mergeProps(
+        partAttrs(menuAnatomy.scope, menuAnatomy.item),
+        {
+          onClick: (e: MouseEvent<HTMLButtonElement>) => {
+            onClick?.(e)
+            if (closeOnSelect && !e.defaultPrevented) send({ type: 'CLOSE' })
+          },
+        },
+        rest,
+      )}
+    />
+  )
+})
+
+const Separator = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>(function MenuSeparator(
+  props,
+  ref,
+) {
+  return (
+    <div ref={ref} role="separator" {...mergeProps(partAttrs(menuAnatomy.scope, menuAnatomy.separator), props)} />
+  )
+})
+
+export const Menu = { Root, Trigger, Positioner, Content, Item, Separator }

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

@@ -0,0 +1,191 @@
+import { popoverAnatomy, partAttrs } from '@aeon-ui/core'
+import { popoverMachine } from '@aeon-ui/primitives'
+import {
+  createContext,
+  forwardRef,
+  useCallback,
+  useContext,
+  useEffect,
+  useId,
+  useMemo,
+  useRef,
+  type ButtonHTMLAttributes,
+  type HTMLAttributes,
+  type KeyboardEvent,
+  type MouseEvent,
+  type ReactNode,
+} from 'react'
+import { useAeonMachine } from '../hooks/use-aeon-machine.js'
+import { useOutsideClick } from '../hooks/use-outside-click.js'
+import { mergeProps } from '../utils/merge-props.js'
+
+interface PopoverContextValue {
+  open: boolean
+  send: ReturnType<typeof useAeonMachine<typeof popoverMachine>>[1]
+  triggerId: string
+  contentId: string
+}
+
+const PopoverCtx = createContext<PopoverContextValue | null>(null)
+
+function usePopoverCtx() {
+  const ctx = useContext(PopoverCtx)
+  if (!ctx) throw new Error('Popover parts must be used within Popover.Root')
+  return ctx
+}
+
+export interface PopoverRootProps {
+  open?: boolean
+  defaultOpen?: boolean
+  onOpenChange?: (open: boolean) => void
+  children?: ReactNode
+  className?: string
+}
+
+const Root = forwardRef<HTMLDivElement, PopoverRootProps>(function PopoverRoot(
+  { open, defaultOpen = false, onOpenChange, children, className, ...rest },
+  ref,
+) {
+  const [snapshot, send] = useAeonMachine(popoverMachine, {
+    input: { open: defaultOpen },
+  })
+  const resolvedOpen = open ?? snapshot.context.open
+  const rootRef = useRef<HTMLDivElement>(null)
+  const triggerId = useId()
+  const contentId = useId()
+
+  useEffect(() => {
+    onOpenChange?.(resolvedOpen)
+  }, [resolvedOpen, onOpenChange])
+
+  useEffect(() => {
+    if (open !== undefined) send({ type: 'SET_OPEN', open })
+  }, [open, send])
+
+  const close = useCallback(() => send({ type: 'CLOSE' }), [send])
+  useOutsideClick([rootRef], resolvedOpen, close)
+
+  const value = useMemo(
+    () => ({ open: resolvedOpen, send, triggerId, contentId }),
+    [resolvedOpen, send, triggerId, contentId],
+  )
+
+  return (
+    <PopoverCtx.Provider value={value}>
+      <div
+        ref={(node) => {
+          rootRef.current = node
+          if (typeof ref === 'function') ref(node)
+          else if (ref) ref.current = node
+        }}
+        className={className}
+        {...mergeProps(
+          partAttrs(popoverAnatomy.scope, popoverAnatomy.root, {
+            state: resolvedOpen ? 'open' : 'closed',
+          }),
+          rest as HTMLAttributes<HTMLDivElement>,
+        )}
+      >
+        {children}
+      </div>
+    </PopoverCtx.Provider>
+  )
+})
+
+const Trigger = forwardRef<HTMLButtonElement, ButtonHTMLAttributes<HTMLButtonElement>>(function PopoverTrigger(
+  { onClick, ...rest },
+  ref,
+) {
+  const { open, send, triggerId, contentId } = usePopoverCtx()
+  return (
+    <button
+      ref={ref}
+      type="button"
+      id={triggerId}
+      aria-expanded={open}
+      aria-controls={open ? contentId : undefined}
+      {...mergeProps(
+        partAttrs(popoverAnatomy.scope, popoverAnatomy.trigger, { state: open ? 'open' : 'closed' }),
+        {
+          onClick: (e: MouseEvent<HTMLButtonElement>) => {
+            onClick?.(e)
+            if (!e.defaultPrevented) send({ type: 'TOGGLE' })
+          },
+        },
+        rest,
+      )}
+    />
+  )
+})
+
+const Positioner = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>(function PopoverPositioner(
+  props,
+  ref,
+) {
+  const { open } = usePopoverCtx()
+  if (!open) return null
+  return (
+    <div
+      ref={ref}
+      {...mergeProps(partAttrs(popoverAnatomy.scope, popoverAnatomy.positioner, { state: 'open' }), props)}
+    />
+  )
+})
+
+const Content = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>(function PopoverContent(
+  { onKeyDown, ...rest },
+  ref,
+) {
+  const { open, send, triggerId, contentId } = usePopoverCtx()
+  if (!open) return null
+  return (
+    <div
+      ref={ref}
+      id={contentId}
+      role="dialog"
+      aria-modal={false}
+      aria-labelledby={triggerId}
+      {...mergeProps(
+        partAttrs(popoverAnatomy.scope, popoverAnatomy.content, { state: 'open' }),
+        {
+          onKeyDown: (e: KeyboardEvent<HTMLDivElement>) => {
+            onKeyDown?.(e)
+            if (e.key === 'Escape') send({ type: 'ESCAPE' })
+          },
+        },
+        rest,
+      )}
+    />
+  )
+})
+
+const Arrow = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>(function PopoverArrow(props, ref) {
+  const { open } = usePopoverCtx()
+  if (!open) return null
+  return <div ref={ref} {...mergeProps(partAttrs(popoverAnatomy.scope, popoverAnatomy.arrow), props)} />
+})
+
+const CloseTrigger = forwardRef<HTMLButtonElement, ButtonHTMLAttributes<HTMLButtonElement>>(
+  function PopoverCloseTrigger({ onClick, ...rest }, ref) {
+    const { send } = usePopoverCtx()
+    return (
+      <button
+        ref={ref}
+        type="button"
+        aria-label="Close"
+        {...mergeProps(
+          partAttrs(popoverAnatomy.scope, popoverAnatomy.closeTrigger),
+          {
+            onClick: (e: MouseEvent<HTMLButtonElement>) => {
+              onClick?.(e)
+              send({ type: 'CLOSE' })
+            },
+          },
+          rest,
+        )}
+      />
+    )
+  },
+)
+
+export const Popover = { Root, Trigger, Positioner, Content, Arrow, CloseTrigger }

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

@@ -0,0 +1,98 @@
+import { scrollAnatomy, partAttrs, partOnlyAttrs } from '@aeon-ui/core'
+import {
+  createContext,
+  forwardRef,
+  useContext,
+  useMemo,
+  useRef,
+  type HTMLAttributes,
+  type ReactNode,
+} from 'react'
+import { useScrollState } from './use-scroll-state.js'
+
+interface ScrollContextValue {
+  stateAttr: string
+}
+
+const ScrollCtx = createContext<ScrollContextValue | null>(null)
+
+export function useScrollContext(): ScrollContextValue {
+  const ctx = useContext(ScrollCtx)
+  if (!ctx) throw new Error('Scroll parts must be used within <Scroll.Root>')
+  return ctx
+}
+
+export interface ScrollRootProps extends HTMLAttributes<HTMLDivElement> {
+  children: ReactNode
+}
+
+const Root = forwardRef<HTMLDivElement, ScrollRootProps>(function ScrollRoot(
+  { children, className, ...rest },
+  ref,
+) {
+  const viewportRef = useRef<HTMLDivElement>(null)
+  const stateAttr = useScrollState(viewportRef)
+  const value = useMemo(() => ({ stateAttr }), [stateAttr])
+
+  return (
+    <ScrollCtx.Provider value={value}>
+      <div
+        ref={ref}
+        className={className}
+        {...partAttrs(scrollAnatomy.scope, scrollAnatomy.root)}
+        {...rest}
+      >
+        <ScrollViewportRefContext.Provider value={viewportRef}>
+          {children}
+        </ScrollViewportRefContext.Provider>
+      </div>
+    </ScrollCtx.Provider>
+  )
+})
+
+const ScrollViewportRefContext = createContext<React.RefObject<HTMLDivElement | null> | null>(
+  null,
+)
+
+export interface ScrollViewportProps extends HTMLAttributes<HTMLDivElement> {
+  children: ReactNode
+}
+
+const Viewport = forwardRef<HTMLDivElement, ScrollViewportProps>(function ScrollViewport(
+  { children, className, ...rest },
+  forwardedRef,
+) {
+  const ctxRef = useContext(ScrollViewportRefContext)
+  const { stateAttr } = useScrollContext()
+
+  return (
+    <div
+      ref={(node) => {
+        if (ctxRef) ctxRef.current = node
+        if (typeof forwardedRef === 'function') forwardedRef(node)
+        else if (forwardedRef) forwardedRef.current = node
+      }}
+      className={className}
+      data-aeon-scroll=""
+      {...partAttrs(scrollAnatomy.scope, scrollAnatomy.viewport, { state: stateAttr })}
+      {...rest}
+    >
+      {children}
+    </div>
+  )
+})
+
+const Content = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>(function ScrollContent(
+  props,
+  ref,
+) {
+  return <div ref={ref} {...partOnlyAttrs(scrollAnatomy.content)} {...props} />
+})
+
+export const Scroll = {
+  Root,
+  Viewport,
+  Content,
+}
+
+export { useScrollState } from './use-scroll-state.js'

package/packages/react/src/scroll/use-scroll-state.ts

@@ -0,0 +1,30 @@
+import { getScrollSnapshot } from '@aeon-ui/core'
+import { useLayoutEffect, useState, type RefObject } from 'react'
+
+/** Subscribe to scroll + resize; returns data-aeon-state value for a viewport. */
+export function useScrollState(ref: RefObject<HTMLElement | null>): string {
+  const [stateAttr, setStateAttr] = useState('idle')
+
+  useLayoutEffect(() => {
+    const el = ref.current
+    if (!el) return
+
+    const update = () => {
+      setStateAttr(getScrollSnapshot(el).stateAttr)
+    }
+
+    update()
+    el.addEventListener('scroll', update, { passive: true })
+    const ro = new ResizeObserver(update)
+    ro.observe(el)
+    const content = el.firstElementChild
+    if (content instanceof HTMLElement) ro.observe(content)
+
+    return () => {
+      el.removeEventListener('scroll', update)
+      ro.disconnect()
+    }
+  }, [ref])
+
+  return stateAttr
+}