@crispy-seed/data-table 0.10.2 → 0.10.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/data-table-recipe.css +31 -2
- package/dist/data-table-recipe.layered.css +35 -3
- package/dist/index.cjs +397 -72
- package/dist/index.d.ts +42 -42
- package/dist/index.js +397 -72
- package/dist/styles.css +35 -3
- package/package.json +1 -1
package/dist/index.d.ts
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import * as
|
|
1
|
+
import * as react from 'react';
|
|
2
2
|
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
3
3
|
|
|
4
4
|
declare interface DataTableVariant {
|
|
@@ -138,7 +138,7 @@ interface DataTableColumn<TRow> {
|
|
|
138
138
|
*/
|
|
139
139
|
key: string;
|
|
140
140
|
/** 헤더 셀에 표시할 내용입니다. */
|
|
141
|
-
header:
|
|
141
|
+
header: react.ReactNode;
|
|
142
142
|
/** 이 열을 클릭해 정렬할 수 있는지 여부입니다. */
|
|
143
143
|
sortable?: boolean;
|
|
144
144
|
/**
|
|
@@ -149,7 +149,7 @@ interface DataTableColumn<TRow> {
|
|
|
149
149
|
/** 셀 내용을 직접 그립니다. 지정하면 `type`의 기본 렌더러 대신 이것을 사용합니다.
|
|
150
150
|
* `editable`이어도 편집/always-live 상태에는 영향이 없습니다 -- 이 필드는 REST
|
|
151
151
|
* 상태의 표시만 바꿉니다. */
|
|
152
|
-
render?: (row: TRow) =>
|
|
152
|
+
render?: (row: TRow) => react.ReactNode;
|
|
153
153
|
/** `type: "currency"`의 통화 기호입니다. @default "$" */
|
|
154
154
|
symbol?: string;
|
|
155
155
|
/** `type: "rating"`의 별 개수입니다. @default 5 */
|
|
@@ -276,11 +276,11 @@ interface DataTableColumn<TRow> {
|
|
|
276
276
|
* 줄임표 처리되고, 아이콘은 `flex-shrink:0`). `type: "text"`(기본)와 `"url"`/
|
|
277
277
|
* `"email"` 열에서 동작합니다.
|
|
278
278
|
*/
|
|
279
|
-
suffixIcon?: (row: TRow) =>
|
|
279
|
+
suffixIcon?: (row: TRow) => react.ReactNode;
|
|
280
280
|
}
|
|
281
281
|
interface DataTableProps<TRow extends {
|
|
282
282
|
id: string;
|
|
283
|
-
}> extends DataTableVariantProps, Omit<PrimitiveProps, "asChild">, Omit<
|
|
283
|
+
}> extends DataTableVariantProps, Omit<PrimitiveProps, "asChild">, Omit<react.HTMLAttributes<HTMLDivElement>, "children"> {
|
|
284
284
|
columns: DataTableColumn<TRow>[];
|
|
285
285
|
data: TRow[];
|
|
286
286
|
/** `type`이 있는 열의 number/currency/date/datetime 표시에 쓰는 로캘입니다. @default "en-US" */
|
|
@@ -298,9 +298,9 @@ interface DataTableProps<TRow extends {
|
|
|
298
298
|
* 씁니다. 생략하면 karrot 아이콘 셋의 chevron을 씁니다.
|
|
299
299
|
*/
|
|
300
300
|
sortIcon?: {
|
|
301
|
-
idle?:
|
|
302
|
-
asc?:
|
|
303
|
-
desc?:
|
|
301
|
+
idle?: react.ReactNode;
|
|
302
|
+
asc?: react.ReactNode;
|
|
303
|
+
desc?: react.ReactNode;
|
|
304
304
|
};
|
|
305
305
|
/** 왼쪽에 40px짜리 체크박스 선택 열을 추가합니다. */
|
|
306
306
|
selectable?: boolean;
|
|
@@ -316,10 +316,10 @@ interface DataTableProps<TRow extends {
|
|
|
316
316
|
getRowSelectionLabel?: (row: TRow) => string;
|
|
317
317
|
/** 선택 체크박스가 checked일 때 표시할 아이콘입니다. 생략하면 karrot의 체크 아이콘을
|
|
318
318
|
* 씁니다. */
|
|
319
|
-
selectionCheckedIcon?:
|
|
319
|
+
selectionCheckedIcon?: react.ReactNode;
|
|
320
320
|
/** 전체 선택 체크박스가 일부만 선택됐을 때(indeterminate) 표시할 아이콘입니다.
|
|
321
321
|
* 생략하면 karrot의 minus 아이콘을 씁니다. */
|
|
322
|
-
selectionIndeterminateIcon?:
|
|
322
|
+
selectionIndeterminateIcon?: react.ReactNode;
|
|
323
323
|
/** 제어할 검색어입니다. */
|
|
324
324
|
query?: string;
|
|
325
325
|
/** 비제어 방식으로 사용할 때의 초기 검색어입니다. */
|
|
@@ -356,7 +356,7 @@ interface DataTableProps<TRow extends {
|
|
|
356
356
|
* 행 개수 텍스트를 직접 만듭니다. 생략하면 crisp의 기본 형식을 씁니다: 검색/필터로
|
|
357
357
|
* 줄지 않았으면 "N rows"(단수는 "row"), 줄었으면 "N of M".
|
|
358
358
|
*/
|
|
359
|
-
countLabel?: (shown: number, total: number) =>
|
|
359
|
+
countLabel?: (shown: number, total: number) => react.ReactNode;
|
|
360
360
|
/**
|
|
361
361
|
* 툴바 오른쪽, 행 개수 옆에 렌더링할 커스텀 액션입니다(예: Download/내보내기 버튼).
|
|
362
362
|
* 이전에는 이 자리에 넣을 공식 prop이 없어서 소비자가 `.seed-data-table__toolbar`
|
|
@@ -365,7 +365,7 @@ interface DataTableProps<TRow extends {
|
|
|
365
365
|
* 렌더링됩니다). 검색/정렬/필터보다 뒤, 카운트보다 앞(같은 그룹 안에서 카운트
|
|
366
366
|
* 왼쪽)에 옵니다.
|
|
367
367
|
*/
|
|
368
|
-
toolbarActions?:
|
|
368
|
+
toolbarActions?: react.ReactNode;
|
|
369
369
|
/** 헤더의 열별 메뉴(이름 변경 / 숨기기 / 왼쪽·오른쪽으로 이동)를 켭니다, seed `Menu`. */
|
|
370
370
|
columnMenu?: boolean;
|
|
371
371
|
/** 헤더를 드래그해 열 순서를 바꿀 수 있게 합니다. @default true */
|
|
@@ -439,19 +439,19 @@ interface DataTableProps<TRow extends {
|
|
|
439
439
|
/** 주어지면 맨 아래에 crisp가 측정한 "+ New" 추가 행 버튼을 렌더링합니다. */
|
|
440
440
|
onAddRow?: () => void;
|
|
441
441
|
/** 추가 행 버튼의 라벨입니다. @default "New record" */
|
|
442
|
-
addRowLabel?:
|
|
442
|
+
addRowLabel?: react.ReactNode;
|
|
443
443
|
/** 전체 본문을 이 상태로 대체합니다(로딩 아이콘 + `loadingLabel`) -- 필터/정렬
|
|
444
444
|
* 재조회나 최초 로드처럼 행 전체가 아직 없을 때를 위한 것입니다. `error`/빈 상태
|
|
445
445
|
* 보다 우선합니다. 인라인 스크롤 로딩 표시기(`onLoadMore`)와는 별개입니다. */
|
|
446
446
|
loading?: boolean;
|
|
447
447
|
/** `loading`일 때 스피너 옆에 보이는 텍스트입니다. @default "Loading..." */
|
|
448
|
-
loadingLabel?:
|
|
448
|
+
loadingLabel?: react.ReactNode;
|
|
449
449
|
/** 주어지면 행 대신 이 내용을 본문에 렌더링합니다(crisp의 `.crisp-datatable-empty`
|
|
450
450
|
* 칸 재사용). `loading`보다는 아래, 빈 상태보다는 위 우선순위입니다. */
|
|
451
|
-
error?:
|
|
451
|
+
error?: react.ReactNode;
|
|
452
452
|
/** 검색/필터를 거치고도 행이 하나도 없을 때 본문에 렌더링할 내용입니다.
|
|
453
453
|
* @default "No results." */
|
|
454
|
-
empty?:
|
|
454
|
+
empty?: react.ReactNode;
|
|
455
455
|
/**
|
|
456
456
|
* Attio 스타일 무한 스크롤: 스크롤 컨테이너 바닥 근처의 sentinel 행이 뷰에 들어오면
|
|
457
457
|
* 호출됩니다. `Promise`를 반환하면 그동안 자동으로 `loadingMore`가 켜집니다(직접
|
|
@@ -475,7 +475,7 @@ interface DataTableProps<TRow extends {
|
|
|
475
475
|
* `style={{ height: "100%" }}` 같은 바운드를 주는 것만으로도 "전체 높이" 모드가
|
|
476
476
|
* 됩니다 -- 새 prop 없이 기존 `style` 전달만으로 두 모드 다 지원됩니다.
|
|
477
477
|
*/
|
|
478
|
-
scrollProps?: Omit<
|
|
478
|
+
scrollProps?: Omit<react.ComponentPropsWithoutRef<"div">, "ref" | "onScroll">;
|
|
479
479
|
}
|
|
480
480
|
/**
|
|
481
481
|
* @see https://seed-design.io/react/components/data-table
|
|
@@ -483,8 +483,8 @@ interface DataTableProps<TRow extends {
|
|
|
483
483
|
declare const DataTable: <TRow extends {
|
|
484
484
|
id: string;
|
|
485
485
|
}>(props: DataTableProps<TRow> & {
|
|
486
|
-
ref?:
|
|
487
|
-
}) =>
|
|
486
|
+
ref?: react.ForwardedRef<HTMLDivElement>;
|
|
487
|
+
}) => react.ReactElement;
|
|
488
488
|
|
|
489
489
|
interface DataTableViewsControlProps extends UseDataTableViewsProps {
|
|
490
490
|
/** The trigger's label when no view is active. @default "Views" */
|
|
@@ -494,7 +494,7 @@ interface DataTableViewsControlProps extends UseDataTableViewsProps {
|
|
|
494
494
|
* meaningful "no view" state to switch back to. */
|
|
495
495
|
showClearRow?: boolean;
|
|
496
496
|
/** The clear row's own label, when `showClearRow` is on. @default "label" */
|
|
497
|
-
clearLabel?:
|
|
497
|
+
clearLabel?: react.ReactNode;
|
|
498
498
|
/**
|
|
499
499
|
* Reads the table's CURRENT column order/visibility/widths/pins + toolbar sort/
|
|
500
500
|
* filter conditions -- called when the user picks "Save as new view" or "Update
|
|
@@ -530,7 +530,7 @@ declare namespace DataTableViewsControl {
|
|
|
530
530
|
type ResizablePanelSide = "left" | "right";
|
|
531
531
|
|
|
532
532
|
type ResizablePanelHandleVariant = "panel" | "column";
|
|
533
|
-
type ResizablePanelProps = Omit<
|
|
533
|
+
type ResizablePanelProps = Omit<react.ComponentPropsWithoutRef<"div">, "children" | "onResize"> & {
|
|
534
534
|
/** Which edge of its container the panel is anchored to. @default "left" */
|
|
535
535
|
side?: ResizablePanelSide;
|
|
536
536
|
/** Controlled width, in px. */
|
|
@@ -619,9 +619,9 @@ type ResizablePanelProps = Omit<React.ComponentPropsWithoutRef<"div">, "children
|
|
|
619
619
|
* observe `animationName` changes on the SAME node that carries
|
|
620
620
|
* `data-state`/the keyframe animation above.
|
|
621
621
|
*/
|
|
622
|
-
panelElementRef?:
|
|
622
|
+
panelElementRef?: react.Ref<HTMLDivElement>;
|
|
623
623
|
className?: string;
|
|
624
|
-
children?:
|
|
624
|
+
children?: react.ReactNode;
|
|
625
625
|
};
|
|
626
626
|
/**
|
|
627
627
|
* An adjustable-panel primitive with two layout models (`floating`'s own doc
|
|
@@ -637,7 +637,7 @@ type ResizablePanelProps = Omit<React.ComponentPropsWithoutRef<"div">, "children
|
|
|
637
637
|
* lives in `useResizablePanel` (`@seed-design/react-resizable-panel`), this
|
|
638
638
|
* component owns the DOM + recipe classes on top of it.
|
|
639
639
|
*/
|
|
640
|
-
declare const ResizablePanel:
|
|
640
|
+
declare const ResizablePanel: react.ForwardRefExoticComponent<Omit<Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "children" | "onResize"> & {
|
|
641
641
|
/** Which edge of its container the panel is anchored to. @default "left" */
|
|
642
642
|
side?: ResizablePanelSide;
|
|
643
643
|
/** Controlled width, in px. */
|
|
@@ -726,10 +726,10 @@ declare const ResizablePanel: React.ForwardRefExoticComponent<Omit<Omit<React.De
|
|
|
726
726
|
* observe `animationName` changes on the SAME node that carries
|
|
727
727
|
* `data-state`/the keyframe animation above.
|
|
728
728
|
*/
|
|
729
|
-
panelElementRef?:
|
|
729
|
+
panelElementRef?: react.Ref<HTMLDivElement>;
|
|
730
730
|
className?: string;
|
|
731
|
-
children?:
|
|
732
|
-
} &
|
|
731
|
+
children?: react.ReactNode;
|
|
732
|
+
} & react.RefAttributes<HTMLDivElement>>;
|
|
733
733
|
|
|
734
734
|
/** One Highlights card -- label, value and an optional icon, laid out the way
|
|
735
735
|
* Attio's own peek panel lays its own out (your-moon/crisp#448, measured
|
|
@@ -738,8 +738,8 @@ declare const ResizablePanel: React.ForwardRefExoticComponent<Omit<Omit<React.De
|
|
|
738
738
|
type RecordPreviewHighlight = {
|
|
739
739
|
key: string;
|
|
740
740
|
label: string;
|
|
741
|
-
value:
|
|
742
|
-
icon?:
|
|
741
|
+
value: react.ReactNode;
|
|
742
|
+
icon?: react.ComponentType<{
|
|
743
743
|
size?: number;
|
|
744
744
|
}>;
|
|
745
745
|
};
|
|
@@ -752,7 +752,7 @@ type RecordPreviewSection = {
|
|
|
752
752
|
key: string;
|
|
753
753
|
label: string;
|
|
754
754
|
count: number;
|
|
755
|
-
content?:
|
|
755
|
+
content?: react.ReactNode;
|
|
756
756
|
};
|
|
757
757
|
/** One tab of the panel's own mini detail view (a "tabs" capability with no
|
|
758
758
|
* your-moon/crisp equivalent -- crisp's own peek only ever shows Highlights
|
|
@@ -764,12 +764,12 @@ type RecordPreviewSection = {
|
|
|
764
764
|
* tab has been visited) -- see `Tabs.tsx`. */
|
|
765
765
|
type RecordPreviewTab = {
|
|
766
766
|
key: string;
|
|
767
|
-
label:
|
|
768
|
-
content:
|
|
767
|
+
label: react.ReactNode;
|
|
768
|
+
content: react.ReactNode;
|
|
769
769
|
/** Rendered right after `label` inside the tab trigger, e.g. an unread
|
|
770
770
|
* count -- purely presentational, this component attaches no meaning to
|
|
771
771
|
* it. */
|
|
772
|
-
badge?:
|
|
772
|
+
badge?: react.ReactNode;
|
|
773
773
|
};
|
|
774
774
|
/** The record this panel previews. Only `name` is read directly here --
|
|
775
775
|
* everything else the panel shows comes from `highlights`/`activity`/
|
|
@@ -781,7 +781,7 @@ type RecordPreviewRecord = {
|
|
|
781
781
|
name?: string;
|
|
782
782
|
[key: string]: unknown;
|
|
783
783
|
};
|
|
784
|
-
type RecordPreviewProps = Omit<
|
|
784
|
+
type RecordPreviewProps = Omit<react.ComponentPropsWithoutRef<"div">, "children" | "title" | "onResize"> & {
|
|
785
785
|
/** Whether the panel is mounted/visible. */
|
|
786
786
|
open: boolean;
|
|
787
787
|
onClose: () => void;
|
|
@@ -802,7 +802,7 @@ type RecordPreviewProps = Omit<React.ComponentPropsWithoutRef<"div">, "children"
|
|
|
802
802
|
nextRecordLabel?: string;
|
|
803
803
|
/** "2 of 37 in All Companies" (your-moon/crisp#413) -- a single
|
|
804
804
|
* pre-formatted string; omit for no counter at all. */
|
|
805
|
-
counterLabel?:
|
|
805
|
+
counterLabel?: react.ReactNode;
|
|
806
806
|
/**
|
|
807
807
|
* Lets a person drag the panel wider or narrower from its own left edge --
|
|
808
808
|
* this port reuses `ResizablePanel`'s own handle (`side="right"`, whose
|
|
@@ -818,7 +818,7 @@ type RecordPreviewProps = Omit<React.ComponentPropsWithoutRef<"div">, "children"
|
|
|
818
818
|
minWidth?: number;
|
|
819
819
|
maxWidth?: number;
|
|
820
820
|
/** The panel's heading, and so its accessible name. Defaults to `record.name`. */
|
|
821
|
-
title?:
|
|
821
|
+
title?: react.ReactNode;
|
|
822
822
|
/** Avatar image URL beside the title. Omit for an initials tile built from
|
|
823
823
|
* `record.name`'s first character. */
|
|
824
824
|
avatar?: string;
|
|
@@ -827,13 +827,13 @@ type RecordPreviewProps = Omit<React.ComponentPropsWithoutRef<"div">, "children"
|
|
|
827
827
|
record: RecordPreviewRecord | null;
|
|
828
828
|
/** Heading above the highlight cards (default "Highlights"). Omit the
|
|
829
829
|
* whole section by omitting `highlights`. */
|
|
830
|
-
highlightsLabel?:
|
|
830
|
+
highlightsLabel?: react.ReactNode;
|
|
831
831
|
highlights?: RecordPreviewHighlight[];
|
|
832
832
|
/** Heading above the activity feed (default "Activity"). */
|
|
833
|
-
activityLabel?:
|
|
834
|
-
viewAllActivityLabel?:
|
|
833
|
+
activityLabel?: react.ReactNode;
|
|
834
|
+
viewAllActivityLabel?: react.ReactNode;
|
|
835
835
|
onViewAllActivity?: () => void;
|
|
836
|
-
activity?:
|
|
836
|
+
activity?: react.ReactNode;
|
|
837
837
|
/** Collapsed sections below Activity (your-moon/crisp#413). Omit for no
|
|
838
838
|
* sections at all. */
|
|
839
839
|
sections?: RecordPreviewSection[];
|
|
@@ -859,9 +859,9 @@ type RecordPreviewProps = Omit<React.ComponentPropsWithoutRef<"div">, "children"
|
|
|
859
859
|
onTabChange?: (key: string) => void;
|
|
860
860
|
/** Label for the synthesized overview tab -- see `tabs`'s own doc
|
|
861
861
|
* comment. @default "Overview" */
|
|
862
|
-
overviewTabLabel?:
|
|
862
|
+
overviewTabLabel?: react.ReactNode;
|
|
863
863
|
/** Rendered below the panel's content, e.g. an Edit button. */
|
|
864
|
-
footer?:
|
|
864
|
+
footer?: react.ReactNode;
|
|
865
865
|
/**
|
|
866
866
|
* An optional dimming backdrop behind the panel -- OFF by default (this
|
|
867
867
|
* is a peek, not a modal: Attio's own peek never dims the table it
|