@crispy-seed/data-table 0.9.0 → 0.10.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 {
@@ -114,7 +114,7 @@ interface UseDataTableViewsProps {
     storageKey?: string;
 }
 
-type DataTableCellType = "text" | "entity" | "url" | "email" | "tags" | "status" | "number" | "currency" | "date" | "datetime" | "rating" | "checkbox";
+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
  *  required (the committed string and what the row reads), `avatar` is read only by
@@ -138,7 +138,7 @@ interface DataTableColumn<TRow> {
      */
     key: string;
     /** 헤더 셀에 표시할 내용입니다. */
-    header: React.ReactNode;
+    header: react.ReactNode;
     /** 이 열을 클릭해 정렬할 수 있는지 여부입니다. */
     sortable?: boolean;
     /**
@@ -149,7 +149,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 */
@@ -269,10 +269,18 @@ interface DataTableColumn<TRow> {
     onOpenPreview?: (row: TRow) => void;
     /** `onOpenPreview` 아이콘의 aria-label입니다. @default "Open preview" */
     openPreviewLabel?: string;
+    /**
+     * 셀 텍스트 옆에 고정으로 붙는 접미(trailing) 아이콘입니다 (예: 링크 열의 외부 링크
+     * 아이콘, 위치 열의 핀 아이콘) -- 텍스트가 길어져도 이 아이콘은 잘리거나 사라지지
+     * 않습니다 (cells.tsx의 `CellWithSuffix`: 텍스트 쪽만 `flex:1;min-width:0`로
+     * 줄임표 처리되고, 아이콘은 `flex-shrink:0`). `type: "text"`(기본)와 `"url"`/
+     * `"email"` 열에서 동작합니다.
+     */
+    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" */
@@ -290,9 +298,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;
@@ -308,10 +316,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;
     /** 제어할 검색어입니다. */
     query?: string;
     /** 비제어 방식으로 사용할 때의 초기 검색어입니다. */
@@ -348,7 +356,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`
@@ -357,7 +365,7 @@ interface DataTableProps<TRow extends {
      * 렌더링됩니다). 검색/정렬/필터보다 뒤, 카운트보다 앞(같은 그룹 안에서 카운트
      * 왼쪽)에 옵니다.
      */
-    toolbarActions?: React.ReactNode;
+    toolbarActions?: react.ReactNode;
     /** 헤더의 열별 메뉴(이름 변경 / 숨기기 / 왼쪽·오른쪽으로 이동)를 켭니다, seed `Menu`. */
     columnMenu?: boolean;
     /** 헤더를 드래그해 열 순서를 바꿀 수 있게 합니다. @default true */
@@ -431,19 +439,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`가 켜집니다(직접
@@ -467,7 +475,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
@@ -475,8 +483,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" */
@@ -486,7 +494,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
@@ -522,7 +530,7 @@ declare namespace DataTableViewsControl {
 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. */
@@ -611,9 +619,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
@@ -629,7 +637,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. */
@@ -718,10 +726,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
@@ -730,8 +738,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;
     }>;
 };
@@ -744,7 +752,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
@@ -756,12 +764,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`/
@@ -773,7 +781,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;
@@ -794,7 +802,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
@@ -810,7 +818,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;
@@ -819,13 +827,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[];
@@ -851,9 +859,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