@chassis-ui/react 0.1.0 → 0.1.2

package/src/components/datagrid/DataGridColumn.tsx

@@ -0,0 +1,109 @@
+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

@@ -0,0 +1,47 @@
+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

@@ -0,0 +1,225 @@
+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

@@ -0,0 +1,48 @@
+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>
+)

package/src/components/datagrid/DataGridSelectionCell.tsx

@@ -0,0 +1,74 @@
+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

@@ -0,0 +1,30 @@
+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

@@ -0,0 +1,14 @@
+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'