@chassis-ui/react 0.1.3 → 0.3.0

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'
-)

package/src/components/modal/ModalHeader.tsx

@@ -1,60 +0,0 @@
-import React, { ElementType, ForwardRefRenderFunction, ReactElement } from 'react'
-import classNames from 'classnames'
-
-import { useModal } from '../../hooks'
-import {
-  createPolymorphicComponent,
-  PolymorphicComponentProps,
-  PolymorphicRef
-} from '../../utils/polymorphic'
-import { CloseButton } from '../close-button/CloseButton'
-
-type ModalHeaderOwnProps<C extends ElementType> = {
-  /**
-   * A string of all className you want applied to the base component.
-   */
-  className?: string
-  /**
-   * Add a close button component to the header.
-   */
-  closeButton?: boolean
-  /**
-   * Overrides the close button's accessible name (defaults to `'Close'`). Set this for
-   * non-English UIs.
-   */
-  closeLabel?: string
-  /**
-   * Component used for the root node. Either a string to use a HTML element or a component.
-   */
-  component?: C
-}
-
-export type ModalHeaderProps<C extends ElementType = 'div'> = PolymorphicComponentProps<
-  C,
-  ModalHeaderOwnProps<C>
->
-
-type ModalHeaderComponent = (<C extends ElementType = 'div'>(
-  props: ModalHeaderProps<C> & { ref?: PolymorphicRef<C> }
-) => ReactElement | null) & { displayName?: string }
-
-function ModalHeaderRender<C extends ElementType = 'div'>(
-  { children, className, closeButton = true, closeLabel, component, ...rest }: ModalHeaderProps<C>,
-  ref: PolymorphicRef<C>
-) {
-  const Component = component ?? 'div'
-  const { close } = useModal()
-  const _className = classNames('modal-header', className)
-
-  return (
-    <Component className={_className} {...rest} ref={ref}>
-      {children}
-      {closeButton && <CloseButton label={closeLabel} onClick={close} />}
-    </Component>
-  )
-}
-
-export const ModalHeader = createPolymorphicComponent<ModalHeaderComponent>(
-  ModalHeaderRender as ForwardRefRenderFunction<Element, ModalHeaderProps<ElementType>>,
-  'ModalHeader'
-)

package/src/components/modal/ModalTitle.tsx

@@ -1,49 +0,0 @@
-import React, { ElementType, ForwardRefRenderFunction, ReactElement } from 'react'
-import classNames from 'classnames'
-
-import { useModal } from '../../hooks'
-import {
-  createPolymorphicComponent,
-  PolymorphicComponentProps,
-  PolymorphicRef
-} from '../../utils/polymorphic'
-
-type ModalTitleOwnProps<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 ModalTitleProps<C extends ElementType = 'h2'> = PolymorphicComponentProps<
-  C,
-  ModalTitleOwnProps<C>
->
-
-type ModalTitleComponent = (<C extends ElementType = 'h2'>(
-  props: ModalTitleProps<C> & { ref?: PolymorphicRef<C> }
-) => ReactElement | null) & { displayName?: string }
-
-function ModalTitleRender<C extends ElementType = 'h2'>(
-  { children, component, className, id, ...rest }: ModalTitleProps<C>,
-  ref: PolymorphicRef<C>
-) {
-  const { titleId } = useModal()
-  const Component = component ?? 'h2'
-  const _className = classNames('modal-title', className)
-
-  return (
-    <Component className={_className} id={id ?? titleId} {...rest} ref={ref}>
-      {children}
-    </Component>
-  )
-}
-
-export const ModalTitle = createPolymorphicComponent<ModalTitleComponent>(
-  ModalTitleRender as ForwardRefRenderFunction<Element, ModalTitleProps<ElementType>>,
-  'ModalTitle'
-)

package/src/components/modal/index.ts

@@ -1,10 +0,0 @@
-export { Modal } from './Modal'
-export type { ModalProps } from './Modal'
-export { ModalBody } from './ModalBody'
-export type { ModalBodyProps } from './ModalBody'
-export { ModalFooter } from './ModalFooter'
-export type { ModalFooterProps } from './ModalFooter'
-export { ModalHeader } from './ModalHeader'
-export type { ModalHeaderProps } from './ModalHeader'
-export { ModalTitle } from './ModalTitle'
-export type { ModalTitleProps } from './ModalTitle'

package/src/components/nav/Nav.tsx

@@ -1,97 +0,0 @@
-import React, { ElementType, ForwardRefRenderFunction, ReactElement } from 'react'
-import classNames from 'classnames'
-
-import {
-  createPolymorphicComponent,
-  PolymorphicComponentProps,
-  PolymorphicRef
-} from '../../utils/polymorphic'
-import { NavItem } from './NavItem'
-
-export interface NavItemDef {
-  /**
-   * Label content for the nav item.
-   */
-  label: React.ReactNode
-  /**
-   * URL for the nav link.
-   */
-  href?: string
-  /**
-   * Marks the item as active.
-   */
-  active?: boolean
-  /**
-   * Marks the item as disabled.
-   */
-  disabled?: boolean
-}
-
-type NavOwnProps<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 nav item definitions for data-driven rendering. When provided, children are ignored.
-   */
-  items?: NavItemDef[]
-  /**
-   * Specify a layout type for component.
-   */
-  layout?: 'fill' | 'justified'
-  /**
-   * Set the nav variant to tabs or pills.
-   */
-  variant?: 'tabs' | 'pills'
-}
-
-export type NavProps<C extends ElementType = 'ul'> = PolymorphicComponentProps<C, NavOwnProps<C>>
-
-type NavComponent = (<C extends ElementType = 'ul'>(
-  props: NavProps<C> & { ref?: PolymorphicRef<C> }
-) => ReactElement | null) & { displayName?: string }
-
-function NavRender<C extends ElementType = 'ul'>(
-  { children, className, component, items, layout, variant, ...rest }: NavProps<C>,
-  ref: PolymorphicRef<C>
-) {
-  const Component = component ?? 'ul'
-  const _className = classNames(
-    'nav',
-    {
-      [`nav-${layout}`]: layout,
-      [`nav-${variant}`]: variant
-    },
-    className
-  )
-
-  const autoContent = items
-    ? items.map((item, idx) => (
-        <NavItem
-          // eslint-disable-next-line react/no-array-index-key
-          key={idx}
-          active={item.active}
-          disabled={item.disabled}
-          href={item.href}
-        >
-          {item.label}
-        </NavItem>
-      ))
-    : null
-
-  return (
-    <Component className={_className} role="navigation" {...rest} ref={ref}>
-      {autoContent ?? children}
-    </Component>
-  )
-}
-
-export const Nav = createPolymorphicComponent<NavComponent>(
-  NavRender as ForwardRefRenderFunction<Element, NavProps<ElementType>>,
-  'Nav'
-)

package/src/components/nav/NavItem.tsx

@@ -1,42 +0,0 @@
-import React, {
-  ElementType,
-  ForwardRefRenderFunction,
-  forwardRef,
-  ReactElement,
-  ReactNode,
-  Ref
-} from 'react'
-import classNames from 'classnames'
-
-import { NavLink, NavLinkProps } from './NavLink'
-
-type NavItemComponent = (<C extends ElementType = 'a'>(
-  props: NavLinkProps<C> & { ref?: Ref<HTMLLIElement> }
-) => ReactElement | null) & { displayName?: string }
-
-function NavItemRender<C extends ElementType = 'a'>(
-  { children, className, ...rest }: NavLinkProps<C>,
-  ref: Ref<HTMLLIElement>
-) {
-  const _className = classNames('nav-item', className)
-  const { href } = rest as { href?: string }
-
-  if (href) {
-    return (
-      <li className={_className} ref={ref}>
-        <NavLink {...(rest as Record<string, unknown>)}>{children as ReactNode}</NavLink>
-      </li>
-    )
-  }
-  return (
-    <li className={_className} {...(rest as Record<string, unknown>)} ref={ref}>
-      {children}
-    </li>
-  )
-}
-
-export const NavItem = forwardRef(
-  NavItemRender as ForwardRefRenderFunction<HTMLLIElement, NavLinkProps<ElementType>>
-) as NavItemComponent
-
-NavItem.displayName = 'NavItem'