@crispy-seed/data-table 0.8.0 → 0.10.0

package/dist/index.d.ts

@@ -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
@@ -269,6 +269,14 @@ 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;
@@ -542,13 +550,42 @@ type ResizablePanelProps = Omit<react.ComponentPropsWithoutRef<"div">, "children
      */
     max?: number | string;
     /**
-     * Visual variant -- BOTH are in-flow (a resizing/opening panel always
-     * reserves real width from `spacer`, shrinking a `flex: 1` sibling
-     * beside it; neither ever becomes a `position: fixed` viewport overlay).
-     * "docked" (default) sits flush with a hairline border; "floating" is
-     * Attio's own inset-card look (8px gutter, r12, the measured elevation).
+     * Layout model. "docked" (default) is IN-FLOW: `spacer` reserves the
+     * panel's real width, shrinking a `flex: 1` sibling beside it (e.g. a
+     * table), flush with a hairline border -- unchanged since this
+     * primitive's own first version.
+     *
+     * "floating" is a true OVERLAY, not a bigger gutter on the docked look:
+     * this component's own outer element takes itself OUT of flow entirely
+     * (`position: absolute; inset: 0`) and renders no `spacer` at all -- it
+     * reserves ZERO layout width, so a sibling beside it (a table) never
+     * shrinks or reflows when this opens or resizes. The panel itself is
+     * pinned to one edge of that `inset: 0` box, spans its full height, and
+     * only the corners facing INTO the container are rounded (a left-edge
+     * shadow for `side="right"`, mirrored for `side="left"`) -- this is
+     * `RecordPreview`'s own peek panel (your-moon/crisp#448 reversed a
+     * docked/reflow attempt at this exact spot: "table's action buttons
+     * moving" when the panel opened).
+     *
+     * Because the outer element is now `position: absolute`, the consumer's
+     * own immediate parent (wherever this component -- or `RecordPreview` --
+     * is rendered) MUST itself be a positioned element (typically
+     * `position: relative`) with a real height, e.g. the table region's own
+     * wrapper div. No flex-row wrapper is needed or wanted: the table can be
+     * an ordinary 100%-width block and this panel a plain sibling.
      */
     floating?: boolean;
+    /**
+     * An optional dimming backdrop behind a `floating` panel, covering the
+     * same `inset: 0` container -- OFF by default: this is a peek panel, not
+     * a modal, and Attio's own peek never dims the table it floats over.
+     * Meaningful only together with `floating`; ignored otherwise.
+     * @default false
+     */
+    backdrop?: boolean;
+    /** Fires when the optional `backdrop` is clicked. Typically wired to the
+     *  same handler as the panel's own close control. */
+    onBackdropClick?: () => void;
     /** Resize-handle geometry -- "panel" (default) or "column" (table edges). */
     handleVariant?: ResizablePanelHandleVariant;
     /**
@@ -587,19 +624,18 @@ type ResizablePanelProps = Omit<react.ComponentPropsWithoutRef<"div">, "children
     children?: react.ReactNode;
 };
 /**
- * An adjustable-panel primitive: a spacer that reserves layout width plus a
- * panel that overlays it, so it can resize (or animate open/closed) without
- * a reflow glitch on the rest of the layout -- the spacer always reserves
- * the panel's real width, in BOTH the docked and floating visual variants
- * (floating changes only the panel's own look -- gutter, radius, shadow --
- * never its `position`, so a consumer laying this out as a row-flex sibling
- * of e.g. a table sees that table genuinely shrink to make room, matching
- * Attio's own measured peek). Drag the edge handle to resize; constraints
- * are CSS `min-width`/`max-width`, never re-clamped in JS. Ported from
- * your-moon/crisp's `ResizablePanel` (`components/resizablepanel/`);
- * state/drag behavior lives in `useResizablePanel`
- * (`@seed-design/react-resizable-panel`), this component owns the DOM +
- * recipe classes on top of it.
+ * An adjustable-panel primitive with two layout models (`floating`'s own doc
+ * comment above has the full contrast). Docked: a `spacer` reserves layout
+ * width and the panel overlays exactly that reservation, so a resize drag
+ * never causes a reflow glitch on the rest of the layout. Floating: no
+ * spacer at all -- this component's own outer element becomes a
+ * `position: absolute; inset: 0` overlay reserving zero width, with the
+ * panel itself pinned to one edge and spanning the full height of that box.
+ * Drag the edge handle to resize; constraints are CSS `min-width`/
+ * `max-width`, never re-clamped in JS. Ported from your-moon/crisp's
+ * `ResizablePanel` (`components/resizablepanel/`); state/drag behavior
+ * 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"> & {
     /** Which edge of its container the panel is anchored to. @default "left" */
@@ -621,13 +657,42 @@ declare const ResizablePanel: react.ForwardRefExoticComponent<Omit<Omit<react.De
      */
     max?: number | string;
     /**
-     * Visual variant -- BOTH are in-flow (a resizing/opening panel always
-     * reserves real width from `spacer`, shrinking a `flex: 1` sibling
-     * beside it; neither ever becomes a `position: fixed` viewport overlay).
-     * "docked" (default) sits flush with a hairline border; "floating" is
-     * Attio's own inset-card look (8px gutter, r12, the measured elevation).
+     * Layout model. "docked" (default) is IN-FLOW: `spacer` reserves the
+     * panel's real width, shrinking a `flex: 1` sibling beside it (e.g. a
+     * table), flush with a hairline border -- unchanged since this
+     * primitive's own first version.
+     *
+     * "floating" is a true OVERLAY, not a bigger gutter on the docked look:
+     * this component's own outer element takes itself OUT of flow entirely
+     * (`position: absolute; inset: 0`) and renders no `spacer` at all -- it
+     * reserves ZERO layout width, so a sibling beside it (a table) never
+     * shrinks or reflows when this opens or resizes. The panel itself is
+     * pinned to one edge of that `inset: 0` box, spans its full height, and
+     * only the corners facing INTO the container are rounded (a left-edge
+     * shadow for `side="right"`, mirrored for `side="left"`) -- this is
+     * `RecordPreview`'s own peek panel (your-moon/crisp#448 reversed a
+     * docked/reflow attempt at this exact spot: "table's action buttons
+     * moving" when the panel opened).
+     *
+     * Because the outer element is now `position: absolute`, the consumer's
+     * own immediate parent (wherever this component -- or `RecordPreview` --
+     * is rendered) MUST itself be a positioned element (typically
+     * `position: relative`) with a real height, e.g. the table region's own
+     * wrapper div. No flex-row wrapper is needed or wanted: the table can be
+     * an ordinary 100%-width block and this panel a plain sibling.
      */
     floating?: boolean;
+    /**
+     * An optional dimming backdrop behind a `floating` panel, covering the
+     * same `inset: 0` container -- OFF by default: this is a peek panel, not
+     * a modal, and Attio's own peek never dims the table it floats over.
+     * Meaningful only together with `floating`; ignored otherwise.
+     * @default false
+     */
+    backdrop?: boolean;
+    /** Fires when the optional `backdrop` is clicked. Typically wired to the
+     *  same handler as the panel's own close control. */
+    onBackdropClick?: () => void;
     /** Resize-handle geometry -- "panel" (default) or "column" (table edges). */
     handleVariant?: ResizablePanelHandleVariant;
     /**
@@ -689,6 +754,23 @@ type RecordPreviewSection = {
     count: number;
     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
+ *  + Activity + sections, never a tab bar). Built on crispy-seed's own
+ *  `Tabs` primitive (`../Tabs`, itself built on seed's `tabs` recipe/
+ *  tokens) rather than a hand-rolled tab strip, so it matches every other
+ *  tabbed surface in this package. `content` is only rendered lazily in the
+ *  sense that `Tabs.Content` already handles (hidden, not unmounted, once a
+ *  tab has been visited) -- see `Tabs.tsx`. */
+type RecordPreviewTab = {
+    key: string;
+    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;
+};
 /** The record this panel previews. Only `name` is read directly here --
  *  everything else the panel shows comes from `highlights`/`activity`/
  *  `sections`, the consumer's own data. Unlike crisp's own `RecordPanel`
@@ -755,8 +837,39 @@ type RecordPreviewProps = Omit<react.ComponentPropsWithoutRef<"div">, "children"
     /** Collapsed sections below Activity (your-moon/crisp#413). Omit for no
      *  sections at all. */
     sections?: RecordPreviewSection[];
+    /**
+     * A "mini detail view" -- renders a seed-idiomatic tab bar under the
+     * header instead of (or ahead of) the plain Highlights/Activity/sections
+     * layout. Omit for no tabs at all (the default; existing consumers are
+     * unaffected). When `highlights`/`activity`/`sections` are ALSO given
+     * alongside `tabs`, they're combined rather than dropped: an extra
+     * `overviewTabLabel` tab (default "Overview") is prepended, ahead of
+     * these `tabs`, containing exactly what the non-tabs layout would have
+     * rendered -- so a consumer moving to tabs doesn't have to re-author its
+     * existing overview content as a tab by hand.
+     */
+    tabs?: RecordPreviewTab[];
+    /** Controlled active tab key. Pass with `onTabChange`; omit for
+     *  uncontrolled (`defaultActiveTab`). Only meaningful with `tabs`. */
+    activeTab?: string;
+    /** Initial active tab key when uncontrolled. Defaults to the first tab
+     *  (the synthesized "Overview" tab when highlights/activity/sections are
+     *  combined in, otherwise the first entry of `tabs` itself). */
+    defaultActiveTab?: string;
+    onTabChange?: (key: string) => void;
+    /** Label for the synthesized overview tab -- see `tabs`'s own doc
+     *  comment. @default "Overview" */
+    overviewTabLabel?: react.ReactNode;
     /** Rendered below the panel's content, e.g. an Edit button. */
     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
+     * floats over). Forwarded to `ResizablePanel`'s own `backdrop`; clicking
+     * it calls `onClose`, same as the panel's own close button.
+     * @default false
+     */
+    backdrop?: boolean;
     className?: string;
 };
 /**
@@ -765,10 +878,30 @@ type RecordPreviewProps = Omit<react.ComponentPropsWithoutRef<"div">, "children"
  * `RecordPanel` (`product/recordpanel/`), built ON `ResizablePanel`
  * (`side="right" floating`) rather than crisp's own duplicate absolute-
  * positioning/slide-in/resize-handle implementation -- the outer shell (the
- * enter/exit keyframe animation, the floating elevation, the drag handle
+ * enter/exit keyframe animation, the full-height overlay, the drag handle
  * itself) all come from that primitive; this component only renders the
  * CONTENT inside it.
  *
+ * OVERLAY, not docked: `floating` (on the `ResizablePanel` this is built on)
+ * now means a real `position: absolute` overlay that reserves ZERO layout
+ * width -- opening this panel never shrinks or reflows a table beside it
+ * (your-moon/crisp#448 reversed an earlier in-flow/docked attempt at this
+ * exact spot, reported live as "table's action buttons moving"). Because of
+ * that, THIS COMPONENT OWNS ITS OWN POSITIONING -- a consumer does not wrap
+ * it in a flex row with the table; it renders `<RecordPreview>` as an
+ * ordinary sibling of the table. The one requirement: the shared parent
+ * (the table region's own wrapper) must itself be a positioned element
+ * (typically `position: relative`) with a real height, since that's the
+ * containing block this panel's `inset: 0` resolves against. See
+ * `DataTable.stories.tsx`'s own Showcase for the pattern:
+ *
+ * ```tsx
+ * <div style={{ position: "relative", flex: 1, minHeight: 0 }}>
+ *   <DataTable style={{ width: "100%", height: "100%" }} ... />
+ *   <RecordPreview open={open} record={record} onClose={onClose} ... />
+ * </div>
+ * ```
+ *
  * Enter/exit: closing this panel is a state change (`open` -> false) that
  * typically clears `record` in the SAME update (see the DataTable story's
  * own `onClose={() => setPreviewRow(null)}`), so by the time an exit
@@ -785,4 +918,4 @@ declare namespace RecordPreview {
 }
 
 export { DataTable, DataTableViewsControl, RecordPreview, ResizablePanel };
-export type { DataTableColumn, DataTableColumnKind, DataTableProps, DataTableView, DataTableViewState, DataTableViewsControlProps, RecordPreviewHighlight, RecordPreviewProps, RecordPreviewRecord, RecordPreviewSection, ResizablePanelHandleVariant, ResizablePanelProps, ResizablePanelSide, ToolbarFilter, ToolbarFilterOp, ToolbarSort, ToolbarSortDirection };
+export type { DataTableColumn, DataTableColumnKind, DataTableProps, DataTableView, DataTableViewState, DataTableViewsControlProps, RecordPreviewHighlight, RecordPreviewProps, RecordPreviewRecord, RecordPreviewSection, RecordPreviewTab, ResizablePanelHandleVariant, ResizablePanelProps, ResizablePanelSide, ToolbarFilter, ToolbarFilterOp, ToolbarSort, ToolbarSortDirection };