@crisp-ui-kit/crisp 0.52.0 → 0.52.1

package/dist/cjs/components/datatable/datatable.js

@@ -254,12 +254,61 @@ const CREATE_REFERENCE_VALUE = "__crisp_create_reference__";
 function dataReferenceOptionLabel(o) {
     return ((0, jsx_runtime_1.jsxs)("span", { className: "crisp-datatable-refoption", children: [(0, jsx_runtime_1.jsx)(avatar_1.Avatar, { size: "sm", className: "crisp-datatable-refoption-avatar", children: o.avatar ? ((0, jsx_runtime_1.jsx)("img", { src: o.avatar, alt: "" })) : ((0, jsx_runtime_1.jsx)(lucide_react_1.CircleUserRound, { size: 12, strokeWidth: 1.75, "aria-hidden": "true" })) }), o.label] }));
 }
+/** `Select` owns its own closed-by-default `open` state with no prop or
+ * imperative way to start it open (see select.tsx) -- the only thing that
+ * opens it is a real click on its trigger button. Attio's own picker opens
+ * the instant a `select`/`reference` cell enters edit mode (measured live
+ * against a GRC test company, 2026-09-24), not after a second click on an
+ * already-mounted, still-closed trigger, so drive that click ourselves.
+ * Guarded against firing twice (StrictMode double-invokes effects) --
+ * `Select`'s own trigger toggles, so a second click would close what the
+ * first one opened. */
+function useAutoOpenSelect() {
+    const ref = React.useRef(null);
+    const opened = React.useRef(false);
+    React.useEffect(() => {
+        if (opened.current)
+            return;
+        opened.current = true;
+        ref.current
+            ?.querySelector(".crisp-select-trigger")
+            ?.click();
+    }, []);
+    return ref;
+}
+/** `select`/`reference` open crisp's own `Select`, which closes its own
+ * popover on Escape (see select.tsx's "document-level fallback for Escape")
+ * but has no callback telling the CELL to leave editing mode -- and, same
+ * problem that fallback exists for, DOM focus doesn't reliably end up
+ * inside the newly-opened popover, so a `TableCell`-level `onKeyDown` can't
+ * be trusted to see the key at all (#453). Mirror Select's own fix for
+ * that: a raw `document` listener, not a focus-dependent React one. */
+function useEscapeExitsEditing(onCancel) {
+    React.useEffect(() => {
+        const onKey = (e) => {
+            if (e.key === "Escape")
+                onCancel();
+        };
+        document.addEventListener("keydown", onKey);
+        return () => document.removeEventListener("keydown", onKey);
+    }, [onCancel]);
+}
+/** `editor: "select"`'s picker, its own component (not inline in the
+ * row-render loop, like `DataReferenceEditor` below) because it needs the
+ * open-on-mount and escape-exits-editing effects above (#453). */
+function DataSelectEditor({ col, value, isPending, onCommit, onCancel, }) {
+    const ref = useAutoOpenSelect();
+    useEscapeExitsEditing(onCancel);
+    return ((0, jsx_runtime_1.jsx)("span", { ref: ref, style: { display: "contents" }, children: (0, jsx_runtime_1.jsx)(select_1.Select, { variant: "ghost", "aria-label": `Edit ${col.key}`, value: asText(value) || undefined, disabled: isPending, options: col.options ?? [], onValueChange: onCommit }) }));
+}
 /** `editor: "reference"`'s picker, its own component (not inline in the
  * row-render loop) because it needs its own `useState` for the search query
  * -- one instance per cell, same reasoning `select`/`switch` don't need a
  * component of their own but this does. */
-function DataReferenceEditor({ col, value, isPending, onCommit, }) {
+function DataReferenceEditor({ col, value, isPending, onCommit, onCancel, }) {
     const [query, setQuery] = React.useState("");
+    const ref = useAutoOpenSelect();
+    useEscapeExitsEditing(onCancel);
     const options = (col.refOptions ?? []).map((o) => ({
         value: o.value,
         label: dataReferenceOptionLabel(o),
@@ -274,12 +323,12 @@ function DataReferenceEditor({ col, value, isPending, onCommit, }) {
             keywords: query,
         });
     }
-    return ((0, jsx_runtime_1.jsx)(select_1.Select, { variant: "ghost", searchable: true, searchPlaceholder: col.refSearchPlaceholder, onSearchChange: setQuery, "aria-label": `Edit ${col.key}`, value: asText(value) || undefined, disabled: isPending, options: options, onValueChange: (v) => {
-            if (v === CREATE_REFERENCE_VALUE)
-                col.onCreateReference?.(query);
-            else
-                onCommit(v);
-        } }));
+    return ((0, jsx_runtime_1.jsx)("span", { ref: ref, style: { display: "contents" }, children: (0, jsx_runtime_1.jsx)(select_1.Select, { variant: "ghost", searchable: true, searchPlaceholder: col.refSearchPlaceholder, onSearchChange: setQuery, "aria-label": `Edit ${col.key}`, value: asText(value) || undefined, disabled: isPending, options: options, onValueChange: (v) => {
+                if (v === CREATE_REFERENCE_VALUE)
+                    col.onCreateReference?.(query);
+                else
+                    onCommit(v);
+            } }) }));
 }
 function DataTable({ columns: columnsProp, data, selectable = false, selectedIds, onSelectionChange, selectAllLabel = "Select all rows", selectRowLabel = (row) => `Select row ${row.id}`, selectionAnnouncement = (count) => count === 0 ? "Selection cleared" : `${count} selected`, columnMenu = false, onColumnsChange, groupBy, onRowsReorder, error, sort: sortProp, defaultSort, onSortChange, filterable = false, searchPlaceholder = "Search…", searchLabel = "Search table", onEdit, stickyFirst = true, stickyLast = false, locale: localeProp, avatarTone = "brand", surface, interactive = false, onRowClick, onAddRow, addRowLabel = "New record", empty = "No results.", showCount = true, countLabel = (shown, total) => shown === total
     ? `${total} ${total === 1 ? "row" : "rows"}`
@@ -502,10 +551,11 @@ function DataTable({ columns: columnsProp, data, selectable = false, selectedIds
      *                     throughout, and the browser's own picker already
      *                     carries both a calendar and a time control.
      *   text/entity       a plain text field
-     * `status`, `reference` and `tags` are pickers in RecordsTable, not
-     * double-click editors, so they are not editable here either -- except
-     * `editor: "reference"` (#432), which is a picker for the same reason
-     * `select`/`switch` are: always live, no double-click gate.
+     * `editor: "select"`/`"reference"` open their own picker instead of this
+     * native-input family, but through the SAME double-click gate (#453) --
+     * see the row-render loop's `isEditing` branch for those, this function
+     * only covers the native-input-backed types. `editor: "switch"` is the
+     * one editor with no double-click gate at all (always live).
      */
     function editorFor(col) {
         switch (col.type) {
@@ -559,11 +609,12 @@ function DataTable({ columns: columnsProp, data, selectable = false, selectedIds
             return;
         }
         else if (e.key === "Enter") {
-            // select/switch columns have no separate editing mode to enter --
-            // they're already their own live widget (#385); Enter there is a
-            // no-op here, same as any other non-editable cell that isn't wired to
-            // onRowClick.
-            if (columns[c]?.editable && !columns[c]?.editor) {
+            // #453: `switch` has no separate editing mode to enter -- it's
+            // already its own live widget (#385); Enter there is a no-op, same
+            // as any other non-editable cell that isn't wired to onRowClick.
+            // `select`/`reference` DO have one now (like every other editor),
+            // so Enter opens them too.
+            if (columns[c]?.editable && columns[c]?.editor !== "switch") {
                 e.preventDefault();
                 openEditing(selCell.id, selCell.key);
             }
@@ -794,14 +845,37 @@ function DataTable({ columns: columnsProp, data, selectable = false, selectedIds
                                             const errorHere = editError?.id === row.id && editError?.key === col.key
                                                 ? editError.message
                                                 : null;
-                                            // A select/switch editable column is ALWAYS its own
-                                            // live widget -- no double-click gate, no separate
-                                            // edit/view mode, the same convention RecordsTable's
-                                            // status/reference pickers already use: choosing a
-                                            // value or flipping a toggle IS the commit gesture
-                                            // (#385).
-                                            if (col.editable && col.editor) {
-                                                return ((0, jsx_runtime_1.jsxs)(table_1.TableCell, { align: alignFor(col), ...sticky, className: "crisp-datatable-td--picker", "data-pending": isPending ? "" : undefined, children: [(0, jsx_runtime_1.jsxs)("span", { className: "crisp-datatable-edit-picker", children: [col.editor === "select" ? ((0, jsx_runtime_1.jsx)(select_1.Select, { variant: "ghost", "aria-label": `Edit ${col.key}`, value: asText(value) || undefined, disabled: isPending, options: col.options ?? [], onValueChange: (v) => commitEdit(row.id, col.key, v) })) : col.editor === "reference" ? ((0, jsx_runtime_1.jsx)(DataReferenceEditor, { col: col, value: value, isPending: isPending, onCommit: (v) => commitEdit(row.id, col.key, v) })) : ((0, jsx_runtime_1.jsx)(switch_1.Switch, { "aria-label": `Edit ${col.key}`, checked: value === true || value === "true", disabled: isPending, onCheckedChange: (checked) => commitEdit(row.id, col.key, String(checked)) })), isPending && ((0, jsx_runtime_1.jsx)(spinner_1.Spinner, { size: 14, className: "crisp-datatable-edit-pending" }))] }), errorHere && ((0, jsx_runtime_1.jsx)("span", { className: "crisp-datatable-edit-error", children: errorHere }))] }, col.key));
+                                            // #453: a `switch` editable column IS always its own
+                                            // live widget -- flipping the toggle IS the commit
+                                            // gesture, there's no meaningfully different "rest"
+                                            // display for a boolean. `select`/`reference` are
+                                            // NOT this: at rest they must show the column's own
+                                            // render/format like every other editable type
+                                            // (#412 empty handling included), and only open on
+                                            // double-click (#411) -- this branch previously
+                                            // rendered them unconditionally, replacing every
+                                            // row's own render with a picker trigger, which is
+                                            // the regression #453 reported (also #432/#449,
+                                            // which never had a "rest" state of their own to get
+                                            // right). See the `isEditing` block below for their
+                                            // actual editor.
+                                            if (col.editable && col.editor === "switch") {
+                                                return ((0, jsx_runtime_1.jsxs)(table_1.TableCell, { align: alignFor(col), ...sticky, className: "crisp-datatable-td--picker", "data-pending": isPending ? "" : undefined, children: [(0, jsx_runtime_1.jsxs)("span", { className: "crisp-datatable-edit-picker", children: [(0, jsx_runtime_1.jsx)(switch_1.Switch, { "aria-label": `Edit ${col.key}`, checked: value === true || value === "true", disabled: isPending, onCheckedChange: (checked) => commitEdit(row.id, col.key, String(checked)) }), isPending && ((0, jsx_runtime_1.jsx)(spinner_1.Spinner, { size: 14, className: "crisp-datatable-edit-pending" }))] }), errorHere && ((0, jsx_runtime_1.jsx)("span", { className: "crisp-datatable-edit-error", children: errorHere }))] }, col.key));
+                                            }
+                                            if (isEditing &&
+                                                (col.editor === "select" || col.editor === "reference")) {
+                                                return ((0, jsx_runtime_1.jsxs)(table_1.TableCell, { align: alignFor(col), ...sticky, className: "crisp-datatable-td--picker", "data-pending": isPending ? "" : undefined, 
+                                                    // Same as the plain text editor's own cell:
+                                                    // opening/using the picker must not also fire
+                                                    // the row's onRowClick. Escape is handled by
+                                                    // `DataSelectEditor`/`DataReferenceEditor`
+                                                    // themselves (a document-level listener, not a
+                                                    // `TableCell`-level `onKeyDown`) -- opening the
+                                                    // picker moves DOM focus into a floating,
+                                                    // portaled popover, so a handler here can't
+                                                    // rely on the key event ever bubbling through
+                                                    // this element (#453).
+                                                    onClick: (e) => e.stopPropagation(), children: [(0, jsx_runtime_1.jsxs)("span", { className: "crisp-datatable-edit-picker", children: [col.editor === "select" ? ((0, jsx_runtime_1.jsx)(DataSelectEditor, { col: col, value: value, isPending: isPending, onCommit: (v) => commitEdit(row.id, col.key, v), onCancel: () => setEditing(null) })) : ((0, jsx_runtime_1.jsx)(DataReferenceEditor, { col: col, value: value, isPending: isPending, onCommit: (v) => commitEdit(row.id, col.key, v), onCancel: () => setEditing(null) })), isPending && ((0, jsx_runtime_1.jsx)(spinner_1.Spinner, { size: 14, className: "crisp-datatable-edit-pending" }))] }), errorHere && ((0, jsx_runtime_1.jsx)("span", { className: "crisp-datatable-edit-error", children: errorHere }))] }, col.key));
                                             }
                                             if (isEditing) {
                                                 return ((0, jsx_runtime_1.jsxs)(table_1.TableCell, { align: alignFor(col), ...sticky, onClick: (e) => e.stopPropagation(), children: [(0, jsx_runtime_1.jsx)("input", { className: "crisp-datatable-edit", 

package/dist/esm/components/datatable/datatable.js

@@ -218,12 +218,61 @@ const CREATE_REFERENCE_VALUE = "__crisp_create_reference__";
 function dataReferenceOptionLabel(o) {
     return (_jsxs("span", { className: "crisp-datatable-refoption", children: [_jsx(Avatar, { size: "sm", className: "crisp-datatable-refoption-avatar", children: o.avatar ? (_jsx("img", { src: o.avatar, alt: "" })) : (_jsx(CircleUserRound, { size: 12, strokeWidth: 1.75, "aria-hidden": "true" })) }), o.label] }));
 }
+/** `Select` owns its own closed-by-default `open` state with no prop or
+ * imperative way to start it open (see select.tsx) -- the only thing that
+ * opens it is a real click on its trigger button. Attio's own picker opens
+ * the instant a `select`/`reference` cell enters edit mode (measured live
+ * against a GRC test company, 2026-09-24), not after a second click on an
+ * already-mounted, still-closed trigger, so drive that click ourselves.
+ * Guarded against firing twice (StrictMode double-invokes effects) --
+ * `Select`'s own trigger toggles, so a second click would close what the
+ * first one opened. */
+function useAutoOpenSelect() {
+    const ref = React.useRef(null);
+    const opened = React.useRef(false);
+    React.useEffect(() => {
+        if (opened.current)
+            return;
+        opened.current = true;
+        ref.current
+            ?.querySelector(".crisp-select-trigger")
+            ?.click();
+    }, []);
+    return ref;
+}
+/** `select`/`reference` open crisp's own `Select`, which closes its own
+ * popover on Escape (see select.tsx's "document-level fallback for Escape")
+ * but has no callback telling the CELL to leave editing mode -- and, same
+ * problem that fallback exists for, DOM focus doesn't reliably end up
+ * inside the newly-opened popover, so a `TableCell`-level `onKeyDown` can't
+ * be trusted to see the key at all (#453). Mirror Select's own fix for
+ * that: a raw `document` listener, not a focus-dependent React one. */
+function useEscapeExitsEditing(onCancel) {
+    React.useEffect(() => {
+        const onKey = (e) => {
+            if (e.key === "Escape")
+                onCancel();
+        };
+        document.addEventListener("keydown", onKey);
+        return () => document.removeEventListener("keydown", onKey);
+    }, [onCancel]);
+}
+/** `editor: "select"`'s picker, its own component (not inline in the
+ * row-render loop, like `DataReferenceEditor` below) because it needs the
+ * open-on-mount and escape-exits-editing effects above (#453). */
+function DataSelectEditor({ col, value, isPending, onCommit, onCancel, }) {
+    const ref = useAutoOpenSelect();
+    useEscapeExitsEditing(onCancel);
+    return (_jsx("span", { ref: ref, style: { display: "contents" }, children: _jsx(Select, { variant: "ghost", "aria-label": `Edit ${col.key}`, value: asText(value) || undefined, disabled: isPending, options: col.options ?? [], onValueChange: onCommit }) }));
+}
 /** `editor: "reference"`'s picker, its own component (not inline in the
  * row-render loop) because it needs its own `useState` for the search query
  * -- one instance per cell, same reasoning `select`/`switch` don't need a
  * component of their own but this does. */
-function DataReferenceEditor({ col, value, isPending, onCommit, }) {
+function DataReferenceEditor({ col, value, isPending, onCommit, onCancel, }) {
     const [query, setQuery] = React.useState("");
+    const ref = useAutoOpenSelect();
+    useEscapeExitsEditing(onCancel);
     const options = (col.refOptions ?? []).map((o) => ({
         value: o.value,
         label: dataReferenceOptionLabel(o),
@@ -238,12 +287,12 @@ function DataReferenceEditor({ col, value, isPending, onCommit, }) {
             keywords: query,
         });
     }
-    return (_jsx(Select, { variant: "ghost", searchable: true, searchPlaceholder: col.refSearchPlaceholder, onSearchChange: setQuery, "aria-label": `Edit ${col.key}`, value: asText(value) || undefined, disabled: isPending, options: options, onValueChange: (v) => {
-            if (v === CREATE_REFERENCE_VALUE)
-                col.onCreateReference?.(query);
-            else
-                onCommit(v);
-        } }));
+    return (_jsx("span", { ref: ref, style: { display: "contents" }, children: _jsx(Select, { variant: "ghost", searchable: true, searchPlaceholder: col.refSearchPlaceholder, onSearchChange: setQuery, "aria-label": `Edit ${col.key}`, value: asText(value) || undefined, disabled: isPending, options: options, onValueChange: (v) => {
+                if (v === CREATE_REFERENCE_VALUE)
+                    col.onCreateReference?.(query);
+                else
+                    onCommit(v);
+            } }) }));
 }
 export function DataTable({ columns: columnsProp, data, selectable = false, selectedIds, onSelectionChange, selectAllLabel = "Select all rows", selectRowLabel = (row) => `Select row ${row.id}`, selectionAnnouncement = (count) => count === 0 ? "Selection cleared" : `${count} selected`, columnMenu = false, onColumnsChange, groupBy, onRowsReorder, error, sort: sortProp, defaultSort, onSortChange, filterable = false, searchPlaceholder = "Search…", searchLabel = "Search table", onEdit, stickyFirst = true, stickyLast = false, locale: localeProp, avatarTone = "brand", surface, interactive = false, onRowClick, onAddRow, addRowLabel = "New record", empty = "No results.", showCount = true, countLabel = (shown, total) => shown === total
     ? `${total} ${total === 1 ? "row" : "rows"}`
@@ -466,10 +515,11 @@ export function DataTable({ columns: columnsProp, data, selectable = false, sele
      *                     throughout, and the browser's own picker already
      *                     carries both a calendar and a time control.
      *   text/entity       a plain text field
-     * `status`, `reference` and `tags` are pickers in RecordsTable, not
-     * double-click editors, so they are not editable here either -- except
-     * `editor: "reference"` (#432), which is a picker for the same reason
-     * `select`/`switch` are: always live, no double-click gate.
+     * `editor: "select"`/`"reference"` open their own picker instead of this
+     * native-input family, but through the SAME double-click gate (#453) --
+     * see the row-render loop's `isEditing` branch for those, this function
+     * only covers the native-input-backed types. `editor: "switch"` is the
+     * one editor with no double-click gate at all (always live).
      */
     function editorFor(col) {
         switch (col.type) {
@@ -523,11 +573,12 @@ export function DataTable({ columns: columnsProp, data, selectable = false, sele
             return;
         }
         else if (e.key === "Enter") {
-            // select/switch columns have no separate editing mode to enter --
-            // they're already their own live widget (#385); Enter there is a
-            // no-op here, same as any other non-editable cell that isn't wired to
-            // onRowClick.
-            if (columns[c]?.editable && !columns[c]?.editor) {
+            // #453: `switch` has no separate editing mode to enter -- it's
+            // already its own live widget (#385); Enter there is a no-op, same
+            // as any other non-editable cell that isn't wired to onRowClick.
+            // `select`/`reference` DO have one now (like every other editor),
+            // so Enter opens them too.
+            if (columns[c]?.editable && columns[c]?.editor !== "switch") {
                 e.preventDefault();
                 openEditing(selCell.id, selCell.key);
             }
@@ -758,14 +809,37 @@ export function DataTable({ columns: columnsProp, data, selectable = false, sele
                                             const errorHere = editError?.id === row.id && editError?.key === col.key
                                                 ? editError.message
                                                 : null;
-                                            // A select/switch editable column is ALWAYS its own
-                                            // live widget -- no double-click gate, no separate
-                                            // edit/view mode, the same convention RecordsTable's
-                                            // status/reference pickers already use: choosing a
-                                            // value or flipping a toggle IS the commit gesture
-                                            // (#385).
-                                            if (col.editable && col.editor) {
-                                                return (_jsxs(TableCell, { align: alignFor(col), ...sticky, className: "crisp-datatable-td--picker", "data-pending": isPending ? "" : undefined, children: [_jsxs("span", { className: "crisp-datatable-edit-picker", children: [col.editor === "select" ? (_jsx(Select, { variant: "ghost", "aria-label": `Edit ${col.key}`, value: asText(value) || undefined, disabled: isPending, options: col.options ?? [], onValueChange: (v) => commitEdit(row.id, col.key, v) })) : col.editor === "reference" ? (_jsx(DataReferenceEditor, { col: col, value: value, isPending: isPending, onCommit: (v) => commitEdit(row.id, col.key, v) })) : (_jsx(Switch, { "aria-label": `Edit ${col.key}`, checked: value === true || value === "true", disabled: isPending, onCheckedChange: (checked) => commitEdit(row.id, col.key, String(checked)) })), isPending && (_jsx(Spinner, { size: 14, className: "crisp-datatable-edit-pending" }))] }), errorHere && (_jsx("span", { className: "crisp-datatable-edit-error", children: errorHere }))] }, col.key));
+                                            // #453: a `switch` editable column IS always its own
+                                            // live widget -- flipping the toggle IS the commit
+                                            // gesture, there's no meaningfully different "rest"
+                                            // display for a boolean. `select`/`reference` are
+                                            // NOT this: at rest they must show the column's own
+                                            // render/format like every other editable type
+                                            // (#412 empty handling included), and only open on
+                                            // double-click (#411) -- this branch previously
+                                            // rendered them unconditionally, replacing every
+                                            // row's own render with a picker trigger, which is
+                                            // the regression #453 reported (also #432/#449,
+                                            // which never had a "rest" state of their own to get
+                                            // right). See the `isEditing` block below for their
+                                            // actual editor.
+                                            if (col.editable && col.editor === "switch") {
+                                                return (_jsxs(TableCell, { align: alignFor(col), ...sticky, className: "crisp-datatable-td--picker", "data-pending": isPending ? "" : undefined, children: [_jsxs("span", { className: "crisp-datatable-edit-picker", children: [_jsx(Switch, { "aria-label": `Edit ${col.key}`, checked: value === true || value === "true", disabled: isPending, onCheckedChange: (checked) => commitEdit(row.id, col.key, String(checked)) }), isPending && (_jsx(Spinner, { size: 14, className: "crisp-datatable-edit-pending" }))] }), errorHere && (_jsx("span", { className: "crisp-datatable-edit-error", children: errorHere }))] }, col.key));
+                                            }
+                                            if (isEditing &&
+                                                (col.editor === "select" || col.editor === "reference")) {
+                                                return (_jsxs(TableCell, { align: alignFor(col), ...sticky, className: "crisp-datatable-td--picker", "data-pending": isPending ? "" : undefined, 
+                                                    // Same as the plain text editor's own cell:
+                                                    // opening/using the picker must not also fire
+                                                    // the row's onRowClick. Escape is handled by
+                                                    // `DataSelectEditor`/`DataReferenceEditor`
+                                                    // themselves (a document-level listener, not a
+                                                    // `TableCell`-level `onKeyDown`) -- opening the
+                                                    // picker moves DOM focus into a floating,
+                                                    // portaled popover, so a handler here can't
+                                                    // rely on the key event ever bubbling through
+                                                    // this element (#453).
+                                                    onClick: (e) => e.stopPropagation(), children: [_jsxs("span", { className: "crisp-datatable-edit-picker", children: [col.editor === "select" ? (_jsx(DataSelectEditor, { col: col, value: value, isPending: isPending, onCommit: (v) => commitEdit(row.id, col.key, v), onCancel: () => setEditing(null) })) : (_jsx(DataReferenceEditor, { col: col, value: value, isPending: isPending, onCommit: (v) => commitEdit(row.id, col.key, v), onCancel: () => setEditing(null) })), isPending && (_jsx(Spinner, { size: 14, className: "crisp-datatable-edit-pending" }))] }), errorHere && (_jsx("span", { className: "crisp-datatable-edit-error", children: errorHere }))] }, col.key));
                                             }
                                             if (isEditing) {
                                                 return (_jsxs(TableCell, { align: alignFor(col), ...sticky, onClick: (e) => e.stopPropagation(), children: [_jsx("input", { className: "crisp-datatable-edit", 

package/dist/types/components/datatable/datatable.d.ts

@@ -45,16 +45,17 @@ export type DataTableColumn<T> = {
      * commits) — see `editor` for `select`/`switch`/`reference`. */
     editable?: boolean;
     /** The inline editor an `editable` column opens. Omitted: a plain field
-     * inferred from `type` (number/date/datetime/text), gated behind the
-     * double-click `editable` opens today. `"select"`/`"switch"`/`"reference"`
-     * instead render crisp's own `Select`/`Switch` as the cell's live content,
-     * ALWAYS interactive — no double-click gate, no separate edit/view mode —
-     * the same convention RecordsTable's `status`/`reference` pickers already
-     * use, since choosing an option or flipping a toggle IS the commit
-     * gesture; there is nothing for a second click to open. `select` reads
-     * `options`; `reference` reads `refOptions` and is search-enabled, the
-     * same searchable-`Select` shape as `RecordsTable`'s own
-     * `ReferenceCell`. */
+     * inferred from `type` (number/date/datetime/text). `"select"`/
+     * `"reference"` render crisp's own `Select` the same way — at rest the
+     * cell shows the column's `render`/formatted value like every other
+     * editable type (#453), and double-click (or Enter on the selected
+     * cell) opens the picker; choosing a value commits and closes it,
+     * Escape cancels. `select` reads `options`; `reference` reads
+     * `refOptions` and is search-enabled, the same searchable-`Select`
+     * shape as `RecordsTable`'s own `ReferenceCell`. `"switch"` is the one
+     * exception — ALWAYS its own live widget, no double-click gate, since
+     * flipping the toggle IS the commit gesture and there's no meaningfully
+     * different "rest" display for a boolean. */
     editor?: "select" | "switch" | "reference";
     /** Options for `editor: "select"` (value/label, an optional `color` a
      * caller's own `render` can read) — same shape as RecordsTable's

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@crisp-ui-kit/crisp",
-  "version": "0.52.0",
+  "version": "0.52.1",
   "description": "A lean React design system, measured pixel-for-pixel from Attio.",
   "license": "MIT",
   "type": "module",