@crispy-seed/data-table 0.11.0 → 0.11.2

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 {
@@ -151,7 +151,7 @@ interface DataTableColumn<TRow> {
      */
     key: string;
     /** 헤더 셀에 표시할 내용입니다. */
-    header: React.ReactNode;
+    header: react.ReactNode;
     /** 이 열을 클릭해 정렬할 수 있는지 여부입니다. */
     sortable?: boolean;
     /**
@@ -162,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 */
@@ -198,8 +198,11 @@ interface DataTableColumn<TRow> {
      * 절대 스크롤되어 사라지지 않도록 오른쪽 끝에 고정합니다 -- 이 플래그가 있는 열은 테이블
      * 전체의 `stickyLast`를 켜지 않아도 자동으로 그 고정 + 왼쪽 스크롤 그림자
      * (`stickyProps`/`stickyLast`가 이미 구현한 것과 동일한 메커니즘, `data-sticky-edge-end`
-     * / `data-scrolled-end`)를 받습니다. 열 목록의 마지막 열이어야 합니다 -- `stickyLast`
-     * 자체가 이미 "마지막으로 보이는 열"만 고정하는 규칙이기 때문입니다.
+     * / `data-scrolled-end`)를 받습니다. `stickyLast`는 이 플래그가 붙은 열을 직접 찾아
+     * 고정합니다 (`column-layout.ts`의 `useEffectiveColumns`) -- 더 이상 "마지막으로 보이는
+     * 열"이어야만 한다는 제약이 없습니다. 내부적으로도 `reconcileColumnOrder`(react-headless의
+     * `dom.ts`)가 이 열을 항상 맨 끝에 유지하므로, 마운트 이후 추가된 새 열이 이 열보다 뒤로
+     * 붙어 고정 셀 뒤에 가려지는 일도 없습니다.
      */
     actions?: boolean;
     /**
@@ -282,6 +285,19 @@ interface DataTableColumn<TRow> {
     onOpenPreview?: (row: TRow) => void;
     /** `onOpenPreview` 아이콘의 aria-label입니다. @default "Open preview" */
     openPreviewLabel?: string;
+    /**
+     * `type: "entity"` only -- makes the entity NAME itself clickable-to-navigate,
+     * matching how Attio actually enters a record (measured live: clicking the name
+     * text, an `<a href="/…/company/<id>">` sized to the name, not the row). Takes
+     * priority over the value's own `href` (`DataTableEntityValue.href`) when both are
+     * given. `event.stopPropagation()`'d, so a name click never also fires the row's
+     * `onRowClick` -- independent of the `onOpenPreview` button above, which stays a
+     * separate affordance for the same row. Renders a plain, non-underlined-until-
+     * hover name (crisp's own measured shape: normal name color/weight, an underline
+     * affordance on hover, not a blue link) rather than `onOpenPreview`'s icon button.
+     * Omit for a plain, non-clickable name (the existing default).
+     */
+    onOpenRecord?: (row: TRow) => void;
     /**
      * 셀 텍스트 옆에 고정으로 붙는 접미(trailing) 아이콘입니다 (예: 링크 열의 외부 링크
      * 아이콘, 위치 열의 핀 아이콘) -- 텍스트가 길어져도 이 아이콘은 잘리거나 사라지지
@@ -289,11 +305,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" */
@@ -311,9 +327,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;
@@ -329,10 +345,10 @@ 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 --
@@ -341,7 +357,7 @@ interface DataTableProps<TRow extends {
      * "크롬 vs 소비자 콘텐츠" 분리). 생략하면 바는 크롬만 보여줍니다. `selectable`이 꺼져
      * 있으면 무시됩니다(선택 자체가 없으므로).
      */
-    bulkActions?: (selectedIds: string[]) => React.ReactNode;
+    bulkActions?: (selectedIds: string[]) => react.ReactNode;
     /** 벌크 액션 바의 지우기(x) 버튼 접근성 이름입니다. @default "Clear selection" */
     clearSelectionLabel?: string;
     /** 제어할 검색어입니다. */
@@ -380,7 +396,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`
@@ -389,7 +405,7 @@ interface DataTableProps<TRow extends {
      * 렌더링됩니다). 검색/정렬/필터보다 뒤, 카운트보다 앞(같은 그룹 안에서 카운트
      * 왼쪽)에 옵니다.
      */
-    toolbarActions?: React.ReactNode;
+    toolbarActions?: react.ReactNode;
     /** 헤더의 열별 메뉴(이름 변경 / 숨기기 / 왼쪽·오른쪽으로 이동)를 켭니다, seed `Menu`. */
     columnMenu?: boolean;
     /** 헤더를 드래그해 열 순서를 바꿀 수 있게 합니다. @default true */
@@ -470,7 +486,7 @@ interface DataTableProps<TRow extends {
      *  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;
+    cellContextMenuItems?: (ctx: DataTableCellContextMenuContext<TRow>) => react.ReactNode;
     /** 행을 클릭할 수 있게 하는 호버 표시입니다 (crisp의 3%/4% 포그라운드 틴트). 커서
      *  모양은 `onRowClick`이 있는지에 따로 달려 있습니다 -- 이 값과 독립적으로 켤 수
      *  있습니다(crisp의 두 prop, `interactive`/`onRowClick`도 서로 독립적입니다). */
@@ -481,19 +497,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`가 켜집니다(직접
@@ -517,7 +533,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
@@ -525,8 +541,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" */
@@ -536,7 +552,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
@@ -578,7 +594,7 @@ interface DataTableBulkBarProps {
      * onClick={() => addToList(ids)}>Add to list</ActionButton>}</DataTableBulkBar>`.
      * Omit for just the bar's own chrome ("N selected" + clear).
      */
-    children?: (selectedIds: string[]) => React.ReactNode;
+    children?: (selectedIds: string[]) => react.ReactNode;
 }
 /**
  * The floating bulk-action pill (gap #4) -- renders nothing while no row is selected
@@ -594,7 +610,7 @@ declare function DataTableBulkBar({ clearLabel, children, }: DataTableBulkBarPro
 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. */
@@ -683,9 +699,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
@@ -701,7 +717,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. */
@@ -790,10 +806,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
@@ -802,8 +818,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;
     }>;
 };
@@ -816,7 +832,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
@@ -828,12 +844,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`/
@@ -845,7 +861,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;
@@ -866,7 +882,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
@@ -882,7 +898,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;
@@ -891,13 +907,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[];
@@ -923,9 +939,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