@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/index.d.ts CHANGED
@@ -1,4 +1,4 @@
1
- import * as React from 'react';
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: React.ReactNode;
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) => React.ReactNode;
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) => React.ReactNode;
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<React.HTMLAttributes<HTMLDivElement>, "children"> {
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?: React.ReactNode;
302
- asc?: React.ReactNode;
303
- desc?: React.ReactNode;
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?: React.ReactNode;
319
+ selectionCheckedIcon?: react.ReactNode;
320
320
  /** 전체 선택 체크박스가 일부만 선택됐을 때(indeterminate) 표시할 아이콘입니다.
321
321
  * 생략하면 karrot의 minus 아이콘을 씁니다. */
322
- selectionIndeterminateIcon?: React.ReactNode;
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) => React.ReactNode;
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?: React.ReactNode;
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?: React.ReactNode;
442
+ addRowLabel?: react.ReactNode;
443
443
  /** 전체 본문을 이 상태로 대체합니다(로딩 아이콘 + `loadingLabel`) -- 필터/정렬
444
444
  * 재조회나 최초 로드처럼 행 전체가 아직 없을 때를 위한 것입니다. `error`/빈 상태
445
445
  * 보다 우선합니다. 인라인 스크롤 로딩 표시기(`onLoadMore`)와는 별개입니다. */
446
446
  loading?: boolean;
447
447
  /** `loading`일 때 스피너 옆에 보이는 텍스트입니다. @default "Loading..." */
448
- loadingLabel?: React.ReactNode;
448
+ loadingLabel?: react.ReactNode;
449
449
  /** 주어지면 행 대신 이 내용을 본문에 렌더링합니다(crisp의 `.crisp-datatable-empty`
450
450
  * 칸 재사용). `loading`보다는 아래, 빈 상태보다는 위 우선순위입니다. */
451
- error?: React.ReactNode;
451
+ error?: react.ReactNode;
452
452
  /** 검색/필터를 거치고도 행이 하나도 없을 때 본문에 렌더링할 내용입니다.
453
453
  * @default "No results." */
454
- empty?: React.ReactNode;
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<React.ComponentPropsWithoutRef<"div">, "ref" | "onScroll">;
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?: React.ForwardedRef<HTMLDivElement>;
487
- }) => React.ReactElement;
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?: React.ReactNode;
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<React.ComponentPropsWithoutRef<"div">, "children" | "onResize"> & {
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?: React.Ref<HTMLDivElement>;
622
+ panelElementRef?: react.Ref<HTMLDivElement>;
623
623
  className?: string;
624
- children?: React.ReactNode;
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: React.ForwardRefExoticComponent<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "children" | "onResize"> & {
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?: React.Ref<HTMLDivElement>;
729
+ panelElementRef?: react.Ref<HTMLDivElement>;
730
730
  className?: string;
731
- children?: React.ReactNode;
732
- } & React.RefAttributes<HTMLDivElement>>;
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: React.ReactNode;
742
- icon?: React.ComponentType<{
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?: React.ReactNode;
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: React.ReactNode;
768
- content: React.ReactNode;
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?: React.ReactNode;
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<React.ComponentPropsWithoutRef<"div">, "children" | "title" | "onResize"> & {
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?: React.ReactNode;
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?: React.ReactNode;
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?: React.ReactNode;
830
+ highlightsLabel?: react.ReactNode;
831
831
  highlights?: RecordPreviewHighlight[];
832
832
  /** Heading above the activity feed (default "Activity"). */
833
- activityLabel?: React.ReactNode;
834
- viewAllActivityLabel?: React.ReactNode;
833
+ activityLabel?: react.ReactNode;
834
+ viewAllActivityLabel?: react.ReactNode;
835
835
  onViewAllActivity?: () => void;
836
- activity?: React.ReactNode;
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?: React.ReactNode;
862
+ overviewTabLabel?: react.ReactNode;
863
863
  /** Rendered below the panel's content, e.g. an Edit button. */
864
- footer?: React.ReactNode;
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