@chassis-ui/react 0.2.0 → 0.4.0

package/src/components/datagrid/DataGridSelectionCell.tsx

@@ -1,74 +0,0 @@
-import React, { useRef } from 'react'
-import { AriaCheckboxProps, useCheckbox } from 'react-aria'
-import { useToggleState } from 'react-stately'
-import { CheckboxContext, CheckboxProps, useSlottedContext } from 'react-aria-components'
-
-export interface DataGridSelectionCellProps {
-  /**
-   * A string of all className you want applied to the checkbox, replacing the default
-   * `check-input`.
-   */
-  className?: string
-}
-
-/**
- * Reads the selection checkbox props react-aria-components' own `Row`/`TableHeader` publish on
- * `CheckboxContext`'s `selection` slot — the same ones its `<Checkbox slot="selection">` would
- * consume, already carrying the localized label, the row-header `aria-labelledby`, and the
- * selected/disabled/indeterminate state.
- *
- * Reading them off that context (rather than calling react-aria's `useTableSelectionCheckbox`/
- * `useTableSelectAllCheckbox` against `TableStateContext` ourselves, as this file used to) is what
- * keeps this working when more than one copy of `react-aria` is installed. Those hooks resolve the
- * grid's id through a module-scoped `WeakMap` that only `useTable` populates, in whichever copy
- * ran it — always the copy bundled inside `react-aria-components` here, since its `Table` is what
- * calls `useTable`. `react-aria-components` pins `react-aria` to an exact version, so a consumer
- * whose own `react-aria` resolves anywhere else in our `^` range gets a second copy and the lookup
- * throws `Error: Unknown grid` on every selection cell. Letting react-aria-components compute the
- * props in its own copy sidesteps that entirely, and drops the duplicated `rowKey` this component
- * used to need — the context is already scoped to the row it's rendered in, so a `rowKey` that
- * disagreed with the surrounding `DataGridRow` can no longer silently toggle a different row.
- */
-const useSelectionCheckboxProps = (component: string): AriaCheckboxProps => {
-  const props = useSlottedContext(CheckboxContext, 'selection') as CheckboxProps | null | undefined
-  if (!props) {
-    throw new Error(`${component} must be rendered inside a DataGrid with selection enabled.`)
-  }
-  return props as AriaCheckboxProps
-}
-
-/**
- * Selection checkbox for one `DataGrid` row — place inside a `DataGridCell`.
- *
- * react-aria-components' own `Checkbox` always visually hides its native `<input>` behind a custom
- * indicator the caller must supply. This renders a plain native `<input className="check-input">`
- * instead, wired to the same state, so it picks up chassis-css's existing checkbox styling for
- * free with no new CSS of its own.
- */
-export const DataGridSelectionCell = ({ className }: DataGridSelectionCellProps) => {
-  const checkboxProps = useSelectionCheckboxProps('DataGridSelectionCell')
-  return <DataGridCheckboxInput checkboxProps={checkboxProps} className={className} />
-}
-
-/**
- * "Select all" checkbox for `DataGrid`'s header row — place inside a `DataGridColumn`. See
- * `DataGridSelectionCell` for why this bypasses react-aria-components' own `Checkbox`.
- */
-export const DataGridSelectAllCell = ({ className }: DataGridSelectionCellProps) => {
-  const checkboxProps = useSelectionCheckboxProps('DataGridSelectAllCell')
-  return <DataGridCheckboxInput checkboxProps={checkboxProps} className={className} />
-}
-
-const DataGridCheckboxInput = ({
-  checkboxProps,
-  className
-}: {
-  checkboxProps: AriaCheckboxProps
-  className?: string
-}) => {
-  const toggleState = useToggleState(checkboxProps)
-  const ref = useRef<HTMLInputElement>(null)
-  const { inputProps } = useCheckbox(checkboxProps, toggleState, ref)
-
-  return <input {...inputProps} className={className ?? 'check-input'} ref={ref} />
-}

package/src/components/datagrid/DataGridTableLayout.ts

@@ -1,30 +0,0 @@
-import { TableLayout } from 'react-aria-components'
-
-interface StickyColumnNode {
-  type: string
-  index: number
-  colIndex?: number | null
-}
-
-/**
- * `DataGrid`'s own subclass of react-aria-components' `TableLayout`, overriding the (protected,
- * hardcoded-`false` upstream) `isStickyColumn` hook so a `pin="start"` `DataGridColumn` uses the
- * layout engine's own sticky-positioning machinery — the same mechanism that already makes the
- * header row pin to the top (`buildTableHeader` sets `layoutInfo.isSticky = true` unconditionally
- * there). The subclass exists instead of a pure-CSS `position: sticky` override because
- * react-aria-components' own `TableLayout` never overrides `isStickyColumn`, so no column becomes
- * visually sticky by default — and because the engine, not CSS, owns each cell wrapper's `left`.
- *
- * `pin="end"` isn't handled here — the engine's sticky positioning is hardcoded to the leading
- * edge (`position: sticky; left: ...`, mirrored to `right` only for RTL *direction*, never per
- * column), so there's no upstream mechanism to reuse for a trailing pin in an LTR grid. See
- * `DataGrid.scss`'s `nth-last-child`-based rules for that half instead.
- */
-export class DataGridTableLayout<T> extends TableLayout<T> {
-  protected isStickyColumn(node: StickyColumnNode): boolean {
-    const colIndex = node.type === 'column' ? node.index : (node.colIndex ?? node.index)
-    if (colIndex == null) return false
-    const column = this.collection.columns[colIndex]
-    return (column?.props as { pin?: 'start' | 'end' } | undefined)?.pin === 'start'
-  }
-}

package/src/components/datagrid/index.ts

@@ -1,18 +0,0 @@
-'use client'
-
-import '../../utils/suppressFocusRingGlobally'
-
-export { DataGrid } from './DataGrid'
-export type { DataGridProps } from './DataGrid'
-export { DataGridBody } from './DataGridBody'
-export type { DataGridBodyProps } from './DataGridBody'
-export { DataGridCell } from './DataGridCell'
-export type { DataGridCellProps } from './DataGridCell'
-export { DataGridColumn } from './DataGridColumn'
-export type { DataGridColumnProps } from './DataGridColumn'
-export { DataGridHeader } from './DataGridHeader'
-export type { DataGridHeaderProps } from './DataGridHeader'
-export { DataGridRow } from './DataGridRow'
-export type { DataGridRowProps } from './DataGridRow'
-export { DataGridSelectAllCell, DataGridSelectionCell } from './DataGridSelectionCell'
-export type { DataGridSelectionCellProps } from './DataGridSelectionCell'

package/src/components/datagrid/useColumnGeometry.ts

@@ -1,161 +0,0 @@
-import { RefObject, useEffect, useMemo, useState } from 'react'
-import { Key } from 'react-aria-components'
-import { ColumnSize, ColumnStaticSize } from 'react-stately'
-
-export interface ColumnGeometryColumn {
-  /**
-   * The column's unique id — matches `DataGridColumn`'s `id`/collection key.
-   */
-  id: Key
-  /**
-   * Mirrors `DataGridColumn`'s prop of the same name.
-   */
-  defaultWidth?: ColumnSize | null
-  /**
-   * Mirrors `DataGridColumn`'s prop of the same name.
-   */
-  minWidth?: ColumnStaticSize | null
-  /**
-   * Mirrors `DataGridColumn`'s prop of the same name.
-   */
-  maxWidth?: ColumnStaticSize | null
-}
-
-export interface ColumnOffset {
-  id: Key
-  /**
-   * Cumulative distance in pixels from the start edge of the row to this column's start edge.
-   */
-  offset: number
-  width: number
-}
-
-const STATIC_SIZE_PATTERN = /^\d+(\.\d+)?%?$/
-
-/**
- * Whether a `ColumnSize` resolves to a definite pixel value without waiting for layout: a plain
- * number, a numeric string (`'150'`), or a percentage string (`'50%'`) — resolvable as soon as
- * the container's own width is known. An `'<n>fr'` string is proportional — it only resolves to
- * pixels once the layout engine has distributed the container's remaining space among every
- * fractional column, so it's excluded here.
- */
-export const isStaticColumnSize = (size: ColumnSize | null | undefined): size is ColumnStaticSize =>
-  size != null && (typeof size === 'number' || STATIC_SIZE_PATTERN.test(size))
-
-const resolveStaticWidth = (size: ColumnStaticSize, containerWidth: number): number => {
-  if (typeof size === 'number') return size
-  return size.endsWith('%') ? (parseFloat(size) / 100) * containerWidth : parseFloat(size)
-}
-
-/**
- * Computes cumulative left-edge offsets for a list of columns from their declared
- * `defaultWidth`/`minWidth`/`maxWidth` props, without reading the DOM. Only correct for a column
- * whose own width — and every preceding column's width — is statically resolvable (see
- * `isStaticColumnSize`): a column at or after the first `fr`-sized column has no offset that can
- * be known before layout runs, so it resolves to `null`. Callers should fall back to
- * `useColumnGeometry`'s DOM measurement for those.
- */
-export function calculateStaticColumnOffsets(
-  columns: readonly ColumnGeometryColumn[],
-  containerWidth: number
-): Map<Key, ColumnOffset | null> {
-  const offsets = new Map<Key, ColumnOffset | null>()
-  let offset = 0
-  let resolvable = true
-
-  for (const column of columns) {
-    if (!resolvable || !isStaticColumnSize(column.defaultWidth)) {
-      resolvable = false
-      offsets.set(column.id, null)
-      continue
-    }
-
-    let width = resolveStaticWidth(column.defaultWidth, containerWidth)
-    if (isStaticColumnSize(column.minWidth)) {
-      width = Math.max(width, resolveStaticWidth(column.minWidth, containerWidth))
-    }
-    if (isStaticColumnSize(column.maxWidth)) {
-      width = Math.min(width, resolveStaticWidth(column.maxWidth, containerWidth))
-    }
-
-    offsets.set(column.id, { id: column.id, offset, width })
-    offset += width
-  }
-
-  return offsets
-}
-
-interface MeasuredRect {
-  offset: number
-  width: number
-}
-
-/**
- * Measures the mounted column-header cells, keyed by their 0-based column position.
- *
- * Keyed off each cell's own `aria-colindex` (1-based, assigned from the column's position in the
- * resolved collection) rather than its position among the cells that happen to be in the DOM: the
- * layout engine windows columns horizontally as well as rows, so `querySelectorAll` returns only
- * the headers intersecting the horizontal viewport. Matching those positionally to the full column
- * list — as this used to — mapped every column past the first unmounted one onto the wrong rect.
- * A header without the attribute is skipped rather than guessed at.
- */
-const measureColumnHeaders = (container: HTMLElement): Map<number, MeasuredRect> => {
-  const measured = new Map<number, MeasuredRect>()
-  container.querySelectorAll<HTMLElement>('[role="columnheader"]').forEach((cell) => {
-    const colIndex = Number(cell.getAttribute('aria-colindex'))
-    if (!Number.isInteger(colIndex) || colIndex < 1) return
-    measured.set(colIndex - 1, { offset: cell.offsetLeft, width: cell.offsetWidth })
-  })
-  return measured
-}
-
-/**
- * Resolves each column's rendered left-offset and width, independent of the virtualizer's
- * private layout internals. Statically-sized columns (see `isStaticColumnSize`) resolve
- * immediately from their declared props; `fr`-sized (proportional) columns fall back to
- * `ResizeObserver`-measured DOM rects of the mounted `[role="columnheader"]` cells inside
- * `containerRef`, matched to `columns` by `aria-colindex` (see `measureColumnHeaders`), since
- * those only resolve to real pixels after the layout engine has actually distributed space.
- */
-export function useColumnGeometry(
-  columns: readonly ColumnGeometryColumn[],
-  containerRef: RefObject<HTMLElement | null>
-): Map<Key, ColumnOffset> {
-  const [containerWidth, setContainerWidth] = useState(0)
-  const [measured, setMeasured] = useState<Map<number, MeasuredRect>>(() => new Map())
-
-  useEffect(() => {
-    const container = containerRef.current
-    if (!container || typeof ResizeObserver === 'undefined') return
-
-    const measure = () => {
-      setContainerWidth(container.clientWidth)
-      setMeasured(measureColumnHeaders(container))
-    }
-
-    measure()
-    const observer = new ResizeObserver(measure)
-    observer.observe(container)
-    return () => observer.disconnect()
-  }, [containerRef])
-
-  const staticOffsets = useMemo(
-    () => calculateStaticColumnOffsets(columns, containerWidth),
-    [columns, containerWidth]
-  )
-
-  return useMemo(() => {
-    const result = new Map<Key, ColumnOffset>()
-    columns.forEach((column, index) => {
-      const staticOffset = staticOffsets.get(column.id)
-      const measuredRect = measured.get(index)
-      if (staticOffset) {
-        result.set(column.id, staticOffset)
-      } else if (measuredRect) {
-        result.set(column.id, { id: column.id, ...measuredRect })
-      }
-    })
-    return result
-  }, [columns, staticOffsets, measured])
-}

package/src/components/datepicker/CalendarToggleButton.tsx

@@ -1,58 +0,0 @@
-import React, { forwardRef, useRef } from 'react'
-import { AriaButtonProps, useButton } from 'react-aria'
-import { OverlayTriggerState } from 'react-stately'
-
-import { useForkedRef } from '../../hooks'
-
-interface CalendarToggleButtonProps {
-  buttonProps: AriaButtonProps
-  state: OverlayTriggerState
-}
-
-// Shared by `DatePicker` and `DateRangePicker` — both trigger their calendar overlay with an
-// identical calendar-icon button. `buttonProps.onPress` (from that caller's own `useDatePicker`/
-// `useDateRangePicker`) only ever opens the overlay (matches upstream react-aria), so re-clicking
-// the button while it's already open would otherwise do nothing — overridden here to actually
-// toggle. Forwards its ref so callers can move focus onto it explicitly — e.g. `ClearButton` sits
-// immediately before it and unmounts itself on press, so focus needs somewhere to land.
-export const CalendarToggleButton = forwardRef<HTMLButtonElement, CalendarToggleButtonProps>(
-  ({ buttonProps, state }, forwardedRef) => {
-    const internalRef = useRef<HTMLButtonElement>(null)
-    const ref = useForkedRef(internalRef, forwardedRef)
-    const { buttonProps: toggleProps } = useButton(
-      { ...buttonProps, onPress: () => state.toggle() },
-      internalRef
-    )
-
-    return (
-      <button {...toggleProps} className="input-adorn" ref={ref} type="button">
-        <svg
-          fill="none"
-          height="16"
-          viewBox="0 0 16 16"
-          width="16"
-          xmlns="http://www.w3.org/2000/svg"
-        >
-          <rect
-            height="12"
-            rx="1.5"
-            stroke="currentColor"
-            strokeWidth="1.25"
-            width="13"
-            x="1.5"
-            y="3"
-          />
-          <path d="M1.5 6.5h13" stroke="currentColor" strokeWidth="1.25" />
-          <path
-            d="M4.5 1.5v3M11.5 1.5v3"
-            stroke="currentColor"
-            strokeLinecap="round"
-            strokeWidth="1.25"
-          />
-        </svg>
-      </button>
-    )
-  }
-)
-
-CalendarToggleButton.displayName = 'CalendarToggleButton'

package/src/components/datepicker/ClearButton.tsx

@@ -1,38 +0,0 @@
-import React, { useRef } from 'react'
-import { useButton } from 'react-aria'
-
-import { useCalendarLabels } from '../calendar/labels'
-
-interface ClearButtonProps {
-  isDisabled?: boolean
-  onPress: () => void
-}
-
-// Shared by `DatePicker` and `DateRangePicker` — a trailing "×" adornment that resets the
-// current selection to empty. Rendered only while there's something to clear (see each caller's
-// own conditional). `useButton` for the same reason `CalendarToggleButton` uses it: proper
-// press/keyboard semantics consistent with the rest of this library, rather than a raw `onClick`.
-export const ClearButton = ({ isDisabled, onPress }: ClearButtonProps) => {
-  const ref = useRef<HTMLButtonElement>(null)
-  const labels = useCalendarLabels()
-  const { buttonProps } = useButton({ 'aria-label': labels.clear, isDisabled, onPress }, ref)
-
-  return (
-    <button {...buttonProps} className="input-adorn" ref={ref} type="button">
-      <svg
-        fill="none"
-        height="16"
-        viewBox="0 0 16 16"
-        width="16"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <path
-          d="M4 4l8 8M12 4l-8 8"
-          stroke="currentColor"
-          strokeLinecap="round"
-          strokeWidth="1.25"
-        />
-      </svg>
-    </button>
-  )
-}

package/src/components/datepicker/DateField.tsx

@@ -1,54 +0,0 @@
-import React, { useRef } from 'react'
-import classNames from 'classnames'
-import { AriaDateFieldProps, DateValue, useDateField, useDateSegment, useLocale } from 'react-aria'
-import { DateFieldState, DateSegment as DateSegmentType, useDateFieldState } from 'react-stately'
-import { createCalendar } from '@internationalized/date'
-
-interface DateFieldProps {
-  fieldProps: AriaDateFieldProps<DateValue>
-}
-
-// Builds its own segment state from the `fieldProps` `DatePicker` hands down — mirrors react
-// aria's own documented composition (the top-level `useDatePickerState`/`useDatePicker` pair
-// manages the *selected value*; the field's individually-editable segments are a separate piece
-// of state derived from `locale`/`createCalendar`, owned here).
-export const DateField = ({ fieldProps }: DateFieldProps) => {
-  const { locale } = useLocale()
-  const state = useDateFieldState({
-    ...fieldProps,
-    createCalendar,
-    locale
-  })
-
-  const ref = useRef<HTMLDivElement>(null)
-  const { fieldProps: domFieldProps } = useDateField(fieldProps, state, ref)
-
-  return (
-    <div {...domFieldProps} className="datepicker-field" ref={ref}>
-      {state.segments.map((segment, index) => (
-        // eslint-disable-next-line react/no-array-index-key
-        <DateSegment key={index} segment={segment} state={state} />
-      ))}
-    </div>
-  )
-}
-
-interface DateSegmentProps {
-  segment: DateSegmentType
-  state: DateFieldState
-}
-
-const DateSegment = ({ segment, state }: DateSegmentProps) => {
-  const ref = useRef<HTMLDivElement>(null)
-  const { segmentProps } = useDateSegment(segment, state, ref)
-
-  return (
-    <span
-      {...segmentProps}
-      className={classNames('datepicker-segment', { placeholder: segment.isPlaceholder })}
-      ref={ref}
-    >
-      {segment.text}
-    </span>
-  )
-}

package/src/components/datepicker/DatePicker.scss

@@ -1,51 +0,0 @@
-/*
- * DatePicker's segmented field reuses chassis-css's existing `.form-input`/`.input-adorn`/
- * `.ghost-input` classes as-is (input chrome, trailing-button layout, sizing modifiers all come
- * for free). The popover shell is chassis-css's real `.datepicker` class too now (not the custom
- * `.datepicker-calendar` this used to be) — rendered *without* `data-cx-inline`, so it gets
- * chassis-css's native popover treatment (position, z-index, padding, border, box-shadow)
- * directly, while `Calendar` nested inside it stays `data-cx-inline` (no border/shadow of its
- * own — see `Calendar.scss`'s comment) so there's only one bordered/shadowed box, not two. Only
- * the segments themselves are genuinely new visual territory with no chassis-css equivalent.
- * Built on chassis-css's globally-defined `--cx-*` tokens so it stays on the same design language
- * (and adapts to light/dark) — except `--cx-form-idle-fg-inactive`, which is only ever defined
- * inside chassis-css's own `.form-input` block, not `:root`; see `Calendar.scss`'s comment on why
- * that one internal-token exception was kept anyway.
- */
-
-@use "@chassis-ui/css/scss/mixins" as *;
-
-/*
- * chassis-css's own `.datepicker` rule sets `display: flex` unconditionally, which — same-
- * specificity, later-declared-layer concerns aside — otherwise wins over the browser's default
- * `[hidden] { display: none }` UA rule (author styles always beat UA styles). Layered here to
- * land in the same cascade layer as chassis-css's own rule (see `Calendar.scss`'s comment on
- * why), with the `[hidden]` attribute bumping specificity enough to reliably win within it.
- */
-@layer components {
-  .datepicker[hidden] {
-    display: none;
-  }
-}
-
-.datepicker-field {
-  display: flex;
-  align-items: center;
-  width: fit-content;
-}
-
-.datepicker-segment {
-  padding-inline: var(--cx-space-3xs);
-  @include border-radius(var(--cx-border-radius-sm));
-  outline: 0;
-}
-
-.datepicker-segment.placeholder {
-  color: var(--cx-form-idle-fg-inactive);
-}
-
-.datepicker-segment:focus {
-  color: var(--cx-primary-contrast);
-  background-color: var(--cx-primary);
-}
-