@crisp-ui-kit/crisp 0.54.11 → 0.55.0

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

@@ -1071,14 +1071,48 @@ function DataTable({ columns: columnsProp, data, selectable = false, selectedIds
     const colAriaIndex = (i) => ariaColIndexBase + i + 1;
     const allSelected = rows.length > 0 && rows.every((r) => selected.has(r.id));
     const someSelected = selected.size > 0 && !allSelected;
+    // crisp/#782, ported from RecordsTable's own already-shipped logic: the
+    // header checkbox speaks for the rows you can SEE. Rebuilding the whole
+    // set from `rows` (the filtered/visible set) would silently drop any
+    // selection an active filter is hiding -- add/remove only the visible
+    // rows and leave the rest of `selected` alone.
     function toggleAll() {
-        setSelected(allSelected ? new Set() : new Set(rows.map((r) => r.id)));
+        const next = new Set(selected);
+        for (const r of rows) {
+            if (allSelected)
+                next.delete(r.id);
+            else
+                next.add(r.id);
+        }
+        setSelected(next);
     }
     function toggleRow(id) {
         const next = new Set(selected);
         next.has(id) ? next.delete(id) : next.add(id);
         setSelected(next);
     }
+    // crisp/#781: Shift+Click on a row checkbox selects the whole contiguous
+    // range from the last plain click (the anchor) to this row -- confirmed
+    // live, the mouse counterpart to #749's Shift+Arrow keyboard gesture,
+    // sharing the same `rowSelectAnchor` state and the same recompute-the-
+    // whole-span shape (not accumulate) so shift-clicking back toward the
+    // anchor shrinks the same way clicking away from it grows. A plain click
+    // both toggles normally AND re-anchors, so the NEXT Shift+Click extends
+    // from wherever the user last plain-clicked, matching Attio.
+    function toggleRowOrExtend(id, shiftKey) {
+        if (shiftKey && rowSelectAnchor != null) {
+            const anchorIdx = rows.findIndex((r) => r.id === rowSelectAnchor);
+            const idx = rows.findIndex((r) => r.id === id);
+            if (anchorIdx >= 0 && idx >= 0) {
+                const lo = Math.min(anchorIdx, idx);
+                const hi = Math.max(anchorIdx, idx);
+                setSelected(new Set(rows.slice(lo, hi + 1).map((r) => r.id)));
+                return;
+            }
+        }
+        setRowSelectAnchor(id);
+        toggleRow(id);
+    }
     function cycleSort(key) {
         // Clicking a header drives a single sort, as before. Multi-sort is supplied
         // by the caller through the `sort` prop (built in a sort popover).
@@ -1285,6 +1319,28 @@ function DataTable({ columns: columnsProp, data, selectable = false, selectedIds
             setSelected(new Set(rows.map((rw) => rw.id)));
             return;
         }
+        // crisp/#772: Cmd/Ctrl+ArrowUp jumps the selected cell to the first row,
+        // Cmd/Ctrl+ArrowDown to the last -- confirmed live (Attio's own help
+        // drawer documents "Jump to top"/"Jump to bottom" on these exact
+        // bindings). `!e.shiftKey` guards this from stealing Cmd+Shift+Arrow,
+        // a separate gesture (#773, extend-selection-to-first/last) that falls
+        // through to the Shift+Arrow branch below untouched. Placed before that
+        // branch for the same reason: without the guard, Cmd+Shift+Arrow would
+        // still reach it (that branch doesn't check metaKey/ctrlKey either),
+        // just not do the "jump" part -- the guard here is what keeps the two
+        // gestures from fighting over the same keys.
+        if ((e.metaKey || e.ctrlKey) &&
+            !e.shiftKey &&
+            (e.key === "ArrowUp" || e.key === "ArrowDown")) {
+            const r0 = rows.findIndex((row) => row.id === selCell.id);
+            if (r0 < 0)
+                return;
+            e.preventDefault();
+            const nr0 = e.key === "ArrowUp" ? 0 : rows.length - 1;
+            setSelCell({ id: rows[nr0].id, key: selCell.key });
+            clipboardProxyRef.current?.select();
+            return;
+        }
         // crisp/#749: Shift+ArrowUp/Down extends the row-checkbox selection --
         // confirmed live, distinct from Shift+Click's cell-range gesture above
         // (that one is `selAnchor`; this is `rowSelectAnchor`, and the two
@@ -1436,15 +1492,21 @@ function DataTable({ columns: columnsProp, data, selectable = false, selectedIds
         }
         setEditing(null);
     }
+    const reduceMotion = (0, core_1.usePrefersReducedMotion)();
     // crisp/#577 -- keyboard nav to an off-screen (virtualized-out) cell
-    // scrolls it into the rendered window, on both axes. Column scroll-into-
-    // view runs regardless of `height` -- the horizontal scroll container (and
-    // its own virtualization) exists either way; row scroll-into-view only
-    // makes sense once `height` gives the grid an internal vertical scroll
-    // position to move. `widths` is read only indirectly, through `colWidth`'s
-    // closure over it -- biome can't see that, but a column resize while a
-    // cell is selected genuinely needs to re-run this to keep it in view, so
-    // the dependency is real even though the lint rule can't prove it.
+    // scrolls it into the rendered window, on both axes. `renderItems`/
+    // `rowOffsets` are computed unconditionally (`height == null` just makes
+    // them a no-op elsewhere, see the comment above `renderItems`), so this
+    // runs on both axes regardless of `height` too (crisp/#780 -- it used to
+    // gate the vertical half on `height != null`, on the reasoning that only
+    // `height` gives the grid an internal scroll position to move; that's
+    // wrong when the grid's own container still scrolls without an explicit
+    // height, e.g. inside a shorter ancestor, matching `RecordsTable`'s own
+    // already-shipped #257 fix, which had no such gate). `widths` is read only
+    // indirectly, through `colWidth`'s closure over it -- biome can't see
+    // that, but a column resize while a cell is selected genuinely needs to
+    // re-run this to keep it in view, so the dependency is real even though
+    // the lint rule can't prove it.
     // biome-ignore lint/correctness/useExhaustiveDependencies: widths is read via colWidth's closure, see comment above
     React.useEffect(() => {
         if (!selCell)
@@ -1452,28 +1514,37 @@ function DataTable({ columns: columnsProp, data, selectable = false, selectedIds
         const el = scrollRef.current;
         if (!el)
             return;
-        // Sets `viewport` directly from the SAME value just assigned to the
-        // real DOM property, rather than waiting for a follow-up `scroll` event
-        // to round-trip through the `onScroll` handler above -- a real browser
-        // does fire one when `scrollTop`/`scrollLeft` is set programmatically,
-        // but relying on that would make this effect's own visible result (the
+        // `el.scrollTo` rather than a direct `el.scrollTop =`/`el.scrollLeft =`
+        // assignment (crisp/#780, matching RecordsTable's own #208/#257 rule):
+        // property assignment is ALWAYS instant, so it can never honour a
+        // consumer's own `scroll-behavior: smooth` on this container; `scrollTo`
+        // defers to that CSS when no `behavior` is given, and only forces
+        // `"auto"` under `prefers-reduced-motion`, which is the one case that
+        // must win even over a host page's own smooth-scroll opt-in.
+        const scrollTo = (opts) => el.scrollTo({
+            ...opts,
+            ...(reduceMotion ? { behavior: "auto" } : null),
+        });
+        // Sets `viewport` directly from the SAME value just passed to
+        // `scrollTo`, rather than waiting for a follow-up `scroll` event to
+        // round-trip through the `onScroll` handler above -- a real browser
+        // does fire one when the scroll position changes programmatically, but
+        // relying on that would make this effect's own visible result (the
         // newly-selected cell actually rendering) depend on a second render
         // triggered from outside React's own update, which is both slower and
         // one more thing that has to be true for this to work.
-        if (height != null) {
-            const itemIndex = rowIdToItemIndex.get(selCell.id);
-            if (itemIndex != null) {
-                const itemTop = rowOffsets[itemIndex];
-                const itemBottom = itemTop + renderItems[itemIndex].height;
-                if (itemTop < el.scrollTop) {
-                    el.scrollTop = itemTop;
-                    setViewport((v) => ({ ...v, top: itemTop }));
-                }
-                else if (itemBottom > el.scrollTop + el.clientHeight) {
-                    const newTop = itemBottom - el.clientHeight;
-                    el.scrollTop = newTop;
-                    setViewport((v) => ({ ...v, top: newTop }));
-                }
+        const itemIndex = rowIdToItemIndex.get(selCell.id);
+        if (itemIndex != null) {
+            const itemTop = rowOffsets[itemIndex];
+            const itemBottom = itemTop + renderItems[itemIndex].height;
+            if (itemTop < el.scrollTop) {
+                scrollTo({ top: itemTop });
+                setViewport((v) => ({ ...v, top: itemTop }));
+            }
+            else if (itemBottom > el.scrollTop + el.clientHeight) {
+                const newTop = itemBottom - el.clientHeight;
+                scrollTo({ top: newTop });
+                setViewport((v) => ({ ...v, top: newTop }));
             }
         }
         const ci = columns.findIndex((c) => c.key === selCell.key);
@@ -1483,24 +1554,24 @@ function DataTable({ columns: columnsProp, data, selectable = false, selectedIds
                 left += colWidth(columns[i]);
             const right = left + colWidth(columns[ci]);
             if (left < el.scrollLeft) {
-                el.scrollLeft = left;
+                scrollTo({ left });
                 setViewport((v) => ({ ...v, left }));
             }
             else if (right > el.scrollLeft + el.clientWidth) {
                 const newLeft = right - el.clientWidth;
-                el.scrollLeft = newLeft;
+                scrollTo({ left: newLeft });
                 setViewport((v) => ({ ...v, left: newLeft }));
             }
         }
     }, [
         selCell,
-        height,
         columns,
         widths,
         selectable,
         rowIdToItemIndex,
         rowOffsets,
         renderItems,
+        reduceMotion,
     ]);
     const totalCols = columns.length + (selectable ? 1 : 0) + (showGrip ? 1 : 0);
     const hasSummary = columns.some((c) => c.summary || c.calc);
@@ -1874,12 +1945,33 @@ function DataTable({ columns: columnsProp, data, selectable = false, selectedIds
                                                     }, onDragEnd: () => {
                                                         setDragRowId(null);
                                                         setDropRowId(null);
-                                                    }, children: (0, jsx_runtime_1.jsx)(lucide_react_1.GripVertical, { size: 16, strokeWidth: 1.75, "aria-hidden": "true" }) }) })), selectable && ((0, jsx_runtime_1.jsx)(table_1.TableCell, { className: "crisp-datatable-col-check", "aria-colindex": showGrip ? 2 : 1, ...stickyCol(-1), onClick: (e) => e.stopPropagation(), children: (0, jsx_runtime_1.jsx)("span", { className: "crisp-datatable-check", children: (0, jsx_runtime_1.jsx)(checkbox_1.Checkbox, { "aria-label": selectRowLabel(row), checked: selected.has(row.id), onChange: () => toggleRow(row.id) }) }) })), colSlots.map((slot) => {
+                                                    }, children: (0, jsx_runtime_1.jsx)(lucide_react_1.GripVertical, { size: 16, strokeWidth: 1.75, "aria-hidden": "true" }) }) })), selectable && ((0, jsx_runtime_1.jsx)(table_1.TableCell, { className: "crisp-datatable-col-check", "aria-colindex": showGrip ? 2 : 1, ...stickyCol(-1), onClick: (e) => e.stopPropagation(), children: (0, jsx_runtime_1.jsx)("span", { className: "crisp-datatable-check", children: (0, jsx_runtime_1.jsx)(checkbox_1.Checkbox, { "aria-label": selectRowLabel(row), checked: selected.has(row.id), 
+                                                        // preventDefault stops the native check/change
+                                                        // this click would otherwise also fire -- this
+                                                        // handler is the single source of truth so a
+                                                        // Shift+Click's range-select and a plain
+                                                        // click's toggle-and-re-anchor never race each
+                                                        // other (crisp/#781).
+                                                        onClick: (e) => {
+                                                            e.preventDefault();
+                                                            toggleRowOrExtend(row.id, e.shiftKey);
+                                                        }, onChange: () => { } }) }) })), colSlots.map((slot) => {
                                                 if (slot.type === "spacer") {
                                                     return ((0, jsx_runtime_1.jsx)("td", { role: "presentation", "aria-hidden": "true", style: { padding: 0, border: "none" } }, `__spacer_${slot.side}`));
                                                 }
                                                 const col = columns[slot.i];
                                                 const i = slot.i;
+                                                // crisp/#779, matching RecordsTable's own #231 fix:
+                                                // column 0 is the row's own identity (its name), not
+                                                // a value it holds -- a screen reader crossing the
+                                                // row should read "Google, Employees, 182,000", not a
+                                                // bare "182,000". Spread onto every TableCell this
+                                                // column can render as (every editor branch, not just
+                                                // the default one), since the row-identity semantics
+                                                // don't depend on which editor is open.
+                                                const rowHeaderProps = i === 0
+                                                    ? { as: "th", scope: "row" }
+                                                    : undefined;
                                                 const isEditing = editing?.id === row.id && editing?.key === col.key;
                                                 const value = cellValue(col, row);
                                                 const sticky = dataStickyCol(i);
@@ -1902,14 +1994,14 @@ function DataTable({ columns: columnsProp, data, selectable = false, selectedIds
                                                 // 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), "aria-colindex": colAriaIndex(i), ...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));
+                                                    return ((0, jsx_runtime_1.jsxs)(table_1.TableCell, { align: alignFor(col), "aria-colindex": colAriaIndex(i), ...sticky, ...rowHeaderProps, 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));
                                                 }
                                                 // crisp/#760: `editor: "rating"` is the same always-
                                                 // live shape as `switch` above -- clicking a star IS
                                                 // the commit gesture, confirmed live.
                                                 if (col.editable && col.editor === "rating") {
                                                     const n = typeof value === "number" ? value : Number(value);
-                                                    return ((0, jsx_runtime_1.jsxs)(table_1.TableCell, { align: alignFor(col), "aria-colindex": colAriaIndex(i), ...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)(RatingStars, { "aria-label": `Edit ${col.key}`, value: Number.isNaN(n) ? 0 : n, max: col.maxRating ?? 5, onChange: (next) => commitEdit(row.id, col.key, String(next)) }), 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));
+                                                    return ((0, jsx_runtime_1.jsxs)(table_1.TableCell, { align: alignFor(col), "aria-colindex": colAriaIndex(i), ...sticky, ...rowHeaderProps, 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)(RatingStars, { "aria-label": `Edit ${col.key}`, value: Number.isNaN(n) ? 0 : n, max: col.maxRating ?? 5, onChange: (next) => commitEdit(row.id, col.key, String(next)) }), 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));
                                                 }
                                                 // crisp/#761: `editor: "checkbox"` is a THIRD always-
                                                 // live boolean shape, distinct from `switch` --
@@ -1918,13 +2010,13 @@ function DataTable({ columns: columnsProp, data, selectable = false, selectedIds
                                                 // toggle. Reuses crisp's own `Checkbox` (already the
                                                 // measured 16px/r6/brand-fill grid checkbox).
                                                 if (col.editable && col.editor === "checkbox") {
-                                                    return ((0, jsx_runtime_1.jsxs)(table_1.TableCell, { align: alignFor(col), "aria-colindex": colAriaIndex(i), ...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)(checkbox_1.Checkbox, { "aria-label": `Edit ${col.key}`, checked: value === true || value === "true", disabled: isPending, onChange: (e) => commitEdit(row.id, col.key, String(e.currentTarget.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));
+                                                    return ((0, jsx_runtime_1.jsxs)(table_1.TableCell, { align: alignFor(col), "aria-colindex": colAriaIndex(i), ...sticky, ...rowHeaderProps, 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)(checkbox_1.Checkbox, { "aria-label": `Edit ${col.key}`, checked: value === true || value === "true", disabled: isPending, onChange: (e) => commitEdit(row.id, col.key, String(e.currentTarget.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" ||
                                                         col.editor === "actor")) {
-                                                    return ((0, jsx_runtime_1.jsxs)(table_1.TableCell, { align: alignFor(col), "aria-colindex": colAriaIndex(i), ...sticky, className: "crisp-datatable-td--picker", "data-pending": isPending ? "" : undefined, 
+                                                    return ((0, jsx_runtime_1.jsxs)(table_1.TableCell, { align: alignFor(col), "aria-colindex": colAriaIndex(i), ...sticky, ...rowHeaderProps, 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
@@ -1938,7 +2030,7 @@ function DataTable({ columns: columnsProp, data, selectable = false, selectedIds
                                                         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), "aria-colindex": colAriaIndex(i), ...sticky, onClick: (e) => e.stopPropagation(), children: [(0, jsx_runtime_1.jsx)("input", { className: "crisp-datatable-edit", 
+                                                    return ((0, jsx_runtime_1.jsxs)(table_1.TableCell, { align: alignFor(col), "aria-colindex": colAriaIndex(i), ...sticky, ...rowHeaderProps, onClick: (e) => e.stopPropagation(), children: [(0, jsx_runtime_1.jsx)("input", { className: "crisp-datatable-edit", 
                                                                 // biome-ignore lint/a11y/noAutofocus: focus the field the moment it opens
                                                                 autoFocus: true, ...editorFor(col), "data-editor": editorFor(col).type, disabled: isPending, defaultValue: col.type === "date"
                                                                     ? toDateInputValue(value)
@@ -1997,7 +2089,7 @@ function DataTable({ columns: columnsProp, data, selectable = false, selectedIds
                                                 const isExpanded = expandedCell?.id === row.id &&
                                                     expandedCell?.key === col.key;
                                                 const cellContent = ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [!isExpanded && rendered, errorHere && ((0, jsx_runtime_1.jsx)("span", { className: "crisp-datatable-edit-error", children: errorHere })), isExpanded && ((0, jsx_runtime_1.jsx)("div", { className: "crisp-datatable-cell-overlay", onClick: (e) => e.stopPropagation(), children: rendered }))] }));
-                                                return ((0, jsx_runtime_1.jsx)(contextmenu_1.ContextMenu, { asChild: true, variant: "dark", menuLabel: cellMenuLabel, items: cellMenuItems(row, col), children: (0, jsx_runtime_1.jsx)(table_1.TableCell, { align: alignFor(col), "aria-colindex": colAriaIndex(i), ...sticky, className: col.editable
+                                                return ((0, jsx_runtime_1.jsx)(contextmenu_1.ContextMenu, { asChild: true, variant: "dark", menuLabel: cellMenuLabel, items: cellMenuItems(row, col), children: (0, jsx_runtime_1.jsx)(table_1.TableCell, { align: alignFor(col), "aria-colindex": colAriaIndex(i), ...sticky, ...rowHeaderProps, className: col.editable
                                                             ? "crisp-datatable-editable"
                                                             : undefined, "data-selected": selCell?.id === row.id && selCell?.key === col.key
                                                             ? ""

package/dist/cjs/components/resizablepanel/resizablepanel.js

@@ -163,6 +163,15 @@ function ResizablePanel({ side = "left", size, defaultSize = 280, onSizeChange,
         const finalWidth = rect ? Math.round(rect.width) : width;
         commitSize(finalWidth);
     }
+    // crisp/#795: double-click resets to `defaultSize`, confirmed live on
+    // Attio's own record-page divider (dragged 722px -> 924px, double-click
+    // snapped it back to exactly 722px -- its own default/initial width, not
+    // some other fixed value). Reuses `commitSize`, the same commit path a
+    // drag already uses, so persistence (`storageKey`) picks up the reset the
+    // same way it picks up a drag -- no separate reset-specific write.
+    function onHandleDoubleClick() {
+        commitSize(defaultSize);
+    }
     const maxStyle = max == null ? undefined : typeof max === "number" ? `${max}px` : max;
     const panelSizeStyle = {
         width,
@@ -171,6 +180,6 @@ function ResizablePanel({ side = "left", size, defaultSize = 280, onSizeChange,
     };
     return ((0, jsx_runtime_1.jsxs)("div", { ref: containerRef, className: (0, resizablepanel_recipe_1.resizablepanelRecipe)({ className }), ...rest, children: [(0, jsx_runtime_1.jsx)("div", { className: "crisp-resizablepanel-spacer", style: floating ? { width: 0 } : { width, minWidth: min, maxWidth: maxStyle } }), (0, jsx_runtime_1.jsxs)("div", { ref: panelRef, className: "crisp-resizablepanel-panel", "data-side": side, "data-floating": floating ? "true" : "false", style: panelSizeStyle, children: [(0, jsx_runtime_1.jsx)("div", { className: "crisp-resizablepanel-inner", children: children }), (0, jsx_runtime_1.jsx)("div", { className: handleVariant === "column"
                             ? "crisp-resizablepanel-handle crisp-resizablepanel-handle--column"
-                            : "crisp-resizablepanel-handle", "data-side": side, "data-dragging": dragging ? "true" : undefined, "data-handle": "", onPointerDown: onHandlePointerDown, onPointerMove: onHandlePointerMove, onPointerUp: onHandlePointerUp, children: handleVariant === "column" && ((0, jsx_runtime_1.jsx)("span", { className: "crisp-resizablepanel-handle-inner", "aria-hidden": "true" })) })] })] }));
+                            : "crisp-resizablepanel-handle", "data-side": side, "data-dragging": dragging ? "true" : undefined, "data-handle": "", onPointerDown: onHandlePointerDown, onPointerMove: onHandlePointerMove, onPointerUp: onHandlePointerUp, onDoubleClick: onHandleDoubleClick, children: handleVariant === "column" && ((0, jsx_runtime_1.jsx)("span", { className: "crisp-resizablepanel-handle-inner", "aria-hidden": "true" })) })] })] }));
 }
 ResizablePanel.displayName = "ResizablePanel";

package/dist/cjs/components/table/table.js

@@ -64,7 +64,14 @@ exports.TableRow = React.forwardRef((props, ref) => (0, jsx_runtime_1.jsx)("tr",
 exports.TableRow.displayName = "TableRow";
 exports.TableHead = React.forwardRef(({ align, ...props }, ref) => (0, jsx_runtime_1.jsx)("th", { ref: ref, "data-align": align, ...props }));
 exports.TableHead.displayName = "TableHead";
-exports.TableCell = React.forwardRef(({ align, ...props }, ref) => (0, jsx_runtime_1.jsx)("td", { ref: ref, "data-align": align, ...props }));
+exports.TableCell = React.forwardRef(({ align, as, ...props }, ref) => {
+    // Cast to "td", same as RecordsTable's own dynamic-tag precedent --
+    // `props` (which may carry `scope`) would otherwise need to satisfy
+    // both <td> and <th>'s JSX attribute types at once for a bare union
+    // element name.
+    const Cell = (as ?? "td");
+    return (0, jsx_runtime_1.jsx)(Cell, { ref: ref, "data-align": align, ...props });
+});
 exports.TableCell.displayName = "TableCell";
 exports.TableCaption = React.forwardRef((props, ref) => (0, jsx_runtime_1.jsx)("caption", { ref: ref, ...props }));
 exports.TableCaption.displayName = "TableCaption";

package/dist/cjs/components/tabletoolbar/tabletoolbar.js

@@ -451,6 +451,12 @@ function TableToolbar({ columns, sortColumns: sortColumnsProp, filterColumns: fi
     React.useEffect(() => {
         setImportExportTarget(importExportRef?.current ?? null);
     }, [importExportRef]);
+    const rootRef = React.useRef(null);
+    const viewSettingsTriggerRef = React.useRef(null);
+    const viewSettingsContentRef = React.useRef(null);
+    const [viewSettingsPos, setViewSettingsPos] = React.useState({});
+    const importExportTriggerRef = React.useRef(null);
+    const [importExportPos, setImportExportPos] = React.useState({});
     const [openMenu, setOpenMenu] = React.useState(null);
     const [dragSort, setDragSort] = React.useState(null);
     const [filterQuery, setFilterQuery] = React.useState("");
@@ -478,6 +484,65 @@ function TableToolbar({ columns, sortColumns: sortColumnsProp, filterColumns: fi
     // built here -- hiding an attribute is a trailing control instead, see
     // the hide button below).
     const [addingAttribute, setAddingAttribute] = React.useState(false);
+    // crisp/#807: `viewSettingsRef`/`importExportRef` (#766) relocate the
+    // TRIGGER out of this toolbar's own row, but their POPOVERS stayed
+    // `position: absolute` inside the (now relocated) trigger's own
+    // `.crisp-tabletoolbar-toolgroup` -- correct chrome-wise (#772 already
+    // fixed that), but its stacking is trapped inside whatever DOM branch the
+    // consumer's own `viewSettingsRef` slot lives in. A consumer header
+    // sitting in an EARLIER sibling branch than the toolbar/grid below it
+    // (GRC's own layout) has that later branch simply paint over the popover
+    // regardless of its own z-index: 30, because z-index only orders siblings
+    // WITHIN the same stacking context, and the two branches aren't one.
+    // Fixed the same way `Menu`/`Select`/`Popover` already solve this: the
+    // popover content itself portals to `document.body` (`FloatingPortal`),
+    // positioned with `placeFloating` against the trigger's own rect (a real
+    // `position: fixed` box, anchored by viewport coordinates, escapes ANY
+    // ancestor's stacking context) -- not just relocated alongside the
+    // trigger. Wrapped in its own `tabletoolbarRecipe()` span (the same
+    // reason `ViewBarSlot` wraps the trigger) so every nested
+    // `.crisp-tabletoolbar-*` class inside the popover still resolves once
+    // portaled outside the toolbar's own root. Sort/Filter's own popovers
+    // are untouched -- they never relocate, so they were never trapped.
+    const placeViewSettingsMenu = () => {
+        const rect = viewSettingsTriggerRef.current?.getBoundingClientRect();
+        if (!rect)
+            return;
+        const { style } = (0, core_1.placeFloating)({
+            rect,
+            gap: 4,
+            flipBelow: 280,
+            anchor: viewSettingsTriggerRef.current,
+        });
+        setViewSettingsPos(style);
+    };
+    // biome-ignore lint/correctness/useExhaustiveDependencies: reposition each time it opens (and when its own screen changes, since the two screens differ in height)
+    React.useLayoutEffect(() => {
+        if (openMenu === "viewsettings")
+            placeViewSettingsMenu();
+    }, [openMenu, addingAttribute]);
+    React.useEffect(() => {
+        if (openMenu !== "viewsettings" || !viewSettingsContentRef.current)
+            return;
+        return (0, core_1.registerFloatingLayer)(viewSettingsContentRef.current);
+    }, [openMenu]);
+    const placeImportExportMenu = () => {
+        const rect = importExportTriggerRef.current?.getBoundingClientRect();
+        if (!rect)
+            return;
+        const { style } = (0, core_1.placeFloating)({
+            rect,
+            gap: 4,
+            flipBelow: 280,
+            anchor: importExportTriggerRef.current,
+        });
+        setImportExportPos(style);
+    };
+    // biome-ignore lint/correctness/useExhaustiveDependencies: reposition each time it opens
+    React.useLayoutEffect(() => {
+        if (openMenu === "importexport")
+            placeImportExportMenu();
+    }, [openMenu]);
     // close any open menu on outside click (anything not inside a menu or its
     // trigger) or Escape
     React.useEffect(() => {
@@ -628,6 +693,13 @@ function TableToolbar({ columns, sortColumns: sortColumnsProp, filterColumns: fi
         close: () => setOpenMenu(null),
         contentRef: importExportMenuRef,
     });
+    // crisp/#807: registers the (now-portaled) Import/Export menu on the
+    // shared floating-layer stack, the same reason `Menu` itself does.
+    React.useEffect(() => {
+        if (openMenu !== "importexport" || !importExportMenuRef.current)
+            return;
+        return (0, core_1.registerFloatingLayer)(importExportMenuRef.current);
+    }, [openMenu]);
     // #754: generalized from the Filter-only `filterFieldPicker` (#592) to
     // also drive Sort's own field picker and View settings' add-attribute
     // screen — all three offer the identical nested-drill-down construct on
@@ -700,7 +772,7 @@ function TableToolbar({ columns, sortColumns: sortColumnsProp, filterColumns: fi
         : sorts.length
             ? `${crispMessages["Sorted by"] ?? "Sorted by"} ${sortField}${sorts.length > 1 ? ` +${sorts.length - 1}` : ""}`
             : sortLabel;
-    return ((0, jsx_runtime_1.jsx)("div", { className: (0, tabletoolbar_recipe_1.tabletoolbarRecipe)({ className }), ...rest, children: (0, jsx_runtime_1.jsxs)("div", { className: "crisp-tabletoolbar-toolbar", "data-inline": inline ? "" : undefined, children: [showSort && ((0, jsx_runtime_1.jsxs)("span", { className: "crisp-tabletoolbar-toolgroup", children: [(0, jsx_runtime_1.jsxs)("button", { type: "button", className: `crisp-tabletoolbar-tool${sorts.length ? " crisp-tabletoolbar-tool--active" : " crisp-tabletoolbar-tool--dashed"}`, onClick: () => setOpenMenu(openMenu === "sort" ? null : "sort"), "aria-haspopup": "dialog", "aria-expanded": openMenu === "sort", "data-menu-trigger": true, children: [(0, jsx_runtime_1.jsx)(lucide_react_1.ArrowUpDown, { size: 14, strokeWidth: 1.75, "aria-hidden": "true" }), sortTriggerLabel || !sorts.length ? (sortedLabel) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("span", { className: "crisp-tabletoolbar-sorted-prefix", children: crispMessages["Sorted by"] ?? "Sorted by" }), " ", (0, jsx_runtime_1.jsx)("span", { className: "crisp-tabletoolbar-sorted-field", children: sortField }), sorts.length > 1 && ((0, jsx_runtime_1.jsxs)("span", { className: "crisp-tabletoolbar-sorted-count", children: [" ", "+", sorts.length - 1] }))] }))] }), openMenu === "sort" && ((0, jsx_runtime_1.jsxs)("div", { ref: sortListRef, className: "crisp-tabletoolbar-menu crisp-tabletoolbar-sortpop", role: "dialog", "aria-label": sortLabel, children: [sorts.length === 0 ? ((0, jsx_runtime_1.jsx)("div", { className: "crisp-tabletoolbar-sort-empty", children: noSortsLabel })) : (sorts.map((s, i) => ((0, jsx_runtime_1.jsxs)("div", { className: "crisp-tabletoolbar-sort-row", onDragOver: (e) => {
+    return ((0, jsx_runtime_1.jsx)("div", { ref: rootRef, className: (0, tabletoolbar_recipe_1.tabletoolbarRecipe)({ className }), ...rest, children: (0, jsx_runtime_1.jsxs)("div", { className: "crisp-tabletoolbar-toolbar", "data-inline": inline ? "" : undefined, children: [showSort && ((0, jsx_runtime_1.jsxs)("span", { className: "crisp-tabletoolbar-toolgroup", children: [(0, jsx_runtime_1.jsxs)("button", { type: "button", className: `crisp-tabletoolbar-tool${sorts.length ? " crisp-tabletoolbar-tool--active" : " crisp-tabletoolbar-tool--dashed"}`, onClick: () => setOpenMenu(openMenu === "sort" ? null : "sort"), "aria-haspopup": "dialog", "aria-expanded": openMenu === "sort", "data-menu-trigger": true, children: [(0, jsx_runtime_1.jsx)(lucide_react_1.ArrowUpDown, { size: 14, strokeWidth: 1.75, "aria-hidden": "true" }), sortTriggerLabel || !sorts.length ? (sortedLabel) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("span", { className: "crisp-tabletoolbar-sorted-prefix", children: crispMessages["Sorted by"] ?? "Sorted by" }), " ", (0, jsx_runtime_1.jsx)("span", { className: "crisp-tabletoolbar-sorted-field", children: sortField }), sorts.length > 1 && ((0, jsx_runtime_1.jsxs)("span", { className: "crisp-tabletoolbar-sorted-count", children: [" ", "+", sorts.length - 1] }))] }))] }), openMenu === "sort" && ((0, jsx_runtime_1.jsxs)("div", { ref: sortListRef, className: "crisp-tabletoolbar-menu crisp-tabletoolbar-sortpop", role: "dialog", "aria-label": sortLabel, children: [sorts.length === 0 ? ((0, jsx_runtime_1.jsx)("div", { className: "crisp-tabletoolbar-sort-empty", children: noSortsLabel })) : (sorts.map((s, i) => ((0, jsx_runtime_1.jsxs)("div", { className: "crisp-tabletoolbar-sort-row", onDragOver: (e) => {
                                         if (dragSort !== null)
                                             e.preventDefault();
                                     }, onDrop: () => {
@@ -836,7 +908,7 @@ function TableToolbar({ columns, sortColumns: sortColumnsProp, filterColumns: fi
                                                 }, children: label }, label))) })] })) : ((0, jsx_runtime_1.jsx)("input", { className: "crisp-tabletoolbar-menu-input", type: col?.type === "number" ? "number" : "text", placeholder: filterValuePlaceholder, "aria-label": `${col?.label} filter value`, 
                                     // biome-ignore lint/a11y/noAutofocus: focus the value field
                                     autoFocus: true, value: cond.value, onChange: (e) => patchFilter(cond.id, { value: e.target.value }) })) }))] }, cond.id));
-                }), showViewSettings && !viewSettingsTarget && ((0, jsx_runtime_1.jsx)("span", { className: "crisp-tabletoolbar-divider", "aria-hidden": "true" })), showViewSettings && ((0, jsx_runtime_1.jsx)(ViewBarSlot, { target: viewSettingsTarget, children: (0, jsx_runtime_1.jsxs)("span", { className: "crisp-tabletoolbar-toolgroup", children: [(0, jsx_runtime_1.jsxs)("button", { type: "button", className: "crisp-tabletoolbar-tool crisp-tabletoolbar-tool--raised", onClick: () => {
+                }), showViewSettings && !viewSettingsTarget && ((0, jsx_runtime_1.jsx)("span", { className: "crisp-tabletoolbar-divider", "aria-hidden": "true" })), showViewSettings && ((0, jsx_runtime_1.jsx)(ViewBarSlot, { target: viewSettingsTarget, children: (0, jsx_runtime_1.jsxs)("span", { className: "crisp-tabletoolbar-toolgroup", children: [(0, jsx_runtime_1.jsxs)("button", { ref: viewSettingsTriggerRef, type: "button", className: "crisp-tabletoolbar-tool crisp-tabletoolbar-tool--raised", onClick: () => {
                                     if (openMenu === "viewsettings") {
                                         setOpenMenu(null);
                                     }
@@ -846,33 +918,44 @@ function TableToolbar({ columns, sortColumns: sortColumnsProp, filterColumns: fi
                                         setFilterQuery("");
                                         setOpenMenu("viewsettings");
                                     }
-                                }, "aria-haspopup": "dialog", "aria-expanded": openMenu === "viewsettings", "data-menu-trigger": true, children: [(0, jsx_runtime_1.jsx)(lucide_react_1.SlidersHorizontal, { size: 14, strokeWidth: 1.75, "aria-hidden": "true" }), viewSettingsLabel, (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronDown, { size: 14, strokeWidth: 1.75, "aria-hidden": "true" })] }), openMenu === "viewsettings" &&
-                                (addingAttribute ? ((0, jsx_runtime_1.jsx)("div", { className: "crisp-tabletoolbar-menu", role: "dialog", "aria-label": addAttributeToViewLabel, children: nestedFieldPicker(hiddenAttrs, showAttr, searchAttributesPlaceholder, searchAttributesPlaceholder) })) : ((0, jsx_runtime_1.jsxs)("div", { className: "crisp-tabletoolbar-menu crisp-tabletoolbar-sortpop", role: "dialog", "aria-label": viewSettingsLabel, children: [shownAttrs.map((col, i) => ((0, jsx_runtime_1.jsxs)("div", { className: "crisp-tabletoolbar-sort-row", onDragOver: (e) => {
-                                                if (dragAttr !== null)
-                                                    e.preventDefault();
-                                            }, onDrop: () => {
-                                                if (dragAttr !== null)
-                                                    moveAttr(dragAttr, i);
-                                                setDragAttr(null);
-                                            }, children: [(0, jsx_runtime_1.jsx)("button", { type: "button", className: "crisp-tabletoolbar-sort-grip", "aria-label": reorderAttributeLabel, draggable: true, onDragStart: () => setDragAttr(i), onDragEnd: () => setDragAttr(null), children: (0, jsx_runtime_1.jsx)(lucide_react_1.GripVertical, { size: 15, strokeWidth: 1.75 }) }), (0, jsx_runtime_1.jsxs)("span", { className: "crisp-tabletoolbar-sort-optlabel crisp-tabletoolbar-sort-field", children: [col.icon ? ((0, jsx_runtime_1.jsx)(col.icon, { size: 15, strokeWidth: 1.75 })) : null, col.label] }), (0, jsx_runtime_1.jsx)("button", { type: "button", className: "crisp-tabletoolbar-sort-remove", onClick: () => hideAttr(col.key), "aria-label": hideAttributeLabel?.(col.label) ??
-                                                        `${crispMessages.Hide ?? "Hide"} ${col.label} ${crispMessages["from view"] ?? "from view"}`, children: (0, jsx_runtime_1.jsx)(lucide_react_1.X, { size: 15, strokeWidth: 1.75 }) })] }, col.key))), (0, jsx_runtime_1.jsx)("div", { className: "crisp-tabletoolbar-sort-addrow", children: (0, jsx_runtime_1.jsxs)("button", { type: "button", className: "crisp-tabletoolbar-sort-add", onClick: () => {
-                                                    setAddingAttribute(true);
-                                                    setFieldPickerPath([]);
-                                                    setFilterQuery("");
-                                                }, children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Plus, { size: 15, strokeWidth: 1.75 }), addAttributeToViewLabel] }) })] })))] }) })), (onImportCsv ||
+                                }, "aria-haspopup": "dialog", "aria-expanded": openMenu === "viewsettings", "data-menu-trigger": true, children: [(0, jsx_runtime_1.jsx)(lucide_react_1.SlidersHorizontal, { size: 14, strokeWidth: 1.75, "aria-hidden": "true" }), viewSettingsLabel, (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronDown, { size: 14, strokeWidth: 1.75, "aria-hidden": "true" })] }), openMenu === "viewsettings" && ((0, jsx_runtime_1.jsx)(core_1.FloatingPortal, { sourceRef: rootRef, children: (0, jsx_runtime_1.jsx)("span", { className: (0, tabletoolbar_recipe_1.tabletoolbarRecipe)(), children: addingAttribute ? ((0, jsx_runtime_1.jsx)("div", { ref: viewSettingsContentRef, className: "crisp-tabletoolbar-menu", role: "dialog", "aria-label": addAttributeToViewLabel, style: {
+                                            position: "fixed",
+                                            zIndex: 70,
+                                            ...viewSettingsPos,
+                                        }, children: nestedFieldPicker(hiddenAttrs, showAttr, searchAttributesPlaceholder, searchAttributesPlaceholder) })) : ((0, jsx_runtime_1.jsxs)("div", { ref: viewSettingsContentRef, className: "crisp-tabletoolbar-menu crisp-tabletoolbar-sortpop", role: "dialog", "aria-label": viewSettingsLabel, style: {
+                                            position: "fixed",
+                                            zIndex: 70,
+                                            ...viewSettingsPos,
+                                        }, children: [shownAttrs.map((col, i) => ((0, jsx_runtime_1.jsxs)("div", { className: "crisp-tabletoolbar-sort-row", onDragOver: (e) => {
+                                                    if (dragAttr !== null)
+                                                        e.preventDefault();
+                                                }, onDrop: () => {
+                                                    if (dragAttr !== null)
+                                                        moveAttr(dragAttr, i);
+                                                    setDragAttr(null);
+                                                }, children: [(0, jsx_runtime_1.jsx)("button", { type: "button", className: "crisp-tabletoolbar-sort-grip", "aria-label": reorderAttributeLabel, draggable: true, onDragStart: () => setDragAttr(i), onDragEnd: () => setDragAttr(null), children: (0, jsx_runtime_1.jsx)(lucide_react_1.GripVertical, { size: 15, strokeWidth: 1.75 }) }), (0, jsx_runtime_1.jsxs)("span", { className: "crisp-tabletoolbar-sort-optlabel crisp-tabletoolbar-sort-field", children: [col.icon ? ((0, jsx_runtime_1.jsx)(col.icon, { size: 15, strokeWidth: 1.75 })) : null, col.label] }), (0, jsx_runtime_1.jsx)("button", { type: "button", className: "crisp-tabletoolbar-sort-remove", onClick: () => hideAttr(col.key), "aria-label": hideAttributeLabel?.(col.label) ??
+                                                            `${crispMessages.Hide ?? "Hide"} ${col.label} ${crispMessages["from view"] ?? "from view"}`, children: (0, jsx_runtime_1.jsx)(lucide_react_1.X, { size: 15, strokeWidth: 1.75 }) })] }, col.key))), (0, jsx_runtime_1.jsx)("div", { className: "crisp-tabletoolbar-sort-addrow", children: (0, jsx_runtime_1.jsxs)("button", { type: "button", className: "crisp-tabletoolbar-sort-add", onClick: () => {
+                                                        setAddingAttribute(true);
+                                                        setFieldPickerPath([]);
+                                                        setFilterQuery("");
+                                                    }, children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Plus, { size: 15, strokeWidth: 1.75 }), addAttributeToViewLabel] }) })] })) }) }))] }) })), (onImportCsv ||
                     onExportCsv ||
                     onExportExcel ||
-                    importExportHelpHref) && ((0, jsx_runtime_1.jsx)(ViewBarSlot, { target: importExportTarget, children: (0, jsx_runtime_1.jsxs)("span", { className: "crisp-tabletoolbar-toolgroup", children: [(0, jsx_runtime_1.jsxs)("button", { type: "button", className: "crisp-tabletoolbar-tool crisp-tabletoolbar-tool--raised", onClick: () => setOpenMenu(openMenu === "importexport" ? null : "importexport"), "aria-haspopup": "menu", "aria-expanded": openMenu === "importexport", "data-menu-trigger": true, children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Upload, { size: 14, strokeWidth: 1.75, "aria-hidden": "true" }), importExportLabel, (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronDown, { size: 14, strokeWidth: 1.75, "aria-hidden": "true" })] }), openMenu === "importexport" && ((0, jsx_runtime_1.jsxs)("div", { ref: importExportMenuRef, className: "crisp-tabletoolbar-menu", role: "menu", "aria-label": importExportLabel, onKeyDown: onImportExportKeyDown, children: [onImportCsv && ((0, jsx_runtime_1.jsxs)("button", { type: "button", role: "menuitem", className: "crisp-tabletoolbar-menu-item", onClick: () => {
-                                            onImportCsv();
-                                            setOpenMenu(null);
-                                        }, children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Upload, { size: 15, strokeWidth: 1.75 }), importCsvLabel] })), onImportCsv && (onExportCsv || onExportExcel) && ((0, jsx_runtime_1.jsx)("hr", { className: "crisp-tabletoolbar-menu-sep" })), onExportCsv && ((0, jsx_runtime_1.jsxs)("button", { type: "button", role: "menuitem", className: "crisp-tabletoolbar-menu-item", onClick: () => {
-                                            onExportCsv();
-                                            setOpenMenu(null);
-                                        }, children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Download, { size: 15, strokeWidth: 1.75 }), exportCsvLabel] })), onExportExcel && ((0, jsx_runtime_1.jsxs)("button", { type: "button", role: "menuitem", className: "crisp-tabletoolbar-menu-item", onClick: () => {
-                                            onExportExcel();
-                                            setOpenMenu(null);
-                                        }, children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Download, { size: 15, strokeWidth: 1.75 }), exportExcelLabel] })), importExportHelpHref &&
-                                        (onImportCsv || onExportCsv || onExportExcel) && ((0, jsx_runtime_1.jsx)("hr", { className: "crisp-tabletoolbar-menu-sep" })), importExportHelpHref && ((0, jsx_runtime_1.jsxs)("a", { className: "crisp-tabletoolbar-menu-item", role: "menuitem", href: importExportHelpHref, target: "_blank", rel: "noreferrer", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.CircleHelp, { size: 15, strokeWidth: 1.75 }), learnImportExportLabel] }))] }))] }) })), (0, jsx_runtime_1.jsx)("span", { className: "crisp-tabletoolbar-spacer" }), count != null && ((0, jsx_runtime_1.jsx)("span", { className: "crisp-tabletoolbar-count", children: count })), children] }) }));
+                    importExportHelpHref) && ((0, jsx_runtime_1.jsx)(ViewBarSlot, { target: importExportTarget, children: (0, jsx_runtime_1.jsxs)("span", { className: "crisp-tabletoolbar-toolgroup", children: [(0, jsx_runtime_1.jsxs)("button", { ref: importExportTriggerRef, type: "button", className: "crisp-tabletoolbar-tool crisp-tabletoolbar-tool--raised", onClick: () => setOpenMenu(openMenu === "importexport" ? null : "importexport"), "aria-haspopup": "menu", "aria-expanded": openMenu === "importexport", "data-menu-trigger": true, children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Upload, { size: 14, strokeWidth: 1.75, "aria-hidden": "true" }), importExportLabel, (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronDown, { size: 14, strokeWidth: 1.75, "aria-hidden": "true" })] }), openMenu === "importexport" && ((0, jsx_runtime_1.jsx)(core_1.FloatingPortal, { sourceRef: rootRef, children: (0, jsx_runtime_1.jsx)("span", { className: (0, tabletoolbar_recipe_1.tabletoolbarRecipe)(), children: (0, jsx_runtime_1.jsxs)("div", { ref: importExportMenuRef, className: "crisp-tabletoolbar-menu", role: "menu", "aria-label": importExportLabel, onKeyDown: onImportExportKeyDown, style: {
+                                            position: "fixed",
+                                            zIndex: 70,
+                                            ...importExportPos,
+                                        }, children: [onImportCsv && ((0, jsx_runtime_1.jsxs)("button", { type: "button", role: "menuitem", className: "crisp-tabletoolbar-menu-item", onClick: () => {
+                                                    onImportCsv();
+                                                    setOpenMenu(null);
+                                                }, children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Upload, { size: 15, strokeWidth: 1.75 }), importCsvLabel] })), onImportCsv && (onExportCsv || onExportExcel) && ((0, jsx_runtime_1.jsx)("hr", { className: "crisp-tabletoolbar-menu-sep" })), onExportCsv && ((0, jsx_runtime_1.jsxs)("button", { type: "button", role: "menuitem", className: "crisp-tabletoolbar-menu-item", onClick: () => {
+                                                    onExportCsv();
+                                                    setOpenMenu(null);
+                                                }, children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Download, { size: 15, strokeWidth: 1.75 }), exportCsvLabel] })), onExportExcel && ((0, jsx_runtime_1.jsxs)("button", { type: "button", role: "menuitem", className: "crisp-tabletoolbar-menu-item", onClick: () => {
+                                                    onExportExcel();
+                                                    setOpenMenu(null);
+                                                }, children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Download, { size: 15, strokeWidth: 1.75 }), exportExcelLabel] })), importExportHelpHref &&
+                                                (onImportCsv || onExportCsv || onExportExcel) && ((0, jsx_runtime_1.jsx)("hr", { className: "crisp-tabletoolbar-menu-sep" })), importExportHelpHref && ((0, jsx_runtime_1.jsxs)("a", { className: "crisp-tabletoolbar-menu-item", role: "menuitem", href: importExportHelpHref, target: "_blank", rel: "noreferrer", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.CircleHelp, { size: 15, strokeWidth: 1.75 }), learnImportExportLabel] }))] }) }) }))] }) })), (0, jsx_runtime_1.jsx)("span", { className: "crisp-tabletoolbar-spacer" }), count != null && ((0, jsx_runtime_1.jsx)("span", { className: "crisp-tabletoolbar-count", children: count })), children] }) }));
 }
 /**
  * The Sort/Filter chip's own chrome (`.crisp-tabletoolbar-tool`), standalone

package/dist/cjs/index.js

@@ -102,7 +102,6 @@ __exportStar(require("./product/objectsettings"), exports);
 __exportStar(require("./product/onboarding"), exports);
 __exportStar(require("./product/recordpage"), exports);
 __exportStar(require("./product/recordpanel"), exports);
-__exportStar(require("./product/recordstable"), exports);
 __exportStar(require("./product/richtext"), exports);
 __exportStar(require("./product/savedviews"), exports);
 __exportStar(require("./product/settingssection"), exports);
@@ -110,7 +109,6 @@ __exportStar(require("./product/settingsshell"), exports);
 __exportStar(require("./product/sidebar"), exports);
 __exportStar(require("./product/statlist"), exports);
 __exportStar(require("./product/tasklist"), exports);
-__exportStar(require("./product/taskstable"), exports);
 __exportStar(require("./product/themepicker"), exports);
 __exportStar(require("./product/trialbanner"), exports);
 __exportStar(require("./product/viewtoggle"), exports);

package/dist/cjs/product/recordpage/index.js

@@ -1,6 +1,11 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.recordpageRecipe = exports.recordPageLabels = exports.RecordPage = exports.RecordDetails = void 0;
+exports.recordpageRecipe = exports.recordPageLabels = exports.RecordPage = exports.RecordDetails = exports.useEditableField = exports.editableInputType = exports.tagTone = void 0;
+var column_1 = require("./column");
+Object.defineProperty(exports, "tagTone", { enumerable: true, get: function () { return column_1.tagTone; } });
+var editable_field_1 = require("./editable-field");
+Object.defineProperty(exports, "editableInputType", { enumerable: true, get: function () { return editable_field_1.editableInputType; } });
+Object.defineProperty(exports, "useEditableField", { enumerable: true, get: function () { return editable_field_1.useEditableField; } });
 var recordpage_1 = require("./recordpage");
 Object.defineProperty(exports, "RecordDetails", { enumerable: true, get: function () { return recordpage_1.RecordDetails; } });
 Object.defineProperty(exports, "RecordPage", { enumerable: true, get: function () { return recordpage_1.RecordPage; } });