@crispy-seed/data-table 0.13.0 → 0.14.1

package/dist/index.js

@@ -1649,6 +1649,11 @@ const ROOT_MARGIN = "160px";
     const elementRef = useRef(null);
     const [scrolledStart, setScrolledStart] = useState(false);
     const [scrolledEnd, setScrolledEnd] = useState(false);
+    // The scroll container's own content-box width (0 until first measured). The
+    // styled layer reads it to cap how much of a narrow viewport the sticky-left
+    // pinned group may occupy (`useEffectiveColumns`) -- without a cap, a pinned
+    // group wider than the container covers every scrolling column for good.
+    const [viewportWidth, setViewportWidth] = useState(0);
     const [viewport, setViewport] = useState({
         scrollTop: 0,
         viewportHeight: 0
@@ -1669,6 +1674,7 @@ const ROOT_MARGIN = "160px";
                     viewportHeight
                 });
         }
+        setViewportWidth(element.clientWidth);
         setScrolledStart(element.scrollLeft > 0);
         // A 1px slop: sub-pixel layout can leave `scrollLeft + clientWidth` a fraction
         // short of `scrollWidth` even when fully scrolled, which would otherwise leave
@@ -1678,16 +1684,16 @@ const ROOT_MARGIN = "160px";
         virtualized,
         rowHeight
     ]);
-    // The container can resize without scrolling (window resize, a bounded parent
-    // changing height) -- the viewport height feeds the window, so re-measure then too.
+    // The container can resize without scrolling (window resize, rotating a phone, a
+    // bounded parent changing height) -- the viewport height feeds the virtual window
+    // and the width feeds the pinned-group cap, so re-measure then too.
     useEffect(()=>{
         const element = elementRef.current;
-        if (!virtualized || !element || typeof ResizeObserver === "undefined") return;
+        if (!element || typeof ResizeObserver === "undefined") return;
         const observer = new ResizeObserver(()=>remeasure());
         observer.observe(element);
         return ()=>observer.disconnect();
     }, [
-        virtualized,
         remeasure
     ]);
     const scrollAreaRef = useCallback((node)=>{
@@ -1703,6 +1709,7 @@ const ROOT_MARGIN = "160px";
         scrollAreaRef,
         scrolledStart,
         scrolledEnd,
+        viewportWidth,
         onScroll,
         remeasure,
         /** Row-virtualization state; `enabled: false` (the default) means render every row. */ virtual: {
@@ -3232,19 +3239,20 @@ function StatusCell({ value }) {
  *  same "literal color as a computed prop" call `RatingCell`'s star fill already
  *  makes. Shared by `ChipCell` (Feature A, single value) and `ChipListCell`/
  *  editors.tsx's `ChipListEditor` (Feature B, multi value) so all three chip
- *  renderings stay byte-identical. */ function SwatchChip({ value, className, children }) {
+ *  renderings stay byte-identical. */ function SwatchChip({ value, label, color, className, children }) {
     return /*#__PURE__*/ jsxs("span", {
         className: className,
         style: {
-            backgroundColor: swatchColorFor(value),
-            color: swatchInkFor(value)
+            backgroundColor: color ?? swatchColorFor(value),
+            color: color ? CHIP_CUSTOM_COLOR_INK : swatchInkFor(value)
         },
         children: [
-            value,
+            label ?? value,
             children
         ]
     });
 }
+const CHIP_CUSTOM_COLOR_INK = "#1f2937";
 /** `type: "chip"` (Feature A, #9) -- a single value rendered as one colored chip,
  *  the color derived deterministically from the value string (`swatchColorFor`):
  *  same value, same color, every render, every column. For a column like provider/
@@ -3257,6 +3265,14 @@ function StatusCell({ value }) {
         className: className
     });
 }
+/** The `label`/`color` a `chipOptions` entry gives `tag`, spread onto its chip so a
+ *  tag looks identical in the closed cell and in the editor's option list. */ function optionProps(chipOptions, tag) {
+    const option = chipOptions?.find((entry)=>entry.value === tag);
+    return option ? {
+        label: option.label,
+        color: option.color
+    } : {};
+}
 // Feature B rework (#8) -- the chip-list DISPLAY row's own gap, mirrored from the
 // qvism recipe's `chipList` slot (`packages/qvism-preset/src/recipes/data-table.ts`'s
 // `CHIP_GAP`, measured live off Attio at 3px between chips). Kept as a literal here
@@ -3289,7 +3305,7 @@ const CHIP_LIST_GAP_PX = 3;
  *  times, not just while a `ResizeObserver` fires, because widening the column back
  *  out needs to know the width of chips currently hidden behind "+N" to decide
  *  whether they now fit again.
- */ function ChipListCell({ value, className, chipClassName, overflowClassName }) {
+ */ function ChipListCell({ value, className, chipClassName, overflowClassName, chipOptions }) {
     const tags = Array.isArray(value) ? value.filter((tag)=>!!tag) : [];
     const containerRef = React.useRef(null);
     const measureRef = React.useRef(null);
@@ -3338,6 +3354,7 @@ const CHIP_LIST_GAP_PX = 3;
         children: [
             tags.slice(0, clampedVisible).map((tag)=>/*#__PURE__*/ jsx(SwatchChip, {
                     value: tag,
+                    ...optionProps(chipOptions, tag),
                     className: chipClassName
                 }, tag)),
             overflowCount > 0 && /*#__PURE__*/ jsxs("span", {
@@ -3358,6 +3375,7 @@ const CHIP_LIST_GAP_PX = 3;
                 },
                 children: tags.map((tag)=>/*#__PURE__*/ jsx(SwatchChip, {
                         value: tag,
+                        ...optionProps(chipOptions, tag),
                         className: chipClassName
                     }, tag))
             }),
@@ -3628,6 +3646,13 @@ function RatingCell({ value, maxRating = 5 }) {
     });
 }
 
+/** Share of the scroll container's width the sticky-left pinned group may occupy
+ *  before FURTHER pinned columns stop sticking and scroll like any other column. A
+ *  pinned group at or past the container's width pins every pixel of it: the
+ *  scrolling columns slide in underneath the sticky cells and can never be seen (a
+ *  375px phone with Serial + one more pinned column showed nothing else, ever). The
+ *  FIRST pinned column always sticks regardless -- the entity/name column staying
+ *  frozen is the whole point of pinning. */ const MAX_PINNED_VIEWPORT_SHARE = 0.6;
 /** Fallback width (px) used to compute a pinned column's cumulative sticky offset when
  *  it has no explicit `width` and hasn't been drag-resized -- pinning needs a STATIC
  *  number to put in an inline `insetInlineStart`, and `table-layout: fixed` only
@@ -3647,7 +3672,7 @@ function RatingCell({ value, maxRating = 5 }) {
  * one and a header row built from the other drift out of sync under `table-layout:
  * fixed`'s own column-to-cell matching.
  */ function useEffectiveColumns(columns, options) {
-    const { visibleColumnOrder, getColumnLabel, getColumnWidth, pinnedColumnKeys } = useDataTableContext();
+    const { visibleColumnOrder, getColumnLabel, getColumnWidth, pinnedColumnKeys, viewportWidth } = useDataTableContext();
     const { selectable, stickyFirst } = options;
     return React.useMemo(()=>{
         const byKey = new Map(columns.map((column)=>[
@@ -3673,11 +3698,14 @@ function RatingCell({ value, maxRating = 5 }) {
             const bPinned = pinnedSet.has(b) ? 0 : 1;
             return aPinned - bPinned;
         });
+        // 0 = not measured yet (first paint / jsdom) -- no cap rather than a guess.
+        const pinBudget = viewportWidth ? viewportWidth * MAX_PINNED_VIEWPORT_SHARE : Number.POSITIVE_INFINITY;
         let cursor = selectable ? 40 : 0;
         let pinnedCount = 0;
+        let budgetSpent = false;
         const entries = ordered.map((key)=>byKey.get(key)).filter((column)=>Boolean(column)).map((column)=>{
             const rawWidth = getColumnWidth(column.key) ?? column.width;
-            const pinned = pinnedSet.has(column.key);
+            const inPinnedSet = pinnedSet.has(column.key);
             // Fix (0.10.4, screenshot-confirmed pinned-column overlay): a pinned column
             // with no explicit/resized width used to keep `width` as `undefined` here,
             // which `DataTableColGroup` (DataTable.tsx) renders as an AUTO `<col>` --
@@ -3697,7 +3725,15 @@ function RatingCell({ value, maxRating = 5 }) {
             // without its own width now always renders at exactly
             // `DEFAULT_PINNED_COLUMN_WIDTH`, matching what every other pinned column's
             // offset already assumed it would be.
-            const width = pinned && rawWidth === undefined ? DEFAULT_PINNED_COLUMN_WIDTH : rawWidth;
+            const width = inPinnedSet && rawWidth === undefined ? DEFAULT_PINNED_COLUMN_WIDTH : rawWidth;
+            // Sticks only while the group still fits the pin budget (see
+            // MAX_PINNED_VIEWPORT_SHARE); the first pinned column always sticks.
+            // Once one pinned column overflows, every later one scrolls too -- a narrower
+            // late column must not stick past a gap.
+            if (inPinnedSet && pinnedCount > 0 && cursor + (width ?? DEFAULT_PINNED_COLUMN_WIDTH) > pinBudget) {
+                budgetSpent = true;
+            }
+            const pinned = inPinnedSet && !budgetSpent;
             const pinOffset = pinned ? cursor : 0;
             if (pinned) {
                 cursor += width ?? DEFAULT_PINNED_COLUMN_WIDTH;
@@ -3736,7 +3772,8 @@ function RatingCell({ value, maxRating = 5 }) {
         getColumnWidth,
         pinnedColumnKeys,
         selectable,
-        stickyFirst
+        stickyFirst,
+        viewportWidth
     ]);
 }
 /** The 40px selection column's own sticky-left state -- `stickyFirst` (the table-wide
@@ -4120,7 +4157,45 @@ const TextFieldTextarea = /*#__PURE__*/ forwardRef(({ className, autoresize = tr
 });
 TextFieldTextarea.displayName = "TextFieldTextarea";
 
-__insertCSS(".seed-data-table__root{box-sizing:border-box;position:relative;display:flex;flex-direction:column;width:100%;border-width:1px;border-style:solid;font-family:Inter,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif}.seed-data-table__table{width:100%;border-collapse:separate;border-spacing:0;table-layout:fixed}.seed-data-table__headerCell{box-sizing:border-box;position:sticky;top:0;z-index:2;vertical-align:middle;text-align:start;padding:0;height:var(--seed-dimension-x10);background-color:var(--seed-color-bg-layer-default);border-top:1px solid var(--seed-color-stroke-neutral-muted);border-bottom:1px solid var(--seed-color-stroke-neutral-muted);border-inline-end:1px solid var(--seed-color-stroke-neutral-muted);border-inline-start:none;color:var(--seed-color-fg-neutral);font-size:var(--seed-font-size-t4);line-height:var(--seed-line-height-t4);font-weight:var(--seed-font-weight-medium);letter-spacing:-.14px}.seed-data-table__headerCell:last-child{border-inline-end:none}.seed-data-table__headerCell[data-sortable]{cursor:pointer;user-select:none}.seed-data-table__headerCell [data-chevron]{opacity:0;transition:opacity .12s}.seed-data-table__headerCell[data-sortable]:hover [data-chevron]{opacity:.6}.seed-data-table__headerCell[data-sorted] [data-chevron]{opacity:1;color:var(--seed-color-fg-neutral)}.seed-data-table__headerCell:hover [data-column-menu]{opacity:1}.seed-data-table__headerCell [data-column-menu]:focus-visible,.seed-data-table__headerCell [data-column-menu][data-open]{opacity:1}.seed-data-table__headerCell[data-dragging]{opacity:.5}.seed-data-table__headerCell[data-sticky]{position:sticky;z-index:3;background-color:var(--seed-color-bg-layer-default)}.seed-data-table__headerCell{outline:var(--seed-dimension-x0_5) solid transparent;outline-offset:calc(var(--seed-dimension-x0_5) * -1)}.seed-data-table__headerCell:is(:focus-visible,[data-focus-visible]){outline:var(--seed-dimension-x0_5) solid var(--seed-color-stroke-focus-ring);outline-offset:calc(var(--seed-dimension-x0_5) * -1)}.seed-data-table__headerCell .seed-data-table-resize-handle{position:absolute;top:0;inset-inline-end:calc(7px / -2);width:7px;height:100%;z-index:4;display:flex;align-items:center;justify-content:center;cursor:col-resize;touch-action:none}.seed-data-table__headerCell .seed-data-table-resize-handle-inner{width:3px;height:100%;border-radius:3px;background-color:#0298d9;opacity:0;transition:opacity .1s}.seed-data-table__headerCell .seed-data-table-resize-handle:hover .seed-data-table-resize-handle-inner,.seed-data-table__headerCell .seed-data-table-resize-handle[data-resizing] .seed-data-table-resize-handle-inner{opacity:1}.seed-data-table__headerCellInner{box-sizing:border-box;display:flex;align-items:center;width:100%;height:100%;min-width:0;gap:var(--seed-dimension-x1_5);padding-inline:var(--seed-dimension-x3)}.seed-data-table__headerCellLabel{min-width:0;flex:1 1 0%;overflow:clip;text-overflow:ellipsis;white-space:nowrap}.seed-data-table__headerCellIcon{flex-shrink:0;margin-inline-start:auto;display:inline-flex;align-items:center;justify-content:center;width:var(--seed-dimension-x4);height:var(--seed-dimension-x4);color:var(--seed-color-fg-neutral-subtle);border:none;background:0 0;padding:0;font:inherit;cursor:pointer}.seed-data-table__headerCellIcon[data-active]{color:var(--seed-color-fg-neutral)}.seed-data-table__headerCellIcon[data-column-menu]{opacity:0;transition:opacity .12s}.seed-data-table__row{position:relative;background-color:var(--seed-color-bg-layer-default);--seed-data-table-row-bg:var(--seed-color-bg-layer-default)}.seed-data-table__row[data-clickable]{cursor:pointer}.seed-data-table__row:is([aria-selected=true],[data-selected]){background-color:color-mix(in srgb,#0298d9 10%,var(--seed-color-bg-layer-default));--seed-data-table-row-bg:color-mix(in srgb, #0298d9 10%, var(--seed-color-bg-layer-default))}.seed-data-table__row:is([aria-selected=true],[data-selected]):is(:hover,[data-hover]){background-color:color-mix(in srgb,var(--seed-color-fg-neutral) 3%,color-mix(in srgb,#0298d9 10%,var(--seed-color-bg-layer-default)));--seed-data-table-row-bg:color-mix(in srgb, var(--seed-color-fg-neutral) 3%, color-mix(in srgb, #0298d9 10%, var(--seed-color-bg-layer-default)))}.seed-data-table__cell{box-sizing:border-box;position:relative;vertical-align:middle;text-align:start;height:var(--seed-dimension-x9);border-bottom:1px solid var(--seed-color-stroke-neutral-muted);border-inline-end:1px solid var(--seed-color-stroke-neutral-muted);border-top:none;border-inline-start:none;padding-block:0;padding-inline:var(--seed-dimension-x3);color:var(--seed-color-fg-neutral);font-size:var(--seed-font-size-t4);line-height:var(--seed-line-height-t4);font-weight:var(--seed-font-weight-regular);letter-spacing:-.14px;overflow:clip;text-overflow:ellipsis;white-space:nowrap}.seed-data-table__cell:not([data-editable]){user-select:none}.seed-data-table__cell:last-child{border-inline-end:none}tbody tr:last-child .seed-data-table__cell{border-bottom:none}.seed-data-table__cell[data-numeric]{text-align:end;font-variant-numeric:tabular-nums}.seed-data-table__cell[data-sticky]{position:sticky;z-index:1;background-color:var(--seed-data-table-row-bg)}.seed-data-table__cell[data-overlay-open]{overflow:visible;z-index:20}.seed-data-table__cell[data-editable]{cursor:default}.seed-data-table__cell .seed-data-table-edit-picker{display:flex;align-items:center;gap:var(--seed-dimension-x1_5);min-width:0}.seed-data-table__cell .seed-data-table-edit-pending{flex-shrink:0;color:var(--seed-color-fg-neutral-subtle);animation:rotate .6s linear infinite}.seed-data-table__cell .seed-data-table-edit-error{position:absolute;top:100%;inset-inline-start:var(--seed-dimension-x3);inset-inline-end:var(--seed-dimension-x3);z-index:2;padding-top:2px;font-size:12px;line-height:1.3;color:var(--seed-color-fg-critical);overflow:clip;text-overflow:ellipsis;white-space:nowrap}.seed-data-table__entity{display:flex;align-items:center;min-width:0;gap:var(--seed-dimension-x1_5)}.seed-data-table__entityName{min-width:0;font-weight:var(--seed-font-weight-medium);overflow:clip;text-overflow:ellipsis;white-space:nowrap}.seed-data-table__entityName[data-clickable]{cursor:pointer;border:none;background:0 0;padding:0;margin:0;font-family:inherit;font-size:inherit;line-height:inherit;color:inherit;text-align:start}.seed-data-table__entityName[data-clickable]:is(:hover,[data-hover]){text-decoration:underline}.seed-data-table__tagList{display:flex;align-items:center;gap:var(--seed-dimension-x1_5);overflow:hidden;min-width:0}.seed-data-table__entityActions{display:flex;align-items:center;gap:6px;margin-inline-start:auto;flex-shrink:0;opacity:0;transition:opacity .15s}tr:hover .seed-data-table__entityActions{opacity:1}.seed-data-table__entityActions:focus-within{opacity:1}.seed-data-table__entityAction{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;margin:0;padding:2px;border:none;border-radius:6px;background:0 0;font-family:inherit;color:color-mix(in srgb,var(--seed-color-fg-neutral) 55%,transparent);cursor:pointer;flex-shrink:0;transition:background-color .2s,color .2s,box-shadow .2s}.seed-data-table__entityAction:hover{background:color-mix(in srgb,var(--seed-color-fg-neutral) 4%,transparent);color:var(--seed-color-fg-neutral)}.seed-data-table__link{color:var(--seed-color-fg-neutral);text-decoration:none;min-width:0;overflow:clip;text-overflow:ellipsis;white-space:nowrap}.seed-data-table__link:is(:hover,[data-hover]){text-decoration:underline}.seed-data-table__chip{box-sizing:border-box;display:inline-flex;align-items:center;flex-shrink:0;max-width:100%;height:22px;padding:0 4px;border-radius:7px;font-size:13px;font-weight:var(--seed-font-weight-medium);line-height:15px;overflow:clip;text-overflow:ellipsis;white-space:nowrap}.seed-data-table__chipList{position:relative;display:flex;align-items:center;flex-wrap:nowrap;gap:3px;overflow:hidden;min-width:0;width:100%}.seed-data-table__chipOverflow{box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;height:20px;padding:0 4px;border-radius:6px;background-color:#f6f7f7;color:#000;font-size:10px;font-weight:var(--seed-font-weight-regular);line-height:15px;white-space:nowrap}.seed-data-table__chipListEditor{display:flex;align-items:center;flex-wrap:wrap;gap:3px;min-width:0;width:100%}.seed-data-table__chipRemove{box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:12px;height:12px;margin:0;margin-inline-start:2px;padding:0;border:none;border-radius:999px;background:0 0;color:inherit;opacity:.6;cursor:pointer;transition:opacity .12s,background-color .12s}.seed-data-table__chipRemove:hover{opacity:1;background-color:rgba(0,0,0,.08)}.seed-data-table__chipInput{flex:1 1 auto;min-width:40px;height:22px;margin:0;padding:0;border:none;outline:0;background:0 0;font-family:inherit;font-size:var(--seed-font-size-t4);color:var(--seed-color-fg-neutral);letter-spacing:-.14px}.seed-data-table__expandOverlay{box-sizing:border-box;position:absolute;top:-1px;inset-inline-start:-1px;inset-inline-end:-1px;z-index:10;min-height:calc(100% + 2px);display:flex;align-items:flex-start;padding-inline:var(--seed-dimension-x3);padding-block:var(--seed-dimension-x3);background-color:var(--seed-color-bg-layer-floating);border-radius:4px;box-shadow:none;border:1px solid #266df0;color:var(--seed-color-fg-neutral);font-size:var(--seed-font-size-t4);line-height:var(--seed-line-height-t4);letter-spacing:-.14px;cursor:default}.seed-data-table__expandOverlayText{width:100%;min-width:0;white-space:normal;word-break:break-word}.seed-data-table__cellSuffixRow{display:flex;align-items:center;gap:4px;min-width:0;width:100%}.seed-data-table__cellSuffixText{flex:1 1 0%;min-width:0;overflow:clip;text-overflow:ellipsis;white-space:nowrap}.seed-data-table__cellSuffixIcon{flex-shrink:0;display:inline-flex;align-items:center;color:color-mix(in srgb,var(--seed-color-fg-neutral) 55%,transparent)}.seed-data-table__toolbar{box-sizing:border-box;display:flex;align-items:center;width:100%;flex-shrink:0;min-height:49px;gap:var(--seed-dimension-x2);padding-inline:var(--seed-dimension-x3);border-top:1px solid var(--seed-color-stroke-neutral-muted)}.seed-data-table__search{position:relative;display:inline-flex;align-items:center;flex:1 1 0%;max-width:280px}.seed-data-table__search svg{position:absolute;inset-inline-start:var(--seed-dimension-x2);width:var(--seed-dimension-x4);height:var(--seed-dimension-x4);color:var(--seed-color-fg-neutral-muted);pointer-events:none}.seed-data-table__search input{width:100%;height:var(--seed-dimension-x8);padding-inline-start:var(--seed-dimension-x7);padding-inline-end:var(--seed-dimension-x2);border:none;border-radius:var(--seed-radius-r2);background-color:var(--seed-color-bg-layer-default);box-shadow:inset 0 0 0 1px var(--seed-color-stroke-neutral-weak);font-family:inherit;font-size:var(--seed-font-size-t4);color:var(--seed-color-fg-neutral);outline:0;transition:box-shadow .1s var(--seed-timing-function-easing)}.seed-data-table__search input::placeholder{color:var(--seed-color-fg-neutral-subtle)}.seed-data-table__search input:focus{box-shadow:inset 0 0 0 2px var(--seed-color-stroke-neutral-contrast)}.seed-data-table__count{flex-shrink:0;color:var(--seed-color-fg-neutral-subtle);font-size:var(--seed-font-size-t3);font-variant-numeric:tabular-nums}.seed-data-table__toolbarEnd{flex-shrink:0;margin-inline-start:auto;display:inline-flex;align-items:center;gap:var(--seed-dimension-x2)}.seed-data-table__scrollArea{position:relative;display:flex;flex-direction:column;width:100%;min-width:0;flex:1 1 auto;min-height:0;overflow-x:auto;overflow-y:auto}.seed-data-table__scrollArea[data-scrolled-start] [data-sticky-edge]{clip-path:inset(0 -38px 0 0);box-shadow:6px 0 16px 4px rgba(0,0,0,.12)}.seed-data-table__scrollArea[data-scrolled-end] [data-sticky-edge-end]{clip-path:inset(0 0 0 -38px);box-shadow:-6px 0 16px 4px rgba(0,0,0,.12)}.seed-data-table__footerCell{box-sizing:border-box;position:sticky;bottom:0;z-index:2;vertical-align:middle;padding:0;height:var(--seed-dimension-x9);background-color:var(--seed-color-bg-layer-default);border-top:1px solid var(--seed-color-stroke-neutral-muted);border-inline-end:1px solid var(--seed-color-stroke-neutral-muted);border-inline-start:none}.seed-data-table__footerCell:last-child{border-inline-end:none}.seed-data-table__footerCell[data-sticky]{z-index:3}.seed-data-table__footerCell .seed-data-table-column-calc-trigger{display:flex;align-items:center;gap:var(--seed-dimension-x1_5);width:100%;height:100%;min-width:0;margin:0;padding:0 var(--seed-dimension-x3);border:none;background:0 0;color:var(--seed-color-fg-neutral-subtle);font-family:inherit;font-size:var(--seed-font-size-t4);font-weight:var(--seed-font-weight-medium);white-space:nowrap;overflow:clip;cursor:pointer;transition:background-color .12s,color .12s}.seed-data-table__footerCell .seed-data-table-column-calc-trigger:hover{background-color:color-mix(in srgb,var(--seed-color-fg-neutral) 4%,transparent);color:var(--seed-color-fg-neutral)}.seed-data-table__footerCell .seed-data-table-column-calc-trigger[data-align=right]{justify-content:flex-end}.seed-data-table__footerCell .seed-data-table-column-calc-trigger svg{flex-shrink:0;opacity:.7}.seed-data-table__footerCell .seed-data-table-column-calc-placeholder{overflow:clip;text-overflow:ellipsis;white-space:nowrap}.seed-data-table__footerCell .seed-data-table-column-calc-value{min-width:0;flex-shrink:1;color:var(--seed-color-fg-neutral);font-variant-numeric:tabular-nums;overflow:clip;text-overflow:ellipsis;white-space:nowrap}.seed-data-table__footerCell .seed-data-table-column-calc-op{min-width:0;flex-shrink:1;color:color-mix(in srgb,var(--seed-color-fg-neutral) 63%,transparent);overflow:clip;text-overflow:ellipsis;white-space:nowrap}.seed-data-table__emptyState{box-sizing:border-box;text-align:center;padding-block:var(--seed-dimension-x8);padding-inline:var(--seed-dimension-x3);color:var(--seed-color-fg-neutral-subtle);font-size:var(--seed-font-size-t4)}.seed-data-table__loadingState{box-sizing:border-box;display:flex;align-items:center;justify-content:center;gap:10px;padding-block:var(--seed-dimension-x8);padding-inline:var(--seed-dimension-x3);color:color-mix(in srgb,var(--seed-color-fg-neutral) 63%,transparent);font-size:var(--seed-font-size-t4);line-height:var(--seed-line-height-t4);font-weight:var(--seed-font-weight-medium)}.seed-data-table__loadingState[data-inline]{padding-block:0;padding-inline:0;height:var(--seed-dimension-x9)}.seed-data-table__loadingState .seed-data-table-loading-spinner{flex-shrink:0;color:color-mix(in srgb,var(--seed-color-fg-neutral) 63%,transparent);animation:rotate .6s linear infinite}.seed-data-table__addRowCell{box-sizing:border-box;padding:0;border-top:none}.seed-data-table__addRow{box-sizing:border-box;display:flex;align-items:center;width:100%;margin:0;border:none;border-top:1px solid var(--seed-color-stroke-neutral-muted);background-color:var(--seed-color-bg-layer-default);height:var(--seed-dimension-x9);gap:var(--seed-dimension-x2);padding-inline:var(--seed-dimension-x2);color:var(--seed-color-fg-neutral-subtle);font-family:inherit;font-size:var(--seed-font-size-t4);cursor:pointer;transition:background-color .12s,color .12s}.seed-data-table__addRow:hover{background-color:color-mix(in srgb,var(--seed-color-fg-neutral) 4%,var(--seed-color-bg-layer-default));color:var(--seed-color-fg-neutral)}.seed-data-table__addRow svg{flex-shrink:0}.seed-data-table__selectionCell{text-align:center;padding:0}.seed-data-table__bulkBar{box-sizing:border-box;position:absolute;inset-inline-start:50%;transform:translateX(-50%);bottom:var(--seed-dimension-x4);z-index:30;display:flex;align-items:center;gap:var(--seed-dimension-x3);min-height:36px;padding-inline:var(--seed-dimension-x3_5);padding-block:var(--seed-dimension-x2);border-radius:var(--seed-radius-full);box-shadow:var(--seed-shadow-s3);background-color:var(--seed-color-bg-layer-floating);color:var(--seed-color-fg-neutral);font-family:inherit;font-size:var(--seed-font-size-t4);font-weight:var(--seed-font-weight-medium);white-space:nowrap}.seed-data-table__bulkBar[data-above-footer]{bottom:calc(var(--seed-dimension-x4) + var(--seed-dimension-x9))}.seed-data-table__bulkBarCount{flex-shrink:0;color:var(--seed-color-fg-neutral);font-variant-numeric:tabular-nums}.seed-data-table__bulkBarClear{box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:20px;height:20px;margin:0;padding:2px;border:none;border-radius:6px;background:0 0;font-family:inherit;color:color-mix(in srgb,var(--seed-color-fg-neutral) 55%,transparent);cursor:pointer;transition:background-color .2s,color .2s}.seed-data-table__bulkBarClear:hover{background-color:color-mix(in srgb,var(--seed-color-fg-neutral) 8%,transparent);color:var(--seed-color-fg-neutral)}.seed-data-table__bulkBarActions{display:flex;align-items:center;flex-shrink:0;gap:var(--seed-dimension-x3);padding-inline-start:var(--seed-dimension-x3);border-inline-start:1px solid color-mix(in srgb,var(--seed-color-fg-neutral) 16%,transparent)}.seed-data-table__root--surface_card{border-color:var(--seed-color-stroke-neutral-muted);background-color:var(--seed-color-bg-layer-default);border-radius:var(--seed-radius-r3)}.seed-data-table__root--surface_bleed{border-color:var(--seed-color-bg-transparent);background-color:var(--seed-color-bg-transparent)}.seed-data-table__row--interactive_true{transition:background-color .12s}.seed-data-table__row--interactive_true:is(:hover,[data-hover]){background-color:color-mix(in srgb,var(--seed-color-fg-neutral) 3%,transparent);--seed-data-table-row-bg:color-mix(in srgb, var(--seed-color-fg-neutral) 3%, var(--seed-color-bg-layer-default))}");
+// Row-narrowing for the toolbar's search box -- split out of DataTable.tsx the way
+// cells.tsx splits out cell-type rendering: a self-contained, independently testable
+// concern DataTable.tsx just calls, rather than inline `.filter()` calls piling up in
+// the same component that also owns markup. The toolbar's typed Filter CONDITIONS
+// (field/operator/value chips, DATATABLE-ATTIO-SPEC.md's Attio/crisp model) live in
+// `toolbar-conditions.tsx` instead, alongside the Sort/Filter chrome that manages
+// them -- this file is search only now; the old per-column "is/is not" picker
+// (`matchesFilter`/`DataTableFilterState`) is gone, replaced by that toolbar model.
+/**
+ * A column's `value(row)` if it supplies one, else the raw field at `column.key` --
+ * the single accessor sort/search/filter/export all read through
+ * (DATATABLE-ATTIO-SPEC.md's Column API), so a consumer only teaches the table how to
+ * read a value ONCE rather than once per feature.
+ */ function getColumnValue(column, row) {
+    return column.value ? column.value(row) : row[column.key];
+}
+/**
+ * Case-insensitive substring match against a row's stringified value -- crisp's own
+ * `applyFilters` "contains" semantics (`tabletoolbar.tsx`), reused here for the
+ * toolbar's single free-text query. `null`/`undefined` never match a non-empty query --
+ * there is no text to search.
+ */ function matchesSearch(value, query) {
+    if (!query) return true;
+    if (value == null) return false;
+    return String(value).toLowerCase().includes(query.toLowerCase());
+}
+/**
+ * The toolbar's search query -- an OR across `searchable` columns, matching GRC's own
+ * `useFilteredRows`. The toolbar's own typed Filter conditions apply SEPARATELY, as a
+ * second pass over this function's result (`toolbar-conditions.tsx`'s
+ * `applyToolbarFilters`, called by `DataTable.tsx` right after this) -- narrowing what
+ * the search box already found, not the other way round.
+ */ function getVisibleRows(data, columns, query) {
+    const searchableColumns = columns.filter((column)=>column.searchable);
+    if (!query) return data;
+    return data.filter((row)=>searchableColumns.some((column)=>matchesSearch(getColumnValue(column, row), query)));
+}
+
+__insertCSS(".seed-data-table__root{box-sizing:border-box;position:relative;display:flex;flex-direction:column;width:100%;border-width:1px;border-style:solid;font-family:Inter,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif}.seed-data-table__table{width:100%;border-collapse:separate;border-spacing:0;table-layout:fixed}.seed-data-table__headerCell{box-sizing:border-box;position:sticky;top:0;z-index:2;vertical-align:middle;text-align:start;padding:0;height:var(--seed-dimension-x10);background-color:var(--seed-color-bg-layer-default);border-top:1px solid var(--seed-color-stroke-neutral-muted);border-bottom:1px solid var(--seed-color-stroke-neutral-muted);border-inline-end:1px solid var(--seed-color-stroke-neutral-muted);border-inline-start:none;color:var(--seed-color-fg-neutral);font-size:var(--seed-font-size-t4);line-height:var(--seed-line-height-t4);font-weight:var(--seed-font-weight-medium);letter-spacing:-.14px}.seed-data-table__headerCell:last-child{border-inline-end:none}.seed-data-table__headerCell[data-sortable]{cursor:pointer;user-select:none}.seed-data-table__headerCell [data-chevron]{opacity:0;transition:opacity .12s}.seed-data-table__headerCell[data-sortable]:hover [data-chevron]{opacity:.6}.seed-data-table__headerCell[data-sorted] [data-chevron]{opacity:1;color:var(--seed-color-fg-neutral)}.seed-data-table__headerCell:hover [data-column-menu]{opacity:1}.seed-data-table__headerCell [data-column-menu]:focus-visible,.seed-data-table__headerCell [data-column-menu][data-open]{opacity:1}.seed-data-table__headerCell[data-dragging]{opacity:.5}.seed-data-table__headerCell[data-sticky]{position:sticky;z-index:3;background-color:var(--seed-color-bg-layer-default)}.seed-data-table__headerCell{outline:var(--seed-dimension-x0_5) solid transparent;outline-offset:calc(var(--seed-dimension-x0_5) * -1)}.seed-data-table__headerCell:is(:focus-visible,[data-focus-visible]){outline:var(--seed-dimension-x0_5) solid var(--seed-color-stroke-focus-ring);outline-offset:calc(var(--seed-dimension-x0_5) * -1)}.seed-data-table__headerCell .seed-data-table-resize-handle{position:absolute;top:0;inset-inline-end:calc(7px / -2);width:7px;height:100%;z-index:4;display:flex;align-items:center;justify-content:center;cursor:col-resize;touch-action:none}.seed-data-table__headerCell .seed-data-table-resize-handle-inner{width:3px;height:100%;border-radius:3px;background-color:#0298d9;opacity:0;transition:opacity .1s}.seed-data-table__headerCell .seed-data-table-resize-handle:hover .seed-data-table-resize-handle-inner,.seed-data-table__headerCell .seed-data-table-resize-handle[data-resizing] .seed-data-table-resize-handle-inner{opacity:1}.seed-data-table__headerCellInner{box-sizing:border-box;display:flex;align-items:center;width:100%;height:100%;min-width:0;gap:var(--seed-dimension-x1_5);padding-inline:var(--seed-dimension-x3)}.seed-data-table__headerCellLabel{min-width:0;flex:1 1 0%;overflow:clip;text-overflow:ellipsis;white-space:nowrap}.seed-data-table__headerCellIcon{flex-shrink:0;margin-inline-start:auto;display:inline-flex;align-items:center;justify-content:center;width:var(--seed-dimension-x4);height:var(--seed-dimension-x4);color:var(--seed-color-fg-neutral-subtle);border:none;background:0 0;padding:0;font:inherit;cursor:pointer}.seed-data-table__headerCellIcon[data-active]{color:var(--seed-color-fg-neutral)}.seed-data-table__headerCellIcon[data-column-menu]{opacity:0;transition:opacity .12s}.seed-data-table__row{position:relative;background-color:var(--seed-color-bg-layer-default);--seed-data-table-row-bg:var(--seed-color-bg-layer-default)}.seed-data-table__row[data-clickable]{cursor:pointer}.seed-data-table__row:is([aria-selected=true],[data-selected]){background-color:color-mix(in srgb,#0298d9 10%,var(--seed-color-bg-layer-default));--seed-data-table-row-bg:color-mix(in srgb, #0298d9 10%, var(--seed-color-bg-layer-default))}.seed-data-table__row:is([aria-selected=true],[data-selected]):is(:hover,[data-hover]){background-color:color-mix(in srgb,var(--seed-color-fg-neutral) 3%,color-mix(in srgb,#0298d9 10%,var(--seed-color-bg-layer-default)));--seed-data-table-row-bg:color-mix(in srgb, var(--seed-color-fg-neutral) 3%, color-mix(in srgb, #0298d9 10%, var(--seed-color-bg-layer-default)))}.seed-data-table__cell{box-sizing:border-box;position:relative;vertical-align:middle;text-align:start;height:var(--seed-dimension-x9);border-bottom:1px solid var(--seed-color-stroke-neutral-muted);border-inline-end:1px solid var(--seed-color-stroke-neutral-muted);border-top:none;border-inline-start:none;padding-block:0;padding-inline:var(--seed-dimension-x3);color:var(--seed-color-fg-neutral);font-size:var(--seed-font-size-t4);line-height:var(--seed-line-height-t4);font-weight:var(--seed-font-weight-regular);letter-spacing:-.14px;overflow:clip;text-overflow:ellipsis;white-space:nowrap}.seed-data-table__cell:not([data-editable]){user-select:none}.seed-data-table__cell:last-child{border-inline-end:none}tbody tr:last-child .seed-data-table__cell{border-bottom:none}.seed-data-table__cell[data-numeric]{text-align:end;font-variant-numeric:tabular-nums}.seed-data-table__cell[data-sticky]{position:sticky;z-index:1;background-color:var(--seed-data-table-row-bg)}.seed-data-table__cell[data-overlay-open]{overflow:visible;z-index:20}.seed-data-table__cell[data-editable]{cursor:default}.seed-data-table__cell .seed-data-table-edit-picker{display:flex;align-items:center;gap:var(--seed-dimension-x1_5);min-width:0}.seed-data-table__cell .seed-data-table-edit-pending{flex-shrink:0;color:var(--seed-color-fg-neutral-subtle);animation:rotate .6s linear infinite}.seed-data-table__cell .seed-data-table-edit-error{position:absolute;top:100%;inset-inline-start:var(--seed-dimension-x3);inset-inline-end:var(--seed-dimension-x3);z-index:2;padding-top:2px;font-size:12px;line-height:1.3;color:var(--seed-color-fg-critical);overflow:clip;text-overflow:ellipsis;white-space:nowrap}.seed-data-table__entity{display:flex;align-items:center;min-width:0;gap:var(--seed-dimension-x1_5)}.seed-data-table__entityName{min-width:0;font-weight:var(--seed-font-weight-medium);overflow:clip;text-overflow:ellipsis;white-space:nowrap}.seed-data-table__entityName[data-clickable]{cursor:pointer;border:none;background:0 0;padding:0;margin:0;font-family:inherit;font-size:inherit;line-height:inherit;color:inherit;text-align:start}.seed-data-table__entityName[data-clickable]:is(:hover,[data-hover]){text-decoration:underline}.seed-data-table__tagList{display:flex;align-items:center;gap:var(--seed-dimension-x1_5);overflow:hidden;min-width:0}.seed-data-table__entityActions{display:flex;align-items:center;gap:6px;margin-inline-start:auto;flex-shrink:0;opacity:0;transition:opacity .15s}tr:hover .seed-data-table__entityActions{opacity:1}.seed-data-table__entityActions:focus-within{opacity:1}.seed-data-table__entityAction{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;margin:0;padding:2px;border:none;border-radius:6px;background:0 0;font-family:inherit;color:color-mix(in srgb,var(--seed-color-fg-neutral) 55%,transparent);cursor:pointer;flex-shrink:0;transition:background-color .2s,color .2s,box-shadow .2s}.seed-data-table__entityAction:hover{background:color-mix(in srgb,var(--seed-color-fg-neutral) 4%,transparent);color:var(--seed-color-fg-neutral)}.seed-data-table__link{color:var(--seed-color-fg-neutral);text-decoration:none;min-width:0;overflow:clip;text-overflow:ellipsis;white-space:nowrap}.seed-data-table__link:is(:hover,[data-hover]){text-decoration:underline}.seed-data-table__chip{box-sizing:border-box;display:inline-flex;align-items:center;flex-shrink:0;max-width:100%;height:22px;padding:0 4px;border-radius:7px;font-size:13px;font-weight:var(--seed-font-weight-medium);line-height:15px;overflow:clip;text-overflow:ellipsis;white-space:nowrap}.seed-data-table__chipList{position:relative;display:flex;align-items:center;flex-wrap:nowrap;gap:3px;overflow:hidden;min-width:0;width:100%}.seed-data-table__chipOverflow{box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;height:20px;padding:0 4px;border-radius:6px;background-color:#f6f7f7;color:#000;font-size:10px;font-weight:var(--seed-font-weight-regular);line-height:15px;white-space:nowrap}.seed-data-table__chipPicker{display:flex;flex-direction:column;width:100%;min-width:0}.seed-data-table__chipPickerList{display:flex;flex-direction:column;max-height:240px;overflow-y:auto;padding:0 4px 4px}.seed-data-table__chipPickerRow{box-sizing:border-box;display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;min-height:32px;margin:0;padding:4px 8px;border:none;border-radius:6px;background:0 0;font:inherit;color:inherit;text-align:start;cursor:pointer}.seed-data-table__chipPickerRow:hover{background-color:#f6f7f7}.seed-data-table__chipPickerRow:disabled{cursor:default;opacity:.6}.seed-data-table__chipPickerBox{box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:16px;height:16px;border-radius:4px;border:1px solid rgba(0,0,0,.25);background-color:#fff;color:#fff}.seed-data-table__chipPickerBox[data-checked]{border-color:#266df0;background-color:#266df0}.seed-data-table__chipPickerBox svg{width:12px;height:12px}.seed-data-table__chipPickerCreate{box-sizing:border-box;display:flex;align-items:center;gap:6px;width:100%;min-height:32px;margin:0;padding:4px 8px;border:none;border-radius:6px;background:0 0;font:inherit;font-size:var(--seed-font-size-t4);color:var(--seed-color-fg-neutral);text-align:start;cursor:pointer}.seed-data-table__chipPickerCreate:hover{background-color:#f6f7f7}.seed-data-table__expandOverlay{box-sizing:border-box;position:absolute;top:-1px;inset-inline-start:-1px;inset-inline-end:-1px;z-index:10;min-height:calc(100% + 2px);display:flex;align-items:flex-start;padding-inline:var(--seed-dimension-x3);padding-block:var(--seed-dimension-x3);background-color:var(--seed-color-bg-layer-floating);border-radius:4px;box-shadow:none;border:1px solid #266df0;color:var(--seed-color-fg-neutral);font-size:var(--seed-font-size-t4);line-height:var(--seed-line-height-t4);letter-spacing:-.14px;cursor:default}.seed-data-table__expandOverlayText{width:100%;min-width:0;white-space:normal;word-break:break-word}.seed-data-table__cellSuffixRow{display:flex;align-items:center;gap:4px;min-width:0;width:100%}.seed-data-table__cellSuffixText{flex:1 1 0%;min-width:0;overflow:clip;text-overflow:ellipsis;white-space:nowrap}.seed-data-table__cellSuffixIcon{flex-shrink:0;display:inline-flex;align-items:center;color:color-mix(in srgb,var(--seed-color-fg-neutral) 55%,transparent)}.seed-data-table__toolbar{box-sizing:border-box;display:flex;align-items:center;width:100%;flex-shrink:0;min-height:49px;gap:var(--seed-dimension-x2);padding-inline:var(--seed-dimension-x3);border-top:1px solid var(--seed-color-stroke-neutral-muted)}.seed-data-table__search{position:relative;display:inline-flex;align-items:center;flex:1 1 0%;max-width:280px}.seed-data-table__search svg{position:absolute;inset-inline-start:var(--seed-dimension-x2);width:var(--seed-dimension-x4);height:var(--seed-dimension-x4);color:var(--seed-color-fg-neutral-muted);pointer-events:none}.seed-data-table__search input{width:100%;height:var(--seed-dimension-x8);padding-inline-start:var(--seed-dimension-x7);padding-inline-end:var(--seed-dimension-x2);border:none;border-radius:var(--seed-radius-r2);background-color:var(--seed-color-bg-layer-default);box-shadow:inset 0 0 0 1px var(--seed-color-stroke-neutral-weak);font-family:inherit;font-size:var(--seed-font-size-t4);color:var(--seed-color-fg-neutral);outline:0;transition:box-shadow .1s var(--seed-timing-function-easing)}.seed-data-table__search input::placeholder{color:var(--seed-color-fg-neutral-subtle)}.seed-data-table__search input:focus{box-shadow:inset 0 0 0 2px var(--seed-color-stroke-neutral-contrast)}.seed-data-table__count{flex-shrink:0;color:var(--seed-color-fg-neutral-subtle);font-size:var(--seed-font-size-t3);font-variant-numeric:tabular-nums}.seed-data-table__toolbarEnd{flex-shrink:0;margin-inline-start:auto;display:inline-flex;align-items:center;gap:var(--seed-dimension-x2)}.seed-data-table__scrollArea{position:relative;display:flex;flex-direction:column;width:100%;min-width:0;flex:1 1 auto;min-height:0;overflow-x:auto;overflow-y:auto}.seed-data-table__scrollArea[data-scrolled-start] [data-sticky-edge]{clip-path:inset(0 -38px 0 0);box-shadow:6px 0 16px 4px rgba(0,0,0,.12)}.seed-data-table__scrollArea[data-scrolled-end] [data-sticky-edge-end]{clip-path:inset(0 0 0 -38px);box-shadow:-6px 0 16px 4px rgba(0,0,0,.12)}.seed-data-table__footerCell{box-sizing:border-box;position:sticky;bottom:0;z-index:2;vertical-align:middle;padding:0;height:var(--seed-dimension-x9);background-color:var(--seed-color-bg-layer-default);border-top:1px solid var(--seed-color-stroke-neutral-muted);border-inline-end:1px solid var(--seed-color-stroke-neutral-muted);border-inline-start:none}.seed-data-table__footerCell:last-child{border-inline-end:none}.seed-data-table__footerCell[data-sticky]{z-index:3}.seed-data-table__footerCell .seed-data-table-column-calc-trigger{display:flex;align-items:center;gap:var(--seed-dimension-x1_5);width:100%;height:100%;min-width:0;margin:0;padding:0 var(--seed-dimension-x3);border:none;background:0 0;color:var(--seed-color-fg-neutral-subtle);font-family:inherit;font-size:var(--seed-font-size-t4);font-weight:var(--seed-font-weight-medium);white-space:nowrap;overflow:clip;cursor:pointer;transition:background-color .12s,color .12s}.seed-data-table__footerCell .seed-data-table-column-calc-trigger:hover{background-color:color-mix(in srgb,var(--seed-color-fg-neutral) 4%,transparent);color:var(--seed-color-fg-neutral)}.seed-data-table__footerCell .seed-data-table-column-calc-trigger[data-align=right]{justify-content:flex-end}.seed-data-table__footerCell .seed-data-table-column-calc-trigger svg{flex-shrink:0;opacity:.7}.seed-data-table__footerCell .seed-data-table-column-calc-placeholder{overflow:clip;text-overflow:ellipsis;white-space:nowrap}.seed-data-table__footerCell .seed-data-table-column-calc-value{min-width:0;flex-shrink:1;color:var(--seed-color-fg-neutral);font-variant-numeric:tabular-nums;overflow:clip;text-overflow:ellipsis;white-space:nowrap}.seed-data-table__footerCell .seed-data-table-column-calc-op{min-width:0;flex-shrink:1;color:color-mix(in srgb,var(--seed-color-fg-neutral) 63%,transparent);overflow:clip;text-overflow:ellipsis;white-space:nowrap}.seed-data-table__emptyState{box-sizing:border-box;text-align:center;padding-block:var(--seed-dimension-x8);padding-inline:var(--seed-dimension-x3);color:var(--seed-color-fg-neutral-subtle);font-size:var(--seed-font-size-t4)}.seed-data-table__loadingState{box-sizing:border-box;display:flex;align-items:center;justify-content:center;gap:10px;padding-block:var(--seed-dimension-x8);padding-inline:var(--seed-dimension-x3);color:color-mix(in srgb,var(--seed-color-fg-neutral) 63%,transparent);font-size:var(--seed-font-size-t4);line-height:var(--seed-line-height-t4);font-weight:var(--seed-font-weight-medium)}.seed-data-table__loadingState[data-inline]{padding-block:0;padding-inline:0;height:var(--seed-dimension-x9)}.seed-data-table__loadingState .seed-data-table-loading-spinner{flex-shrink:0;color:color-mix(in srgb,var(--seed-color-fg-neutral) 63%,transparent);animation:rotate .6s linear infinite}.seed-data-table__addRowCell{box-sizing:border-box;padding:0;border-top:none}.seed-data-table__addRow{box-sizing:border-box;display:flex;align-items:center;width:100%;margin:0;border:none;border-top:1px solid var(--seed-color-stroke-neutral-muted);background-color:var(--seed-color-bg-layer-default);height:var(--seed-dimension-x9);gap:var(--seed-dimension-x2);padding-inline:var(--seed-dimension-x2);color:var(--seed-color-fg-neutral-subtle);font-family:inherit;font-size:var(--seed-font-size-t4);cursor:pointer;transition:background-color .12s,color .12s}.seed-data-table__addRow:hover{background-color:color-mix(in srgb,var(--seed-color-fg-neutral) 4%,var(--seed-color-bg-layer-default));color:var(--seed-color-fg-neutral)}.seed-data-table__addRow svg{flex-shrink:0}.seed-data-table__selectionCell{text-align:center;padding:0}.seed-data-table__bulkBar{box-sizing:border-box;position:absolute;inset-inline-start:50%;transform:translateX(-50%);bottom:var(--seed-dimension-x4);z-index:30;display:flex;align-items:center;gap:var(--seed-dimension-x3);min-height:36px;padding-inline:var(--seed-dimension-x3_5);padding-block:var(--seed-dimension-x2);border-radius:var(--seed-radius-full);box-shadow:var(--seed-shadow-s3);background-color:var(--seed-color-bg-layer-floating);color:var(--seed-color-fg-neutral);font-family:inherit;font-size:var(--seed-font-size-t4);font-weight:var(--seed-font-weight-medium);white-space:nowrap}.seed-data-table__bulkBar[data-above-footer]{bottom:calc(var(--seed-dimension-x4) + var(--seed-dimension-x9))}.seed-data-table__bulkBarCount{flex-shrink:0;color:var(--seed-color-fg-neutral);font-variant-numeric:tabular-nums}.seed-data-table__bulkBarClear{box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:20px;height:20px;margin:0;padding:2px;border:none;border-radius:6px;background:0 0;font-family:inherit;color:color-mix(in srgb,var(--seed-color-fg-neutral) 55%,transparent);cursor:pointer;transition:background-color .2s,color .2s}.seed-data-table__bulkBarClear:hover{background-color:color-mix(in srgb,var(--seed-color-fg-neutral) 8%,transparent);color:var(--seed-color-fg-neutral)}.seed-data-table__bulkBarActions{display:flex;align-items:center;flex-shrink:0;gap:var(--seed-dimension-x3);padding-inline-start:var(--seed-dimension-x3);border-inline-start:1px solid color-mix(in srgb,var(--seed-color-fg-neutral) 16%,transparent)}.seed-data-table__root--surface_card{border-color:var(--seed-color-stroke-neutral-muted);background-color:var(--seed-color-bg-layer-default);border-radius:var(--seed-radius-r3)}.seed-data-table__root--surface_bleed{border-color:var(--seed-color-bg-transparent);background-color:var(--seed-color-bg-transparent)}.seed-data-table__row--interactive_true{transition:background-color .12s}.seed-data-table__row--interactive_true:is(:hover,[data-hover]){background-color:color-mix(in srgb,var(--seed-color-fg-neutral) 3%,transparent);--seed-data-table-row-bg:color-mix(in srgb, var(--seed-color-fg-neutral) 3%, var(--seed-color-bg-layer-default))}");
 
 const createClassName = (className, variants, compoundVariants = [])=>{
     const variantKeys = Object.keys(variants);
@@ -4228,16 +4303,24 @@ const dataTableSlotNames = [
         "seed-data-table__chipOverflow"
     ],
     [
-        "chipListEditor",
-        "seed-data-table__chipListEditor"
+        "chipPicker",
+        "seed-data-table__chipPicker"
+    ],
+    [
+        "chipPickerList",
+        "seed-data-table__chipPickerList"
+    ],
+    [
+        "chipPickerRow",
+        "seed-data-table__chipPickerRow"
     ],
     [
-        "chipRemove",
-        "seed-data-table__chipRemove"
+        "chipPickerBox",
+        "seed-data-table__chipPickerBox"
     ],
     [
-        "chipInput",
-        "seed-data-table__chipInput"
+        "chipPickerCreate",
+        "seed-data-table__chipPickerCreate"
     ],
     [
         "expandOverlay",
@@ -4856,94 +4939,154 @@ function RatingEditor({ column, value, pending, onCommit }) {
     });
 }
 ////////////////////////////////////////////////////////////////////////////////////
-// -- editable: "chip-list" (Feature B rework, #8) -- click-to-edit, Attio's own model
-//    rather than the always-live widget this replaced (crispy-seed#1094: every row
-//    rendering a live add-tag editor at once overflowed the cell and collided with
-//    sticky columns). `body-cells.tsx`'s `DataTableBodyCell` opens this INSIDE the
-//    same anchored `CellExpandOverlay` Feature C already built for a gated editor's
-//    expanded state, on a plain single click (no truncation gate, unlike every other
-//    read-only cell's peek) -- clicking a short 2-tag cell must open the editor just
-//    as readily as a 10-tag one. It stays open across MULTIPLE add/remove commits
-//    (closes only on blur/outside-click/Escape, `DataTableBodyCell`'s own effect) by
-//    NOT going through `useDataTableEdit`'s `isEditing` gate the way `SelectEditor`/
-//    `TextEditor` do -- `commitEdit` closes `editingCell` the instant a SYNC commit
-//    resolves (its own doc comment), which would have closed a gated chip editor
-//    after the very first tag. `DataTableBodyCell` instead tracks THIS editor's own
-//    open/closed state in its local `overlayOpen`, independent of `editingCell`.
-//    Every add/remove still commits the FULL next array through the same one-string
-//    contract every other editor already uses (`useDataTableEdit`'s own doc
-//    comment): `JSON.stringify(nextTags)`, which the consumer's `onEdit` parses back
-//    -- crisp/GRC's contract stays "one string in, no typed union", not a second
-//    commit shape invented for just this column.
+// -- editable: "chip-list" -- Attio's multi-select popover (0.14.0; replaces the
+//    0.10.0-0.13.0 free-text "Add..." tag adder, which stacked an empty input over the
+//    chips and read as broken on an empty cell). Measured off Attio's Company
+//    "Categories" cell: a search field pinned on top, below it a scrolling list of the
+//    column's OPTIONS, each drawn as its own colored chip with a checkbox on the RIGHT
+//    edge (filled blue when the tag is on this row); clicking a row toggles that tag
+//    and the popover STAYS OPEN across toggles; typing filters the list; text matching
+//    no option offers a "Create '<text>'" row (freeform tag columns, e.g. tether's
+//    Labels). `body-cells.tsx`'s `DataTableBodyCell` opens this inside a portaled
+//    `expandOverlay` on a plain click and closes it on blur/outside-click/Escape; it
+//    tracks its own `overlayOpen` rather than `useDataTableEdit`'s `isEditing` gate,
+//    since a sync commit closes `editingCell` on the first toggle.
 //
-//    Renders through `classNames.chipListEditor`, NOT the read-only `chipList` slot
-//    (cells.tsx's `ChipListCell`) -- the display row clips to one line with a "+N"
-//    badge; this editor instead WRAPS onto as many lines as it needs inside the
-//    overlay's own grow-in-height box, since every tag (plus the add-input) has to
-//    stay visible and editable at once.
-function ChipListEditor({ column, value, pending, onCommit, classNames }) {
+//    Commit contract is unchanged: every toggle/create commits the FULL next array as
+//    `JSON.stringify(nextTags)` through the one-string `onCommit`, which the consumer's
+//    `onEdit` parses back.
+//
+//    Option source: `column.chipOptions` (value/label?/color?); tags already on the row
+//    but absent from it are still listed (so they can be unchecked); with no
+//    `chipOptions` at all, the distinct tags across the table's rows.
+/** Adds `tag` when absent, removes it when present -- the picker's one toggle. */ function toggleTag(tags, tag) {
+    return tags.includes(tag) ? tags.filter((existing)=>existing !== tag) : [
+        ...tags,
+        tag
+    ];
+}
+/** The option list a `chip-list` popover shows: declared `chipOptions` first, then any
+ *  selected tag not declared, then (only when nothing was declared) the distinct tags
+ *  across `rows`. */ function buildChipPickerOptions(column, tags, rows) {
+    const seen = new Set();
+    const out = [];
+    function push(option) {
+        if (!option.value || seen.has(option.value)) return;
+        seen.add(option.value);
+        out.push(option);
+    }
+    for (const option of column.chipOptions ?? [])push(option);
+    for (const tag of tags)push({
+        value: tag
+    });
+    if (!column.chipOptions) {
+        const distinct = new Set();
+        for (const row of rows){
+            const raw = getColumnValue(column, row);
+            if (Array.isArray(raw)) {
+                for (const tag of raw)if (typeof tag === "string") distinct.add(tag);
+            }
+        }
+        for (const tag of [
+            ...distinct
+        ].sort((x, y)=>x.localeCompare(y)))push({
+            value: tag
+        });
+    }
+    return out;
+}
+function ChipListEditor({ column, value, pending, onCommit, classNames, allRows = [] }) {
     const tags = Array.isArray(value) ? value.filter((tag)=>!!tag) : [];
-    const [draft, setDraft] = React.useState("");
+    const built = buildChipPickerOptions(column, tags, allRows);
+    // Options only ever GROW while the popover is open: with the row-derived fallback,
+    // unchecking a tag that no other row carries would otherwise drop it from the list
+    // and leave no way to re-check it.
+    const knownRef = React.useRef([]);
+    const known = knownRef.current;
+    for (const option of built){
+        const at = known.findIndex((entry)=>entry.value === option.value);
+        if (at === -1) known.push(option);
+        else known[at] = option;
+    }
+    const options = [
+        ...known
+    ];
+    const optionText = React.useCallback((option)=>option.label ?? option.value, []);
+    const { query, setQuery, filtered } = useSelectSearch(options, optionText);
+    const trimmed = query.trim();
+    const canCreate = column.chipCreatable !== false && trimmed !== "" && !options.some((option)=>option.value.toLowerCase() === trimmed.toLowerCase() || optionText(option).toLowerCase() === trimmed.toLowerCase());
     function commitTags(next) {
         onCommit(JSON.stringify(next));
     }
-    function addTag() {
-        const tag = draft.trim();
-        setDraft("");
-        if (!tag || tags.includes(tag)) return;
-        commitTags([
-            ...tags,
-            tag
-        ]);
-    }
-    function removeTag(tag) {
-        commitTags(tags.filter((existing)=>existing !== tag));
+    function create() {
+        setQuery("");
+        commitTags(toggleTag(tags, trimmed));
     }
-    return(// biome-ignore lint/a11y/noStaticElementInteractions: not a widget -- this span never responds to interaction on ITSELF, only stops propagation of events that already occurred on a real interactive descendant (the remove buttons, the add-tag input). No role fits it because it isn't a control.
-    /*#__PURE__*/ jsxs("span", {
-        className: classNames.chipListEditor,
+    return(// biome-ignore lint/a11y/noStaticElementInteractions: not a widget -- this wrapper never responds to interaction on ITSELF, only stops propagation of events that already occurred on a real interactive descendant (the search input, the option rows). No role fits it because it isn't a control.
+    /*#__PURE__*/ jsxs("div", {
+        className: classNames.chipPicker,
         onClick: (event)=>event.stopPropagation(),
         children: [
-            tags.map((tag)=>/*#__PURE__*/ jsx(SwatchChip, {
-                    value: tag,
-                    className: classNames.chip,
-                    children: /*#__PURE__*/ jsx("button", {
-                        type: "button",
-                        disabled: pending,
-                        "aria-label": `Remove ${tag}`,
-                        className: classNames.chipRemove,
-                        onClick: ()=>removeTag(tag),
-                        children: /*#__PURE__*/ jsx(IconXmarkLine_default, {
-                            size: 10
-                        })
-                    })
-                }, tag)),
-            /*#__PURE__*/ jsx("input", {
-                // biome-ignore lint/a11y/noAutofocus: this editor only ever mounts in response to an explicit click that just opened it (never on page load), matching `SelectEditor`'s own `open` (controlled, always-open-on-mount) -- the same UX every gated editor in this file already gives via a component the linter can't see through (`TextFieldInput`/`SelectSearchField`), just on a bare `<input>` here since `chipInput` has no such wrapper.
+            /*#__PURE__*/ jsx(SelectSearchField, {
                 autoFocus: true,
-                className: classNames.chipInput,
-                value: draft,
-                disabled: pending,
-                placeholder: tags.length ? "" : "Add…",
-                "aria-label": `Add tag to ${column.key}`,
-                onChange: (event)=>setDraft(event.target.value),
+                value: query,
+                onChange: setQuery,
+                placeholder: column.editorSearchPlaceholder ?? "Search…",
+                "aria-label": `Search ${column.key}`,
                 onKeyDown: (event)=>{
-                    // Escape is the ONE key this input must NOT stop propagation for: there is
-                    // no in-progress draft state worth clearing locally (every add/remove
-                    // already commits immediately), so it needs to bubble all the way to
-                    // `document` -- `DataTableBodyCell`'s own Escape listener is what actually
-                    // closes this popover. Every other key stops here, same as before, so it
-                    // never reaches the row's own click/keyboard handling.
-                    if (event.key === "Escape") return;
-                    event.stopPropagation();
-                    if (event.key === "Enter") {
-                        event.preventDefault();
-                        addTag();
-                    } else if (event.key === "Backspace" && draft === "" && tags.length > 0) {
-                        removeTag(tags[tags.length - 1]);
-                    }
+                    if (event.key !== "Enter") return;
+                    event.preventDefault();
+                    if (pending) return;
+                    if (canCreate) create();
+                    else if (trimmed && filtered.length > 0) commitTags(toggleTag(tags, filtered[0].value));
                 }
             }),
+            /*#__PURE__*/ jsxs("div", {
+                className: classNames.chipPickerList,
+                role: "group",
+                "aria-label": `${column.key} options`,
+                children: [
+                    filtered.map((option)=>{
+                        const checked = tags.includes(option.value);
+                        return /*#__PURE__*/ jsxs("button", {
+                            type: "button",
+                            role: "checkbox",
+                            "aria-checked": checked,
+                            disabled: pending,
+                            className: classNames.chipPickerRow,
+                            // Keep focus in the search field so typing keeps filtering after a toggle.
+                            onMouseDown: (event)=>event.preventDefault(),
+                            onClick: ()=>commitTags(toggleTag(tags, option.value)),
+                            children: [
+                                /*#__PURE__*/ jsx(SwatchChip, {
+                                    value: option.value,
+                                    label: option.label,
+                                    color: option.color,
+                                    className: classNames.chip
+                                }),
+                                /*#__PURE__*/ jsx("span", {
+                                    className: classNames.chipPickerBox,
+                                    "data-checked": checked ? "" : undefined,
+                                    children: checked && /*#__PURE__*/ jsx(IconCheckmarkFatFill_default, {
+                                        "aria-hidden": "true"
+                                    })
+                                })
+                            ]
+                        }, option.value);
+                    }),
+                    canCreate && /*#__PURE__*/ jsx("button", {
+                        type: "button",
+                        disabled: pending,
+                        className: classNames.chipPickerCreate,
+                        onMouseDown: (event)=>event.preventDefault(),
+                        onClick: create,
+                        children: `Create '${trimmed}'`
+                    }),
+                    !canCreate && filtered.length === 0 && /*#__PURE__*/ jsx(SelectSearchEmpty, {
+                        children: column.editorEmptyLabel ?? "No results"
+                    })
+                ]
+            }),
             pending && /*#__PURE__*/ jsx(EditPendingIndicator, {})
         ]
     }));
@@ -5032,44 +5175,6 @@ function CellExpandOverlay({ className, anchorRef, contentRef, children }) {
     }), document.body);
 }
 
-// Row-narrowing for the toolbar's search box -- split out of DataTable.tsx the way
-// cells.tsx splits out cell-type rendering: a self-contained, independently testable
-// concern DataTable.tsx just calls, rather than inline `.filter()` calls piling up in
-// the same component that also owns markup. The toolbar's typed Filter CONDITIONS
-// (field/operator/value chips, DATATABLE-ATTIO-SPEC.md's Attio/crisp model) live in
-// `toolbar-conditions.tsx` instead, alongside the Sort/Filter chrome that manages
-// them -- this file is search only now; the old per-column "is/is not" picker
-// (`matchesFilter`/`DataTableFilterState`) is gone, replaced by that toolbar model.
-/**
- * A column's `value(row)` if it supplies one, else the raw field at `column.key` --
- * the single accessor sort/search/filter/export all read through
- * (DATATABLE-ATTIO-SPEC.md's Column API), so a consumer only teaches the table how to
- * read a value ONCE rather than once per feature.
- */ function getColumnValue(column, row) {
-    return column.value ? column.value(row) : row[column.key];
-}
-/**
- * Case-insensitive substring match against a row's stringified value -- crisp's own
- * `applyFilters` "contains" semantics (`tabletoolbar.tsx`), reused here for the
- * toolbar's single free-text query. `null`/`undefined` never match a non-empty query --
- * there is no text to search.
- */ function matchesSearch(value, query) {
-    if (!query) return true;
-    if (value == null) return false;
-    return String(value).toLowerCase().includes(query.toLowerCase());
-}
-/**
- * The toolbar's search query -- an OR across `searchable` columns, matching GRC's own
- * `useFilteredRows`. The toolbar's own typed Filter conditions apply SEPARATELY, as a
- * second pass over this function's result (`toolbar-conditions.tsx`'s
- * `applyToolbarFilters`, called by `DataTable.tsx` right after this) -- narrowing what
- * the search box already found, not the other way round.
- */ function getVisibleRows(data, columns, query) {
-    const searchableColumns = columns.filter((column)=>column.searchable);
-    if (!query) return data;
-    return data.filter((row)=>searchableColumns.some((column)=>matchesSearch(getColumnValue(column, row), query)));
-}
-
 // Feature C (#12) -- the click-to-expand gate: measures whether a cell's rendered
 // content is ACTUALLY truncated right now, so a single click only opens the
 // anchored overlay (editors.tsx's `CellExpandOverlay`) when there's real hidden
@@ -5135,7 +5240,10 @@ function isCellTruncated(cell) {
  *  `overflow: visible` on every element in between and regardless of how high its
  *  `z-index` is raised -- neither of which is a stacking-context or overflow bug
  *  fixable from the INSIDE. A portal sidesteps it entirely by not being a
- *  descendant of the sticky `<td>` at all once mounted. */ function isChipListEditable(column) {
+ *  descendant of the sticky `<td>` at all once mounted. */ /** The table's full `data`, so an editable chip-list column with no `chipOptions` can
+ *  fall back to the distinct tags already present across rows. */ const DataTableRowsContext = /*#__PURE__*/ React.createContext([]);
+/** Attio's multi-select popover is wider than a narrow tags column. */ const CHIP_PICKER_MIN_WIDTH = 240;
+function isChipListEditable(column) {
     return !!column.editable && column.type === "chip-list";
 }
 function ColumnBodyCells({ columns, row, classNames, locale, selectable, stickyFirst, stickyLast, cellContextMenu, onViewEditHistory, cellContextMenuItems }) {
@@ -5195,6 +5303,7 @@ function ColumnBodyCells({ columns, row, classNames, locale, selectable, stickyF
     const [contextMenuOpen, setContextMenuOpen] = React.useState(false);
     const alwaysLive = isAlwaysLiveEditable(column);
     const chipListEditable = isChipListEditable(column);
+    const allRows = React.useContext(DataTableRowsContext);
     // A gated `editable` column (everything except the always-live widgets AND the
     // click-to-edit chip-list) opens on double-click -- Attio's own measured gesture
     // (crisp's #411), matched here rather than a single click, which stays "select
@@ -5224,7 +5333,10 @@ function ColumnBodyCells({ columns, row, classNames, locale, selectable, stickyF
             top: rect.bottom,
             insetInlineStart: rect.left,
             insetInlineEnd: "auto",
-            minWidth: rect.width,
+            minWidth: Math.max(rect.width, CHIP_PICKER_MIN_WIDTH),
+            // The multi-select popover owns its own inner padding (search field + option
+            // rows inset themselves); the overlay's cell-editor padding would double it.
+            padding: 0,
             // Both override the SAME `expandOverlay` class properties this box also
             // carries (`className={classNames.expandOverlay}`, below) -- that class's
             // `minHeight: calc(100% + 2px)` resolves against an ANCHORED box's own
@@ -5371,7 +5483,10 @@ function ColumnBodyCells({ columns, row, classNames, locale, selectable, stickyF
         chipListEditorOpen,
         measurePopoverPosition
     ]);
-    const overlayActive = overlayOpen && (alwaysLive || isEditing(row.id, column.key) || isPeeking(row.id, column.key));
+    // Never for a chip-list cell: its picker is its own portaled popover, and the
+    // in-cell overlay box would show for the first frame only (a sync commit closes
+    // `isEditing` on the first toggle) and overlap the popover's top edge.
+    const overlayActive = overlayOpen && !chipListEditable && (alwaysLive || isEditing(row.id, column.key) || isPeeking(row.id, column.key));
     const rawValue = getColumnValue(column, row);
     const pending = isPending(row.id, column.key);
     return /*#__PURE__*/ jsxs(Fragment, {
@@ -5429,7 +5544,8 @@ function ColumnBodyCells({ columns, row, classNames, locale, selectable, stickyF
                     value: resolveEditValue(column, row, rawValue),
                     pending: pending,
                     onCommit: (value)=>commitEdit(row.id, column.key, value),
-                    classNames: classNames
+                    classNames: classNames,
+                    allRows: allRows
                 })
             }), document.body)
         ]
@@ -5483,7 +5599,8 @@ function ColumnBodyCells({ columns, row, classNames, locale, selectable, stickyF
             value: rawValue,
             className: classNames.chipList,
             chipClassName: classNames.chip,
-            overflowClassName: classNames.chipOverflow
+            overflowClassName: classNames.chipOverflow,
+            chipOptions: column.chipOptions
         });
     } else if (column.editable && isEditing(rowId, column.key)) {
         if (column.editor === "select") {
@@ -5600,7 +5717,8 @@ function DisplayCellContent({ column, row, value, classNames, locale }) {
                 value: value,
                 className: classNames.chipList,
                 chipClassName: classNames.chip,
-                overflowClassName: classNames.chipOverflow
+                overflowClassName: classNames.chipOverflow,
+                chipOptions: column.chipOptions
             });
         case "number":
             return /*#__PURE__*/ jsx(Fragment, {
@@ -12020,223 +12138,226 @@ function DataTableInner(props, ref) {
     const totalCols = columns.length + (selectable ? 1 : 0);
     return /*#__PURE__*/ jsx(ClassNamesProvider, {
         value: classNames,
-        children: /*#__PURE__*/ jsxs(DataTableRoot, {
-            ref: ref,
-            className: clsx(classNames.root, className),
-            rowIds: rowIds,
-            selectable: selectable,
-            selectedIds: selectedIds,
-            defaultSelectedIds: defaultSelectedIds,
-            onSelectionChange: onSelectionChange,
-            sort: sort,
-            defaultSort: defaultSort,
-            onSortChange: handleSortChange,
-            query: resolvedQuery,
-            onQueryChange: handleQueryChange,
-            toolbarSorts: resolvedToolbarSorts,
-            onToolbarSortsChange: handleToolbarSortsChange,
-            toolbarFilters: resolvedToolbarFilters,
-            onToolbarFiltersChange: handleToolbarFiltersChange,
-            columnKeys: columnKeys,
-            actionsColumnKey: actionsColumnKey,
-            columnOrder: columnOrder,
-            defaultColumnOrder: defaultColumnOrder,
-            onColumnOrderChange: onColumnOrderChange,
-            hiddenColumnKeys: hiddenColumnKeys,
-            defaultHiddenColumnKeys: defaultHiddenColumnKeys,
-            onHiddenColumnKeysChange: onHiddenColumnKeysChange,
-            columnWidths: columnWidths,
-            defaultColumnWidths: defaultColumnWidths,
-            onColumnWidthsChange: onColumnWidthsChange,
-            columnLabels: columnLabels,
-            defaultColumnLabels: defaultColumnLabels,
-            onColumnLabelsChange: onColumnLabelsChange,
-            pinnedColumnKeys: pinnedColumnKeys,
-            defaultPinnedColumnKeys: defaultPinnedColumnKeys,
-            onPinnedColumnKeysChange: onPinnedColumnKeysChange,
-            columnCalcOps: columnCalcOps,
-            defaultColumnCalcOps: defaultColumnCalcOps,
-            onColumnCalcOpsChange: onColumnCalcOpsChange,
-            onEdit: onEdit,
-            onLoadMore: onLoadMore,
-            hasMore: hasMore,
-            loadingMore: loadingMore,
-            virtualized: virtualized,
-            rowHeight: rowHeight,
-            overscan: overscan,
-            ...restProps,
-            children: [
-                onColumnsChange && /*#__PURE__*/ jsx(ColumnsChangeEffect, {
-                    columns: columns,
-                    onColumnsChange: onColumnsChange
-                }),
-                showToolbar && /*#__PURE__*/ jsxs(DataTableToolbar, {
-                    children: [
-                        searchable && /*#__PURE__*/ jsx(SearchBox, {
-                            placeholder: searchPlaceholder,
-                            label: searchLabel
-                        }),
-                        /*#__PURE__*/ jsx(SortControl, {
-                            columns: columns
-                        }),
-                        /*#__PURE__*/ jsx(FilterControl, {
-                            columns: columns
-                        }),
-                        (showCount || toolbarActions) && /*#__PURE__*/ jsxs(DataTableToolbarEnd, {
-                            children: [
-                                toolbarActions,
-                                showCount && /*#__PURE__*/ jsx(RowCount, {
-                                    shown: sortedData.length,
-                                    total: data.length,
-                                    countLabel: countLabel
-                                })
-                            ]
-                        })
-                    ]
-                }),
-                /*#__PURE__*/ jsx(DataTableScrollBody, {
-                    scrollProps: scrollProps,
-                    virtualized: virtualized,
-                    children: /*#__PURE__*/ jsxs(DataTableTable, {
-                        "aria-rowcount": virtualized ? sortedData.length + 1 : undefined,
+        children: /*#__PURE__*/ jsx(DataTableRowsContext.Provider, {
+            value: data,
+            children: /*#__PURE__*/ jsxs(DataTableRoot, {
+                ref: ref,
+                className: clsx(classNames.root, className),
+                rowIds: rowIds,
+                selectable: selectable,
+                selectedIds: selectedIds,
+                defaultSelectedIds: defaultSelectedIds,
+                onSelectionChange: onSelectionChange,
+                sort: sort,
+                defaultSort: defaultSort,
+                onSortChange: handleSortChange,
+                query: resolvedQuery,
+                onQueryChange: handleQueryChange,
+                toolbarSorts: resolvedToolbarSorts,
+                onToolbarSortsChange: handleToolbarSortsChange,
+                toolbarFilters: resolvedToolbarFilters,
+                onToolbarFiltersChange: handleToolbarFiltersChange,
+                columnKeys: columnKeys,
+                actionsColumnKey: actionsColumnKey,
+                columnOrder: columnOrder,
+                defaultColumnOrder: defaultColumnOrder,
+                onColumnOrderChange: onColumnOrderChange,
+                hiddenColumnKeys: hiddenColumnKeys,
+                defaultHiddenColumnKeys: defaultHiddenColumnKeys,
+                onHiddenColumnKeysChange: onHiddenColumnKeysChange,
+                columnWidths: columnWidths,
+                defaultColumnWidths: defaultColumnWidths,
+                onColumnWidthsChange: onColumnWidthsChange,
+                columnLabels: columnLabels,
+                defaultColumnLabels: defaultColumnLabels,
+                onColumnLabelsChange: onColumnLabelsChange,
+                pinnedColumnKeys: pinnedColumnKeys,
+                defaultPinnedColumnKeys: defaultPinnedColumnKeys,
+                onPinnedColumnKeysChange: onPinnedColumnKeysChange,
+                columnCalcOps: columnCalcOps,
+                defaultColumnCalcOps: defaultColumnCalcOps,
+                onColumnCalcOpsChange: onColumnCalcOpsChange,
+                onEdit: onEdit,
+                onLoadMore: onLoadMore,
+                hasMore: hasMore,
+                loadingMore: loadingMore,
+                virtualized: virtualized,
+                rowHeight: rowHeight,
+                overscan: overscan,
+                ...restProps,
+                children: [
+                    onColumnsChange && /*#__PURE__*/ jsx(ColumnsChangeEffect, {
+                        columns: columns,
+                        onColumnsChange: onColumnsChange
+                    }),
+                    showToolbar && /*#__PURE__*/ jsxs(DataTableToolbar, {
                         children: [
-                            /*#__PURE__*/ jsx(DataTableColGroup, {
-                                columns: columns,
-                                selectable: !!selectable,
-                                stickyFirst: stickyFirst
+                            searchable && /*#__PURE__*/ jsx(SearchBox, {
+                                placeholder: searchPlaceholder,
+                                label: searchLabel
                             }),
-                            /*#__PURE__*/ jsxs(DataTableHeader, {
+                            /*#__PURE__*/ jsx(SortControl, {
+                                columns: columns
+                            }),
+                            /*#__PURE__*/ jsx(FilterControl, {
+                                columns: columns
+                            }),
+                            (showCount || toolbarActions) && /*#__PURE__*/ jsxs(DataTableToolbarEnd, {
                                 children: [
-                                    selectable && /*#__PURE__*/ jsx(SelectionHeaderCell, {
-                                        stickyFirst: stickyFirst,
-                                        children: /*#__PURE__*/ jsx(SelectAllCheckbox, {
-                                            label: selectAllLabel,
-                                            checkedIcon: selectionCheckedIcon ?? DEFAULT_CHECKED_ICON,
-                                            indeterminateIcon: selectionIndeterminateIcon ?? DEFAULT_INDETERMINATE_ICON
-                                        })
-                                    }),
-                                    /*#__PURE__*/ jsx(ColumnHeaderCells, {
-                                        columns: columns,
-                                        columnMenu: columnMenu,
-                                        reorderable: reorderable,
-                                        resizable: resizable,
-                                        sortIcon: sortIcon,
-                                        selectable: !!selectable,
-                                        stickyFirst: stickyFirst,
-                                        stickyLast: resolvedStickyLast
+                                    toolbarActions,
+                                    showCount && /*#__PURE__*/ jsx(RowCount, {
+                                        shown: sortedData.length,
+                                        total: data.length,
+                                        countLabel: countLabel
                                     })
                                 ]
-                            }),
-                            /*#__PURE__*/ jsx(DataTableBody, {
-                                children: loading ? /*#__PURE__*/ jsx("tr", {
-                                    children: /*#__PURE__*/ jsx(DataTableCell, {
-                                        colSpan: totalCols,
-                                        children: /*#__PURE__*/ jsx(LoadingStateContent, {
-                                            label: loadingLabel,
-                                            classNames: classNames
+                            })
+                        ]
+                    }),
+                    /*#__PURE__*/ jsx(DataTableScrollBody, {
+                        scrollProps: scrollProps,
+                        virtualized: virtualized,
+                        children: /*#__PURE__*/ jsxs(DataTableTable, {
+                            "aria-rowcount": virtualized ? sortedData.length + 1 : undefined,
+                            children: [
+                                /*#__PURE__*/ jsx(DataTableColGroup, {
+                                    columns: columns,
+                                    selectable: !!selectable,
+                                    stickyFirst: stickyFirst
+                                }),
+                                /*#__PURE__*/ jsxs(DataTableHeader, {
+                                    children: [
+                                        selectable && /*#__PURE__*/ jsx(SelectionHeaderCell, {
+                                            stickyFirst: stickyFirst,
+                                            children: /*#__PURE__*/ jsx(SelectAllCheckbox, {
+                                                label: selectAllLabel,
+                                                checkedIcon: selectionCheckedIcon ?? DEFAULT_CHECKED_ICON,
+                                                indeterminateIcon: selectionIndeterminateIcon ?? DEFAULT_INDETERMINATE_ICON
+                                            })
+                                        }),
+                                        /*#__PURE__*/ jsx(ColumnHeaderCells, {
+                                            columns: columns,
+                                            columnMenu: columnMenu,
+                                            reorderable: reorderable,
+                                            resizable: resizable,
+                                            sortIcon: sortIcon,
+                                            selectable: !!selectable,
+                                            stickyFirst: stickyFirst,
+                                            stickyLast: resolvedStickyLast
                                         })
-                                    })
-                                }) : error ? /*#__PURE__*/ jsx("tr", {
-                                    children: /*#__PURE__*/ jsx(DataTableCell, {
-                                        colSpan: totalCols,
-                                        children: /*#__PURE__*/ jsx(EmptyStateContent, {
-                                            classNames: classNames,
-                                            children: error
+                                    ]
+                                }),
+                                /*#__PURE__*/ jsx(DataTableBody, {
+                                    children: loading ? /*#__PURE__*/ jsx("tr", {
+                                        children: /*#__PURE__*/ jsx(DataTableCell, {
+                                            colSpan: totalCols,
+                                            children: /*#__PURE__*/ jsx(LoadingStateContent, {
+                                                label: loadingLabel,
+                                                classNames: classNames
+                                            })
                                         })
-                                    })
-                                }) : sortedData.length === 0 ? /*#__PURE__*/ jsx("tr", {
-                                    children: /*#__PURE__*/ jsx(DataTableCell, {
-                                        colSpan: totalCols,
-                                        children: /*#__PURE__*/ jsx(EmptyStateContent, {
-                                            classNames: classNames,
-                                            children: empty
+                                    }) : error ? /*#__PURE__*/ jsx("tr", {
+                                        children: /*#__PURE__*/ jsx(DataTableCell, {
+                                            colSpan: totalCols,
+                                            children: /*#__PURE__*/ jsx(EmptyStateContent, {
+                                                classNames: classNames,
+                                                children: error
+                                            })
                                         })
-                                    })
-                                }) : /*#__PURE__*/ jsxs(Fragment, {
-                                    children: [
-                                        /*#__PURE__*/ jsx(WindowedRows, {
-                                            rows: sortedData,
-                                            virtualized: virtualized,
+                                    }) : sortedData.length === 0 ? /*#__PURE__*/ jsx("tr", {
+                                        children: /*#__PURE__*/ jsx(DataTableCell, {
                                             colSpan: totalCols,
-                                            children: (windowRows, firstIndex)=>/*#__PURE__*/ jsx(Fragment, {
-                                                    children: windowRows.map((row, offset)=>/*#__PURE__*/ jsxs(DataTableRow, {
-                                                            rowId: row.id,
-                                                            "aria-rowindex": virtualized ? firstIndex + offset + 2 : undefined,
-                                                            "data-clickable": onRowClick ? "" : undefined,
-                                                            onClick: onRowClick ? ()=>onRowClick(row) : undefined,
-                                                            children: [
-                                                                selectable && /*#__PURE__*/ jsx(SelectionCell, {
-                                                                    // The row itself carries `onClick={onRowClick}` above, and a
-                                                                    // native click on this cell's checkbox bubbles up through it
-                                                                    // (React attaches DataTableRow's handler on the <tr>, which
-                                                                    // sits between the checkbox and anything a consumer could stop
-                                                                    // it from at -- so this has to live here, not in the consumer).
-                                                                    // Without this, checking a row's box also fires `onRowClick`.
-                                                                    onClick: (event)=>event.stopPropagation(),
-                                                                    stickyFirst: stickyFirst,
-                                                                    children: /*#__PURE__*/ jsx(RowCheckbox, {
-                                                                        label: getRowSelectionLabel(row),
-                                                                        checkedIcon: selectionCheckedIcon ?? DEFAULT_CHECKED_ICON
+                                            children: /*#__PURE__*/ jsx(EmptyStateContent, {
+                                                classNames: classNames,
+                                                children: empty
+                                            })
+                                        })
+                                    }) : /*#__PURE__*/ jsxs(Fragment, {
+                                        children: [
+                                            /*#__PURE__*/ jsx(WindowedRows, {
+                                                rows: sortedData,
+                                                virtualized: virtualized,
+                                                colSpan: totalCols,
+                                                children: (windowRows, firstIndex)=>/*#__PURE__*/ jsx(Fragment, {
+                                                        children: windowRows.map((row, offset)=>/*#__PURE__*/ jsxs(DataTableRow, {
+                                                                rowId: row.id,
+                                                                "aria-rowindex": virtualized ? firstIndex + offset + 2 : undefined,
+                                                                "data-clickable": onRowClick ? "" : undefined,
+                                                                onClick: onRowClick ? ()=>onRowClick(row) : undefined,
+                                                                children: [
+                                                                    selectable && /*#__PURE__*/ jsx(SelectionCell, {
+                                                                        // The row itself carries `onClick={onRowClick}` above, and a
+                                                                        // native click on this cell's checkbox bubbles up through it
+                                                                        // (React attaches DataTableRow's handler on the <tr>, which
+                                                                        // sits between the checkbox and anything a consumer could stop
+                                                                        // it from at -- so this has to live here, not in the consumer).
+                                                                        // Without this, checking a row's box also fires `onRowClick`.
+                                                                        onClick: (event)=>event.stopPropagation(),
+                                                                        stickyFirst: stickyFirst,
+                                                                        children: /*#__PURE__*/ jsx(RowCheckbox, {
+                                                                            label: getRowSelectionLabel(row),
+                                                                            checkedIcon: selectionCheckedIcon ?? DEFAULT_CHECKED_ICON
+                                                                        })
+                                                                    }),
+                                                                    /*#__PURE__*/ jsx(ColumnBodyCells, {
+                                                                        columns: columns,
+                                                                        row: row,
+                                                                        classNames: classNames,
+                                                                        locale: locale,
+                                                                        selectable: !!selectable,
+                                                                        stickyFirst: stickyFirst,
+                                                                        stickyLast: resolvedStickyLast,
+                                                                        cellContextMenu: cellContextMenu,
+                                                                        onViewEditHistory: onViewEditHistory,
+                                                                        cellContextMenuItems: cellContextMenuItems
                                                                     })
-                                                                }),
-                                                                /*#__PURE__*/ jsx(ColumnBodyCells, {
-                                                                    columns: columns,
-                                                                    row: row,
-                                                                    classNames: classNames,
-                                                                    locale: locale,
-                                                                    selectable: !!selectable,
-                                                                    stickyFirst: stickyFirst,
-                                                                    stickyLast: resolvedStickyLast,
-                                                                    cellContextMenu: cellContextMenu,
-                                                                    onViewEditHistory: onViewEditHistory,
-                                                                    cellContextMenuItems: cellContextMenuItems
-                                                                })
-                                                            ]
-                                                        }, row.id))
-                                                })
+                                                                ]
+                                                            }, row.id))
+                                                    })
+                                            }),
+                                            onLoadMore && /*#__PURE__*/ jsx(InfiniteScrollRow, {
+                                                colSpan: totalCols,
+                                                classNames: classNames,
+                                                loadingLabel: loadingLabel
+                                            })
+                                        ]
+                                    })
+                                }),
+                                showFooter && /*#__PURE__*/ jsxs(DataTableFooter, {
+                                    children: [
+                                        selectable && // The 40px-wide selection SPACER cell is now a plain `DataTableFooterCell`
+                                        // (not the `selectionCell` slot) -- the `<colgroup>`'s own 40px `<col>`
+                                        // is what makes every row's selection column line up now, not a matching
+                                        // per-slot width formula, so there is no more reason for this cell to
+                                        // borrow a different slot than its footer siblings.
+                                        /*#__PURE__*/ jsx(SelectionFooterCell, {
+                                            stickyFirst: stickyFirst
                                         }),
-                                        onLoadMore && /*#__PURE__*/ jsx(InfiniteScrollRow, {
-                                            colSpan: totalCols,
-                                            classNames: classNames,
-                                            loadingLabel: loadingLabel
+                                        /*#__PURE__*/ jsx(ColumnCalcCells, {
+                                            columns: columns,
+                                            rows: sortedData,
+                                            selectable: !!selectable,
+                                            stickyFirst: stickyFirst,
+                                            stickyLast: resolvedStickyLast
                                         })
                                     ]
+                                }),
+                                onAddRow && /*#__PURE__*/ jsx(AddRowFooter, {
+                                    onAddRow: onAddRow,
+                                    addRowLabel: addRowLabel,
+                                    colSpan: totalCols,
+                                    classNames: classNames
                                 })
-                            }),
-                            showFooter && /*#__PURE__*/ jsxs(DataTableFooter, {
-                                children: [
-                                    selectable && // The 40px-wide selection SPACER cell is now a plain `DataTableFooterCell`
-                                    // (not the `selectionCell` slot) -- the `<colgroup>`'s own 40px `<col>`
-                                    // is what makes every row's selection column line up now, not a matching
-                                    // per-slot width formula, so there is no more reason for this cell to
-                                    // borrow a different slot than its footer siblings.
-                                    /*#__PURE__*/ jsx(SelectionFooterCell, {
-                                        stickyFirst: stickyFirst
-                                    }),
-                                    /*#__PURE__*/ jsx(ColumnCalcCells, {
-                                        columns: columns,
-                                        rows: sortedData,
-                                        selectable: !!selectable,
-                                        stickyFirst: stickyFirst,
-                                        stickyLast: resolvedStickyLast
-                                    })
-                                ]
-                            }),
-                            onAddRow && /*#__PURE__*/ jsx(AddRowFooter, {
-                                onAddRow: onAddRow,
-                                addRowLabel: addRowLabel,
-                                colSpan: totalCols,
-                                classNames: classNames
-                            })
-                        ]
+                            ]
+                        })
+                    }),
+                    selectable && /*#__PURE__*/ jsx(DataTableBulkBar, {
+                        clearLabel: clearSelectionLabel,
+                        aboveFooter: showFooter || !!onAddRow,
+                        children: bulkActions
                     })
-                }),
-                selectable && /*#__PURE__*/ jsx(DataTableBulkBar, {
-                    clearLabel: clearSelectionLabel,
-                    aboveFooter: showFooter || !!onAddRow,
-                    children: bulkActions
-                })
-            ]
+                ]
+            })
         })
     });
 }