@chassis-ui/react 0.2.0 → 0.4.0

package/src/components/menu/MenuSubmenuBack.tsx

@@ -1,39 +0,0 @@
-import React, { ButtonHTMLAttributes, forwardRef, useContext } from 'react'
-import classNames from 'classnames'
-
-import { SubmenuActionsContext } from './submenuGroup'
-
-export interface MenuSubmenuBackProps extends ButtonHTMLAttributes<HTMLButtonElement> {
-  /**
-   * A string of all className you want applied to the component.
-   */
-  className?: string
-}
-
-// First item of a stacked submenu's nested menu (see `MenuSubmenu`'s `stacked` prop). Closes
-// the submenu and returns focus to its trigger — visible only below the `sm` breakpoint.
-export const MenuSubmenuBack = forwardRef<HTMLButtonElement, MenuSubmenuBackProps>(
-  ({ children, className, onClick, type = 'button', ...rest }, ref) => {
-    const actions = useContext(SubmenuActionsContext)
-
-    const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
-      onClick?.(event)
-      actions?.close()
-    }
-
-    return (
-      <button
-        type={type}
-        role="menuitem"
-        className={classNames('submenu-back', 'menu-item', className)}
-        {...rest}
-        onClick={handleClick}
-        ref={ref}
-      >
-        {children}
-      </button>
-    )
-  }
-)
-
-MenuSubmenuBack.displayName = 'MenuSubmenuBack'

package/src/components/menu/MenuText.tsx

@@ -1,47 +0,0 @@
-import React, { ElementType, ForwardRefRenderFunction, ReactElement } from 'react'
-import classNames from 'classnames'
-
-import {
-  createPolymorphicComponent,
-  PolymorphicComponentProps,
-  PolymorphicRef
-} from '../../utils/polymorphic'
-
-type MenuTextOwnProps<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
-}
-
-export type MenuTextProps<C extends ElementType = 'span'> = PolymorphicComponentProps<
-  C,
-  MenuTextOwnProps<C>
->
-
-type MenuTextComponent = (<C extends ElementType = 'span'>(
-  props: MenuTextProps<C> & { ref?: PolymorphicRef<C> }
-) => ReactElement | null) & { displayName?: string }
-
-function MenuTextRender<C extends ElementType = 'span'>(
-  { children, className, component, ...rest }: MenuTextProps<C>,
-  ref: PolymorphicRef<C>
-) {
-  const Component = component ?? 'span'
-  const _className = classNames('menu-text', className)
-
-  return (
-    <Component className={_className} {...rest} ref={ref}>
-      {children}
-    </Component>
-  )
-}
-
-export const MenuText = createPolymorphicComponent<MenuTextComponent>(
-  MenuTextRender as ForwardRefRenderFunction<Element, MenuTextProps<ElementType>>,
-  'MenuText'
-)

package/src/components/menu/MenuToggle.tsx

@@ -1,148 +0,0 @@
-import React, {
-  ElementType,
-  ForwardRefRenderFunction,
-  ReactElement,
-  useContext,
-  useRef
-} from 'react'
-import classNames from 'classnames'
-import { mergeProps, useButton } from 'react-aria'
-
-import { Button } from '../button/Button'
-import { MenuContext } from './Menu'
-import { ContextColor, ContextStyle, Shapes } from '../../types'
-import {
-  createPolymorphicComponent,
-  PolymorphicComponentProps,
-  PolymorphicRef
-} from '../../utils/polymorphic'
-import { useForkedRef } from '../../hooks'
-
-type MenuToggleOwnProps<C extends ElementType> = {
-  /**
-   * Toggle the active state for the component.
-   */
-  active?: boolean
-  /**
-   * A string of all className you want applied to the base component.
-   */
-  className?: string
-  /**
-   * Sets the color of the component to one of Chassis context colors. Only applies to the
-   * default `Button` root.
-   */
-  color?: ContextColor
-  /**
-   * Component used for the root node — the trigger element the menu opens from. Defaults to
-   * `Button`; swap for e.g. `NavLink` to render a nav-item-style trigger (`.nav-link.caret`)
-   * instead of a `.button.caret`. Its own props are type-checked at the call site once passed
-   * here.
-   */
-  component?: C
-  /**
-   * Toggle the disabled state for the component.
-   */
-  disabled?: boolean
-  /**
-   * The href attribute specifies the URL of the page the link goes to.
-   */
-  href?: string
-  /**
-   * Select the shape of the component. Only applies to the default `Button` root.
-   */
-  shape?: Shapes
-  /**
-   * Size the component sm or lg. Only applies to the default `Button` root.
-   */
-  size?: 'sm' | 'lg'
-  /**
-   * Sets the context style of the component. Only applies to the default `Button` root.
-   */
-  variant?: ContextStyle
-}
-
-export type MenuToggleProps<C extends ElementType = typeof Button> = PolymorphicComponentProps<
-  C,
-  MenuToggleOwnProps<C>
->
-
-type MenuToggleComponent = (<C extends ElementType = typeof Button>(
-  props: MenuToggleProps<C> & { ref?: PolymorphicRef<C> }
-) => ReactElement | null) & { displayName?: string }
-
-function MenuToggleRender<C extends ElementType = typeof Button>(
-  { children, className, component, onClick, onKeyDown, ...rest }: MenuToggleProps<C>,
-  ref: PolymorphicRef<C>
-) {
-  const { hide, menuTriggerProps, reference, targetRef, toggleNodeRef, visible } =
-    useContext(MenuContext)
-  const Component = component ?? Button
-  const buttonRef = useRef<HTMLButtonElement | null>(null)
-  // `elementType` tells react-aria whether the rendered root already has native button
-  // semantics (`Button`, defaulting to `<button>`) or needs them emulated (`role="button"`,
-  // keyboard activation) — anything else swapped in via `component` (e.g. `NavLink`, which
-  // defaults to `<a>`) falls into the latter case.
-  const { buttonProps } = useButton(
-    { ...menuTriggerProps, elementType: Component === Button ? 'button' : 'a' },
-    buttonRef
-  )
-  const wasOpenRef = useRef(false)
-
-  const setRefs = (node: HTMLButtonElement | null) => {
-    buttonRef.current = node
-    toggleNodeRef.current = node
-    if (reference !== 'parent') {
-      targetRef.current = node
-    }
-  }
-
-  const forkedRef = useForkedRef(ref, setRefs)
-
-  // react-aria's `useMenuTrigger` opens (rather than toggles) on mouse/pen press start, so
-  // re-clicking an already-open trigger would otherwise re-open it right back instead of
-  // closing it. Capture whether it was open before that happens — ours has to run ahead of
-  // `buttonProps`' own `onPointerDown` in the `mergeProps` chain below — then close it back
-  // down on click. Touch is exempt: react-aria's `onPress` already toggles it correctly there.
-  const handlePointerDown = (event: React.PointerEvent<HTMLButtonElement>) => {
-    wasOpenRef.current = event.pointerType !== 'touch' && visible
-  }
-
-  const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
-    event.preventDefault()
-    event.stopPropagation()
-    if (wasOpenRef.current) {
-      wasOpenRef.current = false
-      hide()
-    }
-    onClick?.(event)
-  }
-
-  return (
-    <Component
-      // Only the default `Button` root needs an explicit `type` to avoid an implicit form
-      // submit — other roots (e.g. `NavLink`, a raw `'button'` string) either don't render a
-      // `<button>` at all or already accept `type` as one of their own passthrough props.
-      {...(Component === Button ? { type: 'button' } : {})}
-      // The `.caret` utility (rather than styling off `[data-cx-toggle="menu"]`, as the vanilla
-      // CSS docs show) keeps this element from also matching Chassis CSS's own vanilla menu.js
-      // selectors on a page that happens to load both — this component reimplements all of that
-      // behavior itself, so there's nothing for the vanilla plugin to usefully do with it anyway.
-      // `show` mirrors `MenuList`'s own `{ show: visible }` and vanilla menu.js's
-      // `this._element.classList.add('show')` — it's what puts the trigger itself into a
-      // pressed look while its menu is open (`.button.show`/`.nav-item.show .nav-link`).
-      className={classNames('caret', { show: visible }, className)}
-      {...(mergeProps({ onPointerDown: handlePointerDown }, rest, buttonProps, {
-        onClick: handleClick,
-        onKeyDown
-      }) as Record<string, unknown>)}
-      ref={forkedRef}
-    >
-      {children}
-    </Component>
-  )
-}
-
-export const MenuToggle = createPolymorphicComponent<MenuToggleComponent>(
-  MenuToggleRender as ForwardRefRenderFunction<Element, MenuToggleProps<ElementType>>,
-  'MenuToggle'
-)

package/src/components/menu/index.ts

@@ -1,23 +0,0 @@
-'use client'
-
-import '../../utils/suppressFocusRingGlobally'
-
-export { Menu } from './Menu'
-export type { MenuProps, MenuFocusStrategy, MenuAutoClose } from './Menu'
-export { MenuDivider } from './MenuDivider'
-export type { MenuDividerProps } from './MenuDivider'
-export { MenuHeader } from './MenuHeader'
-export type { MenuHeaderProps } from './MenuHeader'
-export { MenuItem } from './MenuItem'
-export type { MenuItemProps } from './MenuItem'
-export { MenuList } from './MenuList'
-export type { MenuListProps } from './MenuList'
-export { MenuText } from './MenuText'
-export type { MenuTextProps } from './MenuText'
-export { MenuToggle } from './MenuToggle'
-export type { MenuToggleProps } from './MenuToggle'
-export { MenuSubmenu } from './MenuSubmenu'
-export type { MenuSubmenuProps } from './MenuSubmenu'
-export { MenuSubmenuBack } from './MenuSubmenuBack'
-export type { MenuSubmenuBackProps } from './MenuSubmenuBack'
-export type { MenuItemDef, MenuHeaderDef, MenuDividerDef, MenuItemsDef } from './MenuItemDef'

package/src/components/menu/menuNavigation.ts

@@ -1,106 +0,0 @@
-import React from 'react'
-
-// Mirrors Chassis CSS's menu.js SELECTOR_VISIBLE_ITEMS / SELECTOR_KB_NAV_ITEMS: direct-child
-// menu items and submenu-back buttons, plus submenu trigger items nested one level inside a
-// `.submenu` wrapper (which aren't direct children of the `.menu`).
-//
-// Walks `children` directly rather than a `:scope`-based `querySelectorAll` — jsdom's selector
-// engine (nwsapi) mis-parses `:scope` queries against an element whose `id` contains a colon,
-// which is exactly the shape of React 18's default `useId()` output now that `MenuList`/
-// `MenuSubmenu` set a real `id` for `aria-controls`/`aria-labelledby` linking. Real browsers don't
-// have this bug, but walking children is just as correct and sidesteps it either way.
-const VISIBLE_ITEMS_SELECTOR = ':is(.menu-item, .submenu-back):not(.disabled):not(:disabled)'
-
-const isVisible = (element: HTMLElement) =>
-  Boolean(element.offsetWidth || element.offsetHeight || element.getClientRects().length)
-
-export const getMenuItems = (menu: HTMLElement | null): HTMLElement[] => {
-  if (!menu) return []
-  const items: HTMLElement[] = []
-  for (const child of Array.from(menu.children)) {
-    if (child.matches(VISIBLE_ITEMS_SELECTOR)) {
-      items.push(child as HTMLElement)
-    } else if (child.classList.contains('submenu')) {
-      const trigger = Array.from(child.children).find((grandchild) =>
-        grandchild.matches(VISIBLE_ITEMS_SELECTOR)
-      )
-      if (trigger) items.push(trigger as HTMLElement)
-    }
-  }
-  return items.filter(isVisible)
-}
-
-export const focusMenuItem = (items: HTMLElement[], target: 'first' | 'last') => {
-  if (!items.length) return
-  ;(target === 'first' ? items[0]! : items[items.length - 1]!).focus()
-}
-
-export interface MenuKeyDownOptions {
-  onArrowLeft?: () => void
-  onArrowRight?: () => void
-  onEscape?: () => void
-}
-
-// Scoped to `event.currentTarget` (the `.menu` element the handler is bound to), so the same
-// function drives keyboard navigation for both the top-level menu and any nested submenu list.
-// `onArrowLeft`/`onArrowRight` are both optional and independent (rather than a single
-// direction-agnostic "close" callback) so a caller under an RTL locale can wire the one that
-// actually points back toward the trigger — see `MenuSubmenu`, the only current consumer of
-// either.
-export const handleMenuKeyDown = (
-  event: React.KeyboardEvent<HTMLElement>,
-  { onArrowLeft, onArrowRight, onEscape }: MenuKeyDownOptions
-): void => {
-  const menu = event.currentTarget
-  const target = event.target as HTMLElement
-
-  switch (event.key) {
-    case 'ArrowDown':
-    case 'ArrowUp': {
-      event.preventDefault()
-      event.stopPropagation()
-      const items = getMenuItems(menu)
-      if (!items.length) return
-      const currentIndex = items.indexOf(target)
-      const nextIndex =
-        currentIndex === -1
-          ? event.key === 'ArrowDown'
-            ? 0
-            : items.length - 1
-          : (currentIndex + (event.key === 'ArrowDown' ? 1 : -1) + items.length) % items.length
-      // `nextIndex` is always a valid index into `items` here (0, items.length - 1, or a modulo
-      // result — the `if (!items.length) return` above already ruled out the empty-array case).
-      items[nextIndex]!.focus()
-      return
-    }
-    case 'Home':
-    case 'End': {
-      event.preventDefault()
-      event.stopPropagation()
-      focusMenuItem(getMenuItems(menu), event.key === 'Home' ? 'first' : 'last')
-      return
-    }
-    case 'Escape': {
-      if (!onEscape) return
-      event.preventDefault()
-      event.stopPropagation()
-      onEscape()
-      return
-    }
-    case 'ArrowLeft': {
-      if (!onArrowLeft) return
-      event.preventDefault()
-      event.stopPropagation()
-      onArrowLeft()
-      return
-    }
-    case 'ArrowRight': {
-      if (!onArrowRight) return
-      event.preventDefault()
-      event.stopPropagation()
-      onArrowRight()
-      return
-    }
-    default:
-  }
-}

package/src/components/menu/submenuGroup.ts

@@ -1,43 +0,0 @@
-import { createContext, useRef } from 'react'
-
-// Lets sibling `.submenu` flyouts at the same menu level close one another when a new one
-// opens, mirroring menu.js's `_closeSiblingSubmenus`. One provider instance is created per
-// menu level (the top-level `.menu` and each `.submenu`'s own nested list) and lives for the
-// lifetime of that level, so registration doesn't churn on every render.
-export interface SubmenuGroupContextValue {
-  register: (id: string, close: () => void) => () => void
-  notifyOpen: (id: string) => void
-}
-
-export const SubmenuGroupContext = createContext<SubmenuGroupContextValue | null>(null)
-
-export const useSubmenuGroupProvider = (): SubmenuGroupContextValue => {
-  const ref = useRef<SubmenuGroupContextValue | null>(null)
-
-  if (!ref.current) {
-    const closers = new Map<string, () => void>()
-    ref.current = {
-      register: (id, close) => {
-        closers.set(id, close)
-        return () => {
-          closers.delete(id)
-        }
-      },
-      notifyOpen: (id) => {
-        closers.forEach((close, key) => {
-          if (key !== id) close()
-        })
-      }
-    }
-  }
-
-  return ref.current
-}
-
-// Exposes the current `.submenu`'s own close-and-refocus action to a nested `MenuSubmenuBack`
-// button, without threading it through the sibling-group registry above.
-export interface SubmenuActionsContextValue {
-  close: () => void
-}
-
-export const SubmenuActionsContext = createContext<SubmenuActionsContextValue | null>(null)

package/src/components/modal/Modal.tsx

@@ -1,164 +0,0 @@
-import React, { createContext, DialogHTMLAttributes, forwardRef, useId } from 'react'
-import classNames from 'classnames'
-
-import { useDialogElement } from '../../hooks'
-
-export interface ModalProps extends Omit<
-  DialogHTMLAttributes<HTMLDialogElement>,
-  'onCancel' | 'onClose'
-> {
-  /**
-   * Show a backdrop while the modal is open. `'static'` blocks closing on backdrop click
-   * (the modal bounces instead). `false` is intentionally not equivalent to `modal={false}` —
-   * unlike `Drawer`, whose vanilla chassis-css counterpart derives modality from `backdrop`,
-   * chassis-css's vanilla `Dialog` only ever reads `backdrop` to distinguish `'static'` from
-   * everything else; `modal` alone decides `showModal()`/`show()`. This mirrors that faithfully
-   * rather than reintroducing an inconsistency with the vendored behavior.
-   */
-  backdrop?: boolean | 'static'
-  /**
-   * A string of all className you want applied to the base component.
-   */
-  className?: string
-  /**
-   * Set modal to cover the entire user viewport. A breakpoint value goes fullscreen only
-   * below that breakpoint.
-   */
-  fullscreen?: boolean | 'sm' | 'md' | 'lg' | 'xl' | '2xl'
-  /**
-   * Disable the open/close transition entirely.
-   */
-  instant?: boolean
-  /**
-   * Closes the modal when the escape key is pressed.
-   */
-  keyboard?: boolean
-  /**
-   * Open with `showModal()` (top-layer, native backdrop). Set `false` to open with `show()`
-   * instead — no backdrop, and the page behind the modal stays interactive.
-   */
-  modal?: boolean
-  /**
-   * Callback fired when the modal requests to be closed (escape, backdrop click, or close button).
-   */
-  onClose?: () => void
-  /**
-   * Callback fired when a close attempt is blocked (static backdrop click, or escape with `keyboard=false`).
-   */
-  onClosePrevented?: () => void
-  /**
-   * Callback fired after the exit transition completes and the modal is fully hidden.
-   */
-  onHidden?: () => void
-  /**
-   * Callback fired when the modal starts to open.
-   */
-  onShow?: () => void
-  /**
-   * Callback fired after the entry transition completes and the modal is fully visible.
-   */
-  onShown?: () => void
-  /**
-   * Create a scrollable modal — the header and footer stay fixed while the body scrolls.
-   */
-  scrollable?: boolean
-  /**
-   * Size the component sm, lg, or extra lg.
-   */
-  size?: 'sm' | 'lg' | 'xl'
-  /**
-   * Toggle the visibility of modal component.
-   */
-  visible?: boolean
-}
-
-export interface ModalContextProps {
-  /**
-   * Requests the modal be closed — fires `onClose`. Wire this to any element's `onClick`; see
-   * `useModal`.
-   */
-  close: () => void
-  /**
-   * Id generated by `Modal` and applied automatically by `ModalTitle` to itself, so the
-   * dialog's `aria-labelledby` resolves to it without any manual wiring.
-   */
-  titleId?: string
-}
-
-export const ModalContext = createContext<ModalContextProps>({ close: () => {} })
-
-export const Modal = forwardRef<HTMLDialogElement, ModalProps>(
-  (
-    {
-      children,
-      backdrop = true,
-      className,
-      fullscreen,
-      instant,
-      keyboard = true,
-      modal = true,
-      onClick,
-      onClose,
-      onClosePrevented,
-      onHidden,
-      onShow,
-      onShown,
-      scrollable,
-      size,
-      visible,
-      ...rest
-    },
-    ref
-  ) => {
-    const { close, forkedRef, handleBackdropClick, handleCancel, hiding, staticBounce } =
-      useDialogElement({
-        backdrop,
-        instant,
-        isModal: modal,
-        keyboard,
-        onClick,
-        onClose,
-        onClosePrevented,
-        onHidden,
-        onShow,
-        onShown,
-        ref,
-        visible
-      })
-
-    const titleId = useId()
-
-    const _className = classNames(
-      'modal',
-      'dialog',
-      {
-        [typeof fullscreen === 'boolean' ? 'fullscreen' : `max-${fullscreen}:fullscreen`]:
-          fullscreen,
-        [`${size}`]: size,
-        instant,
-        nonmodal: !modal,
-        scrollable,
-        hiding,
-        'dialog-static': staticBounce
-      },
-      className
-    )
-
-    return (
-      <ModalContext.Provider value={{ close, titleId }}>
-        <dialog
-          aria-labelledby={titleId}
-          {...rest}
-          className={_className}
-          onCancel={handleCancel}
-          onClick={handleBackdropClick}
-          ref={forkedRef}
-        >
-          {children}
-        </dialog>
-      </ModalContext.Provider>
-    )
-  }
-)
-
-Modal.displayName = 'Modal'

package/src/components/modal/ModalBody.tsx

@@ -1,47 +0,0 @@
-import React, { ElementType, ForwardRefRenderFunction, ReactElement } from 'react'
-import classNames from 'classnames'
-
-import {
-  createPolymorphicComponent,
-  PolymorphicComponentProps,
-  PolymorphicRef
-} from '../../utils/polymorphic'
-
-type ModalBodyOwnProps<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
-}
-
-export type ModalBodyProps<C extends ElementType = 'div'> = PolymorphicComponentProps<
-  C,
-  ModalBodyOwnProps<C>
->
-
-type ModalBodyComponent = (<C extends ElementType = 'div'>(
-  props: ModalBodyProps<C> & { ref?: PolymorphicRef<C> }
-) => ReactElement | null) & { displayName?: string }
-
-function ModalBodyRender<C extends ElementType = 'div'>(
-  { children, className, component, ...rest }: ModalBodyProps<C>,
-  ref: PolymorphicRef<C>
-) {
-  const Component = component ?? 'div'
-  const _className = classNames('modal-body', className)
-
-  return (
-    <Component className={_className} {...rest} ref={ref}>
-      {children}
-    </Component>
-  )
-}
-
-export const ModalBody = createPolymorphicComponent<ModalBodyComponent>(
-  ModalBodyRender as ForwardRefRenderFunction<Element, ModalBodyProps<ElementType>>,
-  'ModalBody'
-)

package/src/components/modal/ModalFooter.tsx

@@ -1,51 +0,0 @@
-import React, { ElementType, ForwardRefRenderFunction, ReactElement } from 'react'
-import classNames from 'classnames'
-
-import {
-  createPolymorphicComponent,
-  PolymorphicComponentProps,
-  PolymorphicRef
-} from '../../utils/polymorphic'
-
-type ModalFooterOwnProps<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
-  /**
-   * Stack the footer actions as full-width columns instead of a right-aligned row.
-   */
-  stacked?: boolean
-}
-
-export type ModalFooterProps<C extends ElementType = 'div'> = PolymorphicComponentProps<
-  C,
-  ModalFooterOwnProps<C>
->
-
-type ModalFooterComponent = (<C extends ElementType = 'div'>(
-  props: ModalFooterProps<C> & { ref?: PolymorphicRef<C> }
-) => ReactElement | null) & { displayName?: string }
-
-function ModalFooterRender<C extends ElementType = 'div'>(
-  { children, className, component, stacked, ...rest }: ModalFooterProps<C>,
-  ref: PolymorphicRef<C>
-) {
-  const Component = component ?? 'div'
-  const _className = classNames('modal-footer', { stacked }, className)
-
-  return (
-    <Component className={_className} {...rest} ref={ref}>
-      {children}
-    </Component>
-  )
-}
-
-export const ModalFooter = createPolymorphicComponent<ModalFooterComponent>(
-  ModalFooterRender as ForwardRefRenderFunction<Element, ModalFooterProps<ElementType>>,
-  'ModalFooter'
-)