@eocrm/design-system 0.0.0-stage → 0.6.17

package/src/components/DashboardWidget/DashboardWidget.module.scss

@@ -0,0 +1,100 @@
+@use './DashboardWidget.tokens';
+
+// Card.module.scss is a separate CSS module; its order relative to this one is
+// not guaranteed. Every override of a Card rule therefore wins on specificity
+// (a `.root` ancestor on the Card root), never on source order.
+
+.root :is(.kpiBody, .chartBody) {
+  // Internal Card.Body child: fills what the header leaves (Card builds the column).
+  flex: 1 1 auto;
+  min-height: 0;
+  overflow: hidden;
+  padding: var(--dashboard-widget-compact-padding);
+}
+
+.root .scrollBody {
+  padding: var(--dashboard-widget-body-padding);
+}
+
+.root .flush {
+  padding: 0;
+}
+
+// stats: a StatGroup KPI strip; compact padding leaves vertical slack in a 3-row cell.
+.root .statsBody {
+  padding: var(--dashboard-widget-compact-padding);
+}
+
+// kpi + chart + stats: compact, muted, no divider.
+.root :is(.header-kpi, .header-chart, .header-stats) {
+  padding: var(--dashboard-widget-compact-padding);
+  padding-block-end: 0;
+  border-block-end: 0;
+}
+
+.root :is(.header-kpi, .header-chart, .header-stats) :is(h2, h3, h4, h5, h6) {
+  color: var(--dashboard-widget-compact-title-fg);
+  font-size: var(--dashboard-widget-compact-title-size);
+}
+
+.kpiBody {
+  display: flex;
+  flex-direction: column;
+  gap: var(--dashboard-widget-kpi-gap);
+}
+
+.value {
+  font-size: var(--dashboard-widget-kpi-value-size);
+  font-weight: var(--dashboard-widget-kpi-value-weight);
+  line-height: var(--dashboard-widget-kpi-value-line-height);
+}
+
+.trend {
+  display: flex;
+  align-items: center;
+  gap: var(--dashboard-widget-trend-gap);
+  font-size: var(--dashboard-widget-trend-size);
+}
+
+.trend[data-sentiment='positive'] {
+  color: var(--dashboard-widget-trend-positive);
+}
+
+.trend[data-sentiment='negative'] {
+  color: var(--dashboard-widget-trend-negative);
+}
+
+.trend[data-sentiment='neutral'] {
+  color: var(--dashboard-widget-trend-neutral);
+}
+
+// actionsReveal="hover": opacity only, so the actions keep their layout width and
+// stay in the tab order (visibility/display would remove them from it).
+// inline-flex, not contents: a display:contents box has no opacity to apply.
+.revealActions {
+  display: inline-flex;
+  align-items: center;
+}
+
+[data-actions-reveal='hover'] .revealActions {
+  opacity: var(--opacity-hidden);
+  transition: opacity var(--dashboard-widget-reveal-transition);
+}
+
+[data-actions-reveal='hover']:hover .revealActions,
+[data-actions-reveal='hover']:focus-within .revealActions,
+[data-actions-reveal='hover'] .revealActions:has([aria-expanded='true']) {
+  opacity: var(--opacity-visible);
+}
+
+@media (hover: none) {
+  [data-actions-reveal='hover'] .revealActions {
+    opacity: var(--opacity-visible);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  [data-actions-reveal='hover'] .revealActions {
+    transition: none;
+  }
+}

package/src/components/DashboardWidget/DashboardWidget.tokens.scss

@@ -0,0 +1,16 @@
+:root {
+  --dashboard-widget-compact-title-size: var(--font-size-sm);
+  --dashboard-widget-compact-title-fg: var(--color-fg-muted);
+  --dashboard-widget-compact-padding: var(--space-3);
+  --dashboard-widget-body-padding: var(--space-4);
+  --dashboard-widget-kpi-gap: var(--space-1);
+  --dashboard-widget-kpi-value-size: var(--font-size-3xl);
+  --dashboard-widget-kpi-value-weight: var(--font-weight-semibold);
+  --dashboard-widget-kpi-value-line-height: var(--line-height-tight);
+  --dashboard-widget-reveal-transition: var(--transition-base);
+  --dashboard-widget-trend-size: var(--font-size-sm);
+  --dashboard-widget-trend-gap: var(--space-1);
+  --dashboard-widget-trend-positive: var(--color-success);
+  --dashboard-widget-trend-negative: var(--color-danger);
+  --dashboard-widget-trend-neutral: var(--color-fg-muted);
+}

package/src/components/DashboardWidget/DashboardWidget.tsx

@@ -0,0 +1,188 @@
+import { forwardRef, useId, type HTMLAttributes, type ReactNode } from 'react';
+import clsx from 'clsx';
+import { Card } from '../Card';
+import { Trend } from '../_internal/Trend';
+import { VisuallyHidden } from '../VisuallyHidden';
+import { WidgetShape, type WidgetShapeKind } from '../WidgetPreview/WidgetShape';
+import { useTranslation } from '../../i18n/useTranslation';
+import styles from './DashboardWidget.module.scss';
+
+/** Presentation variant of a dashboard widget card. */
+export type DashboardWidgetVariant = 'standard' | 'list' | 'kpi' | 'chart' | 'stats';
+
+/** When header `actions` are visible. */
+export type DashboardWidgetActionsReveal = 'always' | 'hover';
+
+/** KPI trend/delta shown under the value. */
+export interface DashboardWidgetTrend {
+  /** Visible delta text, e.g. "+12% vs last month". */
+  label: ReactNode;
+  /** Arrow direction; also the hidden "Increase / Decrease / No change" word read before `label`. */
+  direction: 'up' | 'down' | 'flat';
+  /**
+   * Colour meaning. Defaults from `direction`: up → `positive`, down → `negative`,
+   * flat → `neutral`. Override when "up" is bad (churn, overdue tasks).
+   */
+  sentiment?: 'positive' | 'negative' | 'neutral';
+}
+
+export interface DashboardWidgetProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {
+  /**
+   * Presentation variant. Default `'standard'`.
+   * - `'standard'` — header (title + actions) over a padded scrolling body. Today's widget card.
+   * - `'list'` — same fixed header as `standard`; flush scrolling body so `Card.List` bleeds edge to edge.
+   * - `'kpi'` — compact muted title, a large `value`, optional `trend`; optional `children` below. No scrolling.
+   * - `'chart'` — compact header; flush non-scrolling body that fills the cell (give the plot `height: 100%`).
+   * - `'stats'` — compact header and padding over a scrolling body, for a `StatGroup` KPI strip; unlike `standard` it leaves vertical slack in a 3-row cell.
+   */
+  variant?: DashboardWidgetVariant;
+  /** Widget title, rendered as the heading at `headerLevel`. Required. */
+  title: ReactNode;
+  /**
+   * Secondary, non-interactive header text such as freshness ("Updated 3 minutes ago") or
+   * status. Sits before `actions` and yields first in a narrow cell: it truncates (then
+   * hides visually, still read by screen readers) before the title shrinks, while `actions`
+   * never shrinks. Also describes the body region (`aria-describedby`) for `standard` / `list` /
+   * `stats`. Repeat it in the refresh button's tooltip if it matters when truncated.
+   */
+  meta?: ReactNode;
+  /** Header actions, e.g. the edit-mode overflow `DropdownMenu`. Never wraps. */
+  actions?: ReactNode;
+  /**
+   * When `actions` are visible. Default `'always'`.
+   * - `'always'` — always shown.
+   * - `'hover'` — dimmed to invisible until the card is hovered or holds focus (they stay in the
+   *   tab order, and Tab into the card reveals them); an open menu launched from an action keeps
+   *   them shown. On touch / `(hover: none)` they stay visible. They keep their layout width.
+   */
+  actionsReveal?: DashboardWidgetActionsReveal;
+  /** Heading level of the title. Default `'h3'`. */
+  headerLevel?: 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
+  /** KPI value (`variant="kpi"` only), e.g. `"128"` or a formatted currency node. */
+  value?: ReactNode;
+  /** KPI trend (`variant="kpi"` only). */
+  trend?: DashboardWidgetTrend;
+  /**
+   * Show a variant-matched loading skeleton instead of the body (and, for kpi, instead of
+   * `value`/`trend`); title and actions stay. Adds visually hidden "Loading…" body text and
+   * `aria-busy`. Deliberately NO live region: a dashboard loads many widgets at once, so
+   * per-widget announcements would flood screen readers — announce "dashboard loaded" once
+   * at page level if needed. Default `false`.
+   */
+  loading?: boolean;
+  /** Widget body. Pass `ErrorState` / `EmptyState` here for error and empty states. */
+  children?: ReactNode;
+}
+
+const LOADING_SHAPE: Record<DashboardWidgetVariant, WidgetShapeKind> = {
+  standard: 'lines',
+  list: 'list',
+  kpi: 'kpi',
+  chart: 'chart',
+  stats: 'kpi',
+};
+
+/**
+ * Dashboard canvas-cell card with standard / list / kpi / chart / stats presentation and a variant-matched loading skeleton.
+ * @see docs/components/DashboardWidget.md
+ */
+// {...rest} last (Pattern A) so the consumer can add data-* / handlers to the Card root.
+export const DashboardWidget = forwardRef<HTMLDivElement, DashboardWidgetProps>(
+  function DashboardWidget(
+    {
+      variant = 'standard',
+      title,
+      actions,
+      actionsReveal = 'always',
+      meta,
+      headerLevel = 'h3',
+      value,
+      trend,
+      loading = false,
+      children,
+      className,
+      ...rest
+    },
+    ref,
+  ) {
+    const t = useTranslation();
+    const titleId = useId();
+    const metaId = useId();
+    const hasMeta = meta != null && meta !== false && meta !== '';
+    const skeleton = (
+      <>
+        <WidgetShape kind={LOADING_SHAPE[variant]} mode="loading" />
+        <VisuallyHidden>{t('dashboardWidget.loading')}</VisuallyHidden>
+      </>
+    );
+
+    const header = (
+      <Card.Header
+        headerLevel={headerLevel}
+        action={
+          actionsReveal === 'hover' && actions != null ? (
+            <span className={styles.revealActions}>{actions}</span>
+          ) : (
+            actions
+          )
+        }
+        meta={hasMeta ? <span id={metaId}>{meta}</span> : undefined}
+        className={styles[`header-${variant}`]}
+      >
+        <span id={titleId}>{title}</span>
+      </Card.Header>
+    );
+
+    const bodyClass = clsx(
+      variant === 'kpi' && styles.kpiBody,
+      variant === 'chart' && styles.chartBody,
+      variant === 'stats' && styles.statsBody,
+      variant === 'standard' && styles.scrollBody,
+      variant === 'list' && [styles.scrollBody, !loading && styles.flush],
+    );
+    const content = loading ? (
+      skeleton
+    ) : variant === 'kpi' ? (
+      <>
+        {value != null && <div className={styles.value}>{value}</div>}
+        {trend && <Trend trend={trend} className={styles.trend} />}
+        {children}
+      </>
+    ) : (
+      children
+    );
+    // Always a Card.Body: Card only builds its fill column (header fixed, body flexes)
+    // for a direct Card.Body child. Only standard/list/stats scroll.
+    const body =
+      variant === 'kpi' || variant === 'chart' ? (
+        <Card.Body className={bodyClass}>{content}</Card.Body>
+      ) : (
+        <Card.Body
+          scroll
+          data-scroll=""
+          role="group"
+          aria-labelledby={titleId}
+          aria-describedby={hasMeta ? metaId : undefined}
+          className={bodyClass}
+        >
+          {content}
+        </Card.Body>
+      );
+
+    return (
+      <Card
+        ref={ref}
+        fill
+        padding="none"
+        data-variant={variant}
+        data-actions-reveal={actionsReveal}
+        aria-busy={loading || undefined}
+        className={clsx(styles.root, className)}
+        {...rest}
+      >
+        {header}
+        {body}
+      </Card>
+    );
+  },
+);

package/src/components/DashboardWidget/index.ts

@@ -0,0 +1,7 @@
+export { DashboardWidget } from './DashboardWidget';
+export type {
+  DashboardWidgetProps,
+  DashboardWidgetVariant,
+  DashboardWidgetTrend,
+  DashboardWidgetActionsReveal,
+} from './DashboardWidget';

package/src/components/DataTable/BodyRow.tsx

@@ -0,0 +1,197 @@
+import { Fragment, type MouseEvent, type KeyboardEvent as ReactKeyboardEvent } from 'react';
+import clsx from 'clsx';
+import { ChevronDown, ChevronRight } from 'lucide-react';
+import { Table } from '../Table';
+import { Checkbox } from '../Checkbox';
+import { AUTO_CELL_WIDTH, getPinStyle } from './pinStyle';
+import { shiftVarName } from './columnShift';
+import type { DataTableInstance, ColumnDef } from './types';
+import styles from './DataTable.module.scss';
+import { useTranslation } from '../../i18n/useTranslation';
+
+export interface BodyRowProps<T> {
+  row: T;
+  instance: DataTableInstance<T>;
+  /** When true, paint the row with the pinned-row background tint. */
+  isPinnedRow?: boolean;
+  /** Whole-column drag preview is enabled for this table. */
+  dragWholeColumn?: boolean;
+  /** A column drag is currently in progress. */
+  dragActive?: boolean;
+  /** Responsive card metadata is enabled for this table. */
+  responsiveEnabled?: boolean;
+}
+
+/**
+ * One row of the body. Handles:
+ *  - selection auto-cell (when `instance.enableRowSelection`) — sticky-left
+ *  - expand auto-cell (when `instance.hasExpansion`) — sticky-left, after select
+ *  - row click (when `instance.onRowClick`) — ignored if click target is an
+ *    interactive child so checkbox/button clicks don't bubble.
+ *  - row Enter keypress fires onRowClick when row is focusable.
+ *  - data cells rendered in pin order: [left-pinned, unpinned, right-pinned].
+ *    Pinned cells receive `position: sticky` with cumulative offsets via
+ *    `getPinStyle`.
+ *  - detail row when `instance.expandedRows[rowId]` is true — rendered as
+ *    a sibling row immediately after the main row (Fragment return).
+ *  - `isPinnedRow` paints the row with `--color-bg-row-pinned` tint (used by
+ *    the pinned-rows section above the main body).
+ */
+export function BodyRow<T>({
+  row,
+  instance,
+  isPinnedRow,
+  dragWholeColumn,
+  dragActive,
+  responsiveEnabled,
+}: BodyRowProps<T>) {
+  const t = useTranslation();
+  const rowId = instance.getRowId(row);
+  const selected = instance.rowSelection[rowId] === true;
+  const expanded = instance.expandedRows[rowId] === true;
+  const detailRowId = `${rowId}-detail`;
+
+  const onRowClick = (e: MouseEvent<HTMLTableRowElement>) => {
+    if (!instance.onRowClick) return;
+    const target = e.target as HTMLElement;
+    if (target.closest('button, input, a, [role="button"], [role="checkbox"]')) return;
+    instance.onRowClick(row, e);
+  };
+
+  const onRowKeyDown = (e: ReactKeyboardEvent<HTMLTableRowElement>) => {
+    if (!instance.onRowClick) return;
+    if (e.key !== 'Enter') return;
+    const target = e.target as HTMLElement;
+    if (
+      target !== e.currentTarget &&
+      target.closest('button, input, a, [role="button"], [role="checkbox"]')
+    ) {
+      return;
+    }
+    e.preventDefault();
+    instance.onRowClick(row, e as unknown as MouseEvent<HTMLTableRowElement>);
+  };
+
+  // Pin-ordered render list — same composition as DataTable.tsx's renderColumns.
+  const renderColumns: ColumnDef<T>[] = [
+    ...instance.leftPinnedColumns,
+    ...instance.unpinnedColumns,
+    ...instance.rightPinnedColumns,
+  ];
+
+  // colSpan for the detail row: data columns + auto-cells (select, expand).
+  const detailColSpan =
+    renderColumns.length + (instance.enableRowSelection ? 1 : 0) + (instance.hasExpansion ? 1 : 0);
+
+  return (
+    <Fragment>
+      <Table.Row
+        selected={selected || undefined}
+        onClick={instance.onRowClick ? onRowClick : undefined}
+        onKeyDown={instance.onRowClick ? onRowKeyDown : undefined}
+        tabIndex={instance.onRowClick ? 0 : undefined}
+        className={clsx(
+          instance.onRowClick && styles.clickableRow,
+          isPinnedRow && styles.pinnedRow,
+        )}
+      >
+        {instance.enableRowSelection && (
+          <Table.Cell
+            className={clsx(styles.autoCell, styles.autoCellStickyBody)}
+            align="center"
+            style={{ position: 'sticky', left: 0 }}
+            // Stop clicks anywhere in the selection cell from bubbling to the row's
+            // onRowClick handler. The closest(...) filter in onRowClick catches the
+            // input but not the styled checkbox span sibling.
+            onClick={(e) => e.stopPropagation()}
+          >
+            <Checkbox
+              checked={selected}
+              onChange={() => instance.toggleRowSelection(rowId)}
+              aria-label={t('dataTable.selectRow', { row: String(rowId) })}
+            />
+          </Table.Cell>
+        )}
+        {instance.hasExpansion && (
+          <Table.Cell
+            className={clsx(styles.autoCell, styles.autoCellStickyBody)}
+            align="center"
+            style={{ position: 'sticky', left: instance.enableRowSelection ? AUTO_CELL_WIDTH : 0 }}
+            onClick={(e) => e.stopPropagation()}
+          >
+            <button
+              type="button"
+              className={styles.expandButton}
+              aria-expanded={expanded}
+              aria-controls={detailRowId}
+              aria-label={t('dataTable.expandRow', { row: String(rowId) })}
+              onClick={() => instance.toggleRowExpanded(rowId)}
+            >
+              {expanded ? (
+                <ChevronDown size={14} aria-hidden="true" />
+              ) : (
+                <ChevronRight size={14} aria-hidden="true" />
+              )}
+            </button>
+          </Table.Cell>
+        )}
+        {renderColumns.map((col) => {
+          const pin = getPinStyle(col.id, instance);
+          // `||`, not `??`, and IDENTICAL to HeaderCell's `columnLabel`: one
+          // prop must not mean two things inside one component. `''` is unset
+          // everywhere, so it falls back to a string header rather than
+          // discarding it for a blank card label (#536). The header is trimmed
+          // for the same reason it is there — `'   '` renders no text either.
+          const responsiveLabel =
+            col.visibilityLabel ||
+            (typeof col.header === 'string' && col.header.trim() ? col.header : undefined);
+          const cellContent = col.cell(row, { row, rowId, column: col, instance });
+          // The shift variable is applied only while a drag is running: a
+          // permanent `translateX(0px)` on every cell would establish a
+          // containing block on every cell, trapping any position: fixed
+          // descendant a consumer renders inside one.
+          //
+          // Pinned cells are kept out by the ternary below testing
+          // `pin.position` FIRST — a transform there would break their
+          // position: sticky. Do not reorder those branches.
+          const shifted = dragWholeColumn === true && dragActive === true;
+          const cellStyle = pin.position
+            ? { position: pin.position, left: pin.left, right: pin.right }
+            : shifted
+              ? { transform: `translateX(var(${shiftVarName(col.id)}, 0px))` }
+              : undefined;
+          return (
+            <Table.Cell
+              key={col.id}
+              align={col.align ?? 'start'}
+              className={clsx(
+                responsiveEnabled && styles.responsiveDataCell,
+                pin.pinSide === 'left' && styles.pinnedLeft,
+                pin.pinSide === 'right' && styles.pinnedRight,
+              )}
+              style={cellStyle}
+            >
+              {responsiveEnabled ? (
+                <>
+                  <span className={styles.responsiveVisualLabel} aria-hidden="true">
+                    {responsiveLabel}
+                  </span>
+                  <div className={styles.responsiveValue}>{cellContent}</div>
+                </>
+              ) : (
+                cellContent
+              )}
+            </Table.Cell>
+          );
+        })}
+      </Table.Row>
+      {expanded && instance.renderExpandedRow && (
+        <Table.Row id={detailRowId} className={styles.expandedDetailRow}>
+          <Table.Cell colSpan={detailColSpan} className={styles.expandedDetailCell}>
+            {instance.renderExpandedRow(row)}
+          </Table.Cell>
+        </Table.Row>
+      )}
+    </Fragment>
+  );
+}

package/src/components/DataTable/ColumnVisibilityTrigger.module.scss

@@ -0,0 +1,7 @@
+@use './DataTable.tokens';
+
+.trigger {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--data-table-column-visibility-gap);
+}

package/src/components/DataTable/ColumnVisibilityTrigger.tsx

@@ -0,0 +1,105 @@
+import { forwardRef, type ButtonHTMLAttributes, type ReactNode, type Ref } from 'react';
+import { Columns3 } from 'lucide-react';
+import { useTranslation } from '../../i18n';
+import { Button } from '../Button';
+import { DropdownMenu } from '../DropdownMenu';
+import type { DropdownMenuAlign, DropdownMenuSide } from '../DropdownMenu';
+import type { DataTableInstance } from './types';
+
+export interface ColumnVisibilityTriggerProps<T = unknown> extends Omit<
+  ButtonHTMLAttributes<HTMLButtonElement>,
+  'children' | 'onChange' | 'color'
+> {
+  /** The `useDataTable` instance to read column state from and dispatch visibility changes to. */
+  instance: DataTableInstance<T>;
+  /**
+   * Trigger button label. Defaults to the i18n value at `dataTable.columns`
+   * (`'Columns'` in English, `'Столбцы'` in Russian). Pass a node to use a
+   * custom label or icon+label combination.
+   *
+   * An EMPTY string counts as unset, not as an explicit blank: with the icon
+   * `aria-hidden`, this is the trigger's only name source (#535).
+   */
+  label?: ReactNode;
+  /**
+   * Trigger icon rendered to the left of the label. Defaults to a `Columns3`
+   * lucide icon (14px). Pass `null` to suppress the icon.
+   */
+  icon?: ReactNode;
+  /** Preferred side of the trigger for the menu. Defaults to `'bottom'`. Auto-flips on collision. */
+  side?: DropdownMenuSide;
+  /** Edge alignment of the menu relative to the trigger. Defaults to `'start'`. */
+  align?: DropdownMenuAlign;
+}
+
+/**
+ * Built-in companion for `<DataTable>`: a ghost Button trigger plus a DropdownMenu of column-visibility CheckboxItems.
+ * @see docs/components/DataTable.md
+ */
+function ColumnVisibilityTriggerInner<T>(
+  {
+    instance,
+    label,
+    icon = <Columns3 size={14} aria-hidden="true" />,
+    side,
+    align,
+    ...rest
+  }: ColumnVisibilityTriggerProps<T>,
+  ref: Ref<HTMLButtonElement>,
+) {
+  const t = useTranslation();
+  const hidableCols = instance.columns.filter((c) => c.enableHide !== false);
+
+  // Count visible hidable columns so we can disable the last one.
+  const visibleHidableCount = hidableCols.reduce(
+    (n, c) => n + (instance.columnVisibility[c.id] === false ? 0 : 1),
+    0,
+  );
+
+  return (
+    <DropdownMenu>
+      {/* DropdownMenu.Trigger clones its child and merges refs — the forwarded ref
+          will be preserved alongside the trigger's internal positioning ref. */}
+      <DropdownMenu.Trigger>
+        {/* {...rest} last so consumer overrides win (Pattern A). */}
+        <Button ref={ref} variant="ghost" size="sm" {...rest}>
+          {icon}
+          {/* `||`, not `??`: the icon beside it is aria-hidden, so this is the
+              trigger's only name source and `label=""` would leave the button
+              with no accessible name (#535, next door to this fix). */}
+          {label || t('dataTable.columns')}
+        </Button>
+      </DropdownMenu.Trigger>
+      <DropdownMenu.Content side={side} align={align}>
+        {hidableCols.map((col) => {
+          const visible = instance.columnVisibility[col.id] !== false;
+          const isLastVisible = visible && visibleHidableCount === 1;
+          // Truthiness at BOTH steps, not `??`. The `col.id` tail exists so a
+          // column with a non-string header still gets something readable in
+          // the menu; `visibilityLabel: ''` — or `header: ''`, equally a string
+          // — defeated it and rendered a blank, unidentifiable checkbox row,
+          // strictly worse than the raw identifier the code falls back to
+          // (#536). `.trim()` matches HeaderCell's `rendersText`: a
+          // whitespace-only header renders no text either.
+          const itemLabel =
+            col.visibilityLabel ||
+            (typeof col.header === 'string' && col.header.trim() ? col.header : col.id);
+          return (
+            <DropdownMenu.CheckboxItem
+              key={col.id}
+              checked={visible}
+              disabled={isLastVisible}
+              onCheckedChange={() => instance.toggleColumnVisibility(col.id)}
+            >
+              {itemLabel}
+            </DropdownMenu.CheckboxItem>
+          );
+        })}
+      </DropdownMenu.Content>
+    </DropdownMenu>
+  );
+}
+
+export const ColumnVisibilityTrigger = forwardRef(ColumnVisibilityTriggerInner) as <T>(
+  props: ColumnVisibilityTriggerProps<T> & { ref?: Ref<HTMLButtonElement> },
+) => ReturnType<typeof ColumnVisibilityTriggerInner>;