@chassis-ui/react 0.2.0 → 0.3.0

package/src/components/list/List.tsx

@@ -1,193 +0,0 @@
-import React, {
-  Children,
-  ElementType,
-  ForwardRefRenderFunction,
-  isValidElement,
-  ReactElement
-} from 'react'
-import classNames from 'classnames'
-
-import { ContextColor, ContextStyle } from '../../types'
-import {
-  createPolymorphicComponent,
-  PolymorphicComponentProps,
-  PolymorphicRef
-} from '../../utils/polymorphic'
-import { ListItem } from './ListItem'
-
-export interface ListItemDef {
-  /**
-   * Stable key for the rendered item. Falls back to the item's index in `items`.
-   */
-  id?: number | string
-  /**
-   * Item label content.
-   */
-  label: React.ReactNode
-  /**
-   * Makes the item a link.
-   */
-  href?: string
-  /**
-   * Sets the color of the item.
-   */
-  color?: ContextColor
-  /**
-   * Marks the item as active.
-   */
-  active?: boolean
-  /**
-   * Marks the item as disabled.
-   */
-  disabled?: boolean
-}
-
-type ListOwnProps<C extends ElementType> = {
-  /**
-   * A string of all className you want applied to the component.
-   */
-  className?: string
-  /**
-   * Component used for the root node. Either a string to use a HTML element or a component.
-   * Defaults to `'ul'`, unless an item (a data-driven item with `href`, or a `<ListItem
-   * component="a">`/`<ListItem component="button">` child) is interactive — a bare `<a>`/
-   * `<button>` isn't a valid direct child of `<ul>`/`<ol>`, so the default switches to `'div'`
-   * instead. Pass `component` explicitly to opt out of this.
-   */
-  component?: C
-  /**
-   * Sets the color of the component to one of Chassis context colors.
-   */
-  color?: ContextColor
-  /**
-   * Remove outer borders and rounded corners to render list items edge-to-edge in a parent component (e.g., `<Card>`).
-   */
-  flush?: boolean
-  /**
-   * Array of item definitions for data-driven rendering. When provided, children are ignored.
-   */
-  items?: ListItemDef[]
-  /**
-   * Specify a layout type.
-   */
-  layout?:
-    | 'horizontal'
-    | 'sm:horizontal'
-    | 'md:horizontal'
-    | 'lg:horizontal'
-    | 'xl:horizontal'
-    | '2xl:horizontal'
-  /**
-   * Number list items sequentially using CSS counters. Pair with `component="ol"` for semantic correctness.
-   */
-  numbered?: boolean
-  /**
-   * Remove outer borders, rounded corners, and horizontal padding for a minimal, edge-to-edge appearance.
-   */
-  plain?: boolean
-  /**
-   * Applies a `.solid`, `.outline`, or `.smooth` context style. Only meaningful together with `color`.
-   */
-  variant?: ContextStyle
-}
-
-export type ListProps<C extends ElementType = 'ul'> = PolymorphicComponentProps<C, ListOwnProps<C>>
-
-type ListComponent = (<C extends ElementType = 'ul'>(
-  props: ListProps<C> & { ref?: PolymorphicRef<C> }
-) => ReactElement | null) & { displayName?: string }
-
-function ListRender<C extends ElementType = 'ul'>(
-  {
-    children,
-    className,
-    component,
-    color,
-    variant,
-    flush,
-    items,
-    layout,
-    numbered,
-    plain,
-    ...rest
-  }: ListProps<C>,
-  ref: PolymorphicRef<C>
-) {
-  // A linked item (data-driven `href`, or a `<ListItem component="a"|"button">` child) can't
-  // render as a bare `<a>`/`<button>` inside the default `<ul>`/`<ol>` root — only `<li>`/
-  // `script`/`template` are valid children there. Default to `<div>` instead when that's the
-  // case (unless the caller already chose their own `component`), matching the same
-  // `component="div"` pattern already documented for `Stepper`'s composed interactive usage.
-  const hasInteractiveItem = items
-    ? items.some((item) => !!item.href)
-    : Children.toArray(children).some(
-        (child) =>
-          isValidElement<{ component?: string | ElementType }>(child) &&
-          child.type === ListItem &&
-          (child.props.component === 'a' || child.props.component === 'button')
-      )
-  const Component = (component ?? (hasInteractiveItem ? 'div' : 'ul')) as ElementType
-  const isListSemantic = Component === 'ul' || Component === 'ol'
-
-  const _className = classNames(
-    'list',
-    color && 'context',
-    color,
-    variant,
-    layout,
-    {
-      flush,
-      plain,
-      numbered
-    },
-    className
-  )
-
-  const autoContent = items
-    ? items.map((item, idx) => {
-        const itemClass = classNames('list-item', item.color && 'context', item.color, {
-          'list-action': !!item.href,
-          active: item.active,
-          disabled: item.disabled
-        })
-        const Tag = item.href ? 'a' : isListSemantic ? 'li' : 'div'
-        return (
-          <Tag
-            key={item.id ?? idx}
-            className={itemClass}
-            {...(item.href ? { href: item.href } : {})}
-            {...(item.active ? { 'aria-current': 'page' } : {})}
-            {...(item.disabled ? { 'aria-disabled': true } : {})}
-          >
-            {item.label}
-          </Tag>
-        )
-      })
-    : null
-
-  // When the root switched to `div` because of an interactive child, every plain `<ListItem>`
-  // sibling defaulting to `<li>` would be just as invalid (only valid inside `<ul>`/`<ol>`/
-  // `<menu>`) — so give each `ListItem` child the same `div` treatment the auto-generated items
-  // above already get, unless it set its own `component`. Other child types are left untouched
-  // — this is only meaningful for `List`'s own list items.
-  const renderedChildren =
-    autoContent ??
-    (isListSemantic
-      ? children
-      : Children.map(children, (child) =>
-          isValidElement<{ component?: string | ElementType }>(child) && child.type === ListItem
-            ? React.cloneElement(child, { component: child.props.component ?? 'div' })
-            : child
-        ))
-
-  return (
-    <Component className={_className} {...rest} ref={ref}>
-      {renderedChildren}
-    </Component>
-  )
-}
-
-export const List = createPolymorphicComponent<ListComponent>(
-  ListRender as ForwardRefRenderFunction<Element, ListProps<ElementType>>,
-  'List'
-)

package/src/components/list/ListItem.tsx

@@ -1,91 +0,0 @@
-import React, { ElementType, ForwardRefRenderFunction, ReactElement } from 'react'
-import classNames from 'classnames'
-
-import { ContextColor } from '../../types'
-import {
-  createPolymorphicComponent,
-  PolymorphicComponentProps,
-  PolymorphicRef
-} from '../../utils/polymorphic'
-import { Link } from '../link/Link'
-
-type ListItemOwnProps<C extends ElementType> = {
-  /**
-   * Toggle the active state for the component.
-   */
-  active?: boolean
-  /**
-   * A string of all className you want applied to the component.
-   */
-  className?: string
-  /**
-   * Sets the color of the component to one of Chassis context colors.
-   */
-  color?: ContextColor
-  /**
-   * Toggle the disabled state for the component.
-   */
-  disabled?: boolean
-  /**
-   * Component used for the root node. Either a string to use a HTML element or a component.
-   */
-  component?: C
-  /**
-   * The href attribute specifies the URL of the page the link goes to. Only applicable when
-   * `component` is `"a"`.
-   */
-  href?: string
-}
-
-export type ListItemProps<C extends ElementType = 'li'> = PolymorphicComponentProps<
-  C,
-  ListItemOwnProps<C>
->
-
-type ListItemComponent = (<C extends ElementType = 'li'>(
-  props: ListItemProps<C> & { ref?: PolymorphicRef<C> }
-) => ReactElement | null) & { displayName?: string }
-
-function ListItemRender<C extends ElementType = 'li'>(
-  { children, active, className, disabled, color, component, ...rest }: ListItemProps<C>,
-  ref: PolymorphicRef<C>
-) {
-  const tag = component ?? 'li'
-  const isInteractive = tag === 'a' || tag === 'button'
-
-  const _className = classNames(
-    'list-item',
-    color && 'context',
-    color,
-    {
-      'list-action': isInteractive,
-      active,
-      disabled
-    },
-    className
-  )
-
-  const Component = (isInteractive ? Link : tag) as ElementType
-
-  const finalRest = {
-    ...(isInteractive && {
-      active,
-      disabled,
-      component: tag
-    }),
-    ...(active && { 'aria-current': 'page' }),
-    ...(disabled && { 'aria-disabled': true }),
-    ...rest
-  }
-
-  return (
-    <Component className={_className} {...finalRest} ref={ref}>
-      {children}
-    </Component>
-  )
-}
-
-export const ListItem = createPolymorphicComponent<ListItemComponent>(
-  ListItemRender as ForwardRefRenderFunction<Element, ListItemProps<ElementType>>,
-  'ListItem'
-)

package/src/components/list/index.ts

@@ -1,8 +0,0 @@
-'use client'
-
-import '../../utils/suppressFocusRingGlobally'
-
-export { List } from './List'
-export type { ListProps, ListItemDef } from './List'
-export { ListItem } from './ListItem'
-export type { ListItemProps } from './ListItem'

package/src/components/menu/Menu.tsx

@@ -1,408 +0,0 @@
-import React, {
-  createContext,
-  ElementType,
-  ForwardRefRenderFunction,
-  Fragment,
-  ReactElement,
-  useEffect,
-  useMemo,
-  useRef
-} from 'react'
-import classNames from 'classnames'
-import { AriaButtonProps, useMenuTrigger, useOverlayPosition } from 'react-aria'
-import { useMenuTriggerState } from 'react-stately'
-
-import { useForkedRef, useIsomorphicLayoutEffect } from '../../hooks'
-import { executeAfterTransition } from '../../utils/dialogTransition'
-import {
-  Placement,
-  resolveMenuOverlayPositioning,
-  toAriaPlacement
-} from '../../utils/overlayPlacement'
-import {
-  createPolymorphicComponent,
-  PolymorphicComponentProps,
-  PolymorphicRef
-} from '../../utils/polymorphic'
-
-export type { Placement }
-export type MenuFocusStrategy = 'first' | 'last'
-
-export type MenuAutoClose = boolean | 'inside' | 'outside'
-
-type MenuOwnProps<C extends ElementType> = {
-  /**
-   * Controls which clicks close the menu. `true` closes on any click inside or outside.
-   * `false` requires a programmatic `visible` change. `'inside'` closes only on click inside
-   * the menu. `'outside'` closes only on click outside the menu.
-   */
-  autoClose?: MenuAutoClose
-  /**
-   * A string of all className you want applied to the base component.
-   */
-  className?: string
-  /**
-   * Component used for the root node. Either a string to use a HTML element or a component.
-   * Defaults to `Fragment` — `MenuToggle`/`MenuList` render with no wrapping element, so
-   * they land as direct children of whatever contains the `Menu`. This matters inside
-   * `ButtonGroup`/`InputGroup`, whose CSS expects the toggle button and menu panel as direct
-   * children rather than nested inside an intermediate node.
-   *
-   * Pass an actual element (e.g. `"div"`, or `"li"` for a navbar item) to opt back into a
-   * wrapper — needed if you want to apply `className`/`style`/other rest props to a container
-   * around the whole menu, for semantic wrapping like a nav `<li>`, or for `reference="parent"`,
-   * which positions off this wrapper and has nothing to measure against without one.
-   */
-  component?: C
-  /**
-   * Teleports the menu panel to a container element on open. Accepts an element reference, or
-   * `true` to append to `document.body`.
-   */
-  container?: boolean | Element
-  /**
-   * Distance between the menu and its reference element, as `[skidding, distance]` in pixels.
-   */
-  offset?: [number, number]
-  /**
-   * Callback fired when the menu requests to be hidden.
-   */
-  onHide?: () => void
-  /**
-   * Callback fired after the menu finishes hiding.
-   */
-  onHidden?: () => void
-  /**
-   * Callback fired when the menu requests to be shown.
-   */
-  onShow?: () => void
-  /**
-   * Callback fired after the menu finishes showing.
-   */
-  onShown?: () => void
-  /**
-   * Initial placement. Chassis will flip it to keep the menu in view.
-   *
-   * @type 'top' | 'top-start' | 'top-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'left' | 'left-start' | 'left-end' | 'right' | 'right-start' | 'right-end'
-   */
-  placement?: Placement
-  /**
-   * Reference element used for positioning. `'toggle'` uses the trigger. `'parent'` uses this
-   * component's own rendered element, useful for split buttons and button groups.
-   */
-  reference?: 'toggle' | 'parent'
-  /**
-   * Toggle the visibility of the menu component.
-   */
-  visible?: boolean
-}
-
-export type MenuProps<C extends ElementType = typeof Fragment> = PolymorphicComponentProps<
-  C,
-  MenuOwnProps<C>
->
-
-type MenuComponent = (<C extends ElementType = typeof Fragment>(
-  props: MenuProps<C> & { ref?: PolymorphicRef<C> }
-) => ReactElement | null) & { displayName?: string }
-
-export interface MenuContextProps {
-  autoClose: MenuAutoClose
-  close: () => void
-  container?: boolean | Element
-  focusStrategy: MenuFocusStrategy | null
-  hide: () => void
-  menuId: string
-  menuStyle: React.CSSProperties
-  menuTriggerProps: AriaButtonProps
-  overlayRef: React.MutableRefObject<HTMLElement | null>
-  placementAttr: string
-  reference: 'toggle' | 'parent'
-  /**
-   * Registers (or, passing `null`, unregisters) a nested `MenuSubmenu`'s own portaled panel
-   * element, so this `Menu`'s outside/inside click-dismiss logic recognizes clicks landing in it
-   * as "inside" the menu — see `MenuSubmenu`'s own use for why this is necessary: its panel
-   * portals straight to `document.body`, structurally detached from this menu's own DOM subtree.
-   */
-  registerOverlay: (id: string, node: HTMLElement | null) => void
-  show: (focusStrategy?: MenuFocusStrategy | null) => void
-  targetRef: React.MutableRefObject<HTMLElement | null>
-  toggle: (focusStrategy?: MenuFocusStrategy | null) => void
-  toggleNodeRef: React.MutableRefObject<HTMLElement | null>
-  triggerId: string
-  visible: boolean
-}
-
-// A fully-shaped no-op default so a `MenuToggle`/`MenuList`/`MenuSubmenu` rendered without a
-// `Menu` ancestor (or in an environment where context can't cross a component boundary, e.g.
-// some static-site prerenderers) degrades to an inert, always-closed menu instead of throwing.
-const noop = () => undefined
-
-const defaultMenuContext: MenuContextProps = {
-  autoClose: true,
-  close: noop,
-  focusStrategy: null,
-  hide: noop,
-  menuId: '',
-  menuStyle: {},
-  menuTriggerProps: {},
-  overlayRef: { current: null },
-  placementAttr: 'bottom-start',
-  reference: 'toggle',
-  registerOverlay: noop,
-  show: noop,
-  targetRef: { current: null },
-  toggle: noop,
-  toggleNodeRef: { current: null },
-  triggerId: '',
-  visible: false
-}
-
-export const MenuContext = createContext(defaultMenuContext)
-
-function MenuRender<C extends ElementType = typeof Fragment>(
-  {
-    children,
-    autoClose = true,
-    className,
-    component,
-    container,
-    offset: offsetProp = [0, 2],
-    onHide,
-    onHidden,
-    onShow,
-    onShown,
-    placement = 'bottom-start',
-    reference = 'toggle',
-    visible,
-    ...rest
-  }: MenuProps<C>,
-  ref: PolymorphicRef<C>
-) {
-  const Component = component ?? (Fragment as ElementType)
-  const wrapperRef = useRef<HTMLElement>(null)
-  const forkedRef = useForkedRef(ref, wrapperRef)
-  const toggleNodeRef = useRef<HTMLElement | null>(null)
-  const targetRef = useRef<HTMLElement | null>(null)
-  const overlayRef = useRef<HTMLElement | null>(null)
-  // Portaled `MenuSubmenu` panels register themselves here (see `registerOverlay` below and
-  // `MenuSubmenu`'s own ref callback) so `handleDismiss` can recognize clicks inside them as
-  // "inside" this menu despite living outside `overlayRef.current`'s own DOM subtree.
-  const submenuOverlaysRef = useRef<Map<string, HTMLElement>>(new Map())
-  const registerOverlay = (id: string, node: HTMLElement | null) => {
-    if (node) submenuOverlaysRef.current.set(id, node)
-    else submenuOverlaysRef.current.delete(id)
-  }
-
-  const state = useMenuTriggerState({ defaultOpen: !!visible })
-  const { menuTriggerProps, menuProps } = useMenuTrigger<unknown>({}, state, toggleNodeRef)
-
-  // Sync-on-change, not strictly controlled — matches `Modal`'s `visible` semantics.
-  // Internal `show`/`hide`/`toggle` calls (from `MenuToggle`, autoClose dismissal, etc.)
-  // still work freely between prop changes; `visible` only re-asserts the open state when
-  // its own value actually changes.
-  useEffect(() => {
-    if (visible === undefined) return
-    if (visible) state.open()
-    else state.close()
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [visible])
-
-  useIsomorphicLayoutEffect(() => {
-    if (reference === 'parent') {
-      targetRef.current = wrapperRef.current
-    }
-  }, [reference])
-
-  // `onShown`/`onHidden` wait for chassis-css's own opacity/transform transition on `.menu`
-  // (see `_menu.scss`) to actually finish, matching `Modal`'s identically-worded "requests to
-  // be shown" vs "finishes showing" contract (`Modal.tsx`'s own `executeAfterTransition` use).
-  // `overlayRef.current` is `MenuList`'s root element — already in the DOM and already
-  // reflecting the new `.show` class by the time this effect runs, since React commits the
-  // render before passive effects execute. Falls back to firing synchronously when no
-  // `MenuList` is mounted to measure (nothing to transition, so nothing to wait for).
-  //
-  // All four report *transitions*, so none fires for the initial commit — mounting closed is not
-  // a hide. Without this guard, mounting fired `onHide` (and scheduled `onHidden`) for every menu
-  // on the page before `onShow` had ever fired once, which `Menu.spec.tsx` used to have to
-  // `mockClear()` past.
-  const mountedRef = useRef(false)
-
-  useEffect(() => {
-    const overlay = overlayRef.current
-    const isInitialCommit = !mountedRef.current
-    mountedRef.current = true
-    if (isInitialCommit) return undefined
-
-    if (state.isOpen) {
-      onShow?.()
-      if (!overlay) {
-        onShown?.()
-        return undefined
-      }
-      return executeAfterTransition(overlay, () => onShown?.(), true)
-    }
-
-    onHide?.()
-    if (!overlay) {
-      onHidden?.()
-      return undefined
-    }
-    return executeAfterTransition(overlay, () => onHidden?.(), true)
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [state.isOpen])
-
-  const { overlayProps, placement: resolvedPlacement } = useOverlayPosition({
-    targetRef,
-    overlayRef,
-    placement: toAriaPlacement(placement),
-    offset: offsetProp[1],
-    crossOffset: offsetProp[0],
-    containerPadding: 8,
-    isOpen: state.isOpen,
-    // `useOverlayPosition` closes on any window scroll via a backward-compat `WeakMap` that
-    // `useMenuTrigger` populates for `targetRef.current` (see `MenuToggle`'s `setRefs`).
-    // Passing `null` opts out so the menu repositions with its trigger instead of vanishing —
-    // matching `Autocomplete`/`Combobox`, neither of which is wired into that map.
-    onClose: null
-  })
-
-  const { menuStyle, placementAttr } = resolveMenuOverlayPositioning(
-    overlayProps.style,
-    placement,
-    resolvedPlacement
-  )
-
-  const show = (focusStrategy?: MenuFocusStrategy | null) => state.open(focusStrategy)
-  const hide = () => state.close()
-  const toggleVisible = (focusStrategy?: MenuFocusStrategy | null) => state.toggle(focusStrategy)
-  const close = () => {
-    state.close()
-    toggleNodeRef.current?.focus()
-  }
-
-  // Deferred so the click that opened the menu doesn't immediately close it, and scoped
-  // to match menu.js's `clearMenus`: skip the toggle itself, honor `inside`/`outside`
-  // modes, and let Tab or clicks on form controls inside the menu pass through untouched.
-  useEffect(() => {
-    if (!state.isOpen || autoClose === false) return undefined
-
-    const handleDismiss = (event: MouseEvent | KeyboardEvent) => {
-      if (event instanceof KeyboardEvent && event.key !== 'Tab') return
-
-      const target = event.target as Node
-      const toggleNode = toggleNodeRef.current
-      const menuNode = overlayRef.current
-
-      if (toggleNode?.contains(target)) return
-
-      const isMenuTarget =
-        !!menuNode?.contains(target) ||
-        Array.from(submenuOverlaysRef.current.values()).some((node) => node.contains(target))
-
-      if (autoClose === 'inside' && !isMenuTarget) return
-      if (autoClose === 'outside' && isMenuTarget) return
-
-      if (
-        isMenuTarget &&
-        ((event instanceof KeyboardEvent && event.key === 'Tab') ||
-          /input|select|option|textarea|form/i.test((target as HTMLElement).tagName ?? ''))
-      ) {
-        return
-      }
-
-      hide()
-    }
-
-    const id = window.setTimeout(() => {
-      window.addEventListener('click', handleDismiss)
-      window.addEventListener('keyup', handleDismiss)
-    })
-
-    return () => {
-      window.clearTimeout(id)
-      window.removeEventListener('click', handleDismiss)
-      window.removeEventListener('keyup', handleDismiss)
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [state.isOpen, autoClose])
-
-  // Escape should always close the menu, independent of `autoClose`'s inside/outside/false
-  // modes. `MenuList`'s own `onKeyDown` handling only fires when focus is already inside the
-  // panel (e.g. opened via ArrowDown) — a mouse-press open via `useMenuTrigger` leaves focus on
-  // the trigger button, where that handler is unreachable. Listening on `window` catches Escape
-  // regardless of where focus currently is.
-  useEffect(() => {
-    if (!state.isOpen) return undefined
-
-    const handleEscape = (event: KeyboardEvent) => {
-      if (event.key !== 'Escape') return
-      close()
-    }
-
-    window.addEventListener('keydown', handleEscape)
-
-    return () => {
-      window.removeEventListener('keydown', handleEscape)
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [state.isOpen])
-
-  const contextValue: MenuContextProps = useMemo(
-    () => ({
-      autoClose,
-      close,
-      container,
-      focusStrategy: state.focusStrategy as MenuFocusStrategy | null,
-      hide,
-      menuId: menuProps.id ?? '',
-      menuStyle,
-      menuTriggerProps,
-      overlayRef,
-      placementAttr,
-      reference,
-      registerOverlay,
-      show,
-      targetRef,
-      toggle: toggleVisible,
-      toggleNodeRef,
-      triggerId: menuTriggerProps.id ?? '',
-      visible: state.isOpen
-    }),
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [
-      autoClose,
-      container,
-      state.focusStrategy,
-      menuProps.id,
-      menuStyle,
-      menuTriggerProps,
-      placementAttr,
-      reference,
-      state.isOpen
-    ]
-  )
-
-  return (
-    <MenuContext.Provider value={contextValue}>
-      {Component === Fragment ? (
-        children
-      ) : (
-        // `show` mirrors vanilla menu.js's `this._parent.classList.add('show')` — needed for
-        // e.g. `.nav-item.show .nav-link` to put a `NavLink`-rooted `MenuToggle` into its
-        // pressed look while open, since a bare `.nav-link.show` has no styling of its own.
-        <Component
-          className={classNames(className, { show: state.isOpen })}
-          {...rest}
-          ref={forkedRef}
-        >
-          {children}
-        </Component>
-      )}
-    </MenuContext.Provider>
-  )
-}
-
-export const Menu = createPolymorphicComponent<MenuComponent>(
-  MenuRender as ForwardRefRenderFunction<Element, MenuProps<ElementType>>,
-  'Menu'
-)