@crispy-seed/data-table 0.6.0 → 0.8.0

package/dist/index.d.ts

@@ -57,15 +57,18 @@ interface ToolbarFilter {
 }
 
 /**
- * The six aggregations DATATABLE-ATTIO-SPEC.md's ColumnCalc footer offers (crisp's own
- * `ColumnCalc` ships nine -- adding percent-empty/-filled and a "none" clearing op --
- * but this table's contract is exactly the six named in the spec doc: count /
- * countFilled / sum / average / min / max). `count`/`countFilled` apply to every
- * column; `sum`/`average`/`min`/`max` only make sense on a numeric column, so the
- * styled layer only offers those four when the column's cell type is number/currency
- * (see DataTable.tsx's `ColumnCalcMenu`).
+ * Live-review fix (Attio/GRC parity): the ColumnCalc footer's own aggregation set --
+ * three apply to every column, six more to numeric ones, one more to non-numeric ones.
+ * Distinct from crisp's own `ColumnCalc` (`countEmpty`/`countFilled`/`percentEmpty`/
+ * `percentFilled` + sum/average/min/max + "none") -- crisp's own set was read for the
+ * MENU/trigger interaction (`column-calc.tsx`'s own doc comment), not copied op-for-op;
+ * this table's contract is the ten named directly in DATATABLE-ATTIO-SPEC.md/the GRC
+ * feature contract: count / empty / not-empty everywhere, sum / average / median / min
+ * / max / range on a numeric column, count-unique on a non-numeric one. The styled
+ * layer picks which extra set to offer off the column's own cell type (`column-calc.tsx`'s
+ * `ColumnCalcCell`).
  */
-type DataTableCalcOp = "count" | "countFilled" | "sum" | "average" | "min" | "max";
+type DataTableCalcOp = "count" | "empty" | "notEmpty" | "sum" | "average" | "median" | "min" | "max" | "range" | "countUnique";
 
 /** Everything a saved view actually captures -- deliberately the same five controlled
  *  props `useDataTableColumns` + the toolbar sort/filter hooks already expose, so
@@ -278,8 +281,9 @@ interface DataTableProps<TRow extends {
     sort?: DataTableSortState;
     /** 비제어 방식으로 사용할 때의 초기 정렬 상태입니다. */
     defaultSort?: DataTableSortState;
-    /** 정렬 가능한 열을 클릭해 정렬 상태가 바뀔 때 호출됩니다. */
-    onSortChange?: (sort: DataTableSortState) => void;
+    /** 정렬 가능한 열을 클릭해 정렬 상태가 바뀔 때, 그리고 열 메뉴의 "Clear sort"로
+     *  정렬이 지워질 때 호출됩니다 -- 지워진 상태는 `undefined`로 전달됩니다. */
+    onSortChange?: (sort: DataTableSortState | undefined) => void;
     /**
      * 정렬 아이콘입니다. `idle`은 정렬 가능하지만 아직 정렬되지 않은 열의 헤더에
      * (호버 시에만 드러나는) 기본 표시로 쓰이고, `asc`/`desc`는 실제로 정렬된 열에
@@ -538,18 +542,20 @@ type ResizablePanelProps = Omit<react.ComponentPropsWithoutRef<"div">, "children
      */
     max?: number | string;
     /**
-     * Layout model: "docked" (default) reserves flow width and sits in-line
-     * with a hairline border; "floating" takes the panel out of flow
-     * (`position: fixed`, an 8px gutter, r10, the measured floating shadow).
+     * 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).
      */
     floating?: boolean;
     /** Resize-handle geometry -- "panel" (default) or "column" (table edges). */
     handleVariant?: ResizablePanelHandleVariant;
     /**
      * Renders the drag handle. `false` gives a fixed-width, non-interactive
-     * panel (e.g. `RecordPanel`'s own `resizable={false}` default) -- not part
+     * panel (e.g. `RecordPreview`'s own `resizable={false}` default) -- not part
      * of crisp's own API, added here so a consumer built ON this primitive
-     * (like `RecordPanel`) can opt out of dragging entirely without crisp's
+     * (like `RecordPreview`) can opt out of dragging entirely without crisp's
      * duplicate resize-handle implementation. @default true
      */
     resizable?: boolean;
@@ -559,18 +565,41 @@ type ResizablePanelProps = Omit<react.ComponentPropsWithoutRef<"div">, "children
      * `width` is uncontrolled.
      */
     storageKey?: string;
+    /**
+     * Drives the floating panel's own enter/exit keyframe animation (only
+     * meaningful together with `floating`) -- "open" plays the slide-and-fade
+     * in on mount, "closed" plays it in reverse. A consumer that keeps this
+     * component mounted through its own close transition (e.g.
+     * `@seed-design/react-presence`'s `usePresence`, the same idiom Dialog/
+     * Drawer use) flips this once `open` goes false, then unmounts once that
+     * hook reports the exit animation finished. Omit for a panel that
+     * shouldn't animate at all.
+     */
+    animationState?: "open" | "closed";
+    /**
+     * Ref to the panel element itself (not the outer root/spacer wrapper this
+     * component's own `ref` targets) -- lets a consumer's presence hook
+     * observe `animationName` changes on the SAME node that carries
+     * `data-state`/the keyframe animation above.
+     */
+    panelElementRef?: react.Ref<HTMLDivElement>;
     className?: string;
     children?: react.ReactNode;
 };
 /**
  * An adjustable-panel primitive: a spacer that reserves layout width plus a
- * panel that overlays it, so the panel can move between docked (in-flow) and
- * floating (`position: fixed`, an overlay) without a reflow glitch. 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.
+ * 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.
  */
 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" */
@@ -592,18 +621,20 @@ declare const ResizablePanel: react.ForwardRefExoticComponent<Omit<Omit<react.De
      */
     max?: number | string;
     /**
-     * Layout model: "docked" (default) reserves flow width and sits in-line
-     * with a hairline border; "floating" takes the panel out of flow
-     * (`position: fixed`, an 8px gutter, r10, the measured floating shadow).
+     * 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).
      */
     floating?: boolean;
     /** Resize-handle geometry -- "panel" (default) or "column" (table edges). */
     handleVariant?: ResizablePanelHandleVariant;
     /**
      * Renders the drag handle. `false` gives a fixed-width, non-interactive
-     * panel (e.g. `RecordPanel`'s own `resizable={false}` default) -- not part
+     * panel (e.g. `RecordPreview`'s own `resizable={false}` default) -- not part
      * of crisp's own API, added here so a consumer built ON this primitive
-     * (like `RecordPanel`) can opt out of dragging entirely without crisp's
+     * (like `RecordPreview`) can opt out of dragging entirely without crisp's
      * duplicate resize-handle implementation. @default true
      */
     resizable?: boolean;
@@ -613,6 +644,24 @@ declare const ResizablePanel: react.ForwardRefExoticComponent<Omit<Omit<react.De
      * `width` is uncontrolled.
      */
     storageKey?: string;
+    /**
+     * Drives the floating panel's own enter/exit keyframe animation (only
+     * meaningful together with `floating`) -- "open" plays the slide-and-fade
+     * in on mount, "closed" plays it in reverse. A consumer that keeps this
+     * component mounted through its own close transition (e.g.
+     * `@seed-design/react-presence`'s `usePresence`, the same idiom Dialog/
+     * Drawer use) flips this once `open` goes false, then unmounts once that
+     * hook reports the exit animation finished. Omit for a panel that
+     * shouldn't animate at all.
+     */
+    animationState?: "open" | "closed";
+    /**
+     * Ref to the panel element itself (not the outer root/spacer wrapper this
+     * component's own `ref` targets) -- lets a consumer's presence hook
+     * observe `animationName` changes on the SAME node that carries
+     * `data-state`/the keyframe animation above.
+     */
+    panelElementRef?: react.Ref<HTMLDivElement>;
     className?: string;
     children?: react.ReactNode;
 } & react.RefAttributes<HTMLDivElement>>;
@@ -621,7 +670,7 @@ declare const ResizablePanel: react.ForwardRefExoticComponent<Omit<Omit<react.De
  *  Attio's own peek panel lays its own out (your-moon/crisp#448, measured
  *  live): a 2-column grid, no card chrome, a muted label row with a
  *  trailing icon, a filled-colour value below it. */
-type RecordPanelHighlight = {
+type RecordPreviewHighlight = {
     key: string;
     label: string;
     value: react.ReactNode;
@@ -634,7 +683,7 @@ type RecordPanelHighlight = {
  *  into the consumer's own content when clicked. Omitting `content` renders
  *  the row but not as a button, matching the live DOM measured on an empty
  *  section: no chevron, no click handler, nothing to expand into yet. */
-type RecordPanelSection = {
+type RecordPreviewSection = {
     key: string;
     label: string;
     count: number;
@@ -646,11 +695,11 @@ type RecordPanelSection = {
  *  (which reads `Row` from `product/recordpage/column`), this port has no
  *  such type to depend on -- crispy-seed has no RecordPage -- so this stays
  *  a minimal, consumer-extendable shape. */
-type RecordPanelRecord = {
+type RecordPreviewRecord = {
     name?: string;
     [key: string]: unknown;
 };
-type RecordPanelProps = 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;
@@ -693,11 +742,11 @@ type RecordPanelProps = Omit<react.ComponentPropsWithoutRef<"div">, "children" |
     avatar?: string;
     /** The record to show; renders nothing when `open` is false or `record`
      *  is null. */
-    record: RecordPanelRecord | null;
+    record: RecordPreviewRecord | null;
     /** Heading above the highlight cards (default "Highlights"). Omit the
      *  whole section by omitting `highlights`. */
     highlightsLabel?: react.ReactNode;
-    highlights?: RecordPanelHighlight[];
+    highlights?: RecordPreviewHighlight[];
     /** Heading above the activity feed (default "Activity"). */
     activityLabel?: react.ReactNode;
     viewAllActivityLabel?: react.ReactNode;
@@ -705,7 +754,7 @@ type RecordPanelProps = Omit<react.ComponentPropsWithoutRef<"div">, "children" |
     activity?: react.ReactNode;
     /** Collapsed sections below Activity (your-moon/crisp#413). Omit for no
      *  sections at all. */
-    sections?: RecordPanelSection[];
+    sections?: RecordPreviewSection[];
     /** Rendered below the panel's content, e.g. an Edit button. */
     footer?: react.ReactNode;
     className?: string;
@@ -716,14 +765,24 @@ type RecordPanelProps = 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
- * `@starting-style` slide-in, the floating elevation, the drag handle
+ * enter/exit keyframe animation, the floating elevation, the drag handle
  * itself) all come from that primitive; this component only renders the
  * CONTENT inside it.
+ *
+ * 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
+ * animation should play, the values this component would render are
+ * already gone. `usePresence` (`@seed-design/react-presence`, the same
+ * idiom Dialog/Drawer already use for their own floating layers) keeps the
+ * tree mounted for exactly the exit animation's duration; the snapshot
+ * below keeps the LAST visible props around for that same window, since
+ * without it the panel would animate out empty.
  */
-declare function RecordPanel({ open, record, onClose, className, closeLabel, onOpenRecord, openRecordLabel, onPrevious, previousRecordLabel, onNext, nextRecordLabel, title, avatar, highlightsLabel, highlights, counterLabel, resizable, width, defaultWidth, onWidthChange, minWidth, maxWidth, activityLabel, viewAllActivityLabel, onViewAllActivity, activity, sections, footer, ...rest }: RecordPanelProps): react_jsx_runtime.JSX.Element | null;
-declare namespace RecordPanel {
+declare function RecordPreview(props: RecordPreviewProps): react_jsx_runtime.JSX.Element | null;
+declare namespace RecordPreview {
     var displayName: string;
 }
 
-export { DataTable, DataTableViewsControl, RecordPanel, ResizablePanel };
-export type { DataTableColumn, DataTableColumnKind, DataTableProps, DataTableView, DataTableViewState, DataTableViewsControlProps, RecordPanelHighlight, RecordPanelProps, RecordPanelRecord, RecordPanelSection, ResizablePanelHandleVariant, ResizablePanelProps, ResizablePanelSide, ToolbarFilter, ToolbarFilterOp, ToolbarSort, ToolbarSortDirection };
+export { DataTable, DataTableViewsControl, RecordPreview, ResizablePanel };
+export type { DataTableColumn, DataTableColumnKind, DataTableProps, DataTableView, DataTableViewState, DataTableViewsControlProps, RecordPreviewHighlight, RecordPreviewProps, RecordPreviewRecord, RecordPreviewSection, ResizablePanelHandleVariant, ResizablePanelProps, ResizablePanelSide, ToolbarFilter, ToolbarFilterOp, ToolbarSort, ToolbarSortDirection };