@crispy-seed/data-table 0.3.1 → 0.5.0

package/dist/index.d.ts

@@ -1,4 +1,5 @@
 import * as react from 'react';
+import * as react_jsx_runtime from 'react/jsx-runtime';
 
 declare interface DataTableVariant {
   /**
@@ -66,6 +67,50 @@ interface ToolbarFilter {
  */
 type DataTableCalcOp = "count" | "countFilled" | "sum" | "average" | "min" | "max";
 
+/** Everything a saved view actually captures -- deliberately the same five controlled
+ *  props `useDataTableColumns` + the toolbar sort/filter hooks already expose, so
+ *  "restore this view" is just handing each field back to its own `on*Change` setter,
+ *  not a bespoke apply-state routine this file would have to keep in sync with them by
+ *  hand. Every field is optional: a consumer capturing only PART of the table's state
+ *  (e.g. column layout but not filters) still produces a valid view. */
+interface DataTableViewState {
+    columnOrder?: string[];
+    hiddenColumnKeys?: string[];
+    columnWidths?: Record<string, number>;
+    pinnedColumnKeys?: string[];
+    toolbarSorts?: ToolbarSort[];
+    toolbarFilters?: ToolbarFilter[];
+}
+/** One named, saved view. */
+interface DataTableView {
+    id: string;
+    name: string;
+    state: DataTableViewState;
+}
+
+interface UseDataTableViewsProps {
+    /** 제어할 저장된 view 목록입니다. */
+    views?: DataTableView[];
+    /** 비제어 방식으로 사용할 때의 초기 view 목록입니다. */
+    defaultViews?: DataTableView[];
+    /** view 목록이 바뀔 때(생성/이름변경/삭제) 호출됩니다. */
+    onViewsChange?: (views: DataTableView[]) => void;
+    /** 제어할, 현재 활성화된 view의 id입니다 (`null`은 "저장된 view 없음"). */
+    activeViewId?: string | null;
+    /** 비제어 방식으로 사용할 때의 초기 활성 view id입니다. */
+    defaultActiveViewId?: string | null;
+    /** 활성 view가 바뀔 때 호출됩니다. */
+    onActiveViewIdChange?: (id: string | null) => void;
+    /**
+     * 기본 localStorage 저장소의 key입니다. 이 hook이 `views`를 실제로 소유할 때만
+     * (즉 `views`가 제어되지 않을 때만) 마운트 시 한 번 읽고, 바뀔 때마다 다시
+     *씁니다 -- `views`를 직접 제어하는 소비자(예: 나중에 서버에 저장하는 tether)는
+     * 자기 자신의 저장소를 이미 갖고 있으므로 이 hook이 localStorage에 그림자
+     * 복사본을 만들 이유가 없습니다. 생략하면 영속화 없이 메모리에만 남습니다.
+     */
+    storageKey?: string;
+}
+
 type DataTableCellType = "text" | "entity" | "url" | "email" | "tags" | "status" | "number" | "currency" | "date" | "datetime" | "rating" | "checkbox";
 
 /** A `select`/`reference`/`actor` editor's own choice list -- `value`/`label` are
@@ -180,6 +225,29 @@ interface DataTableColumn<TRow> {
     /** `editor: "reference"`/`"actor"`의 선택지입니다 (`avatar`가 있으면 아바타로,
      *  없으면 기본 사람 아이콘으로 표시). */
     refOptions?: DataTableEditOption[];
+    /**
+     * `editor: "select"` 목록 위에 검색창(Attio/crisp 스타일 search-on-top, crisp의
+     * `Select`가 가진 `searchable`과 동일한 발상 -- `select-search.tsx`)을 표시할지
+     * 여부입니다. 생략하면 `options`가 `SELECT_EDITOR_SEARCH_THRESHOLD`개를 넘을 때만
+     * 자동으로 켜집니다 -- 선택지가 몇 개 안 되는 열에 검색창을 얹는 건 잡음이라는
+     * crisp 자신의 `searchable`도 opt-in인 것과 같은 이유입니다. `false`로 명시하면
+     * 선택지가 많아도 검색창을 켜지 않습니다. `editor: "reference"`/`"actor"`는 이
+     * 플래그와 무관하게 항상 검색이 켜집니다 (아래 `refSearchPlaceholder` 참고) --
+     * 사람/레코드 참조는 선택지 수와 상관없이 검색이 본질이기 때문입니다.
+     */
+    editorSearchable?: boolean;
+    /** `editorSearchable`(자동/명시)일 때 검색창의 placeholder입니다. @default "Search…" */
+    editorSearchPlaceholder?: string;
+    /** `editorSearchable`이고 검색 결과가 없을 때 표시할 문구입니다. @default "No results" */
+    editorEmptyLabel?: string;
+    /** `editor: "reference"`/`"actor"` 검색창의 placeholder입니다. 생략하면 `"actor"`는
+     *  "Search people…", 그 외에는 "Search…"를 씁니다 (crisp의 `DataReferenceEditor`가
+     *  쓰는 `refSearchPlaceholder`와 같은 이름, 같은 기본값). */
+    refSearchPlaceholder?: string;
+    /** `editor: "reference"`/`"actor"` 검색 결과가 없을 때 표시할 문구입니다. 생략하면
+     *  `"actor"`는 "No users", 그 외에는 "No results"를 씁니다 (crisp의 동일 필드와
+     *  같은 기본값 -- checklist G-039). */
+    refEmptyLabel?: string;
     /**
      * 편집기가 읽는 raw 값입니다 (`value`와 다름 -- `value`는 정렬/검색/필터/내보내기가
      * 공유하는, 표시용으로 가공됐을 수 있는 접근자인 반면 `editValue`는 편집기 위젯이
@@ -307,6 +375,14 @@ interface DataTableProps<TRow extends {
     defaultColumnLabels?: Record<string, string>;
     /** 열 이름이 바뀔 때 호출됩니다. */
     onColumnLabelsChange?: (labels: Record<string, string>) => void;
+    /** 제어할, 왼쪽에 고정(pin)된 열의 key 목록입니다 (Attio의 컬럼 메뉴 "Pin column").
+     *  선택 열과 `actions: true` 열은 이미 자기만의 고정 메커니즘(`stickyFirst`/
+     *  자동 `stickyLast`)을 갖고 있으므로 이 목록에 넣지 않아도 됩니다. */
+    pinnedColumnKeys?: string[];
+    /** 비제어 방식으로 사용할 때의 초기 고정 열 목록입니다. */
+    defaultPinnedColumnKeys?: string[];
+    /** 고정 열 목록이 바뀔 때(핀/언핀) 호출됩니다. */
+    onPinnedColumnKeysChange?: (pinned: string[]) => void;
     /** 순서/숨김/이름 중 무엇이든 바뀌어 "실제로 보여줄 열 목록"이 달라질 때마다,
      *  그 결과(순서·숨김·이름이 반영된 `columns`)를 통째로 받는 편의 콜백입니다 --
      *  위 세 쌍의 콜백을 각각 다루는 대신 한 곳에서 "지금 보이는 열 구성"을 저장하고
@@ -388,5 +464,46 @@ declare const DataTable: <TRow extends {
     ref?: react.ForwardedRef<HTMLDivElement>;
 }) => react.ReactElement;
 
-export { DataTable };
-export type { DataTableColumn, DataTableColumnKind, DataTableProps, ToolbarFilter, ToolbarFilterOp, ToolbarSort, ToolbarSortDirection };
+interface DataTableViewsControlProps extends UseDataTableViewsProps {
+    /** The trigger's label when no view is active. @default "Views" */
+    label?: string;
+    /** Renders an extra leading row in the popover that clears the active view (back to
+     *  `label`'s own unfiltered state) -- omit (the default) when a consumer has no
+     *  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;
+    /**
+     * 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
+     * view". Build this from the same controlled state you pass to `<DataTable
+     * columnOrder=... toolbarSorts=... />` (or, uncontrolled, from `onColumnsChange`/
+     * `onToolbarSortsChange`/... mirrored into your own state).
+     */
+    captureState: () => DataTableViewState;
+    /** Applies a selected view's saved state back onto the table -- typically each of
+     *  your own `setColumnOrder`/`setHiddenColumnKeys`/`setColumnWidths`/
+     *  `setPinnedColumnKeys`/`setToolbarSorts`/`setToolbarFilters` setters, one per
+     *  field present on `state` (every field is optional -- a view that only captured
+     *  column layout should leave sort/filter alone). */
+    applyState: (state: DataTableViewState) => void;
+    newViewLabel?: string;
+    updateViewLabel?: string;
+    renameLabel?: string;
+    deleteLabel?: string;
+    /** aria-label for the rename text input, given the view's own name. */
+    renameInputLabel?: (name: string) => string;
+}
+/**
+ * A compact saved-views switcher -- current view name (or `label`) as the trigger,
+ * a popover listing every saved view (click to switch, inline Rename/Delete), a
+ * trailing "Save as new view", and (once a view is active) "Update view" to overwrite
+ * the loaded view with the table's current state.
+ */
+declare function DataTableViewsControl({ label, showClearRow, clearLabel, captureState, applyState, newViewLabel, updateViewLabel, renameLabel, deleteLabel, renameInputLabel, ...viewsProps }: DataTableViewsControlProps): react_jsx_runtime.JSX.Element;
+declare namespace DataTableViewsControl {
+    var displayName: string;
+}
+
+export { DataTable, DataTableViewsControl };
+export type { DataTableColumn, DataTableColumnKind, DataTableProps, DataTableView, DataTableViewState, DataTableViewsControlProps, ToolbarFilter, ToolbarFilterOp, ToolbarSort, ToolbarSortDirection };