@chassis-ui/react 0.2.0 → 0.4.0

package/src/components/datagrid/DataGridBody.tsx

@@ -1,162 +0,0 @@
-import React, { ReactElement, ReactNode, useMemo } from 'react'
-import classNames from 'classnames'
-import {
-  TableBody as AriaTableBody,
-  TableBodyRenderProps,
-  TableLoadMoreItem
-} from 'react-aria-components'
-
-// A unique value appended to `items` internally to represent the trailing "load more" row in
-// react-aria-components' collection. `TableLoadMoreItem` has to be returned from the per-item
-// render function like any other row — react-aria-components' `useCachedChildren` only supports
-// EITHER `items` + a render function OR static `children`, never a mix of both in the same
-// `children` prop, so a `<TableLoadMoreItem>` placed as a plain JSX sibling inside `<TableBody>`
-// is silently dropped (or crashes, if `children` becomes an array mixing the render function in).
-// Checked by reference (`item === LOADER_ITEM`), so it can never collide with a real `T` the way a
-// `{ __loader: true }` marker object might if compared structurally. Its `id` matters too, not
-// just its identity: react-aria-components derives each rendered item's React key from
-// `rendered.props.id ?? item?.key ?? item?.id ?? <positional index>` (`useCachedChildren`) —
-// `TableLoadMoreItem` doesn't accept an `id` prop itself, so without this object's own `id` the
-// loader's key falls back to its position in the array, which collides with a real row whenever a
-// row's own `id` happens to equal that count (e.g. a 2-item list with a row literally id `"2"`).
-const LOADER_ITEM = { id: '__datagrid-body-loader__' }
-
-interface DataGridBodyOwnProps {
-  /**
-   * A string of all className you want applied to the body row group.
-   */
-  className?: string
-  /**
-   * Values that should invalidate the row cache when using the `items`/render-function form of
-   * `children` — e.g. a value from outside `items` that the render function reads. Without this,
-   * changing that outside value won't re-render already-cached rows, since dynamic rows are only
-   * rebuilt when `items` or `dependencies` change by reference, not on every parent re-render.
-   */
-  dependencies?: ReadonlyArray<unknown>
-  /**
-   * Content shown in place of rows when `items` is empty.
-   */
-  renderEmptyState?: (props: TableBodyRenderProps) => React.ReactNode
-}
-
-/**
- * The `items` + render-function form. `isLoading`/`loadingContent`/`onLoadMore` live here rather
- * than alongside the static form because the loader row is generated by appending to `items` and
- * rendering through that same function — there's no growing dataset to load more of, and nothing
- * to render the loader with, in a hand-written list of `DataGridRow` elements.
- */
-interface DataGridBodyDynamicProps<T> {
-  /**
-   * A render function called once per item in `items`, returning that row's `DataGridRow`.
-   */
-  children: (item: T) => ReactElement
-  /**
-   * Whether more items are currently being fetched. Shows `loadingContent` in the loader row while
-   * true, and — until this goes back to `false` — suppresses further `onLoadMore` calls, so one
-   * scroll-into-view doesn't fire the callback again before the in-flight fetch resolves.
-   */
-  isLoading?: boolean
-  /**
-   * A list of row data objects, rendered via the function form of `children`.
-   */
-  items: Iterable<T>
-  /**
-   * Content rendered inside the loader row while `isLoading` is true, e.g. a spinner. Only takes
-   * effect alongside `onLoadMore`.
-   */
-  loadingContent?: ReactNode
-  /**
-   * Called when the grid scrolls near its last row, so more data can be fetched and appended to
-   * `items`. Pair with `isLoading` so a fetch already in flight isn't triggered again before it
-   * resolves.
-   */
-  onLoadMore?: () => void
-}
-
-/** The static form: `DataGridRow` elements written out directly. */
-interface DataGridBodyStaticProps {
-  /**
-   * `DataGridRow` elements.
-   */
-  children: ReactElement | ReactElement[]
-  isLoading?: never
-  items?: never
-  loadingContent?: never
-  onLoadMore?: never
-}
-
-/**
- * Split into a static and a dynamic form so the two can't be mixed: the loader row is appended to
- * `items` and rendered through `children`, so `onLoadMore` alongside a static list of elements used
- * to type-check and then throw at render ("children is not a function") the moment the loader row
- * came up.
- */
-export type DataGridBodyProps<T> = DataGridBodyOwnProps &
-  (DataGridBodyDynamicProps<T> | DataGridBodyStaticProps)
-
-/**
- * Body row group for `DataGrid`, containing `DataGridRow`s. Unlike `Table`'s sub-parts, this
- * renders directly — it's a thin wrapper over react-aria-components' own `TableBody`.
- *
- * Always carries the `datagrid-body` class — see `DataGridHeader`'s equivalent note.
- */
-export const DataGridBody = <T extends object>({
-  children,
-  className,
-  dependencies,
-  isLoading,
-  items,
-  loadingContent,
-  onLoadMore,
-  renderEmptyState
-}: DataGridBodyProps<T>) => {
-  const hasLoader = onLoadMore != null && items != null
-
-  const itemsWithLoader = useMemo(() => {
-    if (!hasLoader) return items
-    return [...(items as Iterable<T>), LOADER_ITEM] as Iterable<T>
-  }, [hasLoader, items])
-
-  // react-aria-components caches each rendered row by item identity (see `dependencies`'s own doc
-  // comment above) — the loader branch below reads `isLoading`/`onLoadMore`/`loadingContent`, none
-  // of which are part of `items`, so without surfacing them here the cached loader row would keep
-  // whatever `isLoading` value (and stale `onLoadMore` closure) was in scope the first time it
-  // rendered, never picking up a later change.
-  const dependenciesWithLoader = useMemo(
-    () =>
-      hasLoader ? [...(dependencies ?? []), isLoading, onLoadMore, loadingContent] : dependencies,
-    [dependencies, hasLoader, isLoading, onLoadMore, loadingContent]
-  )
-
-  const bodyChildren = hasLoader
-    ? (item: T) =>
-        (item as unknown) === LOADER_ITEM ? (
-          <TableLoadMoreItem
-            className="datagrid-loader"
-            isLoading={isLoading}
-            // Suppresses re-triggering onLoadMore while a fetch is already in flight — the
-            // underlying sentinel has no built-in debounce of its own and calls onLoadMore again
-            // whenever it (re-)observes the sentinel still intersecting, e.g. after the collection
-            // changes but the loader row hasn't yet scrolled out of view.
-            onLoadMore={isLoading ? undefined : onLoadMore}
-          >
-            {loadingContent}
-          </TableLoadMoreItem>
-        ) : (
-          // `hasLoader` implies the dynamic form of the props union, whose `children` is the
-          // render function — `onLoadMore` isn't assignable alongside static children.
-          (children as (item: T) => ReactElement)(item)
-        )
-    : children
-
-  return (
-    <AriaTableBody
-      className={classNames('datagrid-body', className)}
-      dependencies={dependenciesWithLoader}
-      items={itemsWithLoader}
-      renderEmptyState={renderEmptyState}
-    >
-      {bodyChildren}
-    </AriaTableBody>
-  )
-}

package/src/components/datagrid/DataGridCell.tsx

@@ -1,47 +0,0 @@
-import React, { ReactNode } from 'react'
-import { Key, Cell as AriaCell } from 'react-aria-components'
-import classNames from 'classnames'
-
-export interface DataGridCellProps {
-  /**
-   * 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
-  /**
-   * The unique id of the cell.
-   */
-  id?: Key
-  /**
-   * A string representation of the cell's contents, used for typeahead.
-   */
-  textValue?: string
-}
-
-/**
- * A cell within a `DataGrid` row. Unlike `Table`'s sub-parts, this renders directly — it's a
- * thin wrapper over react-aria-components' own `Cell`.
- */
-export const DataGridCell = ({
-  children,
-  className,
-  colSpan,
-  id,
-  textValue
-}: DataGridCellProps) => (
-  <AriaCell
-    className={classNames('datagrid-cell', className)}
-    colSpan={colSpan}
-    id={id}
-    textValue={textValue}
-  >
-    {children}
-  </AriaCell>
-)

package/src/components/datagrid/DataGridColumn.tsx

@@ -1,109 +0,0 @@
-import React, { ReactNode } from 'react'
-import classNames from 'classnames'
-import { Key, Column as AriaColumn } from 'react-aria-components'
-import { ColumnSize, ColumnStaticSize } from 'react-stately'
-
-export interface DataGridColumnProps {
-  /**
-   * 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
-  /**
-   * The initial width of the column, e.g. for a narrow selection/icon column — a plain number or
-   * `'<n>%'` for a fixed size, or `'<n>fr'` to share remaining space with other fractional
-   * columns in proportion (columns default to `'1fr'`, so they split space evenly unless given
-   * one of these). Unlike `Table`, which sizes a narrow column via `width: 1%` relying on native
-   * `<table>` auto-layout, `DataGrid`'s virtualized layout computes every column's width itself —
-   * a CSS `width` rule on the cell has no effect, so this prop is the only way to size a column.
-   */
-  defaultWidth?: ColumnSize | null
-  /**
-   * The unique id of the column, referenced by `sortDescriptor.column`.
-   */
-  id?: Key
-  /**
-   * Whether this column is a row header, announced by assistive technology during row
-   * navigation.
-   */
-  isRowHeader?: boolean
-  /**
-   * The maximum width of the column, as a fixed pixel number or `'<n>%'`.
-   */
-  maxWidth?: ColumnStaticSize | null
-  /**
-   * The minimum width of the column, as a fixed pixel number or `'<n>%'`.
-   */
-  minWidth?: ColumnStaticSize | null
-  /**
-   * Pin the column so it stays visible while the grid scrolls horizontally: `'start'` pins it to
-   * the leading edge, `'end'` to the trailing edge. Stacks correctly with other pinned columns on
-   * the same side, in declaration order.
-   */
-  pin?: 'start' | 'end'
-  /**
-   * A string representation of the column header, used for accessibility announcements. 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
-}
-
-/**
- * A column within `DataGrid`. Unlike `Table`'s sub-parts, this renders directly — it's a thin
- * wrapper over react-aria-components' own `Column`.
- *
- * When `allowsSorting` is set, renders a sort indicator after `children` — mirrors `Table`'s own
- * `TableColumnHeader`, but reads the active direction from react-aria-components' own
- * `ColumnRenderProps` (via the `children` render-prop form) instead of reaching into table state
- * directly, since this wrapper has no state of its own to read.
- */
-export const DataGridColumn = ({
-  allowsSorting,
-  children,
-  className,
-  defaultWidth,
-  id,
-  isRowHeader,
-  maxWidth,
-  minWidth,
-  pin,
-  textValue
-}: DataGridColumnProps) => (
-  <AriaColumn
-    allowsSorting={allowsSorting}
-    className={classNames('datagrid-col', pin && `datagrid-col-pinned-${pin}`, className)}
-    defaultWidth={defaultWidth}
-    id={id}
-    isRowHeader={isRowHeader}
-    maxWidth={maxWidth}
-    minWidth={minWidth}
-    textValue={textValue}
-    // `pin` isn't a react-aria-components `Column` prop, but its collection builder preserves
-    // the full props object it's given verbatim (see react-stately's `Column.getCollectionNode`)
-    // — passing it through here is what makes it reach `column.props.pin` in
-    // `DataGridTableLayout`'s `isStickyColumn` override, which is what positions `pin="start"`.
-    // `pin="end"` is handled separately by `DataGridPinBehavior`, which reads the same prop off
-    // the header's JSX rather than the resolved collection.
-    {...({ pin } as Record<string, unknown>)}
-  >
-    {allowsSorting
-      ? ({ sortDirection }) => (
-          <>
-            {children}
-            <span aria-hidden="true" className="datagrid-sort-icon">
-              {sortDirection === 'ascending' ? '▲' : sortDirection === 'descending' ? '▼' : '⇅'}
-            </span>
-          </>
-        )
-      : children}
-  </AriaColumn>
-)

package/src/components/datagrid/DataGridHeader.tsx

@@ -1,47 +0,0 @@
-import React, { ReactElement, ReactNode } from 'react'
-import classNames from 'classnames'
-import { TableHeader as AriaTableHeader } from 'react-aria-components'
-
-export interface DataGridHeaderProps<T> {
-  /**
-   * `DataGridColumn` elements, or a render function paired with `columns` for dynamic column
-   * generation.
-   */
-  children: ReactNode | ((column: T) => ReactElement)
-  /**
-   * A string of all className you want applied to the header row group.
-   */
-  className?: string
-  /**
-   * A list of column data objects, rendered via the function form of `children`.
-   */
-  columns?: Iterable<T>
-  /**
-   * Values that should invalidate the column cache when using the `columns`/render-function form
-   * of `children` — see `DataGridBody`'s `dependencies` for why this matters.
-   */
-  dependencies?: ReadonlyArray<unknown>
-}
-
-/**
- * Header row group for `DataGrid`, containing `DataGridColumn`s. Unlike `Table`'s sub-parts,
- * this renders directly — it's a thin wrapper over react-aria-components' own `TableHeader`.
- *
- * Always carries the `datagrid-header` class (not just the caller's `className`) — `DataGrid.scss`
- * uses it to tell header cells from body cells, since react-aria-components renders both as plain
- * `[role="rowgroup"]` divs with no structural difference to select on otherwise.
- */
-export const DataGridHeader = <T extends object>({
-  children,
-  className,
-  columns,
-  dependencies
-}: DataGridHeaderProps<T>) => (
-  <AriaTableHeader
-    className={classNames('datagrid-header', className)}
-    columns={columns}
-    dependencies={dependencies}
-  >
-    {children}
-  </AriaTableHeader>
-)

package/src/components/datagrid/DataGridPinBehavior.tsx

@@ -1,225 +0,0 @@
-import React, { ReactElement, RefObject, useEffect, useMemo } from 'react'
-
-import { DataGridColumnProps } from './DataGridColumn'
-import { DataGridHeaderProps } from './DataGridHeader'
-import { ColumnGeometryColumn, useColumnGeometry } from './useColumnGeometry'
-
-export interface DataGridPinBehaviorProps<T> {
-  /**
-   * The same header element passed as `DataGrid`'s first child. Read directly (rather than via
-   * `TableStateContext`) because react-aria-components' virtualized `<Table>` only ever renders
-   * DOM output for its own collection-derived tree — an arbitrary extra child (like this
-   * component, if it were nested inside `<Table>`) never mounts, regardless of context
-   * availability. Only the static-children form of `DataGridHeader` can be introspected this
-   * way; the `columns`/render-function form gets no pinned-column behavior from here (`pin=
-   * "start"`'s positioning still works either way — see `DataGridTableLayout`, which reads pin
-   * state off the resolved collection instead, not off this introspection).
-   */
-  header: ReactElement<DataGridHeaderProps<T>>
-  /**
-   * A CSS class unique to this `DataGrid` instance, scoping the generated rules below so
-   * multiple grids on the same page (with different pinned columns) don't collide.
-   */
-  instanceClassName: string
-  /**
-   * Ref to `DataGrid`'s own scrolling root — used both to measure `fr`-sized pinned columns via
-   * `useColumnGeometry` and, for `pin="end"`, to find and reposition its cells on scroll (see
-   * below).
-   */
-  containerRef: RefObject<HTMLElement | null>
-}
-
-interface PinnedColumnInfo {
-  index: number
-  /** Cumulative width of the end-pinned columns after this one — its distance from the edge. */
-  rightOffset: number
-}
-
-interface DeclaredColumns {
-  all: ColumnGeometryColumn[]
-  endIndices: number[]
-  startIndices: number[]
-}
-
-/**
- * A cell's (1-based) `aria-colindex` for the (0-based) column position it was declared at.
- *
- * Every cell and column header react-aria-components renders carries `aria-colindex`, set from the
- * column's position in the resolved collection — which is the declaration order this component
- * reads off the header's JSX. That makes it the one stable handle from a declared column back to
- * its rendered DOM, and the reason nothing here counts DOM children: the layout engine windows
- * columns horizontally as well as rows (only the cells intersecting the horizontal viewport are
- * mounted, see `datagrid.mdx`'s Scope section), so a row's child count is the size of the mounted
- * window, not the column count. The `nth-child`/`nth-last-child` arithmetic this used to do was
- * therefore only correct while every column happened to be mounted, and silently moved and
- * shadowed the wrong cells in exactly the wide grids pinning exists for.
- */
-const colIndexSelector = (index: number) => `[aria-colindex="${index + 1}"]`
-
-/**
- * Handles the two things `DataGrid`'s own layout subclass (`DataGridTableLayout`) can't:
- *
- * - `pin="end"`'s positioning. `DataGridTableLayout` reuses the layout engine's own sticky
- *   mechanism for `pin="start"`, but that mechanism is hardcoded to the leading edge — there's no
- *   upstream hook for a trailing-edge pin. A pure-CSS `position: sticky; right: 0` equivalent
- *   doesn't work either: for the *last* child of a horizontally-scrolling container, the browser's
- *   own max-scroll bound is defined such that its gap to the viewport's trailing edge never goes
- *   negative until the very last pixel of scroll — sticky has nothing to correct until then, so it
- *   renders exactly like `position: absolute` for the entire scroll range up to that point (this is
- *   a well-known, verified-here CSS limitation, not specific to this layout). So `pin="end"` is
- *   positioned imperatively instead: on every scroll (and on mount/resize), each `pin="end"`
- *   column's auto-generated wrapper div gets a `transform: translateX(...)` that keeps it flush
- *   against the scroll viewport's trailing edge, computed from `useColumnGeometry`'s cumulative
- *   offsets, plus the `z-index` that keeps it above the cells it now overlaps. This bypasses React
- *   for those two styles, similar to how other virtualized grids (e.g. AG-Grid) handle right-pinned
- *   columns — react-aria-components' own layout doesn't re-render an already-mounted cell's style on
- *   a plain scroll (its `layoutInfo` doesn't depend on scroll position), so there's no fight between
- *   this and React's own reconciliation; newly-mounted rows (from vertical scroll bringing fresh
- *   cells into the virtualized window) are covered by the same scroll-driven sync running again.
- * - The scroll-cue box-shadow on the boundary column of each pinned group (the last `pin="start"`
- *   column, the first `pin="end"` column) — shown only once the grid has actually scrolled far
- *   enough to hide content under it, via the `datagrid-scrolled-start`/`datagrid-scrolled-end`
- *   classes `DataGrid` toggles on scroll. This part stays pure CSS since box-shadow, unlike
- *   sticky's position offsets, has no "last child" gotcha.
- *
- * Rendered as a plain sibling of `DataGrid`'s `<Table>`, not inside it.
- */
-export const DataGridPinBehavior = <T extends object>({
-  header,
-  instanceClassName,
-  containerRef
-}: DataGridPinBehaviorProps<T>) => {
-  const headerChildren = header.props.children
-
-  // Re-derived only when a column's own sizing/pin props actually change, not on every parent
-  // render: `useColumnGeometry` keys its memoized result off this array's identity, and the
-  // scroll-sync effect below keys off that result in turn — rebuilding it unconditionally tore
-  // down and re-registered the effect's scroll listener and its two observers on every single
-  // `DataGrid` render.
-  const columnElements = useMemo(
-    () => (typeof headerChildren === 'function' ? [] : React.Children.toArray(headerChildren)),
-    [headerChildren]
-  )
-  const declaredKey = columnElements
-    .map((element) => {
-      if (!React.isValidElement<DataGridColumnProps>(element)) return ''
-      const { defaultWidth, maxWidth, minWidth, pin } = element.props
-      return `${defaultWidth ?? ''}/${minWidth ?? ''}/${maxWidth ?? ''}/${pin ?? ''}`
-    })
-    .join('|')
-
-  const {
-    all: allColumns,
-    endIndices,
-    startIndices
-  } = useMemo<DeclaredColumns>(() => {
-    const declared: DeclaredColumns = { all: [], endIndices: [], startIndices: [] }
-    columnElements.forEach((element, index) => {
-      if (!React.isValidElement<DataGridColumnProps>(element)) return
-      const { defaultWidth, maxWidth, minWidth, pin } = element.props
-      declared.all.push({ id: index, defaultWidth, maxWidth, minWidth })
-      if (pin === 'start') declared.startIndices.push(index)
-      else if (pin === 'end') declared.endIndices.push(index)
-    })
-    return declared
-    // `declaredKey` is the value-based identity of `columnElements` — a fresh JSX array every
-    // render, so its own reference can't be the dependency.
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [declaredKey])
-
-  const offsets = useColumnGeometry(allColumns, containerRef)
-
-  // Cumulative width of the end-pinned columns after this one, keyed by column index — how far
-  // from the viewport's trailing edge each one needs to sit so they stack correctly.
-  const endPinnedInfo = useMemo(() => {
-    const info = new Map<number, PinnedColumnInfo>()
-    let right = 0
-    for (let i = endIndices.length - 1; i >= 0; i--) {
-      const index = endIndices[i]
-      if (index == null) continue
-      const width = offsets.get(index)?.width ?? 0
-      info.set(index, { index, rightOffset: right })
-      right += width
-    }
-    return info
-  }, [endIndices, offsets])
-
-  useEffect(() => {
-    const container = containerRef.current
-    if (!container || endPinnedInfo.size === 0) return
-
-    let frame: number | null = null
-    // The wrappers this effect has written inline styles onto, so they can be handed back
-    // unstyled when it tears down — un-pinning a column at runtime (or unmounting this behavior
-    // while the grid stays) otherwise left its cells stuck at their last scroll offset.
-    const styled = new Set<HTMLElement>()
-
-    const sync = () => {
-      frame = null
-      const clientWidth = container.clientWidth
-      const scrollLeft = container.scrollLeft
-      const rows = container.querySelectorAll<HTMLElement>('[role="row"]')
-      rows.forEach((row) => {
-        endPinnedInfo.forEach(({ index, rightOffset }) => {
-          const cell = row.querySelector<HTMLElement>(colIndexSelector(index))
-          const wrapper = cell?.parentElement
-          if (!wrapper) return
-          const offset = offsets.get(index)
-          if (!offset) return
-          const rightEdge = offset.offset + offset.width
-          const delta = clientWidth - rightOffset - rightEdge + scrollLeft
-          wrapper.style.transform = `translateX(${delta}px)`
-          // Above the unpinned cells it now overlaps. Set here rather than in the generated
-          // stylesheet below because the virtualizer writes the wrapper's own `z-index` inline,
-          // which no plain rule can outrank without `!important`.
-          wrapper.style.zIndex = '2'
-          styled.add(wrapper)
-        })
-      })
-    }
-
-    const scheduleSync = () => {
-      if (frame == null) frame = requestAnimationFrame(sync)
-    }
-
-    scheduleSync()
-    container.addEventListener('scroll', scheduleSync, { passive: true })
-    const resizeObserver =
-      typeof ResizeObserver === 'undefined' ? null : new ResizeObserver(scheduleSync)
-    resizeObserver?.observe(container)
-    const mutationObserver =
-      typeof MutationObserver === 'undefined' ? null : new MutationObserver(scheduleSync)
-    mutationObserver?.observe(container, { childList: true, subtree: true })
-
-    return () => {
-      if (frame != null) cancelAnimationFrame(frame)
-      container.removeEventListener('scroll', scheduleSync)
-      resizeObserver?.disconnect()
-      mutationObserver?.disconnect()
-      styled.forEach((wrapper) => {
-        wrapper.style.transform = ''
-        wrapper.style.zIndex = ''
-      })
-    }
-  }, [containerRef, endPinnedInfo, offsets])
-
-  if (startIndices.length === 0 && endIndices.length === 0) return null
-
-  const rules: string[] = []
-
-  if (startIndices.length > 0) {
-    const lastStartIndex = Math.max(...startIndices)
-    rules.push(
-      `.${instanceClassName}.datagrid-scrolled-start ${colIndexSelector(lastStartIndex)} { box-shadow: var(--datagrid-pin-cue-shadow-start); }`
-    )
-  }
-
-  if (endIndices.length > 0) {
-    const firstEndIndex = Math.min(...endIndices)
-    rules.push(
-      `.${instanceClassName}.datagrid-scrolled-end ${colIndexSelector(firstEndIndex)} { box-shadow: var(--datagrid-pin-cue-shadow-end); }`
-    )
-  }
-
-  return <style>{rules.join('\n')}</style>
-}

package/src/components/datagrid/DataGridRow.tsx

@@ -1,48 +0,0 @@
-import React, { ReactElement, ReactNode } from 'react'
-import classNames from 'classnames'
-import { Key, Row as AriaRow } from 'react-aria-components'
-
-export interface DataGridRowProps<T> {
-  /**
-   * `DataGridCell` elements, or a render function called once per column with that column's
-   * data — required when the row's parent `DataGridBody` uses the `items`/render-function form.
-   */
-  children: ReactNode | ((column: T) => ReactElement)
-  /**
-   * A string of all className you want applied to the row.
-   */
-  className?: string
-  /**
-   * A list of column data objects, rendered via the function form of `children`.
-   */
-  columns?: Iterable<T>
-  /**
-   * The unique id of the row, referenced by `selectedKeys`/`disabledKeys`.
-   */
-  id?: Key
-  /**
-   * A string representation of the row's contents, used for typeahead.
-   */
-  textValue?: string
-}
-
-/**
- * A row within `DataGrid`. Unlike `Table`'s sub-parts, this renders directly — it's a thin
- * wrapper over react-aria-components' own `Row`.
- */
-export const DataGridRow = <T extends object>({
-  children,
-  className,
-  columns,
-  id,
-  textValue
-}: DataGridRowProps<T>) => (
-  <AriaRow
-    className={classNames('datagrid-row', className)}
-    columns={columns}
-    id={id}
-    textValue={textValue}
-  >
-    {children}
-  </AriaRow>
-)