@chassis-ui/react 0.2.0 → 0.4.0

package/src/components/menu/MenuDivider.tsx

@@ -1,19 +0,0 @@
-import React, { forwardRef, HTMLAttributes } from 'react'
-import classNames from 'classnames'
-
-export interface MenuDividerProps extends HTMLAttributes<HTMLHRElement> {
-  /**
-   * A string of all className you want applied to the component.
-   */
-  className?: string
-}
-
-export const MenuDivider = forwardRef<HTMLHRElement, MenuDividerProps>(
-  ({ className, ...rest }, ref) => {
-    const _className = classNames('menu-divider', className)
-
-    return <hr className={_className} {...rest} ref={ref} />
-  }
-)
-
-MenuDivider.displayName = 'MenuDivider'

package/src/components/menu/MenuHeader.tsx

@@ -1,55 +0,0 @@
-import React, { ElementType, ForwardRefRenderFunction, ReactElement } from 'react'
-import classNames from 'classnames'
-
-import {
-  createPolymorphicComponent,
-  PolymorphicComponentProps,
-  PolymorphicRef
-} from '../../utils/polymorphic'
-
-type MenuHeaderOwnProps<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.
-   */
-  component?: C
-  /**
-   * ARIA role applied to the root node. Defaults to `'presentation'` — see the render function
-   * for why.
-   */
-  role?: React.AriaRole
-}
-
-export type MenuHeaderProps<C extends ElementType = 'h4'> = PolymorphicComponentProps<
-  C,
-  MenuHeaderOwnProps<C>
->
-
-type MenuHeaderComponent = (<C extends ElementType = 'h4'>(
-  props: MenuHeaderProps<C> & { ref?: PolymorphicRef<C> }
-) => ReactElement | null) & { displayName?: string }
-
-function MenuHeaderRender<C extends ElementType = 'h4'>(
-  { children, className, component, role = 'presentation', ...rest }: MenuHeaderProps<C>,
-  ref: PolymorphicRef<C>
-) {
-  const Component = component ?? 'h4'
-  const _className = classNames('menu-header', className)
-
-  // Always rendered as a direct child of `role="menu"` (see MenuList) — ARIA's menu role only
-  // permits menuitem/group/separator children, so a bare heading fails aria-required-children.
-  // `role="presentation"` opts the element itself out without hiding its text content.
-  return (
-    <Component className={_className} role={role} {...rest} ref={ref}>
-      {children}
-    </Component>
-  )
-}
-
-export const MenuHeader = createPolymorphicComponent<MenuHeaderComponent>(
-  MenuHeaderRender as ForwardRefRenderFunction<Element, MenuHeaderProps<ElementType>>,
-  'MenuHeader'
-)

package/src/components/menu/MenuItem.tsx

@@ -1,85 +0,0 @@
-import React, {
-  ElementType,
-  ForwardRefRenderFunction,
-  MouseEvent,
-  ReactElement,
-  ReactNode
-} from 'react'
-import classNames from 'classnames'
-
-import { createPolymorphicComponent, PolymorphicRef } from '../../utils/polymorphic'
-import { renderMenuItemContent } from '../../utils/renderMenuItemContent'
-import { LinkProps, Link } from '../link/Link'
-
-type MenuItemOwnProps = {
-  /**
-   * A string of all className you want applied to the component.
-   */
-  className?: string
-  /**
-   * Secondary line of text rendered below `children` (`.menu-item-description`).
-   */
-  description?: ReactNode
-  /**
-   * Icon rendered at the item's leading edge (`.menu-item-icon`).
-   */
-  icon?: ReactNode
-  /**
-   * Marks the item as the current selection in a choice list. Renders in a heavier font weight.
-   * Combine with a manually-composed `.menu-item-check` icon (in `children`, or via `icon` on a
-   * plain, non-selection item) to also show a checkmark — this prop alone doesn't add one, so
-   * existing font-weight-only usage keeps rendering unchanged.
-   */
-  selected?: boolean
-}
-
-export type MenuItemProps<C extends ElementType = 'a'> = LinkProps<C> & MenuItemOwnProps
-
-type MenuItemComponent = (<C extends ElementType = 'a'>(
-  props: MenuItemProps<C> & { ref?: PolymorphicRef<C> }
-) => ReactElement | null) & { displayName?: string }
-
-function MenuItemRender<C extends ElementType = 'a'>(
-  {
-    children,
-    className,
-    component,
-    description,
-    href,
-    icon,
-    onClick,
-    selected,
-    ...rest
-  }: MenuItemProps<C>,
-  ref: PolymorphicRef<C>
-) {
-  const _className = classNames('menu-item', { selected }, className)
-
-  // `href="#"` is a common placeholder for menu items that act via `onClick` rather than
-  // real navigation. Left alone, a plain anchor click still navigates to the empty fragment,
-  // which scrolls the page to the top — so we suppress that default for the placeholder case
-  // only, leaving real same-page anchors (`href="#some-id"`) free to navigate as expected.
-  const handleClick = (event: MouseEvent<HTMLAnchorElement | HTMLButtonElement>) => {
-    if (href === '#') event.preventDefault()
-    onClick?.(event)
-  }
-
-  return (
-    <Link
-      role="menuitem"
-      component={component as ElementType}
-      href={href}
-      onClick={handleClick}
-      {...(rest as Record<string, unknown>)}
-      className={_className}
-      ref={ref as PolymorphicRef<ElementType>}
-    >
-      {renderMenuItemContent({ icon, label: children, description })}
-    </Link>
-  )
-}
-
-export const MenuItem = createPolymorphicComponent<MenuItemComponent>(
-  MenuItemRender as ForwardRefRenderFunction<Element, MenuItemProps<ElementType>>,
-  'MenuItem'
-)

package/src/components/menu/MenuItemDef.ts

@@ -1,83 +0,0 @@
-import { ReactNode } from 'react'
-import { Key } from 'react-stately'
-
-export interface MenuItemDef {
-  /**
-   * Discriminates this entry from `MenuHeaderDef`/`MenuDividerDef` in a `MenuItemsDef`
-   * array. Omit for a normal item — it's the default.
-   */
-  type?: 'item'
-  /**
-   * React key for this item.
-   */
-  id: Key
-  /**
-   * Label content for the item.
-   */
-  label: ReactNode
-  /**
-   * Text used for filtering/typeahead. Required when `label` isn't a plain string — components
-   * that filter (e.g. `Combobox`, `Autocomplete`) can't derive it from rich content.
-   */
-  textValue?: string
-  /**
-   * URL for the item, when it acts as a link.
-   */
-  href?: string
-  /**
-   * Callback fired when the item is activated.
-   */
-  onClick?: () => void
-  /**
-   * Marks the item as disabled — it can't be clicked or reached via the keyboard.
-   */
-  disabled?: boolean
-  /**
-   * Marks the item as the current selection in a choice list.
-   */
-  selected?: boolean
-  /**
-   * Icon rendered at the item's leading edge (`.menu-item-icon`).
-   */
-  icon?: ReactNode
-  /**
-   * Secondary line of text rendered below the label (`.menu-item-description`).
-   */
-  description?: ReactNode
-}
-
-export interface MenuHeaderDef {
-  /**
-   * Discriminates this entry as a non-interactive group header.
-   */
-  type: 'header'
-  /**
-   * React key for this entry.
-   */
-  id: Key
-  /**
-   * Header content.
-   */
-  label: ReactNode
-}
-
-export interface MenuDividerDef {
-  /**
-   * Discriminates this entry as a divider.
-   */
-  type: 'divider'
-  /**
-   * React key for this entry.
-   */
-  id: Key
-}
-
-/**
- * A flat array of item/header/divider definitions for data-driven rendering — headers and
- * dividers are interleaved with items in authoring order, matching how chassis-css itself
- * renders grouped items (flat DOM siblings under `.menu`, no wrapping element per group).
- *
- * Covers flat items, headers, and dividers only — nested/recursive submenus aren't
- * representable here. Compose with `children`/`MenuSubmenu` directly for those.
- */
-export type MenuItemsDef = (MenuItemDef | MenuHeaderDef | MenuDividerDef)[]

package/src/components/menu/MenuList.tsx

@@ -1,142 +0,0 @@
-import React, {
-  ElementType,
-  ForwardRefRenderFunction,
-  ReactElement,
-  ReactNode,
-  useContext,
-  useEffect
-} from 'react'
-import { createPortal } from 'react-dom'
-import classNames from 'classnames'
-
-import { useForkedRef } from '../../hooks'
-import { renderMenuItemContent } from '../../utils/renderMenuItemContent'
-import {
-  createPolymorphicComponent,
-  PolymorphicComponentProps,
-  PolymorphicRef
-} from '../../utils/polymorphic'
-import { MenuContext } from './Menu'
-import { MenuDivider } from './MenuDivider'
-import { MenuHeader } from './MenuHeader'
-import { MenuItem } from './MenuItem'
-import { MenuItemsDef } from './MenuItemDef'
-import { focusMenuItem, getMenuItems, handleMenuKeyDown } from './menuNavigation'
-import { SubmenuGroupContext, useSubmenuGroupProvider } from './submenuGroup'
-
-type MenuListOwnProps<C extends ElementType> = {
-  /**
-   * 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.
-   */
-  component?: C
-  /**
-   * Array of item/header/divider definitions for data-driven rendering. When provided, children
-   * are ignored. Covers flat items, headers, and dividers only — for nested submenus, compose
-   * with `children` and `MenuSubmenu` instead.
-   */
-  items?: MenuItemsDef
-}
-
-export type MenuListProps<C extends ElementType = 'div'> = PolymorphicComponentProps<
-  C,
-  MenuListOwnProps<C>
->
-
-type MenuListComponent = (<C extends ElementType = 'div'>(
-  props: MenuListProps<C> & { ref?: PolymorphicRef<C> }
-) => ReactElement | null) & { displayName?: string }
-
-const renderMenuItemDef = (def: MenuItemsDef[number]): ReactNode => {
-  if (def.type === 'header') {
-    return <MenuHeader key={def.id}>{def.label}</MenuHeader>
-  }
-  if (def.type === 'divider') {
-    return <MenuDivider key={def.id} />
-  }
-  return (
-    <MenuItem
-      key={def.id}
-      component={def.href ? 'a' : 'button'}
-      href={def.href}
-      disabled={def.disabled}
-      selected={def.selected}
-      onClick={def.onClick}
-    >
-      {renderMenuItemContent({
-        icon: def.icon,
-        label: def.label,
-        description: def.description,
-        selected: def.selected
-      })}
-    </MenuItem>
-  )
-}
-
-function MenuListRender<C extends ElementType = 'div'>(
-  { children, className, component, items, onKeyDown, ...rest }: MenuListProps<C>,
-  ref: PolymorphicRef<C>
-) {
-  const Component = component ?? 'div'
-  const {
-    close,
-    container,
-    focusStrategy,
-    menuId,
-    menuStyle,
-    overlayRef,
-    placementAttr,
-    triggerId,
-    visible
-  } = useContext(MenuContext)
-  const forkedRef = useForkedRef(ref, overlayRef)
-  const submenuGroup = useSubmenuGroupProvider()
-
-  // ArrowDown/ArrowUp on the trigger opens the menu with a focus strategy (see `Menu`'s
-  // `useMenuTrigger` wiring) — this is where that intent actually lands, since we're not
-  // adopting `useMenu`'s own collection-aware auto-focus.
-  useEffect(() => {
-    if (!visible || !focusStrategy) return
-    focusMenuItem(getMenuItems(overlayRef.current), focusStrategy === 'last' ? 'last' : 'first')
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [visible, focusStrategy])
-
-  const handleKeyDown = (event: React.KeyboardEvent<HTMLElement>) => {
-    handleMenuKeyDown(event, { onEscape: close })
-    onKeyDown?.(event as React.KeyboardEvent<HTMLDivElement>)
-  }
-
-  const content = (
-    <Component
-      role="menu"
-      id={menuId}
-      aria-labelledby={triggerId}
-      className={classNames('menu', { show: visible }, className)}
-      style={menuStyle}
-      data-cx-placement={placementAttr}
-      aria-hidden={!visible}
-      {...rest}
-      onKeyDown={handleKeyDown}
-      ref={forkedRef}
-    >
-      <SubmenuGroupContext.Provider value={submenuGroup}>
-        {items ? items.map(renderMenuItemDef) : children}
-      </SubmenuGroupContext.Provider>
-    </Component>
-  )
-
-  if (container) {
-    if (typeof window === 'undefined') return null
-    return createPortal(content, container === true ? document.body : container)
-  }
-
-  return content
-}
-
-export const MenuList = createPolymorphicComponent<MenuListComponent>(
-  MenuListRender as ForwardRefRenderFunction<Element, MenuListProps<ElementType>>,
-  'MenuList'
-)

package/src/components/menu/MenuSubmenu.tsx

@@ -1,284 +0,0 @@
-import React, {
-  forwardRef,
-  HTMLAttributes,
-  ReactNode,
-  useCallback,
-  useContext,
-  useEffect,
-  useId,
-  useRef,
-  useState
-} from 'react'
-import { createPortal } from 'react-dom'
-import classNames from 'classnames'
-import { useLocale, useOverlayPosition } from 'react-aria'
-
-import { MenuContext } from './Menu'
-import {
-  Placement,
-  resolveMenuOverlayPositioning,
-  toAriaPlacement
-} from '../../utils/overlayPlacement'
-import { focusMenuItem, getMenuItems, handleMenuKeyDown } from './menuNavigation'
-import { SubmenuActionsContext, SubmenuGroupContext, useSubmenuGroupProvider } from './submenuGroup'
-
-export interface MenuSubmenuProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onSelect'> {
-  /**
-   * MenuSubmenu activation mode on hover-capable devices. `'click'` activates on click only.
-   * `'hover'` activates on hover only. `'both'` (the default) activates on both. Touch
-   * devices always use tap regardless of this setting.
-   */
-  activation?: 'click' | 'hover' | 'both'
-  /**
-   * A string of all className you want applied to the base component.
-   */
-  className?: string
-  /**
-   * Prevents the submenu from opening.
-   */
-  disabled?: boolean
-  /**
-   * Distance between the nested menu and the trigger, as `[skidding, distance]` in pixels.
-   */
-  offset?: [number, number]
-  /**
-   * Placement of the nested menu relative to the trigger. Defaults to cascading in the reading
-   * direction — `'right-start'` under LTR locales, `'left-start'` under RTL ones (see
-   * `useLocale`) — matching native OS/browser submenu behavior. An explicit value always wins
-   * over that locale-based default.
-   */
-  placement?: Placement
-  /**
-   * Switches to a view-replacement pattern below the `sm` breakpoint. Pair with a
-   * `MenuSubmenuBack` as the first item of the nested menu.
-   */
-  stacked?: boolean
-  /**
-   * Milliseconds before closing the submenu when the pointer leaves it.
-   */
-  submenuDelay?: number
-  /**
-   * Content of the `.menu-item` trigger that opens the submenu.
-   */
-  trigger: ReactNode
-}
-
-export const MenuSubmenu = forwardRef<HTMLDivElement, MenuSubmenuProps>(
-  (
-    {
-      children,
-      activation = 'both',
-      className,
-      disabled,
-      offset: offsetProp = [-4, 0],
-      placement,
-      stacked,
-      submenuDelay = 100,
-      trigger,
-      ...rest
-    },
-    ref
-  ) => {
-    const id = useId()
-    const triggerId = `${id}-trigger`
-    const menuId = `${id}-menu`
-    const [visible, setVisible] = useState(false)
-    // Portaling is only safe once mounted on the client: during SSR (and the initial client
-    // hydration pass, which must match the server-rendered markup) the panel renders inline next
-    // to its trigger, then moves to `document.body` on the next render once this flips to true.
-    const [mounted, setMounted] = useState(false)
-    const closeTimeoutRef = useRef<number | undefined>(undefined)
-    const focusFirstRafRef = useRef<number | undefined>(undefined)
-    const triggerRef = useRef<HTMLButtonElement | null>(null)
-    const overlayRef = useRef<HTMLElement | null>(null)
-    const parentGroup = useContext(SubmenuGroupContext)
-    const ownGroup = useSubmenuGroupProvider()
-    const { registerOverlay, visible: parentMenuVisible } = useContext(MenuContext)
-    const { direction } = useLocale()
-    const isRtl = direction === 'rtl'
-    const effectivePlacement = placement ?? (isRtl ? 'left-start' : 'right-start')
-
-    const { overlayProps, placement: resolvedPlacement } = useOverlayPosition({
-      targetRef: triggerRef,
-      overlayRef,
-      // Viewport-relative (matching the portal below): the trigger lives inside the parent
-      // menu's own floated panel, and `useOverlayPosition` measures against the overlay's real
-      // containing block — since the panel portals straight to `document.body`, that resolves
-      // the same way a `fixed`-strategy engine would.
-      placement: toAriaPlacement(effectivePlacement),
-      offset: offsetProp[1],
-      crossOffset: offsetProp[0],
-      containerPadding: 8,
-      isOpen: visible,
-      // See `useOverlayPlacement`'s comment for why this needs to be explicit `null`, not left
-      // unset — matches the same fix already applied to `Autocomplete`/`Combobox`/`Menu`/`Popover`.
-      onClose: null
-    })
-
-    const { menuStyle, placementAttr } = resolveMenuOverlayPositioning(
-      overlayProps.style,
-      effectivePlacement,
-      resolvedPlacement
-    )
-
-    const clearCloseTimeout = useCallback(() => {
-      if (closeTimeoutRef.current !== undefined) {
-        window.clearTimeout(closeTimeoutRef.current)
-        closeTimeoutRef.current = undefined
-      }
-    }, [])
-
-    const cancelFocusFirstRaf = useCallback(() => {
-      if (focusFirstRafRef.current !== undefined) {
-        cancelAnimationFrame(focusFirstRafRef.current)
-        focusFirstRafRef.current = undefined
-      }
-    }, [])
-
-    const close = useCallback(() => {
-      clearCloseTimeout()
-      cancelFocusFirstRaf()
-      setVisible(false)
-    }, [clearCloseTimeout, cancelFocusFirstRaf])
-
-    const open = () => {
-      if (disabled || visible) return
-      clearCloseTimeout()
-      parentGroup?.notifyOpen(id)
-      setVisible(true)
-    }
-
-    const scheduleClose = () => {
-      clearCloseTimeout()
-      closeTimeoutRef.current = window.setTimeout(close, submenuDelay)
-    }
-
-    useEffect(() => parentGroup?.register(id, close), [parentGroup, id, close])
-    useEffect(() => clearCloseTimeout, [clearCloseTimeout])
-    useEffect(() => cancelFocusFirstRaf, [cancelFocusFirstRaf])
-    useEffect(() => setMounted(true), [])
-
-    // The submenu's own open state is local and doesn't otherwise hear about its ancestor
-    // `Menu` closing (via Escape, outside click, etc.) — without this it's left open and
-    // fully visible (it's portaled to `document.body`, so nothing hides it for free) even
-    // after the menu it belongs to has disappeared.
-    useEffect(() => {
-      if (!parentMenuVisible) close()
-    }, [parentMenuVisible, close])
-
-    const supportsHover =
-      typeof window !== 'undefined' &&
-      !!window.matchMedia &&
-      window.matchMedia('(hover: hover)').matches
-    const hoverEnabled = supportsHover && (activation === 'hover' || activation === 'both')
-    const clickEnabled = activation === 'click' || activation === 'both'
-
-    const openAndFocusFirst = () => {
-      open()
-      cancelFocusFirstRaf()
-      focusFirstRafRef.current = requestAnimationFrame(() => {
-        focusFirstRafRef.current = undefined
-        focusMenuItem(getMenuItems(overlayRef.current), 'first')
-      })
-    }
-
-    const closeAndRefocusTrigger = () => {
-      close()
-      triggerRef.current?.focus()
-    }
-
-    const handleTriggerClick = (event: React.MouseEvent<HTMLButtonElement>) => {
-      if (!clickEnabled || disabled) return
-      event.preventDefault()
-      event.stopPropagation()
-      visible ? close() : openAndFocusFirst()
-    }
-
-    // A submenu cascades toward the reading direction, so the arrow key that opens it (and the
-    // one its own item list closes on, below) mirror too: ArrowRight/ArrowLeft under LTR,
-    // ArrowLeft/ArrowRight under RTL.
-    const openKey = isRtl ? 'ArrowLeft' : 'ArrowRight'
-
-    const handleTriggerKeyDown = (event: React.KeyboardEvent<HTMLButtonElement>) => {
-      if (disabled) return
-      if (event.key === 'Enter' || event.key === ' ' || event.key === openKey) {
-        event.preventDefault()
-        event.stopPropagation()
-        openAndFocusFirst()
-      }
-    }
-
-    const actionsValue = { close: closeAndRefocusTrigger }
-
-    return (
-      <div className={classNames('submenu', { show: visible }, className)} {...rest} ref={ref}>
-        <button
-          type="button"
-          id={triggerId}
-          role="menuitem"
-          className="menu-item"
-          aria-expanded={visible}
-          aria-haspopup="true"
-          aria-controls={visible ? menuId : undefined}
-          disabled={disabled}
-          onClick={handleTriggerClick}
-          onKeyDown={handleTriggerKeyDown}
-          onMouseEnter={hoverEnabled ? open : undefined}
-          onMouseLeave={hoverEnabled ? scheduleClose : undefined}
-          ref={(node) => {
-            triggerRef.current = node
-          }}
-        >
-          {trigger}
-        </button>
-        {(() => {
-          const panel = (
-            <div
-              role="menu"
-              id={menuId}
-              aria-labelledby={triggerId}
-              className={classNames('menu', { show: visible, 'submenu-stacked': stacked })}
-              style={menuStyle}
-              data-cx-placement={placementAttr}
-              aria-hidden={!visible}
-              onKeyDown={(event) =>
-                handleMenuKeyDown(event, {
-                  onEscape: closeAndRefocusTrigger,
-                  ...(isRtl
-                    ? { onArrowRight: closeAndRefocusTrigger }
-                    : { onArrowLeft: closeAndRefocusTrigger })
-                })
-              }
-              onMouseEnter={hoverEnabled ? clearCloseTimeout : undefined}
-              onMouseLeave={hoverEnabled ? scheduleClose : undefined}
-              // Registers this panel with the ancestor `Menu` (see `MenuContext.registerOverlay`)
-              // so its own click-dismiss logic recognizes clicks here as "inside" the menu — the
-              // panel portals straight to `document.body` when not `stacked`, so plain DOM
-              // containment against the top-level menu's own element wouldn't otherwise see it.
-              ref={(node) => {
-                overlayRef.current = node
-                registerOverlay(menuId, node)
-              }}
-            >
-              <SubmenuActionsContext.Provider value={actionsValue}>
-                <SubmenuGroupContext.Provider value={ownGroup}>
-                  {children}
-                </SubmenuGroupContext.Provider>
-              </SubmenuActionsContext.Provider>
-            </div>
-          )
-
-          // `stacked`'s sm-breakpoint CSS (`.menu:has(.submenu-stacked.show) ...`) needs the
-          // panel to be a real DOM descendant of `.menu`/`.submenu` to match — portaling would
-          // break that ancestor relationship, so it renders inline instead. Trade-off: above the
-          // `sm` breakpoint a `stacked` submenu no longer escapes ancestor overflow/stacking-
-          // context clipping the way a portaled one does; accepted since `stacked` targets mobile
-          // nav/drawer usage, not floating dropdowns.
-          return mounted && !stacked ? createPortal(panel, document.body) : panel
-        })()}
-      </div>
-    )
-  }
-)
-
-MenuSubmenu.displayName = 'MenuSubmenu'