@crispy-seed/data-table 0.1.0

package/dist/body-cells-12s-BnOVUTKN.js

@@ -0,0 +1,453 @@
+'use client';
+function __insertCSS(code) {
+  if (!code || typeof document == 'undefined') return
+  let head = document.head || document.getElementsByTagName('head')[0]
+  let style = document.createElement('style')
+  style.type = 'text/css'
+  head.appendChild(style)
+  ;style.styleSheet ? (style.styleSheet.cssText = code) : style.appendChild(document.createTextNode(code))
+}
+
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { dataAttr } from '@seed-design/dom-utils';
+import { forwardRef } from 'react';
+import { c as createSlotRecipeContext, b as clsx, d as IconCheckmarkLine_default, C as CheckboxRoot, e as CheckboxControl, f as CheckboxIndicator, g as CheckboxHiddenInput, D as DataTableCell, h as getColumnValue } from './DataTable-12s-Bd20OuMs.js';
+import { Image } from '@seed-design/react-image';
+import { Primitive } from '@seed-design/react-primitive';
+import { avatar } from '@seed-design/css/recipes/avatar';
+import '@seed-design/css/recipes/avatar-stack';
+import { badge } from '@seed-design/css/recipes/badge';
+import { u as useEffectiveColumns, s as stickyProps } from './column-layout-12s-s7wnxkMN.js';
+import { S as SwitchEditor, r as resolveEditValue, R as RatingEditor, C as CheckboxEditor, a as SelectEditor, b as ReferenceEditor, E as EditError, D as DateEditor, T as TextEditor } from './editors-12s-BO9Mp034.js';
+import { u as useDataTableContext } from './DataTable-12s-Zml1x9Kr-12s-Coi-3lUa.js';
+
+const { withProvider, withContext } = createSlotRecipeContext(avatar);
+const AvatarRoot = withProvider(Image.Root, "root");
+const AvatarImage = withContext(Image.Content, "image");
+const AvatarFallback = withContext(Image.Fallback, "fallback");
+withContext(Primitive.div, "badge");
+
+const Badge = /*#__PURE__*/ forwardRef(({ className, children, ...props }, ref)=>{
+    const [variantProps, restProps] = badge.splitVariantProps(props);
+    const { root, label } = badge(variantProps);
+    return /*#__PURE__*/ jsx(Primitive.span, {
+        className: clsx(root, className),
+        ...restProps,
+        ref: ref,
+        children: /*#__PURE__*/ jsx(Primitive.span, {
+            className: label,
+            children: children
+        })
+    });
+});
+Badge.displayName = "Badge";
+
+// Attio cell-type renderers, built from seed's own components -- not exported from
+// the package's public surface (kept alongside DataTable.tsx as an implementation
+// detail, the way Select keeps `InternalIcon` under `components/private`). Each
+// renderer takes the raw column value and the table's resolved recipe classNames,
+// and returns `null` for an empty value: Attio's own empty cell is genuinely blank,
+// no placeholder character, for any type (crisp's datatable.tsx, #412).
+// seed's `CheckboxIndicator` renders exactly what its `checked` prop is -- it does not
+// supply a checkmark on its own. `checked={null}` (this file's own pre-fix state)
+// therefore rendered an empty box even once the value WAS true; every read-only/
+// editable checkbox cell in this component needs a real icon here, the same one the
+// row-selection checkbox already uses (`DataTable.tsx`'s `SELECTION_ICON_SIZE`, 12px).
+const CHECKBOX_CELL_CHECKED_ICON = /*#__PURE__*/ jsx(IconCheckmarkLine_default, {
+    size: 12
+});
+// The 6 tones Badge ships (`@seed-design/css/recipes/badge`) -- not Attio's own
+// wider palette (crisp's tag/status cells hash across a measured 7- or 12-colour
+// set it defines itself), because this component builds cell chrome ONLY from
+// seed's already-shipped primitives rather than adding a parallel palette. Same
+// stable-hash approach as crisp's own `toneFor` (multiply-and-add over char codes),
+// just over seed's tone list instead of crisp's.
+const BADGE_TONES = [
+    "neutral",
+    "brand",
+    "informative",
+    "positive",
+    "warning",
+    "critical"
+];
+function toneFor(value) {
+    let hash = 0;
+    for(let index = 0; index < value.length; index++){
+        hash = hash * 31 + value.charCodeAt(index) >>> 0;
+    }
+    return BADGE_TONES[hash % BADGE_TONES.length];
+}
+function initialsFor(name) {
+    const parts = name.trim().split(/\s+/);
+    return ((parts[0]?.[0] ?? "") + (parts[1]?.[0] ?? "")).toUpperCase() || "?";
+}
+function formatNumberCell(value, locale) {
+    return typeof value === "number" ? value.toLocaleString(locale) : null;
+}
+function formatCurrencyCell(value, symbol, locale) {
+    return typeof value === "number" ? `${symbol}${value.toLocaleString(locale)}` : null;
+}
+function toDate(value) {
+    const date = value instanceof Date ? value : typeof value === "string" ? new Date(value) : null;
+    return date && !Number.isNaN(date.getTime()) ? date : null;
+}
+/** `<input type="date">`'s own value shape (`yyyy-mm-dd`) -- editors.tsx's plain
+ *  `cellType: "date"` inline editor reads/writes exactly this string, native to the
+ *  browser's own date input, so no separate parse/format step is needed on commit. */ function toDateInputValue(value) {
+    const date = toDate(value);
+    if (!date) return "";
+    const pad = (n)=>String(n).padStart(2, "0");
+    return `${date.getFullYear()}-${pad(date.getMonth() + 1)}-${pad(date.getDate())}`;
+}
+/** `<input type="datetime-local">`'s own value shape (`yyyy-mm-ddThh:mm`) -- same
+ *  reasoning as `toDateInputValue` above, one input type over. */ function toDateTimeInputValue(value) {
+    const date = toDate(value);
+    if (!date) return "";
+    const pad = (n)=>String(n).padStart(2, "0");
+    return `${date.getFullYear()}-${pad(date.getMonth() + 1)}-${pad(date.getDate())}T${pad(date.getHours())}:${pad(date.getMinutes())}`;
+}
+function formatDateCell(value, locale) {
+    const date = toDate(value);
+    if (!date) return null;
+    return new Intl.DateTimeFormat(locale, {
+        month: "short",
+        day: "numeric",
+        year: "numeric"
+    }).format(date);
+}
+function formatDateTimeCell(value, locale) {
+    const date = toDate(value);
+    if (!date) return null;
+    return new Intl.DateTimeFormat(locale, {
+        month: "short",
+        day: "numeric",
+        year: "numeric",
+        hour: "numeric",
+        minute: "2-digit"
+    }).format(date);
+}
+function EntityCell({ value, className, nameClassName }) {
+    const entity = typeof value === "object" && value !== null ? value : {
+        name: String(value ?? "")
+    };
+    if (!entity.name) return null;
+    return /*#__PURE__*/ jsxs("span", {
+        className: className,
+        children: [
+            /*#__PURE__*/ jsxs(AvatarRoot, {
+                size: "20",
+                children: [
+                    entity.avatar && /*#__PURE__*/ jsx(AvatarImage, {
+                        src: entity.avatar,
+                        alt: ""
+                    }),
+                    /*#__PURE__*/ jsx(AvatarFallback, {
+                        children: initialsFor(entity.name)
+                    })
+                ]
+            }),
+            /*#__PURE__*/ jsx("span", {
+                className: nameClassName,
+                children: entity.name
+            })
+        ]
+    });
+}
+function TagsCell({ value, className }) {
+    const tags = Array.isArray(value) ? value : [];
+    if (!tags.length) return null;
+    return /*#__PURE__*/ jsx("span", {
+        className: className,
+        children: tags.map((tag)=>/*#__PURE__*/ jsx(Badge, {
+                tone: toneFor(tag),
+                variant: "weak",
+                size: "medium",
+                children: tag
+            }, tag))
+    });
+}
+function StatusCell({ value }) {
+    const status = value == null ? "" : String(value);
+    if (!status) return null;
+    return /*#__PURE__*/ jsx(Badge, {
+        tone: toneFor(status),
+        variant: "weak",
+        size: "medium",
+        children: status
+    });
+}
+function LinkCell({ column, value, className }) {
+    const text = value == null ? "" : String(value);
+    if (!text) return null;
+    const isUrl = column.type === "url";
+    const href = isUrl ? /^https?:\/\//.test(text) ? text : `https://${text}` : `mailto:${text}`;
+    return /*#__PURE__*/ jsx("a", {
+        className: className,
+        href: href,
+        target: isUrl ? "_blank" : undefined,
+        rel: isUrl ? "noreferrer" : undefined,
+        // A link cell points somewhere other than "select this row" -- its own
+        // navigation must not also fire a row click handler.
+        onClick: (event)=>event.stopPropagation(),
+        children: text
+    });
+}
+// Attio's own measured 5-point star path (crisp's `RATING_STAR_D`, traced from the
+// live widget's SVG) -- reused verbatim rather than a generic star glyph, so a
+// rating cell's silhouette matches Attio exactly instead of approximating it. Exported
+// so editors.tsx's interactive `RatingEditor` (an `editable` rating column, clicking a
+// star commits) draws the identical silhouette rather than a second, slightly
+// different one.
+const RATING_STAR_D = "M7.32203 2.81085C7.65793 1.97438 8.84207 1.97438 9.17797 2.81085L10.0851 5.06967C10.2281 5.42587 10.5624 5.66876 10.9454 5.69473L13.3739 5.8594C14.2733 5.92038 14.6392 7.04656 13.9475 7.62451L12.0795 9.18521C11.7849 9.43132 11.6572 9.82433 11.7509 10.1966L12.3447 12.5572C12.5647 13.4313 11.6067 14.1273 10.8433 13.6481L8.78171 12.3538C8.45661 12.1497 8.04339 12.1497 7.71829 12.3538L5.65675 13.6481C4.89333 14.1273 3.93534 13.4313 4.15526 12.5572L4.74911 10.1966C4.84276 9.82433 4.71507 9.43132 4.4205 9.18521L2.55254 7.62451C1.86081 7.04656 2.22673 5.92038 3.12606 5.8594L5.55463 5.69473C5.9376 5.66876 6.27191 5.42587 6.41495 5.06967L7.32203 2.81085Z";
+// Filled = the same measured Attio brand blue the selected-row tint uses
+// (`data-table.ts`'s `ATTIO_BRAND_BLUE`); empty = crisp's own measured
+// `rgba(0,0,0,0.1)`. Literal, not a recipe token -- see that file's comment on why.
+const RATING_FILLED = "#0298d9";
+const RATING_EMPTY = "rgba(0, 0, 0, 0.1)";
+function RatingCell({ value, maxRating = 5 }) {
+    const rating = typeof value === "number" ? value : Number(value);
+    if (!rating || Number.isNaN(rating)) return null;
+    return /*#__PURE__*/ jsx("span", {
+        style: {
+            display: "inline-flex",
+            alignItems: "center",
+            gap: 2
+        },
+        children: Array.from({
+            length: maxRating
+        }, (_, index)=>// biome-ignore lint/suspicious/noArrayIndexKey: a fixed-length star row has no other identity
+            /*#__PURE__*/ jsx("svg", {
+                width: 16,
+                height: 16,
+                viewBox: "0 0 16 16",
+                fill: "none",
+                role: "presentation",
+                "aria-hidden": "true",
+                children: /*#__PURE__*/ jsx("path", {
+                    d: RATING_STAR_D,
+                    fill: index < rating ? RATING_FILLED : RATING_EMPTY
+                })
+            }, index))
+    });
+}
+/** `type: "checkbox"`'s READ-ONLY display -- a disabled seed `Checkbox` reflecting
+ *  the raw boolean, so a non-`editable` checkbox column still reads as a checkbox
+ *  (crisp's own measured shape, distinct from `switch`/`rating`'s toggle/star), not a
+ *  bare "true"/"false" string. The `editable` case (a live, clickable checkbox) is
+ *  `editors.tsx`'s `CheckboxEditor` -- this renderer never handles a click. */ function CheckboxCell({ value }) {
+    const checked = value === true || value === "true";
+    return /*#__PURE__*/ jsxs(CheckboxRoot, {
+        checked: checked,
+        disabled: true,
+        tabIndex: -1,
+        children: [
+            /*#__PURE__*/ jsx(CheckboxControl, {
+                children: /*#__PURE__*/ jsx(CheckboxIndicator, {
+                    checked: CHECKBOX_CELL_CHECKED_ICON
+                })
+            }),
+            /*#__PURE__*/ jsx(CheckboxHiddenInput, {
+                "aria-label": "Value"
+            })
+        ]
+    });
+}
+
+/** `editable` + one of these shapes needs no double-click gate and no separate rest
+ *  display -- interacting with the widget itself IS the commit gesture (crisp's own
+ *  #453/#760/#761: `switch`/`rating`/`checkbox` never had a meaningfully different
+ *  "rest" state to show). Every other `editable` column opens on double-click. */ function isAlwaysLiveEditable(column) {
+    if (!column.editable) return false;
+    return column.editor === "switch" || column.type === "rating" || column.type === "checkbox";
+}
+function ColumnBodyCells({ columns, row, classNames, locale, selectable, stickyFirst, stickyLast }) {
+    const effective = useEffectiveColumns(columns);
+    const { startEdit } = useDataTableContext();
+    return /*#__PURE__*/ jsx(Fragment, {
+        children: effective.map(({ column }, index)=>{
+            const isFirst = index === 0;
+            const isLast = index === effective.length - 1;
+            const sticky = stickyProps({
+                selectable,
+                stickyFirst,
+                stickyLast,
+                isSelectionCell: false,
+                isFirst,
+                isLast
+            });
+            // A gated `editable` column (everything except the always-live widgets)
+            // opens on double-click -- Attio's own measured gesture (crisp's #411),
+            // matched here rather than a single click, which stays "select this cell"
+            // in crisp's own spreadsheet model and would otherwise be indistinguishable
+            // from this table's plain row click.
+            const gated = column.editable && !isAlwaysLiveEditable(column);
+            return /*#__PURE__*/ jsx(DataTableCell, {
+                "data-numeric": dataAttr(column.type === "number" || column.type === "currency"),
+                "data-editable": dataAttr(!!column.editable),
+                "data-sticky": sticky["data-sticky"],
+                "data-sticky-edge": sticky["data-sticky-edge"],
+                "data-sticky-edge-end": sticky["data-sticky-edge-end"],
+                style: sticky.style,
+                onDoubleClick: gated ? ()=>startEdit(row.id, column.key) : undefined,
+                children: /*#__PURE__*/ jsx(CellContent, {
+                    column: column,
+                    row: row,
+                    rowId: row.id,
+                    classNames: classNames,
+                    locale: locale
+                })
+            }, column.key);
+        })
+    });
+}
+/**
+ * Dispatches to whichever of cells.tsx's static renderers or editors.tsx's live
+ * editors applies to THIS column/row right now -- always-live first (no rest state to
+ * fall back to), then a gated editor while the cell is mid-edit, else the plain
+ * display (a custom `render` wins there, same as before `editable` existed; it never
+ * overrides an actual editing/always-live state, matching crisp's own split between
+ * `renderTyped`'s rest-state branch and the editing branches above it).
+ */ function CellContent({ column, row, rowId, classNames, locale }) {
+    const { isEditing, isPending, getEditError, commitEdit, cancelEdit } = useDataTableContext();
+    const rawValue = getColumnValue(column, row);
+    const pending = isPending(rowId, column.key);
+    const error = column.editable ? getEditError(rowId, column.key) : null;
+    const commit = (value)=>commitEdit(rowId, column.key, value);
+    const cancel = ()=>cancelEdit();
+    let node;
+    if (column.editable && column.editor === "switch") {
+        node = /*#__PURE__*/ jsx(SwitchEditor, {
+            column: column,
+            value: resolveEditValue(column, row, rawValue),
+            pending: pending,
+            onCommit: commit
+        });
+    } else if (column.editable && column.type === "rating") {
+        node = /*#__PURE__*/ jsx(RatingEditor, {
+            column: column,
+            value: resolveEditValue(column, row, rawValue),
+            pending: pending,
+            onCommit: commit
+        });
+    } else if (column.editable && column.type === "checkbox") {
+        node = /*#__PURE__*/ jsx(CheckboxEditor, {
+            column: column,
+            value: resolveEditValue(column, row, rawValue),
+            pending: pending,
+            onCommit: commit
+        });
+    } else if (column.editable && isEditing(rowId, column.key)) {
+        if (column.editor === "select") {
+            node = /*#__PURE__*/ jsx(SelectEditor, {
+                column: column,
+                value: resolveEditValue(column, row, rawValue),
+                pending: pending,
+                onCommit: commit,
+                onCancel: cancel
+            });
+        } else if (column.editor === "reference" || column.editor === "actor") {
+            node = /*#__PURE__*/ jsx(ReferenceEditor, {
+                column: column,
+                value: resolveEditValue(column, row, rawValue),
+                pending: pending,
+                onCommit: commit,
+                onCancel: cancel
+            });
+        } else if (column.cellType === "date" || column.cellType === "datetime") {
+            node = /*#__PURE__*/ jsx(DateEditor, {
+                column: column,
+                value: rawValue,
+                pending: pending,
+                onCommit: commit,
+                onCancel: cancel
+            });
+        } else {
+            node = /*#__PURE__*/ jsx(TextEditor, {
+                column: column,
+                value: rawValue,
+                pending: pending,
+                onCommit: commit,
+                onCancel: cancel
+            });
+        }
+    } else {
+        node = /*#__PURE__*/ jsx(DisplayCellContent, {
+            column: column,
+            row: row,
+            value: rawValue,
+            classNames: classNames,
+            locale: locale
+        });
+    }
+    return /*#__PURE__*/ jsxs(Fragment, {
+        children: [
+            node,
+            error && /*#__PURE__*/ jsx(EditError, {
+                message: error
+            })
+        ]
+    });
+}
+// The plain (non-editing) Attio cell-type renderer -- unchanged from before this
+// table grew inline editing, just renamed (it used to be the whole of `CellContent`)
+// since that name now belongs to the dispatcher above.
+function DisplayCellContent({ column, row, value, classNames, locale }) {
+    if (column.render) return /*#__PURE__*/ jsx(Fragment, {
+        children: column.render(row)
+    });
+    switch(column.type){
+        case "entity":
+            return /*#__PURE__*/ jsx(EntityCell, {
+                value: value,
+                className: classNames.entity,
+                nameClassName: classNames.entityName
+            });
+        case "url":
+        case "email":
+            return /*#__PURE__*/ jsx(LinkCell, {
+                column: column,
+                value: value,
+                className: classNames.link
+            });
+        case "tags":
+            return /*#__PURE__*/ jsx(TagsCell, {
+                value: value,
+                className: classNames.tagList
+            });
+        case "status":
+            return /*#__PURE__*/ jsx(StatusCell, {
+                value: value
+            });
+        case "number":
+            return /*#__PURE__*/ jsx(Fragment, {
+                children: formatNumberCell(value, locale)
+            });
+        case "currency":
+            return /*#__PURE__*/ jsx(Fragment, {
+                children: formatCurrencyCell(value, column.symbol ?? "$", locale)
+            });
+        case "date":
+            return /*#__PURE__*/ jsx(Fragment, {
+                children: formatDateCell(value, locale)
+            });
+        case "datetime":
+            return /*#__PURE__*/ jsx(Fragment, {
+                children: formatDateTimeCell(value, locale)
+            });
+        case "rating":
+            return /*#__PURE__*/ jsx(RatingCell, {
+                value: value,
+                maxRating: column.maxRating
+            });
+        case "checkbox":
+            return /*#__PURE__*/ jsx(CheckboxCell, {
+                value: value
+            });
+        default:
+            return /*#__PURE__*/ jsx(Fragment, {
+                children: value == null ? null : String(value)
+            });
+    }
+}
+
+export { AvatarRoot as A, ColumnBodyCells as C, RATING_FILLED as R, RATING_EMPTY as a, RATING_STAR_D as b, CHECKBOX_CELL_CHECKED_ICON as c, AvatarImage as d, AvatarFallback as e, toDateInputValue as f, toDateTimeInputValue as t };