@chassis-ui/react 0.1.3 → 0.3.0

package/src/components/table/Table.tsx

@@ -1,413 +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 './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 = classNames(
-    'table',
-    color,
-    {
-      [`align-${align}`]: align,
-      bordered,
-      borderless,
-      hoverable: hover,
-      sm,
-      stacked: stacked === true,
-      striped
-    },
-    typeof stacked === 'string' ? `max-${stacked}:stacked` : undefined,
-    className
-  )
-
-  const tableEl = (
-    <table {...gridProps} className={_className || undefined} 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>
-  )
-
-  if (!responsive && !stacked) return tableEl
-
-  const wrapperClassName = responsive
-    ? typeof responsive === 'boolean'
-      ? 'table-responsive'
-      : `max-${responsive}:table-responsive`
-    : 'table-responsive'
-
-  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} />
-}

package/src/components/table/TableBody.tsx

@@ -1,25 +0,0 @@
-import { ReactElement } from 'react'
-import { TableBody as StatelyTableBody } from 'react-stately'
-
-export interface TableBodyProps<T> {
-  /**
-   * `TableRow` elements, or a render function paired with `items` for dynamic row generation.
-   */
-  children: ReactElement | ReactElement[] | ((item: T) => ReactElement)
-  /**
-   * A string of all className you want applied to the `<tbody>` element.
-   */
-  className?: string
-  /**
-   * A list of row data objects, rendered via the function form of `children`.
-   */
-  items?: Iterable<T>
-}
-
-/**
- * Collection node, data-only — read by `Table` to build the table's row collection. Never
- * rendered directly.
- */
-export const TableBody = StatelyTableBody as unknown as <T>(
-  props: TableBodyProps<T>
-) => ReactElement

package/src/components/table/TableCell.tsx

@@ -1,27 +0,0 @@
-import { ReactElement, ReactNode } from 'react'
-import { Cell } from 'react-stately'
-
-export interface TableCellProps {
-  /**
-   * The contents of the cell.
-   */
-  children: ReactNode
-  /**
-   * A string of all className you want applied to the cell.
-   */
-  className?: string
-  /**
-   * Indicates how many columns the cell spans.
-   */
-  colSpan?: number
-  /**
-   * A string representation of the cell's contents, used for typeahead.
-   */
-  textValue?: string
-}
-
-/**
- * Collection node, data-only — see `TableHeader`. Read by `Table` to build a cell in the
- * table's collection; never rendered directly.
- */
-export const TableCell = Cell as unknown as (props: TableCellProps) => ReactElement

package/src/components/table/TableColumn.tsx

@@ -1,31 +0,0 @@
-import { ReactElement, ReactNode } from 'react'
-import { Column } from 'react-stately'
-
-export interface TableColumnProps {
-  /**
-   * Whether the column allows sorting. Adds a sort indicator and makes the header
-   * clickable/keyboard-activatable.
-   */
-  allowsSorting?: boolean
-  /**
-   * Rendered contents of the column header.
-   */
-  children: ReactNode
-  /**
-   * A string of all className you want applied to the column header.
-   */
-  className?: string
-  /**
-   * A string representation of the column header, used for accessibility announcements and,
-   * when `Table`'s `stacked` prop is set, as the label shown before each row's value for this
-   * column. Defaults to `children` when it's a plain string — set this explicitly when the
-   * header contains anything else (an icon, a `Tooltip`, etc.).
-   */
-  textValue?: string
-}
-
-/**
- * Collection node, data-only — see `TableHeader`. Read by `Table` to build a column in the
- * table's collection; never rendered directly.
- */
-export const TableColumn = Column as unknown as (props: TableColumnProps) => ReactElement

package/src/components/table/TableHeader.tsx

@@ -1,26 +0,0 @@
-import { ReactElement } from 'react'
-import { TableHeader as StatelyTableHeader } from 'react-stately'
-
-export interface TableHeaderProps<T> {
-  /**
-   * `TableColumn` elements, or a render function paired with `columns` for dynamic column
-   * generation.
-   */
-  children: ReactElement | ReactElement[] | ((column: T) => ReactElement)
-  /**
-   * A string of all className you want applied to the `<thead>` element.
-   */
-  className?: string
-  /**
-   * A list of column data objects, rendered via the function form of `children`.
-   */
-  columns?: readonly T[]
-}
-
-/**
- * Collection node, data-only — read by `Table` to build the table's column collection. Never
- * rendered directly.
- */
-export const TableHeader = StatelyTableHeader as unknown as <T>(
-  props: TableHeaderProps<T>
-) => ReactElement

package/src/components/table/TableRow.tsx

@@ -1,24 +0,0 @@
-import { Key, ReactElement } from 'react'
-import { Row } from 'react-stately'
-
-export interface TableRowProps {
-  /**
-   * `TableCell` elements, or a render function called once per column with that column's key —
-   * required when the row's parent `TableBody` uses the `items`/render-function form.
-   */
-  children: ReactElement | ReactElement[] | ((columnKey: Key) => ReactElement)
-  /**
-   * A string of all className you want applied to the row.
-   */
-  className?: string
-  /**
-   * A string representation of the row's contents, used for typeahead.
-   */
-  textValue?: string
-}
-
-/**
- * Collection node, data-only — see `TableHeader`. Read by `Table` to build a row in the
- * table's collection; never rendered directly.
- */
-export const TableRow = Row as unknown as (props: TableRowProps) => ReactElement

package/src/components/table/index.ts

@@ -1,12 +0,0 @@
-export { Table } from './Table'
-export type { TableProps } from './Table'
-export { TableBody } from './TableBody'
-export type { TableBodyProps } from './TableBody'
-export { TableCell } from './TableCell'
-export type { TableCellProps } from './TableCell'
-export { TableColumn } from './TableColumn'
-export type { TableColumnProps } from './TableColumn'
-export { TableHeader } from './TableHeader'
-export type { TableHeaderProps } from './TableHeader'
-export { TableRow } from './TableRow'
-export type { TableRowProps } from './TableRow'

package/src/components/tabs/Tab.tsx

@@ -1,36 +0,0 @@
-import { ReactNode } from 'react'
-import { Key } from 'react-stately'
-
-export interface TabProps {
-  /**
-   * Label content for the tab. Must be a plain string for it to be used as the tab's accessible
-   * name when the rendered content itself doesn't expose one (e.g. an icon-only tab).
-   */
-  children: ReactNode
-  /**
-   * Prevents the tab from being selected, focused, or otherwise interacted with.
-   */
-  disabled?: boolean
-  /**
-   * Identifies this tab and pairs it with the `TabPanel` of the same `id`.
-   */
-  id: Key
-}
-
-// `Tab` is never actually mounted — it's read as data by `Tabs`, which builds react-aria's tab
-// collection from each `Tab`'s `id` and `children` (see `Tabs.tsx`), and `TabList` renders the
-// real, focusable tab elements from that collection instead. This keeps the public authoring
-// shape as plain composed JSX:
-//
-//   <TabList aria-label="...">
-//     <Tab id="home">Home</Tab>
-//     <Tab id="profile">Profile</Tab>
-//   </TabList>
-//   <TabPanel id="home">...</TabPanel>
-//   <TabPanel id="profile">...</TabPanel>
-//
-// `id` (not React's own `key`) is what pairs a tab with its panel — still give each `Tab`/
-// `TabPanel` a React `key` too, as you would for any list.
-export const Tab = (_props: TabProps): null => null
-
-Tab.displayName = 'Tab'

package/src/components/tabs/TabList.tsx

@@ -1,76 +0,0 @@
-import React, { AriaAttributes, forwardRef, ReactElement, ReactNode, useRef } from 'react'
-import classNames from 'classnames'
-import { useTab, useTabList } from 'react-aria'
-import { Node } from 'react-stately'
-
-import { useForkedRef } from '../../hooks'
-import { TabProps } from './Tab'
-import { useTabsContext } from './context'
-
-export interface TabListProps extends AriaAttributes {
-  /**
-   * `Tab` elements — read as data by `Tabs` to build the tab collection (see `Tabs.tsx`). Not
-   * rendered directly.
-   */
-  children: ReactNode
-  /**
-   * A string of all className you want applied to the base component.
-   */
-  className?: string
-  /**
-   * Set the tab list variant to tabs or pills.
-   */
-  variant?: 'tabs' | 'pills'
-}
-
-// Renders the actual, focusable tabs from `state.collection` — built by the ancestor `Tabs`
-// from this component's own `children` (see the comment there). This component's own `children`
-// prop is intentionally unused for rendering.
-export const TabList = forwardRef<HTMLUListElement, TabListProps>(
-  ({ className, variant = 'tabs', ...rest }, ref) => {
-    const { keyboardActivation, orientation, state } = useTabsContext()
-    const listRef = useRef<HTMLUListElement>(null)
-    const forkedRef = useForkedRef(ref, listRef)
-    const { tabListProps } = useTabList(
-      { keyboardActivation, orientation, ...rest },
-      state,
-      listRef
-    )
-
-    const _className = classNames('nav', `nav-${variant}`, className)
-
-    return (
-      <ul className={_className} {...tabListProps} ref={forkedRef}>
-        {[...state.collection].map((item) => (
-          <TabItem key={item.key} item={item} />
-        ))}
-      </ul>
-    )
-  }
-)
-
-TabList.displayName = 'TabList'
-
-interface TabItemProps {
-  item: Node<ReactElement<TabProps>>
-}
-
-const TabItem = ({ item }: TabItemProps) => {
-  const { state } = useTabsContext()
-  const ref = useRef<HTMLAnchorElement>(null)
-  const { tabProps, isSelected, isDisabled } = useTab({ key: item.key }, state, ref)
-
-  return (
-    // ARIA's `tablist` role only permits `tab`-role children — `role="presentation"` opts this
-    // `<li>` wrapper out without hiding its content, same pattern as `MenuHeader`.
-    <li className="nav-item" role="presentation">
-      <a
-        className={classNames('nav-link', { active: isSelected, disabled: isDisabled })}
-        {...tabProps}
-        ref={ref}
-      >
-        {item.rendered}
-      </a>
-    </li>
-  )
-}