@crispy-seed/data-table 0.10.2 → 0.10.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/data-table-recipe.css +31 -2
- package/dist/data-table-recipe.layered.css +35 -3
- package/dist/index.cjs +397 -72
- package/dist/index.d.ts +42 -42
- package/dist/index.js +397 -72
- package/dist/styles.css +35 -3
- package/package.json +1 -1
package/dist/index.js
CHANGED
|
@@ -17,6 +17,7 @@ import { checkmark } from '@seed-design/css/recipes/checkmark';
|
|
|
17
17
|
import { Checkbox, useCheckboxContext } from '@seed-design/react-checkbox';
|
|
18
18
|
import { useScaleFeedback } from '@seed-design/react-scale-feedback';
|
|
19
19
|
import { checkboxGroup } from '@seed-design/css/recipes/checkbox-group';
|
|
20
|
+
import { createPortal } from 'react-dom';
|
|
20
21
|
import { Image } from '@seed-design/react-image';
|
|
21
22
|
import { avatar } from '@seed-design/css/recipes/avatar';
|
|
22
23
|
import '@seed-design/css/recipes/avatar-stack';
|
|
@@ -2559,6 +2560,50 @@ const Badge = /*#__PURE__*/ forwardRef(({ className, children, ...props }, ref)=
|
|
|
2559
2560
|
});
|
|
2560
2561
|
Badge.displayName = "Badge";
|
|
2561
2562
|
|
|
2563
|
+
// Feature B rework (#8, chip-list display) -- the pure "how many chips fit" decision,
|
|
2564
|
+
// isolated from the DOM measuring that drives it (`cells.tsx`'s `ChipListCell`) the same
|
|
2565
|
+
// way `truncate.ts`/`filtering.ts` already split a pure calculation out of the styled
|
|
2566
|
+
// layer: this file touches no DOM, so the actual fitting algorithm is unit-testable with
|
|
2567
|
+
// plain numbers instead of a real laid-out browser.
|
|
2568
|
+
//
|
|
2569
|
+
// Attio's own chip-list cell (e.g. Categories: "Internet", "Broadcasting", "+7") shows as
|
|
2570
|
+
// many WHOLE chips as fit left-to-right, then one "+N" badge for the rest -- never a
|
|
2571
|
+
// chip clipped mid-render, never a second wrapped line. `ChipListCell` measures every
|
|
2572
|
+
// chip's real rendered width (font/padding-dependent, so it can't be estimated from
|
|
2573
|
+
// character count) plus the container's current width, then asks this function how many
|
|
2574
|
+
// of those chips it can show before the running total (chips + gaps + the badge itself)
|
|
2575
|
+
// would exceed the container.
|
|
2576
|
+
/**
|
|
2577
|
+
* `overflowBadgeWidth` is the WORST-CASE badge width the caller measured (e.g. the
|
|
2578
|
+
* width of a badge showing every tag: `+<chipWidths.length>`) rather than the width of
|
|
2579
|
+
* the badge for whatever count this call actually returns -- the real badge (fewer
|
|
2580
|
+
* digits once some chips DO fit) is never wider than that, so reserving the worst case
|
|
2581
|
+
* up front avoids a second measuring pass and always yields a result that fits. It may
|
|
2582
|
+
* slightly under-fill the row by the odd chip in a boundary case (e.g. "+9" vs "+10" --
|
|
2583
|
+
* one fewer digit than reserved), which is the deliberate trade against re-measuring per
|
|
2584
|
+
* candidate count.
|
|
2585
|
+
*/ function computeVisibleChipCount(chipWidths, containerWidth, gap, overflowBadgeWidth) {
|
|
2586
|
+
// An unmeasured/zero-width container (not yet laid out, e.g. `display: none` or a
|
|
2587
|
+
// pre-hydration frame) has no meaningful "fits" answer -- show everything rather than
|
|
2588
|
+
// collapsing every chip behind "+N" for a frame it'll never actually paint like that.
|
|
2589
|
+
if (containerWidth <= 0) return chipWidths.length;
|
|
2590
|
+
let used = 0;
|
|
2591
|
+
let count = 0;
|
|
2592
|
+
for(let index = 0; index < chipWidths.length; index++){
|
|
2593
|
+
const withGap = count > 0 ? gap : 0;
|
|
2594
|
+
const usedIfShown = used + withGap + chipWidths[index];
|
|
2595
|
+
const remainingAfterThis = chipWidths.length - (index + 1);
|
|
2596
|
+
// Every chip except the very last one needs room left over for the overflow badge
|
|
2597
|
+
// TOO (if it's going to exist at all) -- otherwise this loop would happily show
|
|
2598
|
+
// every chip except the last, then have nowhere left to put "+1".
|
|
2599
|
+
const badgeReserve = remainingAfterThis > 0 ? gap + overflowBadgeWidth : 0;
|
|
2600
|
+
if (usedIfShown + badgeReserve > containerWidth) break;
|
|
2601
|
+
used = usedIfShown;
|
|
2602
|
+
count++;
|
|
2603
|
+
}
|
|
2604
|
+
return count;
|
|
2605
|
+
}
|
|
2606
|
+
|
|
2562
2607
|
// Attio cell-type renderers, built from seed's own components -- not exported from
|
|
2563
2608
|
// the package's public surface (kept alongside DataTable.tsx as an implementation
|
|
2564
2609
|
// detail, the way Select keeps `InternalIcon` under `components/private`). Each
|
|
@@ -2773,19 +2818,125 @@ function StatusCell({ value }) {
|
|
|
2773
2818
|
className: className
|
|
2774
2819
|
});
|
|
2775
2820
|
}
|
|
2776
|
-
|
|
2777
|
-
|
|
2778
|
-
|
|
2779
|
-
|
|
2780
|
-
|
|
2821
|
+
// Feature B rework (#8) -- the chip-list DISPLAY row's own gap, mirrored from the
|
|
2822
|
+
// qvism recipe's `chipList` slot (`packages/qvism-preset/src/recipes/data-table.ts`'s
|
|
2823
|
+
// `CHIP_GAP`, measured live off Attio at 3px between chips). Kept as a literal here
|
|
2824
|
+
// too, same footnote as `CHIP_SWATCHES` above: this file and the recipe are two
|
|
2825
|
+
// independent sources for numbers that have to agree, not one importing the other
|
|
2826
|
+
// (react/AGENTS.md -- style stays in the recipe; this is the one JS-side computation,
|
|
2827
|
+
// `computeVisibleChipCount`, that needs the SAME number to size against).
|
|
2828
|
+
const CHIP_LIST_GAP_PX = 3;
|
|
2829
|
+
/** `type: "chip-list"` display -- every editable/non-editable chip-list cell renders
|
|
2830
|
+
* through this component for its REST state (editable: when its click-to-edit
|
|
2831
|
+
* popover, editors.tsx's `ChipListEditor`, isn't open; read-only: always). Attio's
|
|
2832
|
+
* own model (its Categories cell: "Internet", "Broadcasting", "+7") -- show as many
|
|
2833
|
+
* WHOLE chips as fit the cell's current width, then one "+N" badge for the rest,
|
|
2834
|
+
* never a chip clipped mid-render, never a second wrapped line, never overflowing
|
|
2835
|
+
* into a neighboring (possibly sticky) column. `body-cells.tsx`'s `isAlwaysLiveEditable`
|
|
2836
|
+
* no longer lists `chip-list` -- the always-live inline editor this replaced is what
|
|
2837
|
+
* produced exactly that overflow (crispy-seed's #1094).
|
|
2838
|
+
*
|
|
2839
|
+
* The fitting decision itself (`computeVisibleChipCount`, `chip-overflow.ts`) is pure
|
|
2840
|
+
* and unit-tested on its own; this component's only job is feeding it real measured
|
|
2841
|
+
* widths. Two widths need measuring that can't be estimated from character count
|
|
2842
|
+
* (font/padding-dependent): every chip's own rendered width, and the "+N" badge's
|
|
2843
|
+
* worst-case width (reserved for the FULL tag count, so the real badge -- fewer
|
|
2844
|
+
* digits once some chips fit -- never overflows what was reserved for it; see
|
|
2845
|
+
* `computeVisibleChipCount`'s own doc comment). Both are measured off a permanently
|
|
2846
|
+
* mounted, invisible copy (`visibility: hidden`, absolutely positioned so it never
|
|
2847
|
+
* affects layout -- `position: relative` on the `chipList` slot's own recipe rule
|
|
2848
|
+
* makes THIS element, not the `<td>` two levels up, its containing block, and the
|
|
2849
|
+
* `chipList` slot's own `overflow: hidden` clips it there too) -- kept mounted at ALL
|
|
2850
|
+
* times, not just while a `ResizeObserver` fires, because widening the column back
|
|
2851
|
+
* out needs to know the width of chips currently hidden behind "+N" to decide
|
|
2852
|
+
* whether they now fit again.
|
|
2853
|
+
*/ function ChipListCell({ value, className, chipClassName, overflowClassName }) {
|
|
2781
2854
|
const tags = Array.isArray(value) ? value.filter((tag)=>!!tag) : [];
|
|
2855
|
+
const containerRef = React.useRef(null);
|
|
2856
|
+
const measureRef = React.useRef(null);
|
|
2857
|
+
const overflowMeasureRef = React.useRef(null);
|
|
2858
|
+
const [visibleCount, setVisibleCount] = React.useState(tags.length);
|
|
2859
|
+
// Every tag joined into one string -- a stable primitive dependency for the effect
|
|
2860
|
+
// below, so it only re-measures when the actual tag SET changes, not on every
|
|
2861
|
+
// unrelated re-render of the row (a new `tags` array identity from a fresh
|
|
2862
|
+
// `getColumnValue` call on every render would otherwise re-run this every time).
|
|
2863
|
+
const tagsKey = tags.join("\u0000");
|
|
2864
|
+
// biome-ignore lint/correctness/useExhaustiveDependencies: `tagsKey` is a deliberate serialized proxy for `tags` (a fresh array identity every render would otherwise re-run this effect on every unrelated re-render) -- `tags` itself is intentionally excluded, and `tags.length` (referenced below, in the early-return branch) is already covered by `tagsKey` changing whenever the tag SET does, including a same-length rename/reorder that `tags.length` alone would miss.
|
|
2865
|
+
React.useLayoutEffect(()=>{
|
|
2866
|
+
const container = containerRef.current;
|
|
2867
|
+
const measure = measureRef.current;
|
|
2868
|
+
// No real layout to measure against (SSR, or a test environment with no layout
|
|
2869
|
+
// engine, e.g. this package's own `bun test` -- happy-dom lays out nothing, every
|
|
2870
|
+
// rect comes back zero) -- show every chip rather than a permanently-wrong "+N"
|
|
2871
|
+
// for a width this environment can never actually report.
|
|
2872
|
+
if (!container || !measure || typeof ResizeObserver === "undefined") {
|
|
2873
|
+
setVisibleCount(tags.length);
|
|
2874
|
+
return;
|
|
2875
|
+
}
|
|
2876
|
+
// Rebound to non-null consts (rather than a `!` assertion inside `recompute`
|
|
2877
|
+
// below) -- `container`/`measure` are already narrowed non-null here, and these
|
|
2878
|
+
// two bindings carry that narrowing into the closure without re-deriving it.
|
|
2879
|
+
const measuredContainer = container;
|
|
2880
|
+
const measuredList = measure;
|
|
2881
|
+
function recompute() {
|
|
2882
|
+
const chipWidths = Array.from(measuredList.children, (el)=>el.getBoundingClientRect().width);
|
|
2883
|
+
const overflowWidth = overflowMeasureRef.current?.getBoundingClientRect().width ?? 0;
|
|
2884
|
+
setVisibleCount(computeVisibleChipCount(chipWidths, measuredContainer.clientWidth, CHIP_LIST_GAP_PX, overflowWidth));
|
|
2885
|
+
}
|
|
2886
|
+
recompute();
|
|
2887
|
+
const observer = new ResizeObserver(recompute);
|
|
2888
|
+
observer.observe(container);
|
|
2889
|
+
return ()=>observer.disconnect();
|
|
2890
|
+
}, [
|
|
2891
|
+
tagsKey
|
|
2892
|
+
]);
|
|
2782
2893
|
if (!tags.length) return null;
|
|
2783
|
-
|
|
2894
|
+
const clampedVisible = Math.min(visibleCount, tags.length);
|
|
2895
|
+
const overflowCount = tags.length - clampedVisible;
|
|
2896
|
+
return /*#__PURE__*/ jsxs("span", {
|
|
2784
2897
|
className: className,
|
|
2785
|
-
|
|
2786
|
-
|
|
2787
|
-
|
|
2788
|
-
|
|
2898
|
+
ref: containerRef,
|
|
2899
|
+
children: [
|
|
2900
|
+
tags.slice(0, clampedVisible).map((tag)=>/*#__PURE__*/ jsx(SwatchChip, {
|
|
2901
|
+
value: tag,
|
|
2902
|
+
className: chipClassName
|
|
2903
|
+
}, tag)),
|
|
2904
|
+
overflowCount > 0 && /*#__PURE__*/ jsxs("span", {
|
|
2905
|
+
className: overflowClassName,
|
|
2906
|
+
children: [
|
|
2907
|
+
"+",
|
|
2908
|
+
overflowCount
|
|
2909
|
+
]
|
|
2910
|
+
}),
|
|
2911
|
+
/*#__PURE__*/ jsx("span", {
|
|
2912
|
+
ref: measureRef,
|
|
2913
|
+
"aria-hidden": "true",
|
|
2914
|
+
className: className,
|
|
2915
|
+
style: {
|
|
2916
|
+
position: "absolute",
|
|
2917
|
+
visibility: "hidden",
|
|
2918
|
+
pointerEvents: "none"
|
|
2919
|
+
},
|
|
2920
|
+
children: tags.map((tag)=>/*#__PURE__*/ jsx(SwatchChip, {
|
|
2921
|
+
value: tag,
|
|
2922
|
+
className: chipClassName
|
|
2923
|
+
}, tag))
|
|
2924
|
+
}),
|
|
2925
|
+
/*#__PURE__*/ jsxs("span", {
|
|
2926
|
+
ref: overflowMeasureRef,
|
|
2927
|
+
"aria-hidden": "true",
|
|
2928
|
+
className: overflowClassName,
|
|
2929
|
+
style: {
|
|
2930
|
+
position: "absolute",
|
|
2931
|
+
visibility: "hidden",
|
|
2932
|
+
pointerEvents: "none"
|
|
2933
|
+
},
|
|
2934
|
+
children: [
|
|
2935
|
+
"+",
|
|
2936
|
+
tags.length
|
|
2937
|
+
]
|
|
2938
|
+
})
|
|
2939
|
+
]
|
|
2789
2940
|
});
|
|
2790
2941
|
}
|
|
2791
2942
|
/**
|
|
@@ -3357,7 +3508,7 @@ const TextFieldTextarea = /*#__PURE__*/ forwardRef(({ className, autoresize = tr
|
|
|
3357
3508
|
});
|
|
3358
3509
|
TextFieldTextarea.displayName = "TextFieldTextarea";
|
|
3359
3510
|
|
|
3360
|
-
__insertCSS(".seed-data-table__root{box-sizing:border-box;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: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-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__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:10px;font-weight:var(--seed-font-weight-regular);line-height:22px;overflow:clip;text-overflow:ellipsis;white-space:nowrap}.seed-data-table__chipList{display:flex;align-items:center;flex-wrap:nowrap;gap:var(--seed-dimension-x1_5);overflow:hidden;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:var(--seed-radius-r5);box-shadow:inset 0 0 0 1px var(--seed-color-stroke-neutral-weak),var(--seed-shadow-s3);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 .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__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))}");
|
|
3511
|
+
__insertCSS(".seed-data-table__root{box-sizing:border-box;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: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__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:10px;font-weight:var(--seed-font-weight-regular);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:var(--seed-radius-r5);box-shadow:inset 0 0 0 1px var(--seed-color-stroke-neutral-weak),var(--seed-shadow-s3);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 .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__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))}");
|
|
3361
3512
|
|
|
3362
3513
|
const createClassName = (className, variants, compoundVariants = [])=>{
|
|
3363
3514
|
const variantKeys = Object.keys(variants);
|
|
@@ -3460,6 +3611,14 @@ const dataTableSlotNames = [
|
|
|
3460
3611
|
"chipList",
|
|
3461
3612
|
"seed-data-table__chipList"
|
|
3462
3613
|
],
|
|
3614
|
+
[
|
|
3615
|
+
"chipOverflow",
|
|
3616
|
+
"seed-data-table__chipOverflow"
|
|
3617
|
+
],
|
|
3618
|
+
[
|
|
3619
|
+
"chipListEditor",
|
|
3620
|
+
"seed-data-table__chipListEditor"
|
|
3621
|
+
],
|
|
3463
3622
|
[
|
|
3464
3623
|
"chipRemove",
|
|
3465
3624
|
"seed-data-table__chipRemove"
|
|
@@ -4063,20 +4222,31 @@ function RatingEditor({ column, value, pending, onCommit }) {
|
|
|
4063
4222
|
});
|
|
4064
4223
|
}
|
|
4065
4224
|
////////////////////////////////////////////////////////////////////////////////////
|
|
4066
|
-
// -- editable: "chip-list" (Feature B, #8) --
|
|
4067
|
-
//
|
|
4068
|
-
//
|
|
4069
|
-
//
|
|
4070
|
-
//
|
|
4071
|
-
//
|
|
4072
|
-
//
|
|
4073
|
-
//
|
|
4074
|
-
//
|
|
4075
|
-
//
|
|
4225
|
+
// -- editable: "chip-list" (Feature B rework, #8) -- click-to-edit, Attio's own model
|
|
4226
|
+
// rather than the always-live widget this replaced (crispy-seed#1094: every row
|
|
4227
|
+
// rendering a live add-tag editor at once overflowed the cell and collided with
|
|
4228
|
+
// sticky columns). `body-cells.tsx`'s `DataTableBodyCell` opens this INSIDE the
|
|
4229
|
+
// same anchored `CellExpandOverlay` Feature C already built for a gated editor's
|
|
4230
|
+
// expanded state, on a plain single click (no truncation gate, unlike every other
|
|
4231
|
+
// read-only cell's peek) -- clicking a short 2-tag cell must open the editor just
|
|
4232
|
+
// as readily as a 10-tag one. It stays open across MULTIPLE add/remove commits
|
|
4233
|
+
// (closes only on blur/outside-click/Escape, `DataTableBodyCell`'s own effect) by
|
|
4234
|
+
// NOT going through `useDataTableEdit`'s `isEditing` gate the way `SelectEditor`/
|
|
4235
|
+
// `TextEditor` do -- `commitEdit` closes `editingCell` the instant a SYNC commit
|
|
4236
|
+
// resolves (its own doc comment), which would have closed a gated chip editor
|
|
4237
|
+
// after the very first tag. `DataTableBodyCell` instead tracks THIS editor's own
|
|
4238
|
+
// open/closed state in its local `overlayOpen`, independent of `editingCell`.
|
|
4239
|
+
// Every add/remove still commits the FULL next array through the same one-string
|
|
4076
4240
|
// contract every other editor already uses (`useDataTableEdit`'s own doc
|
|
4077
|
-
// comment): `JSON.stringify(nextTags)`, which the consumer's `onEdit` parses
|
|
4078
|
-
//
|
|
4079
|
-
//
|
|
4241
|
+
// comment): `JSON.stringify(nextTags)`, which the consumer's `onEdit` parses back
|
|
4242
|
+
// -- crisp/GRC's contract stays "one string in, no typed union", not a second
|
|
4243
|
+
// commit shape invented for just this column.
|
|
4244
|
+
//
|
|
4245
|
+
// Renders through `classNames.chipListEditor`, NOT the read-only `chipList` slot
|
|
4246
|
+
// (cells.tsx's `ChipListCell`) -- the display row clips to one line with a "+N"
|
|
4247
|
+
// badge; this editor instead WRAPS onto as many lines as it needs inside the
|
|
4248
|
+
// overlay's own grow-in-height box, since every tag (plus the add-input) has to
|
|
4249
|
+
// stay visible and editable at once.
|
|
4080
4250
|
function ChipListEditor({ column, value, pending, onCommit, classNames }) {
|
|
4081
4251
|
const tags = Array.isArray(value) ? value.filter((tag)=>!!tag) : [];
|
|
4082
4252
|
const [draft, setDraft] = React.useState("");
|
|
@@ -4097,7 +4267,7 @@ function ChipListEditor({ column, value, pending, onCommit, classNames }) {
|
|
|
4097
4267
|
}
|
|
4098
4268
|
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.
|
|
4099
4269
|
/*#__PURE__*/ jsxs("span", {
|
|
4100
|
-
className: classNames.
|
|
4270
|
+
className: classNames.chipListEditor,
|
|
4101
4271
|
onClick: (event)=>event.stopPropagation(),
|
|
4102
4272
|
children: [
|
|
4103
4273
|
tags.map((tag)=>/*#__PURE__*/ jsx(SwatchChip, {
|
|
@@ -4115,6 +4285,8 @@ function ChipListEditor({ column, value, pending, onCommit, classNames }) {
|
|
|
4115
4285
|
})
|
|
4116
4286
|
}, tag)),
|
|
4117
4287
|
/*#__PURE__*/ jsx("input", {
|
|
4288
|
+
// 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.
|
|
4289
|
+
autoFocus: true,
|
|
4118
4290
|
className: classNames.chipInput,
|
|
4119
4291
|
value: draft,
|
|
4120
4292
|
disabled: pending,
|
|
@@ -4122,14 +4294,19 @@ function ChipListEditor({ column, value, pending, onCommit, classNames }) {
|
|
|
4122
4294
|
"aria-label": `Add tag to ${column.key}`,
|
|
4123
4295
|
onChange: (event)=>setDraft(event.target.value),
|
|
4124
4296
|
onKeyDown: (event)=>{
|
|
4297
|
+
// Escape is the ONE key this input must NOT stop propagation for: there is
|
|
4298
|
+
// no in-progress draft state worth clearing locally (every add/remove
|
|
4299
|
+
// already commits immediately), so it needs to bubble all the way to
|
|
4300
|
+
// `document` -- `DataTableBodyCell`'s own Escape listener is what actually
|
|
4301
|
+
// closes this popover. Every other key stops here, same as before, so it
|
|
4302
|
+
// never reaches the row's own click/keyboard handling.
|
|
4303
|
+
if (event.key === "Escape") return;
|
|
4125
4304
|
event.stopPropagation();
|
|
4126
4305
|
if (event.key === "Enter") {
|
|
4127
4306
|
event.preventDefault();
|
|
4128
4307
|
addTag();
|
|
4129
4308
|
} else if (event.key === "Backspace" && draft === "" && tags.length > 0) {
|
|
4130
4309
|
removeTag(tags[tags.length - 1]);
|
|
4131
|
-
} else if (event.key === "Escape") {
|
|
4132
|
-
setDraft("");
|
|
4133
4310
|
}
|
|
4134
4311
|
}
|
|
4135
4312
|
}),
|
|
@@ -4234,12 +4411,41 @@ function isCellTruncated(cell) {
|
|
|
4234
4411
|
/** `editable` + one of these shapes needs no double-click gate and no separate rest
|
|
4235
4412
|
* display -- interacting with the widget itself IS the commit gesture (crisp's own
|
|
4236
4413
|
* #453/#760/#761: `switch`/`rating`/`checkbox` never had a meaningfully different
|
|
4237
|
-
* "rest" state to show). `chip-list` (Feature B, #8)
|
|
4238
|
-
*
|
|
4239
|
-
*
|
|
4240
|
-
*
|
|
4414
|
+
* "rest" state to show). `chip-list` used to join them here (Feature B, #8) but no
|
|
4415
|
+
* longer does -- see `isChipListEditable` below, its own separate "click opens a
|
|
4416
|
+
* popover, closed the rest of the time" category, and `ChipListEditor`'s own doc
|
|
4417
|
+
* comment (editors.tsx) for why it isn't just the ordinary GATED (double-click)
|
|
4418
|
+
* shape either. Every other `editable` column opens on double-click. */ function isAlwaysLiveEditable(column) {
|
|
4241
4419
|
if (!column.editable) return false;
|
|
4242
|
-
return column.editor === "switch" || column.type === "rating" || column.type === "checkbox"
|
|
4420
|
+
return column.editor === "switch" || column.type === "rating" || column.type === "checkbox";
|
|
4421
|
+
}
|
|
4422
|
+
/** Feature B rework (#8) -- an editable `chip-list` column's own third category,
|
|
4423
|
+
* alongside `isAlwaysLiveEditable` (above) and the ordinary double-click GATED
|
|
4424
|
+
* shape: a single click (no truncation gate -- even a short, unclipped 2-tag cell
|
|
4425
|
+
* must open just as readily as a long one) opens `editors.tsx`'s `ChipListEditor`,
|
|
4426
|
+
* and it closes back to the plain `ChipListCell` display on blur/outside-click/
|
|
4427
|
+
* Escape (`DataTableBodyCell`'s own `overlayOpen`) -- never always-live
|
|
4428
|
+
* (crispy-seed#1094: that overflowed the cell and collided with sticky columns),
|
|
4429
|
+
* never simply GATED either (a `useDataTableEdit`-driven `isEditing` gate would
|
|
4430
|
+
* close itself after the first tag commits, see `ChipListEditor`'s own doc
|
|
4431
|
+
* comment).
|
|
4432
|
+
*
|
|
4433
|
+
* Unlike every OTHER open editor in this file, this one does NOT render inside
|
|
4434
|
+
* Feature C's `CellExpandOverlay` (an anchored box positioned relative to the
|
|
4435
|
+
* `<td>`, `position: absolute` against it) -- it renders through a REAL React
|
|
4436
|
+
* portal to `document.body` instead (`DataTableBodyCell`'s own `popoverStyle`).
|
|
4437
|
+
* Confirmed live, crispy-seed#1094's pinned-column follow-up: a `position: sticky`
|
|
4438
|
+
* `<td>` clips ANY descendant content that grows past its own box to the table's
|
|
4439
|
+
* scrollport, in EVERY browser tested, regardless of `overflow: visible` on every
|
|
4440
|
+
* element in between and regardless of how high its `z-index` is raised -- neither
|
|
4441
|
+
* of which is a stacking-context or overflow bug this file can fix from the
|
|
4442
|
+
* INSIDE. A portal sidesteps it entirely by not being a descendant of the sticky
|
|
4443
|
+
* `<td>` at all once mounted. The same sticky-clip almost certainly affects the
|
|
4444
|
+
* OTHER gated editors' `CellExpandOverlay` too when their own column is pinned,
|
|
4445
|
+
* but porting all of Feature C to this same portal model is its own change,
|
|
4446
|
+
* out of scope here -- this fix is scoped to the one editor crispy-seed#1094
|
|
4447
|
+
* actually reported against a pinned column. */ function isChipListEditable(column) {
|
|
4448
|
+
return !!column.editable && column.type === "chip-list";
|
|
4243
4449
|
}
|
|
4244
4450
|
function ColumnBodyCells({ columns, row, classNames, locale, selectable, stickyFirst, stickyLast }) {
|
|
4245
4451
|
const effective = useEffectiveColumns(columns, {
|
|
@@ -4269,8 +4475,13 @@ function ColumnBodyCells({ columns, row, classNames, locale, selectable, stickyF
|
|
|
4269
4475
|
* `ColumnBodyCells` keys it by `column.key` the same way it always keyed the bare
|
|
4270
4476
|
* `<DataTableCell>` before this split.
|
|
4271
4477
|
*/ function DataTableBodyCell({ column, row, classNames, locale, sticky }) {
|
|
4272
|
-
const { startEdit, isEditing, isPeeking, openPeek, closePeek } = useDataTableContext();
|
|
4478
|
+
const { startEdit, cancelEdit, isEditing, isPending, commitEdit, isPeeking, openPeek, closePeek } = useDataTableContext();
|
|
4273
4479
|
const cellRef = React.useRef(null);
|
|
4480
|
+
// Feature B rework (#8) -- the chip-list popover's own live position, in VIEWPORT
|
|
4481
|
+
// coordinates (`position: fixed`), since it portals to `document.body` rather than
|
|
4482
|
+
// anchoring inside the `<td>` (see `isChipListEditable`'s own doc comment for why).
|
|
4483
|
+
// `null` while closed -- nothing to portal yet.
|
|
4484
|
+
const [popoverStyle, setPopoverStyle] = React.useState(null);
|
|
4274
4485
|
// Feature C (#12) -- whether THIS activation (click or double-click) should
|
|
4275
4486
|
// render as the anchored overlay rather than plain inline. Frozen at the moment
|
|
4276
4487
|
// of activation (re-measured every time, never left stale) rather than derived
|
|
@@ -4280,20 +4491,68 @@ function ColumnBodyCells({ columns, row, classNames, locale, selectable, stickyF
|
|
|
4280
4491
|
// rendering exactly as it always has, not suddenly gain overlay chrome.
|
|
4281
4492
|
const [overlayOpen, setOverlayOpen] = React.useState(false);
|
|
4282
4493
|
const alwaysLive = isAlwaysLiveEditable(column);
|
|
4283
|
-
|
|
4284
|
-
//
|
|
4285
|
-
//
|
|
4286
|
-
//
|
|
4287
|
-
//
|
|
4288
|
-
//
|
|
4289
|
-
//
|
|
4290
|
-
|
|
4494
|
+
const chipListEditable = isChipListEditable(column);
|
|
4495
|
+
// A gated `editable` column (everything except the always-live widgets AND the
|
|
4496
|
+
// click-to-edit chip-list) opens on double-click -- Attio's own measured gesture
|
|
4497
|
+
// (crisp's #411), matched here rather than a single click, which stays "select
|
|
4498
|
+
// this cell" in crisp's own spreadsheet model and would otherwise be
|
|
4499
|
+
// indistinguishable from this table's plain row click. Feature C ADDS a single
|
|
4500
|
+
// click as a SECOND way in, but only when the cell's content is actually
|
|
4501
|
+
// truncated (see `handleClick` below) -- double-click keeps working
|
|
4502
|
+
// unconditionally, same as before this feature.
|
|
4503
|
+
const gated = column.editable && !alwaysLive && !chipListEditable;
|
|
4504
|
+
// This cell's chip-list popover is showing right now -- `overlayOpen` alone isn't
|
|
4505
|
+
// enough (it's shared with the read-only peek/gated-edit cases below), so this
|
|
4506
|
+
// ANDs in "is this actually a chip-list column" too. Gates the portal render
|
|
4507
|
+
// below (`popoverStyle` is only ever non-null while this is true).
|
|
4508
|
+
const chipListEditorOpen = chipListEditable && overlayOpen;
|
|
4509
|
+
// Feature B rework (#8) -- the chip-list popover's own position, read off the
|
|
4510
|
+
// `<td>`'s LIVE `getBoundingClientRect()` (viewport coordinates, matching
|
|
4511
|
+
// `position: fixed`) rather than anything Feature C's `pinOffset`/sticky math
|
|
4512
|
+
// already tracks -- those describe offsets WITHIN the scrolling table, not where
|
|
4513
|
+
// the cell actually sits in the viewport right now, which is what a portaled,
|
|
4514
|
+
// `position: fixed` box anchored below the cell needs.
|
|
4515
|
+
const measurePopoverPosition = React.useCallback(()=>{
|
|
4516
|
+
const cell = cellRef.current;
|
|
4517
|
+
if (!cell) return;
|
|
4518
|
+
const rect = cell.getBoundingClientRect();
|
|
4519
|
+
setPopoverStyle({
|
|
4520
|
+
position: "fixed",
|
|
4521
|
+
top: rect.bottom,
|
|
4522
|
+
insetInlineStart: rect.left,
|
|
4523
|
+
insetInlineEnd: "auto",
|
|
4524
|
+
minWidth: rect.width,
|
|
4525
|
+
// Both override the SAME `expandOverlay` class properties this box also
|
|
4526
|
+
// carries (`className={classNames.expandOverlay}`, below) -- that class's
|
|
4527
|
+
// `minHeight: calc(100% + 2px)` resolves against an ANCHORED box's own
|
|
4528
|
+
// containing block (the `<td>`, ~36px), which is meaningless (and would
|
|
4529
|
+
// resolve against the VIEWPORT instead, ~100% of the page's height) for a
|
|
4530
|
+
// portaled `position: fixed` box; `auto` lets the content size it instead.
|
|
4531
|
+
// `zIndex: 10` is Feature C's own value for an in-place overlay competing
|
|
4532
|
+
// only with OTHER table content -- a portal to `document.body` can land
|
|
4533
|
+
// beside arbitrary page chrome (this Storybook's own toolbar, a consuming
|
|
4534
|
+
// app's header), so it gets a value comfortably above typical page chrome.
|
|
4535
|
+
minHeight: "auto",
|
|
4536
|
+
zIndex: 1000
|
|
4537
|
+
});
|
|
4538
|
+
}, []);
|
|
4291
4539
|
function handleDoubleClick(event) {
|
|
4292
4540
|
if (!gated) return;
|
|
4293
4541
|
setOverlayOpen(isCellTruncated(event.currentTarget));
|
|
4294
4542
|
startEdit(row.id, column.key);
|
|
4295
4543
|
}
|
|
4296
4544
|
function handleClick(event) {
|
|
4545
|
+
if (chipListEditable) {
|
|
4546
|
+
// Attio's own chip-list gesture: click opens the editor regardless of
|
|
4547
|
+
// truncation -- a short, fully-visible 2-tag cell opens just as readily as
|
|
4548
|
+
// one already showing "+N". Must not also reach the row's own `onRowClick`,
|
|
4549
|
+
// same reasoning as the read-only peek/preview-button cases below.
|
|
4550
|
+
event.stopPropagation();
|
|
4551
|
+
measurePopoverPosition();
|
|
4552
|
+
setOverlayOpen(true);
|
|
4553
|
+
startEdit(row.id, column.key);
|
|
4554
|
+
return;
|
|
4555
|
+
}
|
|
4297
4556
|
if (!isCellTruncated(event.currentTarget)) return;
|
|
4298
4557
|
if (gated) {
|
|
4299
4558
|
setOverlayOpen(true);
|
|
@@ -4301,7 +4560,7 @@ function ColumnBodyCells({ columns, row, classNames, locale, selectable, stickyF
|
|
|
4301
4560
|
} else if (alwaysLive) {
|
|
4302
4561
|
// No separate open/edit state to start -- the always-live widget already
|
|
4303
4562
|
// renders unconditionally; this only switches ITS OWN box to the anchored
|
|
4304
|
-
// overlay so a long
|
|
4563
|
+
// overlay so a long value (etc.) gets room to show in full.
|
|
4305
4564
|
setOverlayOpen(true);
|
|
4306
4565
|
} else {
|
|
4307
4566
|
// Read-only truncated cell: this click's only job is opening the peek
|
|
@@ -4314,25 +4573,39 @@ function ColumnBodyCells({ columns, row, classNames, locale, selectable, stickyF
|
|
|
4314
4573
|
openPeek(row.id, column.key);
|
|
4315
4574
|
}
|
|
4316
4575
|
}
|
|
4576
|
+
// Feature B rework (#8) -- the portaled popover's own DOM node. Read by the
|
|
4577
|
+
// outside-click detector below (it lives outside `cellRef`'s subtree once
|
|
4578
|
+
// mounted, in `document.body` -- see `isChipListEditable`'s doc comment) and by
|
|
4579
|
+
// the reposition effect further down.
|
|
4580
|
+
const popoverRef = React.useRef(null);
|
|
4317
4581
|
// Closes the overlay on Escape or an outside click/pointerdown -- a gated
|
|
4318
4582
|
// editor's OWN Escape/blur handling already ends `isEditing` on its own (see
|
|
4319
4583
|
// `TextEditor`/`SelectEditor`'s existing onCancel/onOpenChange wiring), which
|
|
4320
4584
|
// alone is enough to hide a GATED cell's overlay (its render below is gated on
|
|
4321
|
-
// `isEditing` too); this listener is what the PEEK
|
|
4322
|
-
// since
|
|
4323
|
-
// `overlayOpen` on its own.
|
|
4585
|
+
// `isEditing` too); this listener is what the PEEK, ALWAYS-LIVE and chip-list-edit
|
|
4586
|
+
// cases need, since none of them has any other mechanism that ever calls
|
|
4587
|
+
// `closePeek`/`cancelEdit`/resets `overlayOpen` on its own. `cancelEdit()` is a
|
|
4588
|
+
// no-op for the peek/always-live cases (there is no `editingCell` to clear) and is
|
|
4589
|
+
// what actually ends the chip-list editor's own `startEdit` call above.
|
|
4324
4590
|
React.useEffect(()=>{
|
|
4325
4591
|
if (!overlayOpen) return;
|
|
4592
|
+
function isInside(target) {
|
|
4593
|
+
return (cellRef.current?.contains(target) ?? false) || (popoverRef.current?.contains(target) ?? false);
|
|
4594
|
+
}
|
|
4326
4595
|
function handlePointerDown(event) {
|
|
4327
|
-
if (
|
|
4596
|
+
if (!isInside(event.target)) {
|
|
4328
4597
|
setOverlayOpen(false);
|
|
4598
|
+
setPopoverStyle(null);
|
|
4329
4599
|
closePeek();
|
|
4600
|
+
cancelEdit();
|
|
4330
4601
|
}
|
|
4331
4602
|
}
|
|
4332
4603
|
function handleKeyDown(event) {
|
|
4333
4604
|
if (event.key !== "Escape") return;
|
|
4334
4605
|
setOverlayOpen(false);
|
|
4606
|
+
setPopoverStyle(null);
|
|
4335
4607
|
closePeek();
|
|
4608
|
+
cancelEdit();
|
|
4336
4609
|
}
|
|
4337
4610
|
document.addEventListener("pointerdown", handlePointerDown);
|
|
4338
4611
|
document.addEventListener("keydown", handleKeyDown);
|
|
@@ -4342,27 +4615,70 @@ function ColumnBodyCells({ columns, row, classNames, locale, selectable, stickyF
|
|
|
4342
4615
|
};
|
|
4343
4616
|
}, [
|
|
4344
4617
|
overlayOpen,
|
|
4345
|
-
closePeek
|
|
4618
|
+
closePeek,
|
|
4619
|
+
cancelEdit
|
|
4620
|
+
]);
|
|
4621
|
+
// Feature B rework (#8) -- keeps the portaled popover glued to its cell while
|
|
4622
|
+
// open: any scroll on ANY ancestor (the table's own horizontal/vertical
|
|
4623
|
+
// `scrollArea`, or the page itself) or a viewport resize re-measures. `scroll`
|
|
4624
|
+
// doesn't bubble, so this listens in the CAPTURE phase on `window` -- the
|
|
4625
|
+
// standard way to observe a scroll on an arbitrary descendant scroll container
|
|
4626
|
+
// without knowing which element it is ahead of time.
|
|
4627
|
+
React.useEffect(()=>{
|
|
4628
|
+
if (!chipListEditorOpen) return;
|
|
4629
|
+
function reposition() {
|
|
4630
|
+
measurePopoverPosition();
|
|
4631
|
+
}
|
|
4632
|
+
window.addEventListener("scroll", reposition, true);
|
|
4633
|
+
window.addEventListener("resize", reposition);
|
|
4634
|
+
return ()=>{
|
|
4635
|
+
window.removeEventListener("scroll", reposition, true);
|
|
4636
|
+
window.removeEventListener("resize", reposition);
|
|
4637
|
+
};
|
|
4638
|
+
}, [
|
|
4639
|
+
chipListEditorOpen,
|
|
4640
|
+
measurePopoverPosition
|
|
4346
4641
|
]);
|
|
4347
4642
|
const overlayActive = overlayOpen && (alwaysLive || isEditing(row.id, column.key) || isPeeking(row.id, column.key));
|
|
4348
|
-
|
|
4349
|
-
|
|
4350
|
-
|
|
4351
|
-
|
|
4352
|
-
|
|
4353
|
-
|
|
4354
|
-
|
|
4355
|
-
|
|
4356
|
-
|
|
4357
|
-
|
|
4358
|
-
|
|
4359
|
-
|
|
4360
|
-
|
|
4361
|
-
|
|
4362
|
-
|
|
4363
|
-
|
|
4364
|
-
|
|
4365
|
-
|
|
4643
|
+
const rawValue = getColumnValue(column, row);
|
|
4644
|
+
const pending = isPending(row.id, column.key);
|
|
4645
|
+
return /*#__PURE__*/ jsxs(Fragment, {
|
|
4646
|
+
children: [
|
|
4647
|
+
/*#__PURE__*/ jsx(DataTableCell, {
|
|
4648
|
+
ref: cellRef,
|
|
4649
|
+
"data-numeric": dataAttr(column.type === "number" || column.type === "currency"),
|
|
4650
|
+
"data-editable": dataAttr(!!column.editable),
|
|
4651
|
+
"data-sticky": sticky["data-sticky"],
|
|
4652
|
+
"data-sticky-edge": sticky["data-sticky-edge"],
|
|
4653
|
+
"data-sticky-edge-end": sticky["data-sticky-edge-end"],
|
|
4654
|
+
"data-overlay-open": dataAttr(overlayActive),
|
|
4655
|
+
style: sticky.style,
|
|
4656
|
+
onClick: handleClick,
|
|
4657
|
+
onDoubleClick: handleDoubleClick,
|
|
4658
|
+
children: /*#__PURE__*/ jsx(CellContent, {
|
|
4659
|
+
column: column,
|
|
4660
|
+
row: row,
|
|
4661
|
+
rowId: row.id,
|
|
4662
|
+
classNames: classNames,
|
|
4663
|
+
locale: locale,
|
|
4664
|
+
overlayActive: overlayActive
|
|
4665
|
+
})
|
|
4666
|
+
}),
|
|
4667
|
+
chipListEditorOpen && popoverStyle && /*#__PURE__*/ createPortal(// biome-ignore lint/a11y/noStaticElementInteractions: not a widget -- same shape as `CellExpandOverlay` (editors.tsx), which this box is a portaled variant of: it never responds to interaction on ITSELF, only stops propagation of clicks that already occurred on a real interactive descendant (the editor's input/remove buttons). No role fits it because it isn't a control.
|
|
4668
|
+
/*#__PURE__*/ jsx("div", {
|
|
4669
|
+
ref: popoverRef,
|
|
4670
|
+
className: classNames.expandOverlay,
|
|
4671
|
+
style: popoverStyle,
|
|
4672
|
+
onClick: (event)=>event.stopPropagation(),
|
|
4673
|
+
children: /*#__PURE__*/ jsx(ChipListEditor, {
|
|
4674
|
+
column: column,
|
|
4675
|
+
value: resolveEditValue(column, row, rawValue),
|
|
4676
|
+
pending: pending,
|
|
4677
|
+
onCommit: (value)=>commitEdit(row.id, column.key, value),
|
|
4678
|
+
classNames: classNames
|
|
4679
|
+
})
|
|
4680
|
+
}), document.body)
|
|
4681
|
+
]
|
|
4366
4682
|
});
|
|
4367
4683
|
}
|
|
4368
4684
|
/**
|
|
@@ -4402,12 +4718,18 @@ function ColumnBodyCells({ columns, row, classNames, locale, selectable, stickyF
|
|
|
4402
4718
|
onCommit: commit
|
|
4403
4719
|
});
|
|
4404
4720
|
} else if (column.editable && column.type === "chip-list") {
|
|
4405
|
-
|
|
4406
|
-
|
|
4407
|
-
|
|
4408
|
-
|
|
4409
|
-
|
|
4410
|
-
|
|
4721
|
+
// Feature B rework (#8) -- this column ALWAYS dispatches here to the plain
|
|
4722
|
+
// display (never to `DisplayCellContent`'s own read-only `chip-list` case,
|
|
4723
|
+
// never through the generic `isEditing` branch below): the click-to-edit
|
|
4724
|
+
// popover is a separate portal `DataTableBodyCell` renders alongside this
|
|
4725
|
+
// whole `<td>`, not a `node` this function returns -- see `isChipListEditable`'s
|
|
4726
|
+
// own doc comment (body-cells.tsx) for why it isn't anchored in place like
|
|
4727
|
+
// every other editor here.
|
|
4728
|
+
node = /*#__PURE__*/ jsx(ChipListCell, {
|
|
4729
|
+
value: rawValue,
|
|
4730
|
+
className: classNames.chipList,
|
|
4731
|
+
chipClassName: classNames.chip,
|
|
4732
|
+
overflowClassName: classNames.chipOverflow
|
|
4411
4733
|
});
|
|
4412
4734
|
} else if (column.editable && isEditing(rowId, column.key)) {
|
|
4413
4735
|
if (column.editor === "select") {
|
|
@@ -4516,10 +4838,13 @@ function DisplayCellContent({ column, row, value, classNames, locale }) {
|
|
|
4516
4838
|
className: classNames.chip
|
|
4517
4839
|
});
|
|
4518
4840
|
case "chip-list":
|
|
4841
|
+
// Non-editable chip-list only -- an editable one is fully handled by
|
|
4842
|
+
// `CellContent`'s own dedicated branch above and never reaches here.
|
|
4519
4843
|
return /*#__PURE__*/ jsx(ChipListCell, {
|
|
4520
4844
|
value: value,
|
|
4521
4845
|
className: classNames.chipList,
|
|
4522
|
-
chipClassName: classNames.chip
|
|
4846
|
+
chipClassName: classNames.chip,
|
|
4847
|
+
overflowClassName: classNames.chipOverflow
|
|
4523
4848
|
});
|
|
4524
4849
|
case "number":
|
|
4525
4850
|
return /*#__PURE__*/ jsx(Fragment, {
|