@chassis-ui/react 0.2.0 → 0.3.0

package/src/components/switch/Switch.tsx

@@ -1,259 +0,0 @@
-import React, { forwardRef, InputHTMLAttributes, ReactNode, useRef } from 'react'
-import classNames from 'classnames'
-import { AriaSwitchProps, useSwitch } from 'react-aria'
-import { useToggleState } from 'react-stately'
-
-import { useForkedRef } from '../../hooks'
-import { ContextColor } from '../../types'
-import { validationClassName } from '../../utils/validationClassName'
-
-import { FormLabel } from '../form/FormLabel'
-
-export interface SwitchProps extends Omit<
-  InputHTMLAttributes<HTMLInputElement>,
-  'checked' | 'defaultChecked' | 'onChange' | 'size'
-> {
-  /**
-   * A string of all className you want applied to the component.
-   */
-  className?: string
-  /**
-   * Sets the color of the switch indicator to one of Chassis context colors.
-   */
-  color?: ContextColor
-  /**
-   * Whether the switch is selected, uncontrolled.
-   */
-  defaultSelected?: boolean
-  /**
-   * The id global attribute defines an identifier (ID) that must be unique in the whole document.
-   */
-  id?: string
-  /**
-   * Set component validation state to invalid.
-   */
-  invalid?: boolean
-  /**
-   * Whether the switch is selected, controlled.
-   */
-  isSelected?: boolean
-  /**
-   * The element represents a caption for a component.
-   *
-   * Children are accepted as an alias for this prop — `label` wins when both are given.
-   * react-aria, which backs this component, calls the same thing `children`; this package renames
-   * it to `label`, and honouring both means the shape React developers reach for first still
-   * names the control instead of silently producing an unlabelled one.
-   */
-  label?: ReactNode
-  /**
-   * Callback fired when the selected state changes.
-   */
-  onChange?: (isSelected: boolean) => void
-  /**
-   * Size the component sm or lg.
-   */
-  size?: 'sm' | 'lg'
-  /**
-   * Specifies the type of component.
-   */
-  type?: 'checkbox' | 'radio'
-  /**
-   * Set component validation state to valid.
-   */
-  valid?: boolean
-}
-
-type SwitchVariantProps = Omit<SwitchProps, 'type'>
-
-interface RenderSwitchOptions {
-  checkInputClassName: string
-  className: string
-  input: ReactNode
-  label?: ReactNode
-}
-
-// Mirrors renderFormCheck's nested-label/bare-span shape — Switch inlines its own markup (see
-// FORMS.md) rather than sharing that helper directly, since `role="switch"` placement didn't fit
-// it cleanly. Keep this in sync with renderFormCheck by eye if either changes.
-const renderSwitch = ({ checkInputClassName, className, input, label }: RenderSwitchOptions) => {
-  if (!label) {
-    return <span className={checkInputClassName}>{input}</span>
-  }
-  return (
-    <FormLabel customClassName={className}>
-      <span className={checkInputClassName}>{input}</span>
-      {label}
-    </FormLabel>
-  )
-}
-
-interface RenderSwitchInputOptions {
-  className?: string
-  color?: ContextColor
-  forkedRef: React.Ref<HTMLInputElement>
-  id?: string
-  inputProps: InputHTMLAttributes<HTMLInputElement>
-  invalid?: boolean
-  label?: ReactNode
-  size?: 'sm' | 'lg'
-  valid?: boolean
-}
-
-// Shared className-building/markup for `SwitchCheckbox`/`SwitchRadio` — the two variants only
-// differ in how `inputProps` gets built (a react-aria hook vs. a hand-wired radio), everything
-// after that is identical.
-const renderSwitchInput = ({
-  className,
-  color,
-  forkedRef,
-  id,
-  inputProps,
-  invalid,
-  label,
-  size,
-  valid
-}: RenderSwitchInputOptions) => {
-  const inputClassName = classNames(validationClassName(invalid, valid))
-  const checkInputClassName = classNames('check-input', color, validationClassName(invalid, valid))
-  const _className = classNames(
-    'form-check form-switch',
-    size,
-    validationClassName(invalid, valid),
-    className
-  )
-
-  return renderSwitch({
-    checkInputClassName,
-    className: _className,
-    input: <input {...inputProps} className={inputClassName} id={id} ref={forkedRef} />,
-    label
-  })
-}
-
-// Checkbox-backed switch: a real toggle, so it goes through react-aria's useSwitch/useToggleState
-// like Checkbox does. Split into its own component (rather than branching inside one Switch on
-// `type`) so SwitchRadio below never has to call these hooks just to discard their result —
-// calling them unconditionally and ignoring the output risked react-aria's own dev-mode warnings
-// (e.g. its missing-accessible-name check) firing for state that was never actually rendered.
-const SwitchCheckbox = forwardRef<HTMLInputElement, SwitchVariantProps>(
-  (
-    {
-      className,
-      children,
-      color,
-      defaultSelected,
-      disabled,
-      id,
-      invalid,
-      isSelected,
-      label,
-      onChange,
-      size,
-      valid,
-      ...rest
-    },
-    ref
-  ) => {
-    const inputRef = useRef<HTMLInputElement>(null)
-    const forkedRef = useForkedRef(ref, inputRef)
-    // `label` is this package's name for what react-aria calls `children`. Accept either, so the
-    // shape React developers reach for first names the control instead of vanishing.
-    const resolvedLabel = label ?? children
-
-    const toggleState = useToggleState({
-      defaultSelected,
-      isDisabled: disabled,
-      isSelected,
-      onChange
-    })
-
-    const { inputProps: switchProps } = useSwitch(
-      {
-        ...rest,
-        children: resolvedLabel,
-        isDisabled: disabled,
-        isInvalid: invalid,
-        value: rest.value as string | undefined
-      } as AriaSwitchProps,
-      toggleState,
-      inputRef
-    )
-
-    return renderSwitchInput({
-      className,
-      color,
-      forkedRef,
-      id,
-      inputProps: switchProps,
-      invalid,
-      label: resolvedLabel,
-      size,
-      valid
-    })
-  }
-)
-SwitchCheckbox.displayName = 'SwitchCheckbox'
-
-// Radio-backed switch: react-aria has no ungrouped radio hook (see Checkbox's own split for the
-// same reason), so this stays a native, hand-wired `<input type="radio" role="switch">` — no
-// react-aria hook to call here at all.
-const SwitchRadio = forwardRef<HTMLInputElement, SwitchVariantProps>(
-  (
-    {
-      children,
-      className,
-      color,
-      defaultSelected,
-      disabled,
-      id,
-      invalid,
-      isSelected,
-      label,
-      onChange,
-      size,
-      valid,
-      ...rest
-    },
-    ref
-  ) => {
-    const inputRef = useRef<HTMLInputElement>(null)
-    const forkedRef = useForkedRef(ref, inputRef)
-    // `label` is this package's name for what react-aria calls `children`. Accept either, so the
-    // shape React developers reach for first names the control instead of vanishing.
-    const resolvedLabel = label ?? children
-
-    const radioProps = {
-      ...rest,
-      'aria-invalid': invalid,
-      checked: isSelected,
-      defaultChecked: defaultSelected,
-      disabled,
-      onChange: onChange
-        ? (event: React.ChangeEvent<HTMLInputElement>) => onChange(event.target.checked)
-        : undefined,
-      role: 'switch' as const,
-      type: 'radio' as const
-    }
-
-    return renderSwitchInput({
-      className,
-      color,
-      forkedRef,
-      id,
-      inputProps: radioProps,
-      invalid,
-      label: resolvedLabel,
-      size,
-      valid
-    })
-  }
-)
-SwitchRadio.displayName = 'SwitchRadio'
-
-export const Switch = forwardRef<HTMLInputElement, SwitchProps>(
-  ({ type = 'checkbox', ...rest }, ref) =>
-    type === 'radio' ? <SwitchRadio {...rest} ref={ref} /> : <SwitchCheckbox {...rest} ref={ref} />
-)
-
-Switch.displayName = 'Switch'

package/src/components/switch/index.ts

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

package/src/components/table/Table.css

@@ -1,39 +0,0 @@
-/*
- * Table's `<table>`/`<thead>`/`<tbody>`/`<tr>`/`<th>`/`<td>` chrome reuses chassis-css's
- * existing `.table` class as-is (colors, borders, striping, hover, the `.active` row highlight —
- * now driven by real selection state instead of a manual prop). Only the pieces with no
- * chassis-css equivalent are new here: the sort indicator and the selection-checkbox column,
- * both built on `@chassis-ui/tokens`' public `--cx-*` tokens for the same reason as
- * DatePicker's calendar grid.
- */
-
-.table-sort-icon {
-  display: inline-block;
-  margin-inline-start: var(--cx-space-2xs);
-  font-size: .75em;
-  opacity: .6;
-}
-
-[aria-sort="ascending"] .table-sort-icon,
-[aria-sort="descending"] .table-sort-icon {
-  opacity: 1;
-}
-
-[role="columnheader"][aria-sort] {
-  cursor: pointer;
-  user-select: none;
-}
-
-.table-selection-cell {
-  width: 1%;
-  padding-inline-end: 0;
-  text-align: center;
-}
-
-.table [role="row"]:focus-visible,
-.table [role="gridcell"]:focus-visible,
-.table [role="columnheader"]:focus-visible,
-.table [role="rowheader"]:focus-visible {
-  outline: var(--cx-border-width-xl) solid var(--cx-primary);
-  outline-offset: -2px;
-}

package/src/components/table/Table.tsx

@@ -1,405 +0,0 @@
-import React, { ReactElement, ReactNode, Ref, forwardRef, useRef } from 'react'
-import classNames from 'classnames'
-import {
-  AriaCheckboxProps,
-  Key,
-  useCheckbox,
-  useTable,
-  useTableCell,
-  useTableColumnHeader,
-  useTableHeaderRow,
-  useTableRow,
-  useTableRowGroup,
-  useTableSelectAllCheckbox,
-  useTableSelectionCheckbox
-} from 'react-aria'
-import {
-  Selection,
-  SortDescriptor,
-  TableBodyProps,
-  TableHeaderProps,
-  TableState,
-  useTableState,
-  useToggleState
-} from 'react-stately'
-
-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
-// surface — derived from the hooks' own parameter types instead of adding an undeclared
-// dependency on react-aria/react-stately's shared internals package.
-type ColumnNode<T> = Parameters<typeof useTableColumnHeader<T>>[0]['node']
-type RowNode<T> = Parameters<typeof useTableRow<T>>[0]['node']
-type CellNode<T> = Parameters<typeof useTableCell<T>>[0]['node']
-
-export interface TableProps<T extends object> {
-  /**
-   * An accessible label for the table, used when there's no visible heading.
-   */
-  'aria-label'?: string
-  /**
-   * Identifies a visible heading element for the table.
-   */
-  'aria-labelledby'?: string
-  /**
-   * Set the vertical alignment of cell content.
-   */
-  align?: 'bottom' | 'middle' | 'top'
-  /**
-   * Add borders on all sides of the table and cells.
-   */
-  bordered?: boolean
-  /**
-   * Remove borders on all sides of the table and cells.
-   */
-  borderless?: boolean
-  /**
-   * Content shown above the table, functioning as a heading for it.
-   */
-  caption?: ReactNode
-  /**
-   * A `TableHeader` and a `TableBody`, each built from `TableColumn`/`TableRow`/
-   * `TableCell` — read as data to build the table's collection. Not rendered directly.
-   */
-  children: [
-    ReactElement<TableHeaderProps<T> & { className?: string }>,
-    ReactElement<TableBodyProps<T> & { className?: string }>
-  ]
-  /**
-   * A string of all className you want applied to the component.
-   */
-  className?: string
-  /**
-   * Sets the color of the component.
-   */
-  color?: ContextColor
-  /**
-   * A list of row keys to disable. Disabled rows cannot be selected, focused, or interacted with.
-   */
-  disabledKeys?: Iterable<Key>
-  /**
-   * Content shown below the table in a `<tfoot>`, e.g. a totals row. Rendered as plain markup —
-   * not part of the keyboard-navigable grid.
-   */
-  footer?: ReactNode
-  /**
-   * Enable a hover state on table rows.
-   */
-  hover?: boolean
-  /**
-   * `id` forwarded to the table element.
-   */
-  id?: string
-  /**
-   * Handler that is called when the selection changes.
-   */
-  onSelectionChange?: (keys: Selection) => void
-  /**
-   * Handler that is called when a column is sorted.
-   */
-  onSortChange?: (descriptor: SortDescriptor) => void
-  /**
-   * Make any table responsive across all viewports or pick a maximum breakpoint.
-   */
-  responsive?: boolean | 'sm' | 'md' | 'lg' | 'xl' | '2xl'
-  /**
-   * The currently selected row keys (controlled).
-   */
-  selectedKeys?: Selection
-  /**
-   * The type of selection that is allowed.
-   */
-  selectionMode?: 'none' | 'single' | 'multiple'
-  /**
-   * Make table more compact by cutting all cell padding.
-   */
-  sm?: boolean
-  /**
-   * The current sort column and direction.
-   */
-  sortDescriptor?: SortDescriptor
-  /**
-   * Convert rows into stacked label/value blocks below a container width, for tables with too
-   * many columns to read comfortably even with horizontal scrolling. `true` always stacks; a
-   * breakpoint name stacks only below it. Implies `responsive` when `responsive` isn't set
-   * separately, since stacking needs the same `.table-responsive` container-query ancestor.
-   * Labels come from each `TableColumn`'s text (or its `textValue`, for non-text headers).
-   */
-  stacked?: boolean | 'sm' | 'md' | 'lg' | 'xl' | '2xl'
-  /**
-   * Add zebra-striping to table rows.
-   */
-  striped?: boolean
-}
-
-const TableInner = <T extends object>(
-  {
-    align,
-    bordered,
-    borderless,
-    caption,
-    children,
-    className,
-    color,
-    disabledKeys,
-    footer,
-    hover,
-    id,
-    onSelectionChange,
-    onSortChange,
-    responsive,
-    selectedKeys,
-    selectionMode = 'none',
-    sm,
-    sortDescriptor,
-    stacked,
-    striped,
-    ...rest
-  }: TableProps<T>,
-  forwardedRef: Ref<HTMLTableElement>
-) => {
-  const state = useTableState<T>({
-    children,
-    disabledKeys,
-    onSelectionChange,
-    onSortChange,
-    selectedKeys,
-    selectionMode,
-    showSelectionCheckboxes: selectionMode === 'multiple',
-    sortDescriptor
-  })
-
-  const internalRef = useRef<HTMLTableElement>(null)
-  const ref = useForkedRef(internalRef, forwardedRef)
-  const { gridProps } = useTable(
-    { 'aria-label': rest['aria-label'], 'aria-labelledby': rest['aria-labelledby'], id },
-    state,
-    internalRef
-  )
-
-  const _className = tableClassName({
-    align,
-    bordered,
-    borderless,
-    className,
-    color,
-    hover,
-    sm,
-    stacked,
-    striped
-  })
-
-  const tableEl = (
-    <table {...gridProps} className={_className} ref={ref}>
-      {caption && <caption>{caption}</caption>}
-      <TableRowGroup className={children[0].props.className} type="thead">
-        {state.collection.headerRows.map((headerRow) => (
-          <TableHeaderRow key={headerRow.key} item={headerRow} state={state}>
-            {[...(state.collection.getChildren?.(headerRow.key) ?? [])].map((column) =>
-              column.props?.isSelectionCell ? (
-                <TableSelectAllCell key={column.key} column={column} state={state} />
-              ) : (
-                <TableColumnHeader key={column.key} column={column} state={state} />
-              )
-            )}
-          </TableHeaderRow>
-        ))}
-      </TableRowGroup>
-      <TableRowGroup className={children[1].props.className} type="tbody">
-        {[...state.collection.body.childNodes].map((row) => (
-          <TableRow key={row.key} item={row} state={state}>
-            {[...(state.collection.getChildren?.(row.key) ?? [])].map((cell) =>
-              cell.props?.isSelectionCell ? (
-                <TableSelectionCell key={cell.key} cell={cell} state={state} />
-              ) : (
-                <TableCell key={cell.key} cell={cell} stacked={!!stacked} state={state} />
-              )
-            )}
-          </TableRow>
-        ))}
-      </TableRowGroup>
-      {footer && <tfoot>{footer}</tfoot>}
-    </table>
-  )
-
-  const wrapperClassName = tableWrapperClassName({ responsive, stacked })
-  if (!wrapperClassName) return tableEl
-
-  return <div className={wrapperClassName}>{tableEl}</div>
-}
-
-// `forwardRef` erases type parameters, so the generic component is cast back to a generic
-// signature for callers — same reasoning as `TableHeader`/`TableBody`'s casts above.
-export const Table = forwardRef(TableInner) as <T extends object>(
-  props: TableProps<T> & { ref?: Ref<HTMLTableElement> }
-) => ReactElement
-
-;(Table as { displayName?: string }).displayName = 'Table'
-
-const TableRowGroup = ({
-  className,
-  type: Element,
-  children
-}: {
-  children: ReactNode
-  className?: string
-  type: 'thead' | 'tbody'
-}) => {
-  const { rowGroupProps } = useTableRowGroup()
-  return (
-    <Element {...rowGroupProps} className={className || undefined}>
-      {children}
-    </Element>
-  )
-}
-
-interface TableHeaderRowProps<T> {
-  children: ReactNode
-  item: RowNode<T>
-  state: TableState<T>
-}
-
-const TableHeaderRow = <T extends object>({ children, item, state }: TableHeaderRowProps<T>) => {
-  const ref = useRef<HTMLTableRowElement>(null)
-  const { rowProps } = useTableHeaderRow({ node: item }, state, ref)
-  return (
-    <tr {...rowProps} ref={ref}>
-      {children}
-    </tr>
-  )
-}
-
-interface TableColumnHeaderProps<T> {
-  column: ColumnNode<T>
-  state: TableState<T>
-}
-
-const TableColumnHeader = <T extends object>({ column, state }: TableColumnHeaderProps<T>) => {
-  const ref = useRef<HTMLTableCellElement>(null)
-  const { columnHeaderProps } = useTableColumnHeader({ node: column }, state, ref)
-  const sortActive = state.sortDescriptor?.column === column.key
-  const sortIcon = state.sortDescriptor?.direction === 'ascending' ? '▲' : '▼'
-
-  return (
-    <th
-      {...columnHeaderProps}
-      className={column.props?.className || undefined}
-      colSpan={column.colSpan ?? undefined}
-      // react-aria's `useTableColumnHeader` supplies `role="columnheader"` for the ARIA grid
-      // pattern but no `scope`, so the native table semantics were left ambiguous — a `<th>` with
-      // no `scope` fails WCAG H63, and assistive technology reading the table natively (rather
-      // than through the grid roles) has to guess whether the header applies to its column or its
-      // row. These are always column headers; the row-header case doesn't exist in this API.
-      scope="col"
-      ref={ref}
-    >
-      {column.rendered}
-      {column.props?.allowsSorting && (
-        <span aria-hidden="true" className="table-sort-icon">
-          {sortActive ? sortIcon : '⇅'}
-        </span>
-      )}
-    </th>
-  )
-}
-
-interface TableSelectAllCellProps<T> {
-  column: ColumnNode<T>
-  state: TableState<T>
-}
-
-const TableSelectAllCell = <T extends object>({ column, state }: TableSelectAllCellProps<T>) => {
-  const ref = useRef<HTMLTableCellElement>(null)
-  const { columnHeaderProps } = useTableColumnHeader({ node: column }, state, ref)
-  const { checkboxProps } = useTableSelectAllCheckbox(state)
-
-  return (
-    <th
-      {...columnHeaderProps}
-      className="table-selection-cell"
-      scope="col"
-      // react-stately's internal "select all" column key is a module-scoped
-      // `'row-header-column-' + Math.random()` constant (@react-stately/table's TableCollection),
-      // computed once per JS environment rather than per render. Under SSR this makes `id`/
-      // `data-key` here differ between the server module instance and the browser's, on every
-      // request — a real react-stately bug, not something this component can influence (the key
-      // never reaches a public prop) — see README.md's Table/DataGrid known-issue section for the
-      // upstream write-up. The mismatch is confined to this internal bookkeeping attribute (no
-      // visible content, nothing else references this id), so suppressing the warning is safe
-      // rather than papering over a real functional break.
-      suppressHydrationWarning
-      ref={ref}
-    >
-      <TableCheckbox checkboxProps={checkboxProps} />
-    </th>
-  )
-}
-
-interface TableRowProps<T> {
-  children: ReactNode
-  item: RowNode<T>
-  state: TableState<T>
-}
-
-const TableRow = <T extends object>({ children, item, state }: TableRowProps<T>) => {
-  const ref = useRef<HTMLTableRowElement>(null)
-  const { rowProps } = useTableRow({ node: item }, state, ref)
-  const isSelected = state.selectionManager.isSelected(item.key)
-
-  return (
-    <tr
-      {...rowProps}
-      className={classNames({ active: isSelected }, item.props?.className)}
-      ref={ref}
-    >
-      {children}
-    </tr>
-  )
-}
-
-interface TableCellProps<T> {
-  cell: CellNode<T>
-  stacked?: boolean
-  state: TableState<T>
-}
-
-const TableCell = <T extends object>({ cell, stacked, state }: TableCellProps<T>) => {
-  const ref = useRef<HTMLTableCellElement>(null)
-  const { gridCellProps } = useTableCell({ node: cell }, state, ref)
-
-  return (
-    <td
-      {...gridCellProps}
-      className={cell.props?.className || undefined}
-      data-cell={stacked ? cell.column?.textValue || undefined : undefined}
-      ref={ref}
-    >
-      {cell.rendered}
-    </td>
-  )
-}
-
-const TableSelectionCell = <T extends object>({ cell, state }: TableCellProps<T>) => {
-  const ref = useRef<HTMLTableCellElement>(null)
-  const { gridCellProps } = useTableCell({ node: cell }, state, ref)
-  const { checkboxProps } = useTableSelectionCheckbox({ key: cell.parentKey! }, state)
-
-  return (
-    // See `TableSelectAllCell`'s comment: this cell's `id`/`data-key` derive from the same
-    // module-scoped random column key and mismatch between server and client under SSR.
-    <td {...gridCellProps} className="table-selection-cell" suppressHydrationWarning ref={ref}>
-      <TableCheckbox checkboxProps={checkboxProps} />
-    </td>
-  )
-}
-
-const TableCheckbox = ({ checkboxProps }: { checkboxProps: AriaCheckboxProps }) => {
-  const toggleState = useToggleState(checkboxProps)
-  const ref = useRef<HTMLInputElement>(null)
-  const { inputProps } = useCheckbox(checkboxProps, toggleState, ref)
-
-  return <input {...inputProps} className="check-input" ref={ref} />
-}