@crispy-seed/data-table 0.7.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,9 +542,11 @@ 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). */
@@ -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,9 +621,11 @@ 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). */
@@ -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>>;
@@ -716,11 +765,21 @@ 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
- * `@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 RecordPreview({ 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 }: RecordPreviewProps): react_jsx_runtime.JSX.Element | null;
+declare function RecordPreview(props: RecordPreviewProps): react_jsx_runtime.JSX.Element | null;
 declare namespace RecordPreview {
     var displayName: string;
 }