@crispy-seed/data-table 0.10.4 → 0.11.0

package/dist/index.d.ts

@@ -1,4 +1,4 @@
-import * as react from 'react';
+import * as React from 'react';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 
 declare interface DataTableVariant {
@@ -57,18 +57,22 @@ interface ToolbarFilter {
 }
 
 /**
- * Live-review fix (Attio/GRC parity): the ColumnCalc footer's own aggregation set --
- * three apply to every column, six more to numeric ones, one more to non-numeric ones.
- * Distinct from crisp's own `ColumnCalc` (`countEmpty`/`countFilled`/`percentEmpty`/
- * `percentFilled` + sum/average/min/max + "none") -- crisp's own set was read for the
- * MENU/trigger interaction (`column-calc.tsx`'s own doc comment), not copied op-for-op;
- * this table's contract is the ten named directly in DATATABLE-ATTIO-SPEC.md/the GRC
- * feature contract: count / empty / not-empty everywhere, sum / average / median / min
- * / max / range on a numeric column, count-unique on a non-numeric one. The styled
- * layer picks which extra set to offer off the column's own cell type (`column-calc.tsx`'s
- * `ColumnCalcCell`).
+ * Attio-parity follow-up (bring the discovery doc's PARTIAL #7 to full parity, on top
+ * of the earlier GRC live-review fix): the ColumnCalc footer's own aggregation set --
+ * six apply to every column, six more to numeric ones, one more to non-numeric ones.
+ * The six universal ops are `count` (GRC's own addition, kept) plus Attio's measured
+ * four -- `empty`/`notEmpty` labelled "Count empty"/"Count filled", `percentEmpty` /
+ * `percentFilled` -- plus `none`, which is Attio's own menu entry for "no calculation",
+ * not a conditionally-appended "Clear" item: it renders nothing (`computeColumnCalc`
+ * returns `null` for it) and, unlike `setColumnCalcOp(key, undefined)`, is a real,
+ * explicit, controllable op value so it overrides a column's `summaryDefaultOp`
+ * instead of falling back to it. Numeric columns still additionally get sum / average
+ * / median / min / max / range (GRC's set, not in Attio's own measured menu but kept --
+ * this table's contract, not a straight port); non-numeric columns still get
+ * count-unique. The styled layer picks which extra set to offer off the column's own
+ * cell type (`column-calc.tsx`'s `ColumnCalcCell`).
  */
-type DataTableCalcOp = "count" | "empty" | "notEmpty" | "sum" | "average" | "median" | "min" | "max" | "range" | "countUnique";
+type DataTableCalcOp = "count" | "empty" | "notEmpty" | "percentEmpty" | "percentFilled" | "none" | "sum" | "average" | "median" | "min" | "max" | "range" | "countUnique";
 
 /** Everything a saved view actually captures -- deliberately the same five controlled
  *  props `useDataTableColumns` + the toolbar sort/filter hooks already expose, so
@@ -114,6 +118,15 @@ interface UseDataTableViewsProps {
     storageKey?: string;
 }
 
+/** The context a consumer's `cellContextMenuItems` render slot gets -- everything it
+ *  needs to build its own `MenuItem`s (which row/column this menu opened for, the raw
+ *  value already read off `getColumnValue`) without re-deriving any of it itself. */
+interface DataTableCellContextMenuContext<TRow> {
+    row: TRow;
+    column: DataTableColumn<TRow>;
+    value: unknown;
+}
+
 type DataTableCellType = "text" | "entity" | "url" | "email" | "tags" | "status" | "number" | "currency" | "date" | "datetime" | "rating" | "checkbox" | "chip" | "chip-list";
 
 /** A `select`/`reference`/`actor` editor's own choice list -- `value`/`label` are
@@ -138,7 +151,7 @@ interface DataTableColumn<TRow> {
      */
     key: string;
     /** 헤더 셀에 표시할 내용입니다. */
-    header: react.ReactNode;
+    header: React.ReactNode;
     /** 이 열을 클릭해 정렬할 수 있는지 여부입니다. */
     sortable?: boolean;
     /**
@@ -149,7 +162,7 @@ interface DataTableColumn<TRow> {
     /** 셀 내용을 직접 그립니다. 지정하면 `type`의 기본 렌더러 대신 이것을 사용합니다.
      *  `editable`이어도 편집/always-live 상태에는 영향이 없습니다 -- 이 필드는 REST
      *  상태의 표시만 바꿉니다. */
-    render?: (row: TRow) => react.ReactNode;
+    render?: (row: TRow) => React.ReactNode;
     /** `type: "currency"`의 통화 기호입니다. @default "$" */
     symbol?: string;
     /** `type: "rating"`의 별 개수입니다. @default 5 */
@@ -276,11 +289,11 @@ interface DataTableColumn<TRow> {
      * 줄임표 처리되고, 아이콘은 `flex-shrink:0`). `type: "text"`(기본)와 `"url"`/
      * `"email"` 열에서 동작합니다.
      */
-    suffixIcon?: (row: TRow) => react.ReactNode;
+    suffixIcon?: (row: TRow) => React.ReactNode;
 }
 interface DataTableProps<TRow extends {
     id: string;
-}> extends DataTableVariantProps, Omit<PrimitiveProps, "asChild">, Omit<react.HTMLAttributes<HTMLDivElement>, "children"> {
+}> extends DataTableVariantProps, Omit<PrimitiveProps, "asChild">, Omit<React.HTMLAttributes<HTMLDivElement>, "children"> {
     columns: DataTableColumn<TRow>[];
     data: TRow[];
     /** `type`이 있는 열의 number/currency/date/datetime 표시에 쓰는 로캘입니다. @default "en-US" */
@@ -298,9 +311,9 @@ interface DataTableProps<TRow extends {
      * 씁니다. 생략하면 karrot 아이콘 셋의 chevron을 씁니다.
      */
     sortIcon?: {
-        idle?: react.ReactNode;
-        asc?: react.ReactNode;
-        desc?: react.ReactNode;
+        idle?: React.ReactNode;
+        asc?: React.ReactNode;
+        desc?: React.ReactNode;
     };
     /** 왼쪽에 40px짜리 체크박스 선택 열을 추가합니다. */
     selectable?: boolean;
@@ -316,10 +329,21 @@ interface DataTableProps<TRow extends {
     getRowSelectionLabel?: (row: TRow) => string;
     /** 선택 체크박스가 checked일 때 표시할 아이콘입니다. 생략하면 karrot의 체크 아이콘을
      *  씁니다. */
-    selectionCheckedIcon?: react.ReactNode;
+    selectionCheckedIcon?: React.ReactNode;
     /** 전체 선택 체크박스가 일부만 선택됐을 때(indeterminate) 표시할 아이콘입니다.
      *  생략하면 karrot의 minus 아이콘을 씁니다. */
-    selectionIndeterminateIcon?: react.ReactNode;
+    selectionIndeterminateIcon?: React.ReactNode;
+    /**
+     * 행이 하나 이상 선택되면 테이블 하단 중앙에 뜨는 벌크 액션 바(Attio 스타일 floating
+     * pill, gap #4)에 넣을 소비자 액션입니다. 현재 선택된 행 id 목록을 받는 render prop --
+     * 이 컴포넌트는 바의 크롬("N selected" + 지우기 버튼)만 제공하고, 실제 액션 버튼(Add
+     * to list, Send email, …)은 항상 소비자 자신의 것입니다 (`toolbarActions`와 같은
+     * "크롬 vs 소비자 콘텐츠" 분리). 생략하면 바는 크롬만 보여줍니다. `selectable`이 꺼져
+     * 있으면 무시됩니다(선택 자체가 없으므로).
+     */
+    bulkActions?: (selectedIds: string[]) => React.ReactNode;
+    /** 벌크 액션 바의 지우기(x) 버튼 접근성 이름입니다. @default "Clear selection" */
+    clearSelectionLabel?: string;
     /** 제어할 검색어입니다. */
     query?: string;
     /** 비제어 방식으로 사용할 때의 초기 검색어입니다. */
@@ -356,7 +380,7 @@ interface DataTableProps<TRow extends {
      * 행 개수 텍스트를 직접 만듭니다. 생략하면 crisp의 기본 형식을 씁니다: 검색/필터로
      * 줄지 않았으면 "N rows"(단수는 "row"), 줄었으면 "N of M".
      */
-    countLabel?: (shown: number, total: number) => react.ReactNode;
+    countLabel?: (shown: number, total: number) => React.ReactNode;
     /**
      * 툴바 오른쪽, 행 개수 옆에 렌더링할 커스텀 액션입니다(예: Download/내보내기 버튼).
      * 이전에는 이 자리에 넣을 공식 prop이 없어서 소비자가 `.seed-data-table__toolbar`
@@ -365,7 +389,7 @@ interface DataTableProps<TRow extends {
      * 렌더링됩니다). 검색/정렬/필터보다 뒤, 카운트보다 앞(같은 그룹 안에서 카운트
      * 왼쪽)에 옵니다.
      */
-    toolbarActions?: react.ReactNode;
+    toolbarActions?: React.ReactNode;
     /** 헤더의 열별 메뉴(이름 변경 / 숨기기 / 왼쪽·오른쪽으로 이동)를 켭니다, seed `Menu`. */
     columnMenu?: boolean;
     /** 헤더를 드래그해 열 순서를 바꿀 수 있게 합니다. @default true */
@@ -429,6 +453,24 @@ interface DataTableProps<TRow extends {
      * 커밋됩니다.
      */
     onEdit?: (id: string, key: string, value: string) => Promise<void> | void;
+    /**
+     * Attio parity (attio-column-features-full.md gap #1) -- right-click any body cell
+     * to open a menu: Copy (any cell, built-in -- `navigator.clipboard.writeText` of the
+     * cell's own display text), Clear value/Paste (editable cells only, see
+     * `cell-context-menu.tsx`'s own `isClearableEditableCell`/`isSimpleEditableCell` for
+     * exactly which shapes qualify), and View edit history (only when
+     * `onViewEditHistory` is passed). @default true
+     */
+    cellContextMenu?: boolean;
+    /** Shown as "View edit history" in the cell context menu, only when passed -- the
+     *  consumer owns whatever history UI opens (a drawer, a modal, …); this component
+     *  only fires the callback with the row and the column's key. */
+    onViewEditHistory?: (row: TRow, columnKey: string) => void;
+    /** Extra `MenuItem`s appended to the end of every cell's right-click menu (e.g. a
+     *  consumer's own "Assign to…") -- rendered inside the SAME `MenuScrollArea` the
+     *  built-in items are, so a `<MenuItem>` from this package's own `Menu` export
+     *  composes the way `column-menu.tsx`'s own items do. */
+    cellContextMenuItems?: (ctx: DataTableCellContextMenuContext<TRow>) => React.ReactNode;
     /** 행을 클릭할 수 있게 하는 호버 표시입니다 (crisp의 3%/4% 포그라운드 틴트). 커서
      *  모양은 `onRowClick`이 있는지에 따로 달려 있습니다 -- 이 값과 독립적으로 켤 수
      *  있습니다(crisp의 두 prop, `interactive`/`onRowClick`도 서로 독립적입니다). */
@@ -439,19 +481,19 @@ interface DataTableProps<TRow extends {
     /** 주어지면 맨 아래에 crisp가 측정한 "+ New" 추가 행 버튼을 렌더링합니다. */
     onAddRow?: () => void;
     /** 추가 행 버튼의 라벨입니다. @default "New record" */
-    addRowLabel?: react.ReactNode;
+    addRowLabel?: React.ReactNode;
     /** 전체 본문을 이 상태로 대체합니다(로딩 아이콘 + `loadingLabel`) -- 필터/정렬
      *  재조회나 최초 로드처럼 행 전체가 아직 없을 때를 위한 것입니다. `error`/빈 상태
      *  보다 우선합니다. 인라인 스크롤 로딩 표시기(`onLoadMore`)와는 별개입니다. */
     loading?: boolean;
     /** `loading`일 때 스피너 옆에 보이는 텍스트입니다. @default "Loading..." */
-    loadingLabel?: react.ReactNode;
+    loadingLabel?: React.ReactNode;
     /** 주어지면 행 대신 이 내용을 본문에 렌더링합니다(crisp의 `.crisp-datatable-empty`
      *  칸 재사용). `loading`보다는 아래, 빈 상태보다는 위 우선순위입니다. */
-    error?: react.ReactNode;
+    error?: React.ReactNode;
     /** 검색/필터를 거치고도 행이 하나도 없을 때 본문에 렌더링할 내용입니다.
      *  @default "No results." */
-    empty?: react.ReactNode;
+    empty?: React.ReactNode;
     /**
      * Attio 스타일 무한 스크롤: 스크롤 컨테이너 바닥 근처의 sentinel 행이 뷰에 들어오면
      * 호출됩니다. `Promise`를 반환하면 그동안 자동으로 `loadingMore`가 켜집니다(직접
@@ -475,7 +517,7 @@ interface DataTableProps<TRow extends {
      * `style={{ height: "100%" }}` 같은 바운드를 주는 것만으로도 "전체 높이" 모드가
      * 됩니다 -- 새 prop 없이 기존 `style` 전달만으로 두 모드 다 지원됩니다.
      */
-    scrollProps?: Omit<react.ComponentPropsWithoutRef<"div">, "ref" | "onScroll">;
+    scrollProps?: Omit<React.ComponentPropsWithoutRef<"div">, "ref" | "onScroll">;
 }
 /**
  * @see https://seed-design.io/react/components/data-table
@@ -483,8 +525,8 @@ interface DataTableProps<TRow extends {
 declare const DataTable: <TRow extends {
     id: string;
 }>(props: DataTableProps<TRow> & {
-    ref?: react.ForwardedRef<HTMLDivElement>;
-}) => react.ReactElement;
+    ref?: React.ForwardedRef<HTMLDivElement>;
+}) => React.ReactElement;
 
 interface DataTableViewsControlProps extends UseDataTableViewsProps {
     /** The trigger's label when no view is active. @default "Views" */
@@ -494,7 +536,7 @@ interface DataTableViewsControlProps extends UseDataTableViewsProps {
      *  meaningful "no view" state to switch back to. */
     showClearRow?: boolean;
     /** The clear row's own label, when `showClearRow` is on. @default "label" */
-    clearLabel?: react.ReactNode;
+    clearLabel?: React.ReactNode;
     /**
      * Reads the table's CURRENT column order/visibility/widths/pins + toolbar sort/
      * filter conditions -- called when the user picks "Save as new view" or "Update
@@ -527,10 +569,32 @@ declare namespace DataTableViewsControl {
     var displayName: string;
 }
 
+interface DataTableBulkBarProps {
+    /** The clear ("x") button's accessible name. @default "Clear selection" */
+    clearLabel?: string;
+    /**
+     * The consumer's own bulk-action buttons, as a render prop receiving the current
+     * selected row ids -- e.g. `<DataTableBulkBar>{(ids) => <ActionButton
+     * onClick={() => addToList(ids)}>Add to list</ActionButton>}</DataTableBulkBar>`.
+     * Omit for just the bar's own chrome ("N selected" + clear).
+     */
+    children?: (selectedIds: string[]) => React.ReactNode;
+}
+/**
+ * The floating bulk-action pill (gap #4) -- renders nothing while no row is selected
+ * (reads `selectedIds` off the table-wide context itself, so a consumer doesn't have
+ * to gate this on `selectable`/`selectedIds` on their own). Composed as the LAST
+ * child of the table's own root (`DataTable.tsx`), which is `position: relative` for
+ * exactly this reason -- see `data-table.ts`'s own `bulkBar` slot comment for why its
+ * geometry borrows `contextual-floating-button`'s already-measured vars rather than a
+ * guessed literal.
+ */
+declare function DataTableBulkBar({ clearLabel, children, }: DataTableBulkBarProps): react_jsx_runtime.JSX.Element | null;
+
 type ResizablePanelSide = "left" | "right";
 
 type ResizablePanelHandleVariant = "panel" | "column";
-type ResizablePanelProps = Omit<react.ComponentPropsWithoutRef<"div">, "children" | "onResize"> & {
+type ResizablePanelProps = Omit<React.ComponentPropsWithoutRef<"div">, "children" | "onResize"> & {
     /** Which edge of its container the panel is anchored to. @default "left" */
     side?: ResizablePanelSide;
     /** Controlled width, in px. */
@@ -619,9 +683,9 @@ type ResizablePanelProps = Omit<react.ComponentPropsWithoutRef<"div">, "children
      * observe `animationName` changes on the SAME node that carries
      * `data-state`/the keyframe animation above.
      */
-    panelElementRef?: react.Ref<HTMLDivElement>;
+    panelElementRef?: React.Ref<HTMLDivElement>;
     className?: string;
-    children?: react.ReactNode;
+    children?: React.ReactNode;
 };
 /**
  * An adjustable-panel primitive with two layout models (`floating`'s own doc
@@ -637,7 +701,7 @@ type ResizablePanelProps = Omit<react.ComponentPropsWithoutRef<"div">, "children
  * lives in `useResizablePanel` (`@seed-design/react-resizable-panel`), this
  * component owns the DOM + recipe classes on top of it.
  */
-declare const ResizablePanel: react.ForwardRefExoticComponent<Omit<Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "children" | "onResize"> & {
+declare const ResizablePanel: React.ForwardRefExoticComponent<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "children" | "onResize"> & {
     /** Which edge of its container the panel is anchored to. @default "left" */
     side?: ResizablePanelSide;
     /** Controlled width, in px. */
@@ -726,10 +790,10 @@ declare const ResizablePanel: react.ForwardRefExoticComponent<Omit<Omit<react.De
      * observe `animationName` changes on the SAME node that carries
      * `data-state`/the keyframe animation above.
      */
-    panelElementRef?: react.Ref<HTMLDivElement>;
+    panelElementRef?: React.Ref<HTMLDivElement>;
     className?: string;
-    children?: react.ReactNode;
-} & react.RefAttributes<HTMLDivElement>>;
+    children?: React.ReactNode;
+} & React.RefAttributes<HTMLDivElement>>;
 
 /** One Highlights card -- label, value and an optional icon, laid out the way
  *  Attio's own peek panel lays its own out (your-moon/crisp#448, measured
@@ -738,8 +802,8 @@ declare const ResizablePanel: react.ForwardRefExoticComponent<Omit<Omit<react.De
 type RecordPreviewHighlight = {
     key: string;
     label: string;
-    value: react.ReactNode;
-    icon?: react.ComponentType<{
+    value: React.ReactNode;
+    icon?: React.ComponentType<{
         size?: number;
     }>;
 };
@@ -752,7 +816,7 @@ type RecordPreviewSection = {
     key: string;
     label: string;
     count: number;
-    content?: react.ReactNode;
+    content?: React.ReactNode;
 };
 /** One tab of the panel's own mini detail view (a "tabs" capability with no
  *  your-moon/crisp equivalent -- crisp's own peek only ever shows Highlights
@@ -764,12 +828,12 @@ type RecordPreviewSection = {
  *  tab has been visited) -- see `Tabs.tsx`. */
 type RecordPreviewTab = {
     key: string;
-    label: react.ReactNode;
-    content: react.ReactNode;
+    label: React.ReactNode;
+    content: React.ReactNode;
     /** Rendered right after `label` inside the tab trigger, e.g. an unread
      *  count -- purely presentational, this component attaches no meaning to
      *  it. */
-    badge?: react.ReactNode;
+    badge?: React.ReactNode;
 };
 /** The record this panel previews. Only `name` is read directly here --
  *  everything else the panel shows comes from `highlights`/`activity`/
@@ -781,7 +845,7 @@ type RecordPreviewRecord = {
     name?: string;
     [key: string]: unknown;
 };
-type RecordPreviewProps = Omit<react.ComponentPropsWithoutRef<"div">, "children" | "title" | "onResize"> & {
+type RecordPreviewProps = Omit<React.ComponentPropsWithoutRef<"div">, "children" | "title" | "onResize"> & {
     /** Whether the panel is mounted/visible. */
     open: boolean;
     onClose: () => void;
@@ -802,7 +866,7 @@ type RecordPreviewProps = Omit<react.ComponentPropsWithoutRef<"div">, "children"
     nextRecordLabel?: string;
     /** "2 of 37 in All Companies" (your-moon/crisp#413) -- a single
      *  pre-formatted string; omit for no counter at all. */
-    counterLabel?: react.ReactNode;
+    counterLabel?: React.ReactNode;
     /**
      * Lets a person drag the panel wider or narrower from its own left edge --
      * this port reuses `ResizablePanel`'s own handle (`side="right"`, whose
@@ -818,7 +882,7 @@ type RecordPreviewProps = Omit<react.ComponentPropsWithoutRef<"div">, "children"
     minWidth?: number;
     maxWidth?: number;
     /** The panel's heading, and so its accessible name. Defaults to `record.name`. */
-    title?: react.ReactNode;
+    title?: React.ReactNode;
     /** Avatar image URL beside the title. Omit for an initials tile built from
      *  `record.name`'s first character. */
     avatar?: string;
@@ -827,13 +891,13 @@ type RecordPreviewProps = Omit<react.ComponentPropsWithoutRef<"div">, "children"
     record: RecordPreviewRecord | null;
     /** Heading above the highlight cards (default "Highlights"). Omit the
      *  whole section by omitting `highlights`. */
-    highlightsLabel?: react.ReactNode;
+    highlightsLabel?: React.ReactNode;
     highlights?: RecordPreviewHighlight[];
     /** Heading above the activity feed (default "Activity"). */
-    activityLabel?: react.ReactNode;
-    viewAllActivityLabel?: react.ReactNode;
+    activityLabel?: React.ReactNode;
+    viewAllActivityLabel?: React.ReactNode;
     onViewAllActivity?: () => void;
-    activity?: react.ReactNode;
+    activity?: React.ReactNode;
     /** Collapsed sections below Activity (your-moon/crisp#413). Omit for no
      *  sections at all. */
     sections?: RecordPreviewSection[];
@@ -859,9 +923,9 @@ type RecordPreviewProps = Omit<react.ComponentPropsWithoutRef<"div">, "children"
     onTabChange?: (key: string) => void;
     /** Label for the synthesized overview tab -- see `tabs`'s own doc
      *  comment. @default "Overview" */
-    overviewTabLabel?: react.ReactNode;
+    overviewTabLabel?: React.ReactNode;
     /** Rendered below the panel's content, e.g. an Edit button. */
-    footer?: react.ReactNode;
+    footer?: React.ReactNode;
     /**
      * An optional dimming backdrop behind the panel -- OFF by default (this
      * is a peek, not a modal: Attio's own peek never dims the table it
@@ -917,5 +981,5 @@ declare namespace RecordPreview {
     var displayName: string;
 }
 
-export { DataTable, DataTableViewsControl, RecordPreview, ResizablePanel };
-export type { DataTableColumn, DataTableColumnKind, DataTableProps, DataTableView, DataTableViewState, DataTableViewsControlProps, RecordPreviewHighlight, RecordPreviewProps, RecordPreviewRecord, RecordPreviewSection, RecordPreviewTab, ResizablePanelHandleVariant, ResizablePanelProps, ResizablePanelSide, ToolbarFilter, ToolbarFilterOp, ToolbarSort, ToolbarSortDirection };
+export { DataTable, DataTableBulkBar, DataTableViewsControl, RecordPreview, ResizablePanel };
+export type { DataTableBulkBarProps, DataTableCellContextMenuContext, DataTableColumn, DataTableColumnKind, DataTableProps, DataTableView, DataTableViewState, DataTableViewsControlProps, RecordPreviewHighlight, RecordPreviewProps, RecordPreviewRecord, RecordPreviewSection, RecordPreviewTab, ResizablePanelHandleVariant, ResizablePanelProps, ResizablePanelSide, ToolbarFilter, ToolbarFilterOp, ToolbarSort, ToolbarSortDirection };