@chassis-ui/react 0.1.3 → 0.2.0

package/src/components/stepper/index.ts

@@ -1,3 +1,7 @@
+'use client'
+
+import '../../utils/suppressFocusRingGlobally'
+
 export { Stepper } from './Stepper'
 export type { StepperProps, StepperItemDef } from './Stepper'
 export { StepperItem } from './StepperItem'

package/src/components/switch/index.ts

@@ -1,2 +1,6 @@
+'use client'
+
+import '../../utils/suppressFocusRingGlobally'
+
 export { Switch } from './Switch'
 export type { SwitchProps } from './Switch'

package/src/components/table/Table.tsx

@@ -25,6 +25,7 @@ import {
 
 import { useForkedRef } from '../../hooks/useForkedRef'
 import { ContextColor } from '../../types'
+import { tableClassName, tableWrapperClassName } from '../../utils/tableClassName'
 import './Table.css'
 
 // `GridNode<T>` (from `@react-types/shared`) isn't re-exported by either package's public
@@ -179,24 +180,20 @@ const TableInner = <T extends object>(
     internalRef
   )
 
-  const _className = classNames(
-    'table',
+  const _className = tableClassName({
+    align,
+    bordered,
+    borderless,
+    className,
     color,
-    {
-      [`align-${align}`]: align,
-      bordered,
-      borderless,
-      hoverable: hover,
-      sm,
-      stacked: stacked === true,
-      striped
-    },
-    typeof stacked === 'string' ? `max-${stacked}:stacked` : undefined,
-    className
-  )
+    hover,
+    sm,
+    stacked,
+    striped
+  })
 
   const tableEl = (
-    <table {...gridProps} className={_className || undefined} ref={ref}>
+    <table {...gridProps} className={_className} ref={ref}>
       {caption && <caption>{caption}</caption>}
       <TableRowGroup className={children[0].props.className} type="thead">
         {state.collection.headerRows.map((headerRow) => (
@@ -228,13 +225,8 @@ const TableInner = <T extends object>(
     </table>
   )
 
-  if (!responsive && !stacked) return tableEl
-
-  const wrapperClassName = responsive
-    ? typeof responsive === 'boolean'
-      ? 'table-responsive'
-      : `max-${responsive}:table-responsive`
-    : 'table-responsive'
+  const wrapperClassName = tableWrapperClassName({ responsive, stacked })
+  if (!wrapperClassName) return tableEl
 
   return <div className={wrapperClassName}>{tableEl}</div>
 }

package/src/components/table/index.ts

@@ -1,3 +1,7 @@
+'use client'
+
+import '../../utils/suppressFocusRingGlobally'
+
 export { Table } from './Table'
 export type { TableProps } from './Table'
 export { TableBody } from './TableBody'

package/src/components/tabs/index.ts

@@ -1,3 +1,7 @@
+'use client'
+
+import '../../utils/suppressFocusRingGlobally'
+
 export { Tabs } from './Tabs'
 export type { TabsProps } from './Tabs'
 export { Tab } from './Tab'

package/src/components/text-input/index.ts

@@ -1,2 +1,6 @@
+'use client'
+
+import '../../utils/suppressFocusRingGlobally'
+
 export { TextInput } from './TextInput'
 export type { TextInputProps } from './TextInput'

package/src/components/textarea/index.ts

@@ -1,2 +1,6 @@
+'use client'
+
+import '../../utils/suppressFocusRingGlobally'
+
 export { Textarea } from './Textarea'
 export type { TextareaProps } from './Textarea'

package/src/components/toast/Toast.tsx

@@ -51,7 +51,8 @@ export interface ToastProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'
    */
   footer?: ReactNode | ((close: () => void) => ReactNode)
   /**
-   * Leading icon for the header. A string is rendered as `<ToastIcon name={icon} />`; pass
+   * Leading icon for the header. A string is an icon name, rendered like
+   * `<ToastIcon name={icon} />` (or by `IconProvider`'s `component`); pass
    * any other node for a fully custom icon (typically a logo or avatar). Shorthand for
    * `ToastHeader`'s `icon` prop; hidden from assistive technology by default, since it
    * duplicates `title` visually.

package/src/components/toast/ToastHeader.tsx

@@ -8,7 +8,7 @@ import {
   PolymorphicComponentProps,
   PolymorphicRef
 } from '../../utils/polymorphic'
-import { ToastIcon } from './ToastIcon'
+import { ResolvedIcon } from '../../utils/iconSlot'
 
 type ToastHeaderOwnProps<C extends ElementType> = {
   /**
@@ -33,7 +33,8 @@ type ToastHeaderOwnProps<C extends ElementType> = {
    */
   component?: C
   /**
-   * Leading icon. A string is rendered as `<ToastIcon name={icon} />` and hidden from
+   * Leading icon. A string is an icon name, rendered like `<ToastIcon name={icon} />` (or by
+   * `IconProvider`'s `component`) and hidden from
    * assistive technology by default, since it duplicates the heading visually. Pass any other
    * node for a fully custom icon (typically a logo or avatar) — a custom node is left as-is,
    * since it may carry its own meaningful accessible name (e.g. an avatar's `alt` text).
@@ -82,7 +83,7 @@ function ToastHeaderRender<C extends ElementType = 'div'>(
       {icon != null &&
         (typeof icon === 'string' ? (
           <span aria-hidden="true" className="me-sm">
-            <ToastIcon name={icon} />
+            <ResolvedIcon value={icon} className="toast-icon" />
           </span>
         ) : (
           <span className="me-sm">{icon}</span>

package/src/components/toast/index.ts

@@ -1,3 +1,7 @@
+'use client'
+
+import '../../utils/suppressFocusRingGlobally'
+
 export { Toast } from './Toast'
 export type { ToastProps } from './Toast'
 export { ToastBody } from './ToastBody'
@@ -16,3 +20,7 @@ export { Toaster } from './Toaster'
 export type { ToasterProps } from './Toaster'
 export { addToast, closeToast, toastQueue } from './toastQueue'
 export type { ToastContent } from './toastQueue'
+// Also exported from the package root; repeated here so this folder's subpath entry
+// (`@chassis-ui/react/<folder>`) covers the whole family without reaching back to the root.
+export { useToast } from '../../hooks/useToast'
+export type { UseToastResult } from '../../hooks/useToast'

package/src/components/tooltip/index.ts

@@ -1,2 +1,6 @@
+'use client'
+
+import '../../utils/suppressFocusRingGlobally'
+
 export { Tooltip } from './Tooltip'
 export type { TooltipProps } from './Tooltip'

package/src/hooks/useIconConfig.ts

@@ -0,0 +1,6 @@
+import { useContext } from 'react'
+
+import { IconConfig, IconContext } from '../utils/iconConfig'
+
+// The nearest `IconProvider`'s settings, merged with every provider above it; empty outside one.
+export const useIconConfig = (): IconConfig => useContext(IconContext)

package/src/index.ts

@@ -2,8 +2,9 @@
 
 // Side-effect only: installs the single document-level pointerdown listener that works around the
 // browser's `:focus-visible` first-click heuristic misfire — see the module's own comment. Needs to
-// run once wherever this package is used, not per-component, so it's imported here rather than
-// from any individual component.
+// run once wherever this package is used, not per-component, so it's imported by entry points
+// (here, and every component folder's `index.ts` barrel, each of which is also a subpath entry)
+// rather than from any individual component.
 import './utils/suppressFocusRingGlobally'
 
 import { Accordion, AccordionBody, AccordionHeader, AccordionItem } from './components/accordion'
@@ -91,7 +92,7 @@ import { Select } from './components/select'
 import { Switch } from './components/switch'
 import { TextInput } from './components/text-input'
 import { Textarea } from './components/textarea'
-import { Icon } from './components/icon'
+import { Icon, IconProvider } from './components/icon'
 import { Placeholder } from './components/placeholder'
 import { Link } from './components/link'
 import { List, ListItem } from './components/list'
@@ -104,6 +105,7 @@ import { Progress, ProgressBar } from './components/progress'
 import { Drawer, DrawerBody, DrawerFooter, DrawerHeader, DrawerTitle } from './components/drawer'
 import { Skeleton, SkeletonLoader } from './components/skeleton'
 import { Spinner } from './components/spinner'
+import { StaticTable } from './components/static-table'
 import { Stepper, StepperItem } from './components/stepper'
 import { Table, TableBody, TableCell, TableColumn, TableHeader, TableRow } from './components/table'
 import { Tabs, Tab, TabList, TabPanel } from './components/tabs'
@@ -224,6 +226,7 @@ export {
   FormHelp,
   FormLabel,
   Icon,
+  IconProvider,
   Placeholder,
   InputGroup,
   InputGroupAddon,
@@ -265,6 +268,7 @@ export {
   Skeleton,
   SkeletonLoader,
   Spinner,
+  StaticTable,
   Stepper,
   StepperItem,
   Switch,
@@ -367,6 +371,15 @@ export type { CloseButtonProps } from './components/close-button'
 export type { CollapseProps } from './components/collapse'
 export type { ColorInputProps } from './components/color-input'
 export type { ComboboxGroupProps, ComboboxItemProps, ComboboxProps } from './components/combobox'
+export type {
+  DataGridBodyProps,
+  DataGridCellProps,
+  DataGridColumnProps,
+  DataGridHeaderProps,
+  DataGridProps,
+  DataGridRowProps,
+  DataGridSelectionCellProps
+} from './components/datagrid'
 export type {
   DatePickerMultipleProps,
   DatePickerProps,
@@ -393,7 +406,13 @@ export type {
   GridProps,
   RowProps
 } from './components/grid'
-export type { IconProps } from './components/icon'
+export type {
+  IconComponentProps,
+  IconKey,
+  IconProps,
+  IconProviderProps,
+  IconValue
+} from './components/icon'
 export type { InputAdornProps } from './components/input-adorn'
 export type { InputGroupAddonProps, InputGroupProps } from './components/input-group'
 export type { LinkProps } from './components/link'
@@ -449,6 +468,7 @@ export type { RangeInputProps } from './components/range-input'
 export type { SelectOptionDef, SelectProps } from './components/select'
 export type { SkeletonLoaderProps, SkeletonProps } from './components/skeleton'
 export type { SpinnerProps } from './components/spinner'
+export type { StaticTableProps } from './components/static-table'
 export type { StackProps } from './components/stack'
 export type { StepperItemDef, StepperItemProps, StepperProps } from './components/stepper'
 export type { SwitchProps } from './components/switch'

package/src/utils/iconConfig.ts

@@ -0,0 +1,88 @@
+import { ComponentType, createContext, ReactElement } from 'react'
+
+/**
+ * The icons this library's own components draw, by purpose rather than by icon name — so a
+ * consumer can map each one onto any icon set (see `IconProvider`'s `icons`).
+ */
+export type IconKey = 'check' | 'previous' | 'next' | 'menu' | 'play' | 'pause'
+
+/**
+ * An icon given to `IconProvider`'s `icons` or to a component's icon prop: a string is an icon
+ * name, rendered by `IconProvider`'s `component` (or the built-in `Icon`); an element is rendered
+ * as-is, with the component's own class names merged onto it.
+ */
+export type IconValue = string | ReactElement
+
+/**
+ * Props `IconProvider`'s `component` receives for every icon name it's asked to render.
+ */
+export interface IconComponentProps {
+  /**
+   * The icon name — an `IconValue` string, or `IconProvider`'s default for that icon.
+   */
+  name: string
+  /**
+   * The class names the rendering component needs on the icon (e.g. `menu-item-check`,
+   * `directional-icon`) for chassis-css to position and flip it.
+   */
+  className?: string
+  [prop: string]: unknown
+}
+
+export interface IconConfig {
+  /**
+   * Class names added to every `Icon`, alongside its own `icon` class.
+   */
+  className?: string
+  /**
+   * Replaces the built-in `Icon` for every icon this library's components render by name — the
+   * strings in `icons` and their defaults, and a string `icon` on `Toast`/`Notification`. A
+   * component reference can't be passed from a React Server Component, so set this in a
+   * `'use client'` module.
+   */
+  component?: ComponentType<IconComponentProps>
+  /**
+   * Render `Icon` as an icon-font glyph instead of an SVG sprite reference, unless an `Icon` sets
+   * `font` itself. Needs the icon font's stylesheet loaded.
+   */
+  font?: boolean
+  /**
+   * Class-name prefix of the icon font's glyphs: an icon named `check-solid` renders as
+   * `{fontPrefix}check-solid`.
+   *
+   * @default 'cx-'
+   */
+  fontPrefix?: string
+  /**
+   * The icon to render for each of the library's own icons, by purpose. Unset ones keep their
+   * defaults (`check-solid`, `chevron-left-outline`, `chevron-right-outline`, `bars-outline`,
+   * `play-solid`, `pause-solid`).
+   */
+  icons?: Partial<Record<IconKey, IconValue>>
+  /**
+   * URL of the SVG sprite `Icon` references, e.g. `/static/icons/chassis-icons.svg`. Leave empty
+   * (the default) when the sprite is embedded in the page, so icons render as `href="#name"`.
+   * Browsers don't load an external sprite from another origin.
+   *
+   * @default ''
+   */
+  sprite?: string
+}
+
+// The chassis-icons names this library used before its icons became configurable. Both
+// previous/next consumers (Pagination, Carousel) now share the outline chevrons — Pagination used
+// the solid ones.
+export const DEFAULT_ICONS: Record<IconKey, string> = {
+  check: 'check-solid',
+  previous: 'chevron-left-outline',
+  next: 'chevron-right-outline',
+  menu: 'bars-outline',
+  play: 'play-solid',
+  pause: 'pause-solid'
+}
+
+export const DEFAULT_FONT_PREFIX = 'cx-'
+
+// Lives in `utils/` rather than `components/icon/` because it's read outside that folder too —
+// by `IconSlot` (`./iconSlot.tsx`), which every icon-drawing component renders through.
+export const IconContext = createContext<IconConfig>({})

package/src/utils/iconSlot.tsx

@@ -0,0 +1,41 @@
+import React, { cloneElement, ReactElement } from 'react'
+import { mergeProps } from 'react-aria'
+
+import { Icon } from '../components/icon/Icon'
+import { useIconConfig } from '../hooks/useIconConfig'
+import { DEFAULT_ICONS, IconKey, IconValue } from './iconConfig'
+
+// Every icon this library's own components draw goes through here, never through `<Icon>`
+// directly, so a consumer can swap in their own icons (`IconProvider`'s `icons`/`component`, or a
+// component's own icon prop). The rendering component passes the class names chassis-css hooks
+// onto (`menu-item-check` positions the check, `navbar-toggler-icon` sizes and colors it,
+// `carousel-icon-play`/`-pause` are toggled by state, `directional-icon` flips in RTL); those are
+// merged onto whatever icon ends up rendered, so a custom icon lands in the same place a built-in
+// one would. `aria-hidden` defaults on: each of these icons sits beside its own visible or
+// visually-hidden label.
+//
+// A custom *element* deliberately doesn't get the `icon` class itself: chassis-css's `.icon` sets
+// `fill`, which would paint over an outline icon set's `fill="none"` (Lucide, Heroicons outline,
+// ...). It keeps its own size and color — `currentColor` icons still follow the control's text.
+type IconRenderProps = { className?: string } & Record<string, unknown>
+
+export function ResolvedIcon({ value, ...props }: IconRenderProps & { value: IconValue }) {
+  const { component: Component } = useIconConfig()
+  const iconProps = { 'aria-hidden': true, ...props }
+
+  if (typeof value !== 'string') {
+    const element = value as ReactElement<Record<string, unknown>>
+    return cloneElement(element, mergeProps(iconProps, element.props))
+  }
+  if (Component) return <Component name={value} {...iconProps} />
+  return <Icon name={value} {...iconProps} />
+}
+
+export function IconSlot({
+  icon,
+  override,
+  ...props
+}: IconRenderProps & { icon: IconKey; override?: IconValue }) {
+  const { icons } = useIconConfig()
+  return <ResolvedIcon value={override ?? icons?.[icon] ?? DEFAULT_ICONS[icon]} {...props} />
+}

package/src/utils/polymorphic.ts

@@ -1,12 +1,16 @@
 import {
   ComponentPropsWithoutRef,
   ComponentPropsWithRef,
+  createElement,
   ElementType,
   ForwardRefRenderFunction,
   forwardRef,
   Ref
 } from 'react'
 
+import { devWarning } from './devWarning'
+import { getSlotChild, Slot, SlotProvider } from './slot'
+
 // Ref type inferred from a polymorphic component's currently-selected `component` element type.
 export type PolymorphicRef<C extends ElementType> = ComponentPropsWithRef<C>['ref']
 
@@ -26,6 +30,21 @@ export type PolymorphicRef<C extends ElementType> = ComponentPropsWithRef<C>['re
 export type PolymorphicRefWithFallback<C extends ElementType, Fallback extends HTMLElement> =
   PolymorphicRef<C> | Ref<Fallback>
 
+/**
+ * The `asChild` prop every polymorphic component accepts alongside `component` — see
+ * `createPolymorphicComponent` below for how it's implemented once for all of them.
+ */
+export interface AsChildProps {
+  /**
+   * Render the single child element in place of this component's own element, with this
+   * component's classes, props and ref merged onto it: `<Button asChild><Link href="/login">Log
+   * in</Link></Button>`. The alternative to `component` for React Server Components — an element
+   * can be passed from the server to this package's client components, a component reference
+   * (`component={Link}`) can't.
+   */
+  asChild?: boolean
+}
+
 /**
  * Props for a polymorphic component: `OwnProps` (which must declare `component?: C`) plus
  * whatever props `C` itself accepts, minus any name already claimed by `OwnProps` so the two
@@ -33,7 +52,8 @@ export type PolymorphicRefWithFallback<C extends ElementType, Fallback extends H
  * type-checking/autocomplete for that component's own props at the call site.
  */
 export type PolymorphicComponentProps<C extends ElementType, OwnProps extends object> = OwnProps &
-  Omit<ComponentPropsWithoutRef<C>, keyof OwnProps>
+  AsChildProps &
+  Omit<ComponentPropsWithoutRef<C>, keyof OwnProps | keyof AsChildProps>
 
 /**
  * Wraps a polymorphic component's render function in `forwardRef` and stamps `displayName` — the
@@ -41,13 +61,40 @@ export type PolymorphicComponentProps<C extends ElementType, OwnProps extends ob
  * fully generic component type (e.g. `ButtonComponent`) that `forwardRef`'s own return type can't
  * express, since `forwardRef` only accepts a non-generic render function — the caller still casts
  * the render function to a concrete `Element`-typed instance before passing it in here.
+ *
+ * Also implements `asChild` for every polymorphic component at once (#23): the render function
+ * gets `component={Slot}` and the child element's own children, so it computes its classes,
+ * props and ref exactly as it would for any component reference (`component={Link}`) — `Slot`
+ * then clones the caller's child element with all of that merged on (see `./slot`). No render
+ * function needs to know `asChild` exists.
  */
 export function createPolymorphicComponent<T>(
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   render: ForwardRefRenderFunction<Element, any>,
   displayName: string
 ): T {
-  const Component = forwardRef(render) as unknown as T & { displayName?: string }
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  const Component = forwardRef<Element, any>(({ asChild, ...props }, ref) => {
+    const child = asChild ? getSlotChild(props.children, displayName) : null
+    if (!child) return render(props, ref)
+
+    devWarning(
+      props.component !== undefined,
+      `${displayName}: both \`asChild\` and \`component\` were passed; \`asChild\` wins and ` +
+        `\`component\` is ignored.`
+    )
+
+    return createElement(
+      SlotProvider,
+      { value: child },
+      render(
+        { ...props, component: Slot, children: (child.props as PropsWithChildren).children },
+        ref
+      )
+    )
+  }) as unknown as T & { displayName?: string }
   Component.displayName = displayName
   return Component
 }
+
+type PropsWithChildren = { children?: unknown }

package/src/utils/renderMenuItemContent.tsx

@@ -1,6 +1,6 @@
 import React, { ReactNode } from 'react'
 
-import { Icon } from '../components/icon/Icon'
+import { IconSlot } from './iconSlot'
 
 export interface MenuItemContentDef {
   /**
@@ -16,13 +16,9 @@ export interface MenuItemContentDef {
    */
   description?: ReactNode
   /**
-   * Renders a `.menu-item-check` at the trailing edge when true.
+   * Renders a `.menu-item-check` at the trailing edge when true — `IconProvider`'s `check` icon.
    */
   selected?: boolean
-  /**
-   * Icon name for the selected-state check. Defaults to chassis-css's own doc example.
-   */
-  checkIcon?: string
 }
 
 // Chassis-css defines identical markup for rich item content in both Menu and Combobox items
@@ -36,8 +32,7 @@ export const renderMenuItemContent = ({
   icon,
   label,
   description,
-  selected,
-  checkIcon = 'check-solid'
+  selected
 }: MenuItemContentDef): ReactNode => {
   if (icon == null && description == null && !selected) return label
 
@@ -56,7 +51,7 @@ export const renderMenuItemContent = ({
       ) : (
         label
       )}
-      {selected && <Icon name={checkIcon} className="menu-item-check" />}
+      {selected && <IconSlot icon="check" className="menu-item-check" />}
     </>
   )
 }

package/src/utils/slot.tsx

@@ -0,0 +1,78 @@
+import React, {
+  cloneElement,
+  createContext,
+  forwardRef,
+  Fragment,
+  isValidElement,
+  ReactElement,
+  ReactNode,
+  Ref,
+  useContext,
+  version
+} from 'react'
+import { mergeProps } from 'react-aria'
+
+import { useForkedRef } from '../hooks/useForkedRef'
+import { devWarning } from './devWarning'
+
+// Backs the `asChild` prop every polymorphic component accepts (see `createPolymorphicComponent`).
+// The component renders `Slot` as its `component`, exactly like any other component reference;
+// `Slot` then renders the caller's child element in its place, with the props the component
+// computed (className, handlers, ARIA attributes, ref) merged onto it.
+//
+// The child element travels through context rather than a prop because a render function spreads
+// its `rest` props onto `component` in its own way (some filter them, some don't forward every
+// one) — context reaches `Slot` no matter how the render function wires it up. `Slot` resets the
+// context for its own subtree, so a polymorphic component nested *inside* the child doesn't pick
+// up the outer one's element.
+type SlotElement = ReactElement<Record<string, unknown>>
+
+const SlotContext = createContext<SlotElement | null>(null)
+
+export const SlotProvider = SlotContext.Provider
+
+// React 19 moved `ref` onto `props` (and warns on reading `element.ref`); React 18 only has
+// `element.ref`. The package supports both (`peerDependencies.react: >=18`).
+const REACT_19 = parseInt(version, 10) >= 19
+
+function getElementRef(element: SlotElement): Ref<unknown> | undefined {
+  return REACT_19
+    ? (element.props as { ref?: Ref<unknown> }).ref
+    : (element as unknown as { ref?: Ref<unknown> }).ref
+}
+
+// `Record` rather than a declared prop list: `Slot` forwards whatever the render function hands it.
+type SlotProps = Record<string, unknown>
+
+export const Slot = forwardRef<unknown, SlotProps>(function Slot({ children, ...slotProps }, ref) {
+  const element = useContext(SlotContext)
+  const forkedRef = useForkedRef(ref, element ? getElementRef(element) : undefined)
+  if (!element) return null
+
+  return (
+    <SlotContext.Provider value={null}>
+      {cloneElement(
+        element,
+        // react-aria's `mergeProps`: the child's own props win over the component's, except that
+        // classNames concatenate, event handlers chain (the component's first), and ids merge.
+        { ...mergeProps(slotProps, element.props), ref: forkedRef } as Record<string, unknown>,
+        children as ReactNode
+      )}
+    </SlotContext.Provider>
+  )
+})
+
+// The single element `asChild` renders in place of the component's own element, or `null` (with
+// a dev warning) when `children` isn't exactly one — the component then falls back to rendering
+// its default element, so a misuse degrades to a working, if unstyled-as-intended, UI.
+export function getSlotChild(children: ReactNode, displayName: string): SlotElement | null {
+  if (isValidElement<Record<string, unknown>>(children) && children.type !== Fragment) {
+    return children
+  }
+  devWarning(
+    true,
+    `${displayName}: \`asChild\` expects exactly one React element as its child (not text, a ` +
+      `fragment, or several elements); rendering the default element instead.`
+  )
+  return null
+}