@crispy-seed/data-table 0.5.0 → 0.7.0
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 -0
- package/dist/data-table-recipe.layered.css +35 -0
- package/dist/index.cjs +779 -30
- package/dist/index.d.ts +222 -2
- package/dist/index.js +779 -32
- package/dist/record-preview-recipe.css +227 -0
- package/dist/record-preview-recipe.layered.css +263 -0
- package/dist/resizable-panel-recipe.css +132 -0
- package/dist/resizable-panel-recipe.layered.css +159 -0
- package/dist/styles.css +522 -67
- package/package.json +7 -2
package/dist/index.cjs
CHANGED
|
@@ -55,7 +55,7 @@ function _interopNamespace(e) {
|
|
|
55
55
|
var React__namespace = /*#__PURE__*/_interopNamespace(React);
|
|
56
56
|
|
|
57
57
|
// src/IconArrowUpLine.tsx
|
|
58
|
-
var Icon$
|
|
58
|
+
var Icon$h = ({ size = 24, ...props }, ref)=>/* @__PURE__ */ jsxRuntime.jsx("svg", {
|
|
59
59
|
viewBox: "0 0 24 24",
|
|
60
60
|
fill: "none",
|
|
61
61
|
xmlns: "http://www.w3.org/2000/svg",
|
|
@@ -73,11 +73,11 @@ var Icon$f = ({ size = 24, ...props }, ref)=>/* @__PURE__ */ jsxRuntime.jsx("svg
|
|
|
73
73
|
})
|
|
74
74
|
})
|
|
75
75
|
});
|
|
76
|
-
var IconArrowUpLine = /*#__PURE__*/ React.forwardRef(Icon$
|
|
76
|
+
var IconArrowUpLine = /*#__PURE__*/ React.forwardRef(Icon$h);
|
|
77
77
|
var IconArrowUpLine_default = IconArrowUpLine;
|
|
78
78
|
|
|
79
79
|
// src/IconArrowDownLine.tsx
|
|
80
|
-
var Icon$
|
|
80
|
+
var Icon$g = ({ size = 24, ...props }, ref)=>/* @__PURE__ */ jsxRuntime.jsx("svg", {
|
|
81
81
|
viewBox: "0 0 24 24",
|
|
82
82
|
fill: "none",
|
|
83
83
|
xmlns: "http://www.w3.org/2000/svg",
|
|
@@ -95,11 +95,33 @@ var Icon$e = ({ size = 24, ...props }, ref)=>/* @__PURE__ */ jsxRuntime.jsx("svg
|
|
|
95
95
|
})
|
|
96
96
|
})
|
|
97
97
|
});
|
|
98
|
-
var IconArrowDownLine = /*#__PURE__*/ React.forwardRef(Icon$
|
|
98
|
+
var IconArrowDownLine = /*#__PURE__*/ React.forwardRef(Icon$g);
|
|
99
99
|
var IconArrowDownLine_default = IconArrowDownLine;
|
|
100
100
|
|
|
101
|
+
// src/IconArrowUpRightLine.tsx
|
|
102
|
+
var Icon$f = ({ size = 24, ...props }, ref)=>/* @__PURE__ */ jsxRuntime.jsx("svg", {
|
|
103
|
+
viewBox: "0 0 24 24",
|
|
104
|
+
fill: "none",
|
|
105
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
106
|
+
"data-seed-icon": "true",
|
|
107
|
+
width: size,
|
|
108
|
+
height: size,
|
|
109
|
+
ref,
|
|
110
|
+
...props,
|
|
111
|
+
children: /* @__PURE__ */ jsxRuntime.jsx("g", {
|
|
112
|
+
children: /* @__PURE__ */ jsxRuntime.jsx("path", {
|
|
113
|
+
fillRule: "evenodd",
|
|
114
|
+
clipRule: "evenodd",
|
|
115
|
+
d: "M20.0005 19C20.5505 19 21.0005 18.55 21.0005 18V4C21.0005 3.45 20.5505 3 20.0005 3H6.00055C5.45055 3 5.00055 3.45 5.00055 4C5.00055 4.55 5.45055 5 6.00055 5H17.6005L3.29055 19.29C2.90055 19.68 2.90055 20.31 3.29055 20.7C3.68055 21.09 4.31055 21.09 4.70055 20.7L19.0005 6.43V18C19.0005 18.55 19.4505 19 20.0005 19Z",
|
|
116
|
+
fill: "currentColor"
|
|
117
|
+
})
|
|
118
|
+
})
|
|
119
|
+
});
|
|
120
|
+
var IconArrowUpRightLine = /*#__PURE__*/ React.forwardRef(Icon$f);
|
|
121
|
+
var IconArrowUpRightLine_default = IconArrowUpRightLine;
|
|
122
|
+
|
|
101
123
|
// src/IconArrowUpArrowDownLine.tsx
|
|
102
|
-
var Icon$
|
|
124
|
+
var Icon$e = ({ size = 24, ...props }, ref)=>/* @__PURE__ */ jsxRuntime.jsx("svg", {
|
|
103
125
|
viewBox: "0 0 24 24",
|
|
104
126
|
fill: "none",
|
|
105
127
|
xmlns: "http://www.w3.org/2000/svg",
|
|
@@ -123,11 +145,11 @@ var Icon$d = ({ size = 24, ...props }, ref)=>/* @__PURE__ */ jsxRuntime.jsx("svg
|
|
|
123
145
|
})
|
|
124
146
|
})
|
|
125
147
|
});
|
|
126
|
-
var IconArrowUpArrowDownLine = /*#__PURE__*/ React.forwardRef(Icon$
|
|
148
|
+
var IconArrowUpArrowDownLine = /*#__PURE__*/ React.forwardRef(Icon$e);
|
|
127
149
|
var IconArrowUpArrowDownLine_default = IconArrowUpArrowDownLine;
|
|
128
150
|
|
|
129
151
|
// src/IconChevronDownLine.tsx
|
|
130
|
-
var Icon$
|
|
152
|
+
var Icon$d = ({ size = 24, ...props }, ref)=>/* @__PURE__ */ jsxRuntime.jsx("svg", {
|
|
131
153
|
viewBox: "0 0 24 24",
|
|
132
154
|
fill: "none",
|
|
133
155
|
xmlns: "http://www.w3.org/2000/svg",
|
|
@@ -145,11 +167,11 @@ var Icon$c = ({ size = 24, ...props }, ref)=>/* @__PURE__ */ jsxRuntime.jsx("svg
|
|
|
145
167
|
})
|
|
146
168
|
})
|
|
147
169
|
});
|
|
148
|
-
var IconChevronDownLine = /*#__PURE__*/ React.forwardRef(Icon$
|
|
170
|
+
var IconChevronDownLine = /*#__PURE__*/ React.forwardRef(Icon$d);
|
|
149
171
|
var IconChevronDownLine_default = IconChevronDownLine;
|
|
150
172
|
|
|
151
173
|
// src/IconChevronUpLine.tsx
|
|
152
|
-
var Icon$
|
|
174
|
+
var Icon$c = ({ size = 24, ...props }, ref)=>/* @__PURE__ */ jsxRuntime.jsx("svg", {
|
|
153
175
|
viewBox: "0 0 24 24",
|
|
154
176
|
fill: "none",
|
|
155
177
|
xmlns: "http://www.w3.org/2000/svg",
|
|
@@ -167,11 +189,11 @@ var Icon$b = ({ size = 24, ...props }, ref)=>/* @__PURE__ */ jsxRuntime.jsx("svg
|
|
|
167
189
|
})
|
|
168
190
|
})
|
|
169
191
|
});
|
|
170
|
-
var IconChevronUpLine = /*#__PURE__*/ React.forwardRef(Icon$
|
|
192
|
+
var IconChevronUpLine = /*#__PURE__*/ React.forwardRef(Icon$c);
|
|
171
193
|
var IconChevronUpLine_default = IconChevronUpLine;
|
|
172
194
|
|
|
173
195
|
// src/IconDot3HorizontalLine.tsx
|
|
174
|
-
var Icon$
|
|
196
|
+
var Icon$b = ({ size = 24, ...props }, ref)=>/* @__PURE__ */ jsxRuntime.jsx("svg", {
|
|
175
197
|
viewBox: "0 0 24 24",
|
|
176
198
|
fill: "none",
|
|
177
199
|
xmlns: "http://www.w3.org/2000/svg",
|
|
@@ -199,9 +221,37 @@ var Icon$a = ({ size = 24, ...props }, ref)=>/* @__PURE__ */ jsxRuntime.jsx("svg
|
|
|
199
221
|
})
|
|
200
222
|
})
|
|
201
223
|
});
|
|
202
|
-
var IconDot3HorizontalLine = /*#__PURE__*/ React.forwardRef(Icon$
|
|
224
|
+
var IconDot3HorizontalLine = /*#__PURE__*/ React.forwardRef(Icon$b);
|
|
203
225
|
var IconDot3HorizontalLine_default = IconDot3HorizontalLine;
|
|
204
226
|
|
|
227
|
+
// src/IconEyeLine.tsx
|
|
228
|
+
var Icon$a = ({ size = 24, ...props }, ref)=>/* @__PURE__ */ jsxRuntime.jsx("svg", {
|
|
229
|
+
viewBox: "0 0 24 24",
|
|
230
|
+
fill: "none",
|
|
231
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
232
|
+
"data-seed-icon": "true",
|
|
233
|
+
width: size,
|
|
234
|
+
height: size,
|
|
235
|
+
ref,
|
|
236
|
+
...props,
|
|
237
|
+
children: /* @__PURE__ */ jsxRuntime.jsx("g", {
|
|
238
|
+
children: /* @__PURE__ */ jsxRuntime.jsxs("g", {
|
|
239
|
+
children: [
|
|
240
|
+
/* @__PURE__ */ jsxRuntime.jsx("path", {
|
|
241
|
+
d: "M1.68785 14.0027C2.21223 14.1751 2.77712 13.8901 2.94996 13.3659C3.07236 13.0089 3.23163 12.663 3.39915 12.3254C3.7229 11.6731 4.22663 10.8054 4.94433 9.94191C6.3729 8.22305 8.6137 6.55273 12.0003 6.55273C15.3868 6.55273 17.6276 8.22305 19.0562 9.94191C19.7739 10.8054 20.2776 11.6731 20.6014 12.3254C20.7627 12.6505 20.8778 12.9189 20.9513 13.1024C21.0036 13.233 21.0295 13.302 21.0509 13.3669C21.2241 13.8904 21.7886 14.175 22.3127 14.0027C22.8373 13.8301 23.1225 13.264 22.9499 12.7394C22.9158 12.6366 22.8793 12.5369 22.8078 12.3586C22.717 12.1319 22.5805 11.8144 22.3929 11.4363C22.0187 10.6824 21.435 9.67502 20.5943 8.66356C18.9062 6.63242 16.147 4.55273 12.0003 4.55273C7.8535 4.55273 5.09431 6.63242 3.40621 8.66356C2.56557 9.67502 1.9818 10.6824 1.60765 11.4363C1.42001 11.8144 1.28353 12.1319 1.1927 12.3586C1.12106 12.5374 1.08448 12.6372 1.05033 12.7403C0.877781 13.2649 1.16321 13.8301 1.68785 14.0027Z",
|
|
242
|
+
fill: "currentColor"
|
|
243
|
+
}),
|
|
244
|
+
/* @__PURE__ */ jsxRuntime.jsx("path", {
|
|
245
|
+
d: "M12.576 9.10187C12.7569 9.46282 12.7029 9.89712 12.4393 10.2029C12.0675 10.634 11.8429 11.1792 11.8429 11.7727C11.8429 13.0923 12.9123 14.1613 14.2263 14.1613C14.8331 14.1613 15.3926 13.9188 15.8177 13.522C16.1163 13.2434 16.5544 13.1743 16.9243 13.3476C17.2941 13.5209 17.5214 13.9017 17.4984 14.3095C17.3348 17.2106 15.0545 19.5498 12.0068 19.5498C8.94739 19.5498 6.5 16.9571 6.5 14.0363C6.5 11.1187 8.76722 8.75104 11.6123 8.55225C12.015 8.52411 12.3952 8.74091 12.576 9.10187Z",
|
|
246
|
+
fill: "currentColor"
|
|
247
|
+
})
|
|
248
|
+
]
|
|
249
|
+
})
|
|
250
|
+
})
|
|
251
|
+
});
|
|
252
|
+
var IconEyeLine = /*#__PURE__*/ React.forwardRef(Icon$a);
|
|
253
|
+
var IconEyeLine_default = IconEyeLine;
|
|
254
|
+
|
|
205
255
|
// src/IconMagnifyingglassLine.tsx
|
|
206
256
|
var Icon$9 = ({ size = 24, ...props }, ref)=>/* @__PURE__ */ jsxRuntime.jsx("svg", {
|
|
207
257
|
viewBox: "0 0 24 24",
|
|
@@ -2503,7 +2553,7 @@ function formatDateTimeCell(value, locale) {
|
|
|
2503
2553
|
minute: "2-digit"
|
|
2504
2554
|
}).format(date);
|
|
2505
2555
|
}
|
|
2506
|
-
function EntityCell({ value, className, nameClassName }) {
|
|
2556
|
+
function EntityCell({ value, className, nameClassName, actionsClassName, actionClassName, column, row, openPreviewLabel }) {
|
|
2507
2557
|
const entity = typeof value === "object" && value !== null ? value : {
|
|
2508
2558
|
name: String(value ?? "")
|
|
2509
2559
|
};
|
|
@@ -2526,6 +2576,21 @@ function EntityCell({ value, className, nameClassName }) {
|
|
|
2526
2576
|
/*#__PURE__*/ jsxRuntime.jsx("span", {
|
|
2527
2577
|
className: nameClassName,
|
|
2528
2578
|
children: entity.name
|
|
2579
|
+
}),
|
|
2580
|
+
column?.onOpenPreview && row !== undefined && /*#__PURE__*/ jsxRuntime.jsx("span", {
|
|
2581
|
+
className: actionsClassName,
|
|
2582
|
+
children: /*#__PURE__*/ jsxRuntime.jsx("button", {
|
|
2583
|
+
type: "button",
|
|
2584
|
+
className: actionClassName,
|
|
2585
|
+
"aria-label": openPreviewLabel ?? "Open preview",
|
|
2586
|
+
onClick: (event)=>{
|
|
2587
|
+
event.stopPropagation();
|
|
2588
|
+
column.onOpenPreview?.(row);
|
|
2589
|
+
},
|
|
2590
|
+
children: /*#__PURE__*/ jsxRuntime.jsx(IconEyeLine_default, {
|
|
2591
|
+
size: 16
|
|
2592
|
+
})
|
|
2593
|
+
})
|
|
2529
2594
|
})
|
|
2530
2595
|
]
|
|
2531
2596
|
});
|
|
@@ -3084,7 +3149,7 @@ const TextFieldTextarea = /*#__PURE__*/ React.forwardRef(({ className, autoresiz
|
|
|
3084
3149
|
});
|
|
3085
3150
|
TextFieldTextarea.displayName = "TextFieldTextarea";
|
|
3086
3151
|
|
|
3087
|
-
__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__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__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))}");
|
|
3152
|
+
__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}.seed-data-table__entityActions:focus-within,tr:hover .seed-data-table__entityActions{opacity:1}.seed-data-table__entityAction{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;margin:0;padding:0;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}.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__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))}");
|
|
3088
3153
|
|
|
3089
3154
|
const createClassName = (className, variants, compoundVariants = [])=>{
|
|
3090
3155
|
const variantKeys = Object.keys(variants);
|
|
@@ -3179,6 +3244,14 @@ const dataTableSlotNames = [
|
|
|
3179
3244
|
"link",
|
|
3180
3245
|
"seed-data-table__link"
|
|
3181
3246
|
],
|
|
3247
|
+
[
|
|
3248
|
+
"entityActions",
|
|
3249
|
+
"seed-data-table__entityActions"
|
|
3250
|
+
],
|
|
3251
|
+
[
|
|
3252
|
+
"entityAction",
|
|
3253
|
+
"seed-data-table__entityAction"
|
|
3254
|
+
],
|
|
3182
3255
|
[
|
|
3183
3256
|
"toolbar",
|
|
3184
3257
|
"seed-data-table__toolbar"
|
|
@@ -3228,11 +3301,11 @@ const dataTableSlotNames = [
|
|
|
3228
3301
|
"seed-data-table__selectionCell"
|
|
3229
3302
|
]
|
|
3230
3303
|
];
|
|
3231
|
-
const defaultVariant$
|
|
3304
|
+
const defaultVariant$6 = {
|
|
3232
3305
|
"surface": "card",
|
|
3233
3306
|
"interactive": false
|
|
3234
3307
|
};
|
|
3235
|
-
const compoundVariants$
|
|
3308
|
+
const compoundVariants$6 = [];
|
|
3236
3309
|
const dataTableVariantMap = {
|
|
3237
3310
|
"surface": [
|
|
3238
3311
|
"card",
|
|
@@ -3247,7 +3320,7 @@ function dataTable(props) {
|
|
|
3247
3320
|
return Object.fromEntries(dataTableSlotNames.map(([slot, className])=>{
|
|
3248
3321
|
return [
|
|
3249
3322
|
slot,
|
|
3250
|
-
createClassName(className, mergeVariants(defaultVariant$
|
|
3323
|
+
createClassName(className, mergeVariants(defaultVariant$6, props), compoundVariants$6)
|
|
3251
3324
|
];
|
|
3252
3325
|
}));
|
|
3253
3326
|
}
|
|
@@ -3927,7 +4000,12 @@ function DisplayCellContent({ column, row, value, classNames, locale }) {
|
|
|
3927
4000
|
return /*#__PURE__*/ jsxRuntime.jsx(EntityCell, {
|
|
3928
4001
|
value: value,
|
|
3929
4002
|
className: classNames.entity,
|
|
3930
|
-
nameClassName: classNames.entityName
|
|
4003
|
+
nameClassName: classNames.entityName,
|
|
4004
|
+
actionsClassName: classNames.entityActions,
|
|
4005
|
+
actionClassName: classNames.entityAction,
|
|
4006
|
+
column: column,
|
|
4007
|
+
row: row,
|
|
4008
|
+
openPreviewLabel: column.openPreviewLabel
|
|
3931
4009
|
});
|
|
3932
4010
|
case "url":
|
|
3933
4011
|
case "email":
|
|
@@ -4540,12 +4618,12 @@ function ColumnRenameInput({ column, initialLabel, onDone }) {
|
|
|
4540
4618
|
|
|
4541
4619
|
__insertCSS(".seed-action-button{display:inline-flex;position:relative;box-sizing:border-box;align-items:center;justify-content:center;cursor:pointer;border:none;text-transform:none;white-space:nowrap;vertical-align:middle;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-decoration:none;flex-shrink:0;font-family:inherit;--seed-box-flex-grow:initial;flex-grow:var(--seed-box-flex-grow);--seed-box-min-width:initial;min-width:var(--seed-box-min-width);--seed-box-padding-bottom:initial;--seed-box-padding-top:initial;--seed-box-padding-left:initial;--seed-box-padding-right:initial;padding-top:var(--seed-box-padding-top);padding-bottom:var(--seed-box-padding-bottom);padding-left:var(--seed-box-padding-left);padding-right:var(--seed-box-padding-right);--seed-box-bleed-bottom-base:0px;--seed-box-bleed-bottom-sm:var(--seed-box-bleed-bottom-base, initial);--seed-box-bleed-bottom-md:var(--seed-box-bleed-bottom-sm, initial);--seed-box-bleed-bottom-lg:var(--seed-box-bleed-bottom-md, initial);--seed-box-bleed-bottom-xl:var(--seed-box-bleed-bottom-lg, initial);--seed-box-bleed-bottom:var(--seed-box-bleed-bottom-base, initial);--seed-box-bleed-top-base:0px;--seed-box-bleed-top-sm:var(--seed-box-bleed-top-base, initial);--seed-box-bleed-top-md:var(--seed-box-bleed-top-sm, initial);--seed-box-bleed-top-lg:var(--seed-box-bleed-top-md, initial);--seed-box-bleed-top-xl:var(--seed-box-bleed-top-lg, initial);--seed-box-bleed-top:var(--seed-box-bleed-top-base, initial);--seed-box-bleed-left-base:0px;--seed-box-bleed-left-sm:var(--seed-box-bleed-left-base, initial);--seed-box-bleed-left-md:var(--seed-box-bleed-left-sm, initial);--seed-box-bleed-left-lg:var(--seed-box-bleed-left-md, initial);--seed-box-bleed-left-xl:var(--seed-box-bleed-left-lg, initial);--seed-box-bleed-left:var(--seed-box-bleed-left-base, initial);--seed-box-bleed-right-base:0px;--seed-box-bleed-right-sm:var(--seed-box-bleed-right-base, initial);--seed-box-bleed-right-md:var(--seed-box-bleed-right-sm, initial);--seed-box-bleed-right-lg:var(--seed-box-bleed-right-md, initial);--seed-box-bleed-right-xl:var(--seed-box-bleed-right-lg, initial);--seed-box-bleed-right:var(--seed-box-bleed-right-base, initial);margin-top:calc(var(--seed-box-bleed-top) * -1);margin-bottom:calc(var(--seed-box-bleed-bottom) * -1);margin-left:calc(var(--seed-box-bleed-left) * -1);margin-right:calc(var(--seed-box-bleed-right) * -1);outline:var(--seed-dimension-x0_5) solid transparent;outline-offset:var(--seed-dimension-x0_5)}.seed-action-button:is(:focus-visible,[data-focus-visible]){outline:var(--seed-dimension-x0_5) solid var(--seed-color-stroke-focus-ring);outline-offset:var(--seed-dimension-x0_5)}.seed-action-button:is(:disabled,[disabled],[data-disabled]){cursor:not-allowed}.seed-action-button:not(:is(:disabled,[disabled],[data-disabled])):is(:active,[data-active]){scale:var(--seed-feedback-scale)}.seed-action-button{transition:background-color var(--seed-duration-color-transition) var(--seed-timing-function-easing),scale var(--seed-duration-pressed-scale) var(--seed-timing-function-pressed-scale),outline-color var(--seed-duration-d3) var(--seed-timing-function-easing)}.seed-action-button--variant_brandSolid{background:var(--seed-color-bg-brand-solid);color:var(--seed-color-palette-static-white);font-weight:var(--seed-font-weight-bold);--seed-prefix-icon-color:var(--seed-color-palette-static-white);--seed-suffix-icon-color:var(--seed-color-palette-static-white);--seed-icon-color:var(--seed-color-palette-static-white);--track-color:var(--seed-color-palette-static-white-alpha-300);--range-color:var(--seed-color-palette-static-white)}@media (hover:hover) and (pointer:fine){.seed-action-button--variant_brandSolid:is(:hover,[data-hover]){background:var(--seed-color-bg-brand-solid-pressed)}}@media not all and (hover:hover) and (pointer:fine){.seed-action-button--variant_brandSolid:is(:active,[data-active]){background:var(--seed-color-bg-brand-solid-pressed)}}.seed-action-button--variant_brandSolid:is(:disabled,[disabled],[data-disabled]){background:var(--seed-color-bg-disabled);color:var(--seed-color-fg-disabled);--seed-prefix-icon-color:var(--seed-color-fg-disabled);--seed-suffix-icon-color:var(--seed-color-fg-disabled);--seed-icon-color:var(--seed-color-fg-disabled)}.seed-action-button--variant_brandSolid[data-loading]{background:var(--seed-color-bg-brand-solid-pressed)}.seed-action-button--variant_neutralSolid{background:var(--seed-color-bg-neutral-inverted);color:var(--seed-color-fg-neutral-inverted);font-weight:var(--seed-font-weight-bold);--seed-prefix-icon-color:var(--seed-color-fg-neutral-inverted);--seed-suffix-icon-color:var(--seed-color-fg-neutral-inverted);--seed-icon-color:var(--seed-color-fg-neutral-inverted);--track-color:var(--seed-color-palette-static-white-alpha-300);--range-color:var(--seed-color-palette-static-white)}@media (hover:hover) and (pointer:fine){.seed-action-button--variant_neutralSolid:is(:hover,[data-hover]){background:var(--seed-color-bg-neutral-inverted-pressed)}}@media not all and (hover:hover) and (pointer:fine){.seed-action-button--variant_neutralSolid:is(:active,[data-active]){background:var(--seed-color-bg-neutral-inverted-pressed)}}.seed-action-button--variant_neutralSolid:is(:disabled,[disabled],[data-disabled]){background:var(--seed-color-bg-disabled);color:var(--seed-color-fg-disabled);--seed-prefix-icon-color:var(--seed-color-fg-disabled);--seed-suffix-icon-color:var(--seed-color-fg-disabled);--seed-icon-color:var(--seed-color-fg-disabled)}.seed-action-button--variant_neutralSolid[data-loading]{background:var(--seed-color-bg-neutral-inverted-pressed)}.seed-action-button--variant_neutralWeak{background:var(--seed-color-bg-neutral-weak);color:var(--seed-color-fg-neutral);font-weight:var(--seed-font-weight-bold);--seed-prefix-icon-color:var(--seed-color-fg-neutral);--seed-suffix-icon-color:var(--seed-color-fg-neutral);--seed-icon-color:var(--seed-color-fg-neutral);--track-color:var(--seed-color-palette-gray-500);--range-color:var(--seed-color-fg-neutral)}@media (hover:hover) and (pointer:fine){.seed-action-button--variant_neutralWeak:is(:hover,[data-hover]){background:var(--seed-color-bg-neutral-weak-pressed)}}@media not all and (hover:hover) and (pointer:fine){.seed-action-button--variant_neutralWeak:is(:active,[data-active]){background:var(--seed-color-bg-neutral-weak-pressed)}}.seed-action-button--variant_neutralWeak:is(:disabled,[disabled],[data-disabled]){background:var(--seed-color-bg-disabled);color:var(--seed-color-fg-disabled);--seed-prefix-icon-color:var(--seed-color-fg-disabled);--seed-suffix-icon-color:var(--seed-color-fg-disabled);--seed-icon-color:var(--seed-color-fg-disabled)}.seed-action-button--variant_neutralWeak[data-loading]{background:var(--seed-color-bg-neutral-weak-pressed)}.seed-action-button--variant_criticalSolid{background:var(--seed-color-bg-critical-solid);color:var(--seed-color-palette-static-white);font-weight:var(--seed-font-weight-bold);--seed-prefix-icon-color:var(--seed-color-palette-static-white);--seed-suffix-icon-color:var(--seed-color-palette-static-white);--seed-icon-color:var(--seed-color-palette-static-white);--track-color:var(--seed-color-palette-static-white-alpha-300);--range-color:var(--seed-color-palette-static-white)}@media (hover:hover) and (pointer:fine){.seed-action-button--variant_criticalSolid:is(:hover,[data-hover]){background:var(--seed-color-bg-critical-solid-pressed)}}@media not all and (hover:hover) and (pointer:fine){.seed-action-button--variant_criticalSolid:is(:active,[data-active]){background:var(--seed-color-bg-critical-solid-pressed)}}.seed-action-button--variant_criticalSolid:is(:disabled,[disabled],[data-disabled]){background:var(--seed-color-bg-disabled);color:var(--seed-color-fg-disabled);--seed-prefix-icon-color:var(--seed-color-fg-disabled);--seed-suffix-icon-color:var(--seed-color-fg-disabled);--seed-icon-color:var(--seed-color-fg-disabled)}.seed-action-button--variant_criticalSolid[data-loading]{background:var(--seed-color-bg-critical-solid-pressed)}.seed-action-button--variant_brandOutline{border-style:solid;background:var(--seed-color-bg-transparent);border-width:1px;border-color:var(--seed-color-stroke-neutral-muted);color:var(--seed-color-fg-brand);font-weight:var(--seed-font-weight-bold);--seed-prefix-icon-color:var(--seed-color-fg-brand);--seed-suffix-icon-color:var(--seed-color-fg-brand);--seed-icon-color:var(--seed-color-fg-brand);--track-color:var(--seed-color-palette-carrot-200);--range-color:var(--seed-color-bg-brand-solid)}@media (hover:hover) and (pointer:fine){.seed-action-button--variant_brandOutline:is(:hover,[data-hover]){background:var(--seed-color-bg-transparent-pressed)}}@media not all and (hover:hover) and (pointer:fine){.seed-action-button--variant_brandOutline:is(:active,[data-active]){background:var(--seed-color-bg-transparent-pressed)}}.seed-action-button--variant_brandOutline:is(:disabled,[disabled],[data-disabled]){background:var(--seed-color-bg-transparent);border-color:var(--seed-color-stroke-neutral-muted);color:var(--seed-color-fg-disabled);--seed-prefix-icon-color:var(--seed-color-fg-disabled);--seed-suffix-icon-color:var(--seed-color-fg-disabled);--seed-icon-color:var(--seed-color-fg-disabled)}.seed-action-button--variant_brandOutline[data-loading]{background:var(--seed-color-bg-transparent)}.seed-action-button--variant_neutralOutline{border-style:solid;background:var(--seed-color-bg-transparent);border-width:1px;border-color:var(--seed-color-stroke-neutral-muted);color:var(--seed-color-fg-neutral);font-weight:var(--seed-font-weight-bold);--seed-prefix-icon-color:var(--seed-color-fg-neutral);--seed-suffix-icon-color:var(--seed-color-fg-neutral);--seed-icon-color:var(--seed-color-fg-neutral);--track-color:var(--seed-color-palette-gray-500);--range-color:var(--seed-color-fg-neutral)}@media (hover:hover) and (pointer:fine){.seed-action-button--variant_neutralOutline:is(:hover,[data-hover]){background:var(--seed-color-bg-transparent-pressed)}}@media not all and (hover:hover) and (pointer:fine){.seed-action-button--variant_neutralOutline:is(:active,[data-active]){background:var(--seed-color-bg-transparent-pressed)}}.seed-action-button--variant_neutralOutline:is(:disabled,[disabled],[data-disabled]){background:var(--seed-color-bg-transparent);border-color:var(--seed-color-stroke-neutral-muted);color:var(--seed-color-fg-disabled);--seed-prefix-icon-color:var(--seed-color-fg-disabled);--seed-suffix-icon-color:var(--seed-color-fg-disabled);--seed-icon-color:var(--seed-color-fg-disabled)}.seed-action-button--variant_neutralOutline[data-loading]{background:var(--seed-color-bg-transparent)}.seed-action-button--variant_ghost{background:#ffffff00;--seed-box-color:var(--seed-color-fg-neutral);color:var(--seed-box-color);--seed-prefix-icon-color:var(--seed-box-color);--seed-suffix-icon-color:var(--seed-box-color);--seed-icon-color:var(--seed-box-color);--seed-font-weight:var(--seed-font-weight-bold);font-weight:var(--seed-font-weight);--track-color:var(--seed-color-palette-gray-500);--range-color:var(--seed-color-fg-neutral)}@media (hover:hover) and (pointer:fine){.seed-action-button--variant_ghost:is(:hover,[data-hover]){background:var(--seed-color-bg-transparent-pressed)}}@media not all and (hover:hover) and (pointer:fine){.seed-action-button--variant_ghost:is(:active,[data-active]){background:var(--seed-color-bg-transparent-pressed)}}.seed-action-button--variant_ghost:is(:disabled,[disabled],[data-disabled]){background:#ffffff00;color:var(--seed-color-fg-disabled);--seed-prefix-icon-color:var(--seed-color-fg-disabled);--seed-suffix-icon-color:var(--seed-color-fg-disabled);--seed-icon-color:var(--seed-color-fg-disabled)}.seed-action-button--variant_ghost[data-loading]{background:var(--seed-color-bg-transparent-pressed)}.seed-action-button--size_xsmall{height:var(--seed-dimension-x8);border-radius:var(--seed-radius-full);--size:14px;--thickness:2px;--seed-prefix-icon-size:var(--seed-dimension-x3_5);--seed-suffix-icon-size:var(--seed-dimension-x3_5);--seed-icon-size:var(--seed-dimension-x3_5)}.seed-action-button--size_small{height:var(--seed-dimension-x9);border-radius:var(--seed-radius-r2);--size:14px;--thickness:2px;--seed-prefix-icon-size:var(--seed-dimension-x3_5);--seed-suffix-icon-size:var(--seed-dimension-x3_5);--seed-icon-size:var(--seed-dimension-x4)}.seed-action-button--size_medium{height:var(--seed-dimension-x10);border-radius:var(--seed-radius-r2);--size:16px;--thickness:2px;--seed-prefix-icon-size:var(--seed-dimension-x4);--seed-suffix-icon-size:var(--seed-dimension-x4);--seed-icon-size:18px}.seed-action-button--size_large{height:var(--seed-dimension-x13);border-radius:var(--seed-radius-r3);--size:18px;--thickness:2px;--seed-prefix-icon-size:22px;--seed-suffix-icon-size:22px;--seed-icon-size:22px}.seed-action-button--size_xsmall-layout_withText{gap:var(--seed-dimension-x1);--seed-box-padding-left:var(--seed-dimension-x3_5);--seed-box-padding-right:var(--seed-dimension-x3_5);--seed-box-padding-top:var(--seed-dimension-x1_5);--seed-box-padding-bottom:var(--seed-dimension-x1_5);font-size:var(--seed-font-size-t3);line-height:var(--seed-line-height-t3)}.seed-action-button--size_xsmall-layout_iconOnly{min-width:var(--seed-dimension-x8);--seed-box-padding-left:var(--seed-dimension-x1_5);--seed-box-padding-right:var(--seed-dimension-x1_5);--seed-box-padding-top:var(--seed-dimension-x1_5);--seed-box-padding-bottom:var(--seed-dimension-x1_5)}.seed-action-button--size_small-layout_withText{gap:var(--seed-dimension-x1);--seed-box-padding-left:var(--seed-dimension-x3_5);--seed-box-padding-right:var(--seed-dimension-x3_5);--seed-box-padding-top:var(--seed-dimension-x2);--seed-box-padding-bottom:var(--seed-dimension-x2);font-size:var(--seed-font-size-t4);line-height:var(--seed-line-height-t4)}.seed-action-button--size_small-layout_iconOnly{min-width:var(--seed-dimension-x9);--seed-box-padding-left:var(--seed-dimension-x2);--seed-box-padding-right:var(--seed-dimension-x2);--seed-box-padding-top:var(--seed-dimension-x2);--seed-box-padding-bottom:var(--seed-dimension-x2)}.seed-action-button--size_medium-layout_withText{gap:var(--seed-dimension-x1_5);--seed-box-padding-left:var(--seed-dimension-x4);--seed-box-padding-right:var(--seed-dimension-x4);--seed-box-padding-top:var(--seed-dimension-x2_5);--seed-box-padding-bottom:var(--seed-dimension-x2_5);font-size:var(--seed-font-size-t4);line-height:var(--seed-line-height-t4)}.seed-action-button--size_medium-layout_iconOnly{min-width:var(--seed-dimension-x10);--seed-box-padding-left:var(--seed-dimension-x2_5);--seed-box-padding-right:var(--seed-dimension-x2_5);--seed-box-padding-top:var(--seed-dimension-x2_5);--seed-box-padding-bottom:var(--seed-dimension-x2_5)}.seed-action-button--size_large-layout_withText{gap:var(--seed-dimension-x2);--seed-box-padding-left:var(--seed-dimension-x5);--seed-box-padding-right:var(--seed-dimension-x5);--seed-box-padding-top:var(--seed-dimension-x3_5);--seed-box-padding-bottom:var(--seed-dimension-x3_5);font-size:var(--seed-font-size-t6);line-height:var(--seed-line-height-t6)}.seed-action-button--size_large-layout_iconOnly{min-width:var(--seed-dimension-x13);--seed-box-padding-left:var(--seed-dimension-x3_5);--seed-box-padding-right:var(--seed-dimension-x3_5);--seed-box-padding-top:var(--seed-dimension-x3_5);--seed-box-padding-bottom:var(--seed-dimension-x3_5)}@media (min-width:480px){.seed-action-button{--seed-box-bleed-bottom:var(--seed-box-bleed-bottom-sm, initial);--seed-box-bleed-top:var(--seed-box-bleed-top-sm, initial);--seed-box-bleed-left:var(--seed-box-bleed-left-sm, initial);--seed-box-bleed-right:var(--seed-box-bleed-right-sm, initial)}}@media (min-width:768px){.seed-action-button{--seed-box-bleed-bottom:var(--seed-box-bleed-bottom-md, initial);--seed-box-bleed-top:var(--seed-box-bleed-top-md, initial);--seed-box-bleed-left:var(--seed-box-bleed-left-md, initial);--seed-box-bleed-right:var(--seed-box-bleed-right-md, initial)}}@media (min-width:1280px){.seed-action-button{--seed-box-bleed-bottom:var(--seed-box-bleed-bottom-lg, initial);--seed-box-bleed-top:var(--seed-box-bleed-top-lg, initial);--seed-box-bleed-left:var(--seed-box-bleed-left-lg, initial);--seed-box-bleed-right:var(--seed-box-bleed-right-lg, initial)}}@media (min-width:1440px){.seed-action-button{--seed-box-bleed-bottom:var(--seed-box-bleed-bottom-xl, initial);--seed-box-bleed-top:var(--seed-box-bleed-top-xl, initial);--seed-box-bleed-left:var(--seed-box-bleed-left-xl, initial);--seed-box-bleed-right:var(--seed-box-bleed-right-xl, initial)}}");
|
|
4542
4620
|
|
|
4543
|
-
const defaultVariant$
|
|
4621
|
+
const defaultVariant$5 = {
|
|
4544
4622
|
"variant": "brandSolid",
|
|
4545
4623
|
"size": "medium",
|
|
4546
4624
|
"layout": "withText"
|
|
4547
4625
|
};
|
|
4548
|
-
const compoundVariants$
|
|
4626
|
+
const compoundVariants$5 = [
|
|
4549
4627
|
{
|
|
4550
4628
|
"size": "xsmall",
|
|
4551
4629
|
"layout": "withText"
|
|
@@ -4601,7 +4679,7 @@ const actionButtonVariantMap = {
|
|
|
4601
4679
|
]
|
|
4602
4680
|
};
|
|
4603
4681
|
function actionButton(props) {
|
|
4604
|
-
return createClassName("seed-action-button", mergeVariants(defaultVariant$
|
|
4682
|
+
return createClassName("seed-action-button", mergeVariants(defaultVariant$5, props), compoundVariants$5);
|
|
4605
4683
|
}
|
|
4606
4684
|
Object.assign(actionButton, {
|
|
4607
4685
|
splitVariantProps: (props)=>splitVariantProps(props, actionButtonVariantMap)
|
|
@@ -5683,10 +5761,10 @@ const datePickerSlotNames = [
|
|
|
5683
5761
|
"seed-date-picker__liveRegion"
|
|
5684
5762
|
]
|
|
5685
5763
|
];
|
|
5686
|
-
const defaultVariant$
|
|
5764
|
+
const defaultVariant$4 = {
|
|
5687
5765
|
"visibleRange": "month"
|
|
5688
5766
|
};
|
|
5689
|
-
const compoundVariants$
|
|
5767
|
+
const compoundVariants$4 = [];
|
|
5690
5768
|
const datePickerVariantMap = {
|
|
5691
5769
|
"visibleRange": [
|
|
5692
5770
|
"month",
|
|
@@ -5699,7 +5777,7 @@ function datePicker(props) {
|
|
|
5699
5777
|
return Object.fromEntries(datePickerSlotNames.map(([slot, className])=>{
|
|
5700
5778
|
return [
|
|
5701
5779
|
slot,
|
|
5702
|
-
createClassName(className, mergeVariants(defaultVariant$
|
|
5780
|
+
createClassName(className, mergeVariants(defaultVariant$4, props), compoundVariants$4)
|
|
5703
5781
|
];
|
|
5704
5782
|
}));
|
|
5705
5783
|
}
|
|
@@ -8033,14 +8111,14 @@ const wheelPickerSlotNames = [
|
|
|
8033
8111
|
"seed-wheel-picker__selectionIndicator"
|
|
8034
8112
|
]
|
|
8035
8113
|
];
|
|
8036
|
-
const defaultVariant$
|
|
8037
|
-
const compoundVariants$
|
|
8114
|
+
const defaultVariant$3 = {};
|
|
8115
|
+
const compoundVariants$3 = [];
|
|
8038
8116
|
const wheelPickerVariantMap = {};
|
|
8039
8117
|
function wheelPicker(props) {
|
|
8040
8118
|
return Object.fromEntries(wheelPickerSlotNames.map(([slot, className])=>{
|
|
8041
8119
|
return [
|
|
8042
8120
|
slot,
|
|
8043
|
-
createClassName(className, mergeVariants(defaultVariant$
|
|
8121
|
+
createClassName(className, mergeVariants(defaultVariant$3, props), compoundVariants$3)
|
|
8044
8122
|
];
|
|
8045
8123
|
}));
|
|
8046
8124
|
}
|
|
@@ -8822,17 +8900,17 @@ var WheelPicker_namespace = {
|
|
|
8822
8900
|
|
|
8823
8901
|
__insertCSS(".seed-scroll-fog{position:relative;overflow:auto;height:100%;width:100%;mask-image:linear-gradient(to bottom,#00000000 0,#00000003 calc(var(--scrollable-top) * var(--scroll-fog-size-top) * 0.08),#00000005 calc(var(--scrollable-top) * var(--scroll-fog-size-top) * 0.16),#0000000d calc(var(--scrollable-top) * var(--scroll-fog-size-top) * 0.22),#00000014 calc(var(--scrollable-top) * var(--scroll-fog-size-top) * 0.29),#00000021 calc(var(--scrollable-top) * var(--scroll-fog-size-top) * 0.35),#0000002e calc(var(--scrollable-top) * var(--scroll-fog-size-top) * 0.41),#00000040 calc(var(--scrollable-top) * var(--scroll-fog-size-top) * 0.47),#00000052 calc(var(--scrollable-top) * var(--scroll-fog-size-top) * 0.53),#00000066 calc(var(--scrollable-top) * var(--scroll-fog-size-top) * 0.59),#0000007a calc(var(--scrollable-top) * var(--scroll-fog-size-top) * 0.65),#00000094 calc(var(--scrollable-top) * var(--scroll-fog-size-top) * 0.71),#000000ab calc(var(--scrollable-top) * var(--scroll-fog-size-top) * 0.78),#000000c7 calc(var(--scrollable-top) * var(--scroll-fog-size-top) * 0.84),#000000e3 calc(var(--scrollable-top) * var(--scroll-fog-size-top) * 0.92),#000000ff calc(var(--scrollable-top) * var(--scroll-fog-size-top) * 1)),linear-gradient(to top,#00000000 0,#00000003 calc(var(--scrollable-bottom) * var(--scroll-fog-size-bottom) * 0.08),#00000005 calc(var(--scrollable-bottom) * var(--scroll-fog-size-bottom) * 0.16),#0000000d calc(var(--scrollable-bottom) * var(--scroll-fog-size-bottom) * 0.22),#00000014 calc(var(--scrollable-bottom) * var(--scroll-fog-size-bottom) * 0.29),#00000021 calc(var(--scrollable-bottom) * var(--scroll-fog-size-bottom) * 0.35),#0000002e calc(var(--scrollable-bottom) * var(--scroll-fog-size-bottom) * 0.41),#00000040 calc(var(--scrollable-bottom) * var(--scroll-fog-size-bottom) * 0.47),#00000052 calc(var(--scrollable-bottom) * var(--scroll-fog-size-bottom) * 0.53),#00000066 calc(var(--scrollable-bottom) * var(--scroll-fog-size-bottom) * 0.59),#0000007a calc(var(--scrollable-bottom) * var(--scroll-fog-size-bottom) * 0.65),#00000094 calc(var(--scrollable-bottom) * var(--scroll-fog-size-bottom) * 0.71),#000000ab calc(var(--scrollable-bottom) * var(--scroll-fog-size-bottom) * 0.78),#000000c7 calc(var(--scrollable-bottom) * var(--scroll-fog-size-bottom) * 0.84),#000000e3 calc(var(--scrollable-bottom) * var(--scroll-fog-size-bottom) * 0.92),#000000ff calc(var(--scrollable-bottom) * var(--scroll-fog-size-bottom) * 1)),linear-gradient(to right,#00000000 0,#00000003 calc(var(--scrollable-left) * var(--scroll-fog-size-left) * 0.08),#00000005 calc(var(--scrollable-left) * var(--scroll-fog-size-left) * 0.16),#0000000d calc(var(--scrollable-left) * var(--scroll-fog-size-left) * 0.22),#00000014 calc(var(--scrollable-left) * var(--scroll-fog-size-left) * 0.29),#00000021 calc(var(--scrollable-left) * var(--scroll-fog-size-left) * 0.35),#0000002e calc(var(--scrollable-left) * var(--scroll-fog-size-left) * 0.41),#00000040 calc(var(--scrollable-left) * var(--scroll-fog-size-left) * 0.47),#00000052 calc(var(--scrollable-left) * var(--scroll-fog-size-left) * 0.53),#00000066 calc(var(--scrollable-left) * var(--scroll-fog-size-left) * 0.59),#0000007a calc(var(--scrollable-left) * var(--scroll-fog-size-left) * 0.65),#00000094 calc(var(--scrollable-left) * var(--scroll-fog-size-left) * 0.71),#000000ab calc(var(--scrollable-left) * var(--scroll-fog-size-left) * 0.78),#000000c7 calc(var(--scrollable-left) * var(--scroll-fog-size-left) * 0.84),#000000e3 calc(var(--scrollable-left) * var(--scroll-fog-size-left) * 0.92),#000000ff calc(var(--scrollable-left) * var(--scroll-fog-size-left) * 1)),linear-gradient(to left,#00000000 0,#00000003 calc(var(--scrollable-right) * var(--scroll-fog-size-right) * 0.08),#00000005 calc(var(--scrollable-right) * var(--scroll-fog-size-right) * 0.16),#0000000d calc(var(--scrollable-right) * var(--scroll-fog-size-right) * 0.22),#00000014 calc(var(--scrollable-right) * var(--scroll-fog-size-right) * 0.29),#00000021 calc(var(--scrollable-right) * var(--scroll-fog-size-right) * 0.35),#0000002e calc(var(--scrollable-right) * var(--scroll-fog-size-right) * 0.41),#00000040 calc(var(--scrollable-right) * var(--scroll-fog-size-right) * 0.47),#00000052 calc(var(--scrollable-right) * var(--scroll-fog-size-right) * 0.53),#00000066 calc(var(--scrollable-right) * var(--scroll-fog-size-right) * 0.59),#0000007a calc(var(--scrollable-right) * var(--scroll-fog-size-right) * 0.65),#00000094 calc(var(--scrollable-right) * var(--scroll-fog-size-right) * 0.71),#000000ab calc(var(--scrollable-right) * var(--scroll-fog-size-right) * 0.78),#000000c7 calc(var(--scrollable-right) * var(--scroll-fog-size-right) * 0.84),#000000e3 calc(var(--scrollable-right) * var(--scroll-fog-size-right) * 0.92),#000000ff calc(var(--scrollable-right) * var(--scroll-fog-size-right) * 1));-webkit-mask-image:linear-gradient(to bottom,#00000000 0,#00000003 calc(var(--scrollable-top) * var(--scroll-fog-size-top) * 0.08),#00000005 calc(var(--scrollable-top) * var(--scroll-fog-size-top) * 0.16),#0000000d calc(var(--scrollable-top) * var(--scroll-fog-size-top) * 0.22),#00000014 calc(var(--scrollable-top) * var(--scroll-fog-size-top) * 0.29),#00000021 calc(var(--scrollable-top) * var(--scroll-fog-size-top) * 0.35),#0000002e calc(var(--scrollable-top) * var(--scroll-fog-size-top) * 0.41),#00000040 calc(var(--scrollable-top) * var(--scroll-fog-size-top) * 0.47),#00000052 calc(var(--scrollable-top) * var(--scroll-fog-size-top) * 0.53),#00000066 calc(var(--scrollable-top) * var(--scroll-fog-size-top) * 0.59),#0000007a calc(var(--scrollable-top) * var(--scroll-fog-size-top) * 0.65),#00000094 calc(var(--scrollable-top) * var(--scroll-fog-size-top) * 0.71),#000000ab calc(var(--scrollable-top) * var(--scroll-fog-size-top) * 0.78),#000000c7 calc(var(--scrollable-top) * var(--scroll-fog-size-top) * 0.84),#000000e3 calc(var(--scrollable-top) * var(--scroll-fog-size-top) * 0.92),#000000ff calc(var(--scrollable-top) * var(--scroll-fog-size-top) * 1)),linear-gradient(to top,#00000000 0,#00000003 calc(var(--scrollable-bottom) * var(--scroll-fog-size-bottom) * 0.08),#00000005 calc(var(--scrollable-bottom) * var(--scroll-fog-size-bottom) * 0.16),#0000000d calc(var(--scrollable-bottom) * var(--scroll-fog-size-bottom) * 0.22),#00000014 calc(var(--scrollable-bottom) * var(--scroll-fog-size-bottom) * 0.29),#00000021 calc(var(--scrollable-bottom) * var(--scroll-fog-size-bottom) * 0.35),#0000002e calc(var(--scrollable-bottom) * var(--scroll-fog-size-bottom) * 0.41),#00000040 calc(var(--scrollable-bottom) * var(--scroll-fog-size-bottom) * 0.47),#00000052 calc(var(--scrollable-bottom) * var(--scroll-fog-size-bottom) * 0.53),#00000066 calc(var(--scrollable-bottom) * var(--scroll-fog-size-bottom) * 0.59),#0000007a calc(var(--scrollable-bottom) * var(--scroll-fog-size-bottom) * 0.65),#00000094 calc(var(--scrollable-bottom) * var(--scroll-fog-size-bottom) * 0.71),#000000ab calc(var(--scrollable-bottom) * var(--scroll-fog-size-bottom) * 0.78),#000000c7 calc(var(--scrollable-bottom) * var(--scroll-fog-size-bottom) * 0.84),#000000e3 calc(var(--scrollable-bottom) * var(--scroll-fog-size-bottom) * 0.92),#000000ff calc(var(--scrollable-bottom) * var(--scroll-fog-size-bottom) * 1)),linear-gradient(to right,#00000000 0,#00000003 calc(var(--scrollable-left) * var(--scroll-fog-size-left) * 0.08),#00000005 calc(var(--scrollable-left) * var(--scroll-fog-size-left) * 0.16),#0000000d calc(var(--scrollable-left) * var(--scroll-fog-size-left) * 0.22),#00000014 calc(var(--scrollable-left) * var(--scroll-fog-size-left) * 0.29),#00000021 calc(var(--scrollable-left) * var(--scroll-fog-size-left) * 0.35),#0000002e calc(var(--scrollable-left) * var(--scroll-fog-size-left) * 0.41),#00000040 calc(var(--scrollable-left) * var(--scroll-fog-size-left) * 0.47),#00000052 calc(var(--scrollable-left) * var(--scroll-fog-size-left) * 0.53),#00000066 calc(var(--scrollable-left) * var(--scroll-fog-size-left) * 0.59),#0000007a calc(var(--scrollable-left) * var(--scroll-fog-size-left) * 0.65),#00000094 calc(var(--scrollable-left) * var(--scroll-fog-size-left) * 0.71),#000000ab calc(var(--scrollable-left) * var(--scroll-fog-size-left) * 0.78),#000000c7 calc(var(--scrollable-left) * var(--scroll-fog-size-left) * 0.84),#000000e3 calc(var(--scrollable-left) * var(--scroll-fog-size-left) * 0.92),#000000ff calc(var(--scrollable-left) * var(--scroll-fog-size-left) * 1)),linear-gradient(to left,#00000000 0,#00000003 calc(var(--scrollable-right) * var(--scroll-fog-size-right) * 0.08),#00000005 calc(var(--scrollable-right) * var(--scroll-fog-size-right) * 0.16),#0000000d calc(var(--scrollable-right) * var(--scroll-fog-size-right) * 0.22),#00000014 calc(var(--scrollable-right) * var(--scroll-fog-size-right) * 0.29),#00000021 calc(var(--scrollable-right) * var(--scroll-fog-size-right) * 0.35),#0000002e calc(var(--scrollable-right) * var(--scroll-fog-size-right) * 0.41),#00000040 calc(var(--scrollable-right) * var(--scroll-fog-size-right) * 0.47),#00000052 calc(var(--scrollable-right) * var(--scroll-fog-size-right) * 0.53),#00000066 calc(var(--scrollable-right) * var(--scroll-fog-size-right) * 0.59),#0000007a calc(var(--scrollable-right) * var(--scroll-fog-size-right) * 0.65),#00000094 calc(var(--scrollable-right) * var(--scroll-fog-size-right) * 0.71),#000000ab calc(var(--scrollable-right) * var(--scroll-fog-size-right) * 0.78),#000000c7 calc(var(--scrollable-right) * var(--scroll-fog-size-right) * 0.84),#000000e3 calc(var(--scrollable-right) * var(--scroll-fog-size-right) * 0.92),#000000ff calc(var(--scrollable-right) * var(--scroll-fog-size-right) * 1));mask-size:100% 100%,100% 100%,100% 100%,100% 100%;-webkit-mask-size:100% 100%,100% 100%,100% 100%,100% 100%;mask-repeat:no-repeat;-webkit-mask-repeat:no-repeat;mask-composite:intersect;-webkit-mask-composite:source-in}.seed-scroll-fog--hideScrollBar_true{scrollbar-width:none;-ms-overflow-style:none}.seed-scroll-fog--hideScrollBar_true::-webkit-scrollbar{display:none}");
|
|
8824
8902
|
|
|
8825
|
-
const defaultVariant = {
|
|
8903
|
+
const defaultVariant$2 = {
|
|
8826
8904
|
"hideScrollBar": false
|
|
8827
8905
|
};
|
|
8828
|
-
const compoundVariants = [];
|
|
8906
|
+
const compoundVariants$2 = [];
|
|
8829
8907
|
const scrollFogVariantMap = {
|
|
8830
8908
|
"hideScrollBar": [
|
|
8831
8909
|
true
|
|
8832
8910
|
]
|
|
8833
8911
|
};
|
|
8834
8912
|
function scrollFog(props) {
|
|
8835
|
-
return createClassName("seed-scroll-fog", mergeVariants(defaultVariant, props), compoundVariants);
|
|
8913
|
+
return createClassName("seed-scroll-fog", mergeVariants(defaultVariant$2, props), compoundVariants$2);
|
|
8836
8914
|
}
|
|
8837
8915
|
Object.assign(scrollFog, {
|
|
8838
8916
|
splitVariantProps: (props)=>splitVariantProps(props, scrollFogVariantMap)
|
|
@@ -10942,5 +11020,676 @@ DataTableViewsControl.displayName = "DataTableViewsControl";
|
|
|
10942
11020
|
});
|
|
10943
11021
|
}
|
|
10944
11022
|
|
|
11023
|
+
__insertCSS(".seed-resizable-panel__root{position:relative;display:flex;height:100%}.seed-resizable-panel__spacer{flex:0 0 auto;height:100%;transition:width .14s}.seed-resizable-panel__panel{position:absolute;top:0;bottom:0;box-sizing:border-box;overflow:hidden;background:var(--seed-color-bg-layer-default)}.seed-resizable-panel__panel[data-side=left]{left:0}.seed-resizable-panel__panel[data-side=right]{right:0}.seed-resizable-panel__panel[data-floating=false]{border-radius:0;box-shadow:none}.seed-resizable-panel__panel[data-floating=false][data-side=left]{border-inline-end:1px solid var(--seed-color-stroke-neutral-muted)}.seed-resizable-panel__panel[data-floating=false][data-side=right]{border-inline-start:1px solid var(--seed-color-stroke-neutral-muted)}.seed-resizable-panel__panel[data-floating=true]{position:fixed;top:8px;bottom:8px;border-inline-end:none;border-inline-start:none;border-radius:10px;box-shadow:inset 0 0 0 1px transparent,0 0 0 1px rgba(28,40,64,.04),0 4px 8px -4px rgba(28,40,64,.12),0 4px 12px -2px rgba(24,41,75,.16);transform:none;transition:transform .14s,padding .14s}.seed-resizable-panel__panel[data-floating=true][data-side=left]{padding:8px 0 8px 8px}[data-floating=true]>.seed-resizable-panel__inner{transition:opacity .14s}.seed-resizable-panel__handle[data-side=left]{right:0}.seed-resizable-panel__handle[data-side=right]{left:0}.seed-resizable-panel__handle::before{content:\"\";position:absolute;top:0;width:1px;height:100%;background:var(--seed-color-stroke-neutral-muted);transition:background-color .16s,height .16s}.seed-resizable-panel__handle[data-side=left]::before{right:0}.seed-resizable-panel__handle[data-side=right]::before{left:0}.seed-resizable-panel__handle:hover::before,.seed-resizable-panel__handle[data-dragging]::before{width:2px;background:#0298d9}.seed-resizable-panel__handle.crisp-seed-resizable-panel-handle--column{display:flex;align-items:center;justify-content:center;width:7px;left:-3px;right:-3px;z-index:1;cursor:col-resize}.seed-resizable-panel__handle.crisp-seed-resizable-panel-handle--column::before{content:none}.seed-resizable-panel__handleInner{width:3px;height:100%;border-radius:3px;background:#0298d9;opacity:0;transition:opacity .1s .1s}.seed-resizable-panel__handle:hover .seed-resizable-panel__handleInner,.seed-resizable-panel__handle[data-dragging] .seed-resizable-panel__handleInner{opacity:1}");
|
|
11024
|
+
|
|
11025
|
+
const resizablePanelSlotNames = [
|
|
11026
|
+
[
|
|
11027
|
+
"root",
|
|
11028
|
+
"seed-resizable-panel__root"
|
|
11029
|
+
],
|
|
11030
|
+
[
|
|
11031
|
+
"spacer",
|
|
11032
|
+
"seed-resizable-panel__spacer"
|
|
11033
|
+
],
|
|
11034
|
+
[
|
|
11035
|
+
"panel",
|
|
11036
|
+
"seed-resizable-panel__panel"
|
|
11037
|
+
],
|
|
11038
|
+
[
|
|
11039
|
+
"inner",
|
|
11040
|
+
"seed-resizable-panel__inner"
|
|
11041
|
+
],
|
|
11042
|
+
[
|
|
11043
|
+
"handle",
|
|
11044
|
+
"seed-resizable-panel__handle"
|
|
11045
|
+
],
|
|
11046
|
+
[
|
|
11047
|
+
"handleInner",
|
|
11048
|
+
"seed-resizable-panel__handleInner"
|
|
11049
|
+
]
|
|
11050
|
+
];
|
|
11051
|
+
const defaultVariant$1 = {};
|
|
11052
|
+
const compoundVariants$1 = [];
|
|
11053
|
+
const resizablePanelVariantMap = {};
|
|
11054
|
+
function resizablePanel(props) {
|
|
11055
|
+
return Object.fromEntries(resizablePanelSlotNames.map(([slot, className])=>{
|
|
11056
|
+
return [
|
|
11057
|
+
slot,
|
|
11058
|
+
createClassName(className, mergeVariants(defaultVariant$1, props), compoundVariants$1)
|
|
11059
|
+
];
|
|
11060
|
+
}));
|
|
11061
|
+
}
|
|
11062
|
+
Object.assign(resizablePanel, {
|
|
11063
|
+
splitVariantProps: (props)=>splitVariantProps(props, resizablePanelVariantMap)
|
|
11064
|
+
}); // @recipe(seed): resizable-panel
|
|
11065
|
+
|
|
11066
|
+
// Pure geometry + persistence helpers for ResizablePanel -- isolated from React so
|
|
11067
|
+
// they're unit-testable without a DOM, the same split `useDataTable`'s own dom.ts
|
|
11068
|
+
// draws for its column-layout math. Ported from your-moon/crisp's
|
|
11069
|
+
// `components/resizablepanel/resizablepanel.tsx` (computeDragWidth/widthToPercent/
|
|
11070
|
+
// percentToWidth/readStoredPercent/writeStoredPercent), unchanged in behavior.
|
|
11071
|
+
/**
|
|
11072
|
+
* Drag delta -> next width, in px, signed by which edge of the panel the handle
|
|
11073
|
+
* drags from. A left-side panel's handle sits at its *right* edge, so dragging
|
|
11074
|
+
* right (positive dx) grows it; a right-side panel's handle sits at its *left*
|
|
11075
|
+
* edge, so dragging right shrinks it.
|
|
11076
|
+
*/ function computeDragWidth(startWidth, startX, clientX, side) {
|
|
11077
|
+
const dx = clientX - startX;
|
|
11078
|
+
return side === "left" ? startWidth + dx : startWidth - dx;
|
|
11079
|
+
}
|
|
11080
|
+
/** width (px) -> percentage of the container's width. Pure, unrounded. */ function widthToPercent(width, containerWidth) {
|
|
11081
|
+
if (!(containerWidth > 0)) return 0;
|
|
11082
|
+
return width / containerWidth * 100;
|
|
11083
|
+
}
|
|
11084
|
+
/** percentage of the container's width -> width (px). Pure, unrounded. */ function percentToWidth(percent, containerWidth) {
|
|
11085
|
+
return percent / 100 * containerWidth;
|
|
11086
|
+
}
|
|
11087
|
+
/**
|
|
11088
|
+
* Reads a persisted width percentage, wrapped in try/catch: `localStorage` can
|
|
11089
|
+
* throw (private browsing, storage disabled), and a resizable panel failing to
|
|
11090
|
+
* *render* over a persistence error would be worse than the panel simply
|
|
11091
|
+
* forgetting its width. `storage` defaults to `window.localStorage` and exists
|
|
11092
|
+
* as a seam for tests -- dropping the try/catch here is the exact failure this
|
|
11093
|
+
* must catch.
|
|
11094
|
+
*/ function readStoredPercent(key, storage = window.localStorage) {
|
|
11095
|
+
try {
|
|
11096
|
+
const raw = storage.getItem(key);
|
|
11097
|
+
if (raw == null) return null;
|
|
11098
|
+
const n = Number(raw);
|
|
11099
|
+
return Number.isFinite(n) ? n : null;
|
|
11100
|
+
} catch {
|
|
11101
|
+
// private mode / storage disabled -- behave as if nothing is stored
|
|
11102
|
+
return null;
|
|
11103
|
+
}
|
|
11104
|
+
}
|
|
11105
|
+
/** Writes a persisted width percentage, wrapped in try/catch -- see {@link readStoredPercent}. */ function writeStoredPercent(key, percent, storage = window.localStorage) {
|
|
11106
|
+
try {
|
|
11107
|
+
storage.setItem(key, String(percent));
|
|
11108
|
+
} catch {
|
|
11109
|
+
// private mode / quota exceeded -- persistence is best-effort
|
|
11110
|
+
}
|
|
11111
|
+
}
|
|
11112
|
+
/**
|
|
11113
|
+
* Owns ResizablePanel's width state and pointer-drag handling -- the same
|
|
11114
|
+
* split `useDataTableSort` draws between the state it owns and the DOM
|
|
11115
|
+
* ref/style/recipe-class assembly a styled component does on top. Ported
|
|
11116
|
+
* from your-moon/crisp's `resizablepanel.tsx`; ONLY the state/behavior moved
|
|
11117
|
+
* here, not the DOM -- `ResizablePanel.tsx` (react package) still renders
|
|
11118
|
+
* the spacer/panel/handle and reads back the panel's actual rendered rect,
|
|
11119
|
+
* because crisp's own comment matters just as much in this split: constraints
|
|
11120
|
+
* are CSS `min-width`/`max-width`, never re-clamped in JS. This hook only
|
|
11121
|
+
* ever writes an UNclamped drag width; the caller's own panel ref is what
|
|
11122
|
+
* gets read back after layout on pointerup.
|
|
11123
|
+
*/ function useResizablePanel(props) {
|
|
11124
|
+
const { side = "left", size, defaultSize = 280, onSizeChange, storageKey } = props;
|
|
11125
|
+
const controlled = size != null;
|
|
11126
|
+
const [width, setWidth] = useControllableState$1({
|
|
11127
|
+
prop: size,
|
|
11128
|
+
defaultProp: defaultSize,
|
|
11129
|
+
onChange: onSizeChange
|
|
11130
|
+
});
|
|
11131
|
+
const containerRef = React__namespace.useRef(null);
|
|
11132
|
+
const panelRef = React__namespace.useRef(null);
|
|
11133
|
+
const dragRef = React__namespace.useRef(null);
|
|
11134
|
+
const [dragging, setDragging] = React__namespace.useState(false);
|
|
11135
|
+
// Restore a persisted percentage on mount (uncontrolled + storageKey only).
|
|
11136
|
+
// biome-ignore lint/correctness/useExhaustiveDependencies: restore the persisted width once, on mount only
|
|
11137
|
+
React__namespace.useEffect(()=>{
|
|
11138
|
+
if (controlled || !storageKey) return;
|
|
11139
|
+
const percent = readStoredPercent(storageKey);
|
|
11140
|
+
if (percent == null) return;
|
|
11141
|
+
const containerWidth = containerRef.current?.getBoundingClientRect().width;
|
|
11142
|
+
if (!containerWidth) return;
|
|
11143
|
+
setWidth(percentToWidth(percent, containerWidth));
|
|
11144
|
+
}, []);
|
|
11145
|
+
const commitSize = React__namespace.useCallback((next)=>{
|
|
11146
|
+
setWidth(next);
|
|
11147
|
+
if (!controlled && storageKey) {
|
|
11148
|
+
const containerWidth = containerRef.current?.getBoundingClientRect().width;
|
|
11149
|
+
if (containerWidth) {
|
|
11150
|
+
writeStoredPercent(storageKey, widthToPercent(next, containerWidth));
|
|
11151
|
+
}
|
|
11152
|
+
}
|
|
11153
|
+
}, [
|
|
11154
|
+
controlled,
|
|
11155
|
+
setWidth,
|
|
11156
|
+
storageKey
|
|
11157
|
+
]);
|
|
11158
|
+
const onHandlePointerDown = React__namespace.useCallback((event)=>{
|
|
11159
|
+
event.preventDefault();
|
|
11160
|
+
event.target.setPointerCapture?.(event.pointerId);
|
|
11161
|
+
dragRef.current = {
|
|
11162
|
+
startX: event.clientX,
|
|
11163
|
+
startWidth: width,
|
|
11164
|
+
moved: false
|
|
11165
|
+
};
|
|
11166
|
+
}, [
|
|
11167
|
+
width
|
|
11168
|
+
]);
|
|
11169
|
+
const onHandlePointerMove = React__namespace.useCallback((event)=>{
|
|
11170
|
+
const drag = dragRef.current;
|
|
11171
|
+
if (!drag) return;
|
|
11172
|
+
if (!drag.moved) {
|
|
11173
|
+
drag.moved = true;
|
|
11174
|
+
setDragging(true);
|
|
11175
|
+
}
|
|
11176
|
+
const next = computeDragWidth(drag.startWidth, drag.startX, event.clientX, side);
|
|
11177
|
+
setWidth(next);
|
|
11178
|
+
}, [
|
|
11179
|
+
side,
|
|
11180
|
+
setWidth
|
|
11181
|
+
]);
|
|
11182
|
+
const onHandlePointerUp = React__namespace.useCallback((event)=>{
|
|
11183
|
+
const drag = dragRef.current;
|
|
11184
|
+
dragRef.current = null;
|
|
11185
|
+
setDragging(false);
|
|
11186
|
+
event.target.releasePointerCapture?.(event.pointerId);
|
|
11187
|
+
if (!drag) return;
|
|
11188
|
+
// Never re-clamp here: read back the panel's actual, CSS-clamped
|
|
11189
|
+
// rendered width after layout, and commit *that* value.
|
|
11190
|
+
const rect = panelRef.current?.getBoundingClientRect();
|
|
11191
|
+
const finalWidth = rect ? Math.round(rect.width) : width;
|
|
11192
|
+
commitSize(finalWidth);
|
|
11193
|
+
}, [
|
|
11194
|
+
width,
|
|
11195
|
+
commitSize
|
|
11196
|
+
]);
|
|
11197
|
+
// your-moon/crisp#795: double-click resets to `defaultSize`, confirmed
|
|
11198
|
+
// live on Attio's own record-page divider. Reuses `commitSize`, the same
|
|
11199
|
+
// commit path a drag already uses, so persistence (`storageKey`) picks up
|
|
11200
|
+
// the reset the same way it picks up a drag.
|
|
11201
|
+
const onHandleDoubleClick = React__namespace.useCallback(()=>{
|
|
11202
|
+
commitSize(defaultSize);
|
|
11203
|
+
}, [
|
|
11204
|
+
commitSize,
|
|
11205
|
+
defaultSize
|
|
11206
|
+
]);
|
|
11207
|
+
return {
|
|
11208
|
+
width,
|
|
11209
|
+
dragging,
|
|
11210
|
+
containerRef,
|
|
11211
|
+
panelRef,
|
|
11212
|
+
handleHandlers: {
|
|
11213
|
+
onPointerDown: onHandlePointerDown,
|
|
11214
|
+
onPointerMove: onHandlePointerMove,
|
|
11215
|
+
onPointerUp: onHandlePointerUp,
|
|
11216
|
+
onDoubleClick: onHandleDoubleClick
|
|
11217
|
+
}
|
|
11218
|
+
};
|
|
11219
|
+
}
|
|
11220
|
+
|
|
11221
|
+
// The "column" handle variant's own wider hit-target class -- a literal
|
|
11222
|
+
// class name (not a recipe slot) the same way the recipe itself keys off it
|
|
11223
|
+
// (`resizable-panel.ts`'s own `.crisp-seed-resizable-panel-handle--column`
|
|
11224
|
+
// selector), so this component and that recipe stay in lockstep without a
|
|
11225
|
+
// second source of truth for the string.
|
|
11226
|
+
const COLUMN_HANDLE_CLASS = "crisp-seed-resizable-panel-handle--column";
|
|
11227
|
+
/**
|
|
11228
|
+
* An adjustable-panel primitive: a spacer that reserves layout width plus a
|
|
11229
|
+
* panel that overlays it, so the panel can move between docked (in-flow) and
|
|
11230
|
+
* floating (`position: fixed`, an overlay) without a reflow glitch. Drag the
|
|
11231
|
+
* edge handle to resize; constraints are CSS `min-width`/`max-width`, never
|
|
11232
|
+
* re-clamped in JS. Ported from your-moon/crisp's `ResizablePanel`
|
|
11233
|
+
* (`components/resizablepanel/`); state/drag behavior lives in
|
|
11234
|
+
* `useResizablePanel` (`@seed-design/react-resizable-panel`), this component
|
|
11235
|
+
* owns the DOM + recipe classes on top of it.
|
|
11236
|
+
*/ const ResizablePanel = /*#__PURE__*/ React.forwardRef(({ side = "left", width: sizeProp, defaultSize = 280, onWidthChange, min = 200, max, floating = false, handleVariant = "panel", resizable = true, storageKey, className, children, ...rest }, forwardedRef)=>{
|
|
11237
|
+
const { width, dragging, containerRef, panelRef, handleHandlers } = useResizablePanel({
|
|
11238
|
+
side,
|
|
11239
|
+
size: sizeProp,
|
|
11240
|
+
defaultSize,
|
|
11241
|
+
onSizeChange: onWidthChange,
|
|
11242
|
+
storageKey
|
|
11243
|
+
});
|
|
11244
|
+
const classNames = resizablePanel();
|
|
11245
|
+
const maxStyle = max == null ? undefined : typeof max === "number" ? `${max}px` : max;
|
|
11246
|
+
const panelSizeStyle = {
|
|
11247
|
+
width,
|
|
11248
|
+
minWidth: min,
|
|
11249
|
+
maxWidth: maxStyle
|
|
11250
|
+
};
|
|
11251
|
+
return /*#__PURE__*/ jsxRuntime.jsxs(Primitive.div, {
|
|
11252
|
+
ref: (node)=>{
|
|
11253
|
+
containerRef.current = node;
|
|
11254
|
+
if (typeof forwardedRef === "function") forwardedRef(node);
|
|
11255
|
+
else if (forwardedRef) forwardedRef.current = node;
|
|
11256
|
+
},
|
|
11257
|
+
className: clsx(classNames.root, className),
|
|
11258
|
+
...rest,
|
|
11259
|
+
children: [
|
|
11260
|
+
/*#__PURE__*/ jsxRuntime.jsx(Primitive.div, {
|
|
11261
|
+
className: classNames.spacer,
|
|
11262
|
+
style: floating ? {
|
|
11263
|
+
width: 0
|
|
11264
|
+
} : {
|
|
11265
|
+
width,
|
|
11266
|
+
minWidth: min,
|
|
11267
|
+
maxWidth: maxStyle
|
|
11268
|
+
}
|
|
11269
|
+
}),
|
|
11270
|
+
/*#__PURE__*/ jsxRuntime.jsxs(Primitive.div, {
|
|
11271
|
+
ref: panelRef,
|
|
11272
|
+
className: classNames.panel,
|
|
11273
|
+
"data-side": side,
|
|
11274
|
+
"data-floating": floating ? "true" : "false",
|
|
11275
|
+
style: panelSizeStyle,
|
|
11276
|
+
children: [
|
|
11277
|
+
/*#__PURE__*/ jsxRuntime.jsx(Primitive.div, {
|
|
11278
|
+
className: classNames.inner,
|
|
11279
|
+
children: children
|
|
11280
|
+
}),
|
|
11281
|
+
resizable && /*#__PURE__*/ jsxRuntime.jsx(Primitive.div, {
|
|
11282
|
+
className: clsx(classNames.handle, handleVariant === "column" && COLUMN_HANDLE_CLASS),
|
|
11283
|
+
"data-side": side,
|
|
11284
|
+
"data-dragging": dragging ? "true" : undefined,
|
|
11285
|
+
"data-handle": "",
|
|
11286
|
+
...handleHandlers,
|
|
11287
|
+
children: handleVariant === "column" && /*#__PURE__*/ jsxRuntime.jsx(Primitive.span, {
|
|
11288
|
+
className: classNames.handleInner,
|
|
11289
|
+
"aria-hidden": "true"
|
|
11290
|
+
})
|
|
11291
|
+
})
|
|
11292
|
+
]
|
|
11293
|
+
})
|
|
11294
|
+
]
|
|
11295
|
+
});
|
|
11296
|
+
});
|
|
11297
|
+
ResizablePanel.displayName = "ResizablePanel";
|
|
11298
|
+
|
|
11299
|
+
__insertCSS(".seed-record-preview__root{display:flex;flex-direction:column;height:100%;overflow:hidden;background:var(--seed-color-bg-layer-default);font-family:Inter,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif}.seed-record-preview__toolbar{display:flex;align-items:center;height:49px;flex-shrink:0;padding:8px 10px;border-bottom:1px solid var(--seed-color-stroke-neutral-muted)}.seed-record-preview__toolbarSpacer{flex:1}.seed-record-preview__pager{display:flex;align-items:center;gap:6px;margin-inline-start:12px}.seed-record-preview__counter{margin-inline-start:12px;font-size:12px;font-weight:500;color:var(--seed-color-fg-neutral-subtle);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.seed-record-preview__iconbtn{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;flex-shrink:0;padding:0;border:none;border-radius:6px;background:0 0;color:var(--seed-color-fg-neutral-subtle);font-family:inherit;cursor:pointer;transition:background-color .12s}.seed-record-preview__iconbtn:hover{background:var(--seed-color-bg-layer-fill);color:var(--seed-color-fg-neutral)}.seed-record-preview__navbtn{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;flex-shrink:0;padding:0;border:none;border-radius:6px;background:var(--seed-color-bg-layer-default);box-shadow:inset 0 0 0 1px rgba(0,0,0,.06),0 0 2px rgba(28,40,64,.18),0 1px 3px rgba(0,0,0,.04);color:var(--seed-color-fg-neutral);font-family:inherit;cursor:pointer}.seed-record-preview__navbtn:hover:not(:disabled){background:var(--seed-color-bg-layer-fill)}.seed-record-preview__navbtn:disabled{opacity:.4;cursor:not-allowed}.seed-record-preview__header{display:flex;align-items:center;gap:8px;height:52px;flex-shrink:0;padding:0 12px}.seed-record-preview__fav{width:22px;height:22px;border-radius:4px;flex-shrink:0;object-fit:cover;background:var(--seed-color-bg-layer-fill)}.seed-record-preview__title{flex:1;min-width:0;font-size:16px;font-weight:600;letter-spacing:-.2px;color:var(--seed-color-fg-neutral);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.seed-record-preview__body{flex:1;min-height:0;overflow-y:auto;padding:8px 12px}.seed-record-preview__section{padding:8px 4px 0}.seed-record-preview__sectionHead{display:flex;align-items:center;justify-content:space-between;gap:8px;height:20px;margin-bottom:8px}.seed-record-preview__sectionLabel{font-size:14px;font-weight:500;color:var(--seed-color-fg-neutral-subtle)}.seed-record-preview__sectionAction{border:none;background:0 0;padding:0;font-family:inherit;font-size:10px;font-weight:400;color:color-mix(in srgb,var(--seed-color-fg-neutral) 55%,transparent);cursor:pointer}.seed-record-preview__sectionAction:hover{color:var(--seed-color-fg-neutral)}.seed-record-preview__highlights{display:grid;grid-template-columns:1fr 1fr;gap:8px}.seed-record-preview__highlight{display:flex;flex-direction:column;gap:6px;min-width:0}.seed-record-preview__highlightLabel{display:flex;align-items:center;gap:4px;font-size:12px;font-weight:500;color:var(--seed-color-fg-neutral-subtle)}.seed-record-preview__highlightLabel span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.seed-record-preview__highlightLabel svg{flex-shrink:0;color:var(--seed-color-fg-neutral-subtle)}.seed-record-preview__highlightValue{font-size:14px;font-weight:500;color:var(--seed-color-fg-neutral);overflow:hidden;text-overflow:ellipsis}.seed-record-preview__activity{font-size:14px}.seed-record-preview__sections{display:flex;flex-direction:column;padding-top:8px}.seed-record-preview__sectionTrigger{display:flex;align-items:center;gap:4px;width:100%;height:20px;padding:0 8px 0 12px;border:none;background:0 0;font-family:inherit;text-align:start;cursor:pointer}.seed-record-preview__sectionTrigger[data-inert]{cursor:default}.seed-record-preview__sectionRowLabel{font-size:14px;font-weight:500;color:var(--seed-color-fg-neutral)}.seed-record-preview__sectionRowCount{font-size:14px;color:var(--seed-color-fg-neutral-subtle)}.seed-record-preview__sectionChevron{margin-inline-start:auto;flex-shrink:0;color:var(--seed-color-fg-neutral-subtle);transition:transform .15s ease}.seed-record-preview__sectionChevron[data-open]{transform:rotate(180deg)}.seed-record-preview__sectionContent{padding:8px 8px 8px 12px}.seed-record-preview__footer{flex-shrink:0;display:flex;align-items:center;gap:8px;padding:8px 12px;border-top:1px solid var(--seed-color-stroke-neutral-muted)}");
|
|
11300
|
+
|
|
11301
|
+
const recordPreviewSlotNames = [
|
|
11302
|
+
[
|
|
11303
|
+
"root",
|
|
11304
|
+
"seed-record-preview__root"
|
|
11305
|
+
],
|
|
11306
|
+
[
|
|
11307
|
+
"toolbar",
|
|
11308
|
+
"seed-record-preview__toolbar"
|
|
11309
|
+
],
|
|
11310
|
+
[
|
|
11311
|
+
"toolbarSpacer",
|
|
11312
|
+
"seed-record-preview__toolbarSpacer"
|
|
11313
|
+
],
|
|
11314
|
+
[
|
|
11315
|
+
"pager",
|
|
11316
|
+
"seed-record-preview__pager"
|
|
11317
|
+
],
|
|
11318
|
+
[
|
|
11319
|
+
"counter",
|
|
11320
|
+
"seed-record-preview__counter"
|
|
11321
|
+
],
|
|
11322
|
+
[
|
|
11323
|
+
"iconbtn",
|
|
11324
|
+
"seed-record-preview__iconbtn"
|
|
11325
|
+
],
|
|
11326
|
+
[
|
|
11327
|
+
"navbtn",
|
|
11328
|
+
"seed-record-preview__navbtn"
|
|
11329
|
+
],
|
|
11330
|
+
[
|
|
11331
|
+
"header",
|
|
11332
|
+
"seed-record-preview__header"
|
|
11333
|
+
],
|
|
11334
|
+
[
|
|
11335
|
+
"fav",
|
|
11336
|
+
"seed-record-preview__fav"
|
|
11337
|
+
],
|
|
11338
|
+
[
|
|
11339
|
+
"title",
|
|
11340
|
+
"seed-record-preview__title"
|
|
11341
|
+
],
|
|
11342
|
+
[
|
|
11343
|
+
"body",
|
|
11344
|
+
"seed-record-preview__body"
|
|
11345
|
+
],
|
|
11346
|
+
[
|
|
11347
|
+
"section",
|
|
11348
|
+
"seed-record-preview__section"
|
|
11349
|
+
],
|
|
11350
|
+
[
|
|
11351
|
+
"sectionHead",
|
|
11352
|
+
"seed-record-preview__sectionHead"
|
|
11353
|
+
],
|
|
11354
|
+
[
|
|
11355
|
+
"sectionLabel",
|
|
11356
|
+
"seed-record-preview__sectionLabel"
|
|
11357
|
+
],
|
|
11358
|
+
[
|
|
11359
|
+
"sectionAction",
|
|
11360
|
+
"seed-record-preview__sectionAction"
|
|
11361
|
+
],
|
|
11362
|
+
[
|
|
11363
|
+
"highlights",
|
|
11364
|
+
"seed-record-preview__highlights"
|
|
11365
|
+
],
|
|
11366
|
+
[
|
|
11367
|
+
"highlight",
|
|
11368
|
+
"seed-record-preview__highlight"
|
|
11369
|
+
],
|
|
11370
|
+
[
|
|
11371
|
+
"highlightLabel",
|
|
11372
|
+
"seed-record-preview__highlightLabel"
|
|
11373
|
+
],
|
|
11374
|
+
[
|
|
11375
|
+
"highlightValue",
|
|
11376
|
+
"seed-record-preview__highlightValue"
|
|
11377
|
+
],
|
|
11378
|
+
[
|
|
11379
|
+
"activity",
|
|
11380
|
+
"seed-record-preview__activity"
|
|
11381
|
+
],
|
|
11382
|
+
[
|
|
11383
|
+
"sections",
|
|
11384
|
+
"seed-record-preview__sections"
|
|
11385
|
+
],
|
|
11386
|
+
[
|
|
11387
|
+
"sectionTrigger",
|
|
11388
|
+
"seed-record-preview__sectionTrigger"
|
|
11389
|
+
],
|
|
11390
|
+
[
|
|
11391
|
+
"sectionRowLabel",
|
|
11392
|
+
"seed-record-preview__sectionRowLabel"
|
|
11393
|
+
],
|
|
11394
|
+
[
|
|
11395
|
+
"sectionRowCount",
|
|
11396
|
+
"seed-record-preview__sectionRowCount"
|
|
11397
|
+
],
|
|
11398
|
+
[
|
|
11399
|
+
"sectionChevron",
|
|
11400
|
+
"seed-record-preview__sectionChevron"
|
|
11401
|
+
],
|
|
11402
|
+
[
|
|
11403
|
+
"sectionContent",
|
|
11404
|
+
"seed-record-preview__sectionContent"
|
|
11405
|
+
],
|
|
11406
|
+
[
|
|
11407
|
+
"footer",
|
|
11408
|
+
"seed-record-preview__footer"
|
|
11409
|
+
]
|
|
11410
|
+
];
|
|
11411
|
+
const defaultVariant = {};
|
|
11412
|
+
const compoundVariants = [];
|
|
11413
|
+
const recordPreviewVariantMap = {};
|
|
11414
|
+
function recordPreview(props) {
|
|
11415
|
+
return Object.fromEntries(recordPreviewSlotNames.map(([slot, className])=>{
|
|
11416
|
+
return [
|
|
11417
|
+
slot,
|
|
11418
|
+
createClassName(className, mergeVariants(defaultVariant, props), compoundVariants)
|
|
11419
|
+
];
|
|
11420
|
+
}));
|
|
11421
|
+
}
|
|
11422
|
+
Object.assign(recordPreview, {
|
|
11423
|
+
splitVariantProps: (props)=>splitVariantProps(props, recordPreviewVariantMap)
|
|
11424
|
+
}); // @recipe(seed): record-preview
|
|
11425
|
+
|
|
11426
|
+
const RESIZE_MIN_WIDTH = 360;
|
|
11427
|
+
const RESIZE_MAX_WIDTH = 720;
|
|
11428
|
+
/**
|
|
11429
|
+
* Right-side record peek panel -- Attio's own peek shows a Highlights card
|
|
11430
|
+
* area and an Activity feed (measured live). Ported from your-moon/crisp's
|
|
11431
|
+
* `RecordPanel` (`product/recordpanel/`), built ON `ResizablePanel`
|
|
11432
|
+
* (`side="right" floating`) rather than crisp's own duplicate absolute-
|
|
11433
|
+
* positioning/slide-in/resize-handle implementation -- the outer shell (the
|
|
11434
|
+
* `@starting-style` slide-in, the floating elevation, the drag handle
|
|
11435
|
+
* itself) all come from that primitive; this component only renders the
|
|
11436
|
+
* CONTENT inside it.
|
|
11437
|
+
*/ function RecordPreview({ open, record, onClose, className, closeLabel = "Close panel", onOpenRecord, openRecordLabel = "Open record", onPrevious, previousRecordLabel = "Previous record", onNext, nextRecordLabel = "Next record", title, avatar, highlightsLabel = "Highlights", highlights, counterLabel, resizable = false, width, defaultWidth = 420, onWidthChange, minWidth = RESIZE_MIN_WIDTH, maxWidth = RESIZE_MAX_WIDTH, activityLabel = "Activity", viewAllActivityLabel = "View all", onViewAllActivity, activity, sections, footer, ...rest }) {
|
|
11438
|
+
const titleId = React.useId();
|
|
11439
|
+
const classNames = recordPreview();
|
|
11440
|
+
// Which sections (your-moon/crisp#413) are expanded -- uncontrolled and
|
|
11441
|
+
// independent (Attio's own Emails/Notes/Tasks open without closing one
|
|
11442
|
+
// another): a plain `Set`, reset whenever the record itself changes so a
|
|
11443
|
+
// stale open section doesn't carry over between two different records.
|
|
11444
|
+
const [openSections, setOpenSections] = React.useState(()=>new Set());
|
|
11445
|
+
// biome-ignore lint/correctness/useExhaustiveDependencies: `record` is read as a change TRIGGER, not a value the effect body needs -- reset whenever it changes identity, regardless of what it now points to.
|
|
11446
|
+
React.useEffect(()=>{
|
|
11447
|
+
setOpenSections(new Set());
|
|
11448
|
+
}, [
|
|
11449
|
+
record
|
|
11450
|
+
]);
|
|
11451
|
+
const toggleSection = (key)=>setOpenSections((prev)=>{
|
|
11452
|
+
const next = new Set(prev);
|
|
11453
|
+
if (next.has(key)) next.delete(key);
|
|
11454
|
+
else next.add(key);
|
|
11455
|
+
return next;
|
|
11456
|
+
});
|
|
11457
|
+
// Close on Escape while open. Simpler than crisp's own version (crisp
|
|
11458
|
+
// additionally checks `hasOpenFloatingLayer()` so an Escape meant for a
|
|
11459
|
+
// nested Menu/Select/Popover doesn't also close this panel) -- crispy-seed
|
|
11460
|
+
// has no equivalent floating-stack registry to read, so a consumer nesting
|
|
11461
|
+
// its own floating layers inside `footer`/`sections` content should stop
|
|
11462
|
+
// propagation on its own Escape handler.
|
|
11463
|
+
React.useEffect(()=>{
|
|
11464
|
+
if (!open) return;
|
|
11465
|
+
const onKey = (event)=>{
|
|
11466
|
+
if (event.key === "Escape") onClose();
|
|
11467
|
+
};
|
|
11468
|
+
document.addEventListener("keydown", onKey);
|
|
11469
|
+
return ()=>document.removeEventListener("keydown", onKey);
|
|
11470
|
+
}, [
|
|
11471
|
+
open,
|
|
11472
|
+
onClose
|
|
11473
|
+
]);
|
|
11474
|
+
if (!open || !record) return null;
|
|
11475
|
+
const heading = title ?? record.name ?? "Record";
|
|
11476
|
+
return /*#__PURE__*/ jsxRuntime.jsx(ResizablePanel, {
|
|
11477
|
+
side: "right",
|
|
11478
|
+
floating: true,
|
|
11479
|
+
resizable: resizable,
|
|
11480
|
+
width: width,
|
|
11481
|
+
defaultSize: defaultWidth,
|
|
11482
|
+
onWidthChange: onWidthChange,
|
|
11483
|
+
min: minWidth,
|
|
11484
|
+
max: maxWidth,
|
|
11485
|
+
children: /*#__PURE__*/ jsxRuntime.jsxs(Primitive.div, {
|
|
11486
|
+
className: clsx(classNames.root, className),
|
|
11487
|
+
...rest,
|
|
11488
|
+
role: "dialog",
|
|
11489
|
+
"aria-labelledby": titleId,
|
|
11490
|
+
children: [
|
|
11491
|
+
/*#__PURE__*/ jsxRuntime.jsxs(Primitive.div, {
|
|
11492
|
+
className: classNames.toolbar,
|
|
11493
|
+
children: [
|
|
11494
|
+
/*#__PURE__*/ jsxRuntime.jsx(Primitive.button, {
|
|
11495
|
+
type: "button",
|
|
11496
|
+
className: classNames.iconbtn,
|
|
11497
|
+
"aria-label": closeLabel,
|
|
11498
|
+
onClick: onClose,
|
|
11499
|
+
children: /*#__PURE__*/ jsxRuntime.jsx(IconXmarkLine_default, {
|
|
11500
|
+
size: 16
|
|
11501
|
+
})
|
|
11502
|
+
}),
|
|
11503
|
+
(onPrevious || onNext) && /*#__PURE__*/ jsxRuntime.jsxs(Primitive.span, {
|
|
11504
|
+
className: classNames.pager,
|
|
11505
|
+
children: [
|
|
11506
|
+
/*#__PURE__*/ jsxRuntime.jsx(Primitive.button, {
|
|
11507
|
+
type: "button",
|
|
11508
|
+
className: classNames.navbtn,
|
|
11509
|
+
"aria-label": previousRecordLabel,
|
|
11510
|
+
disabled: !onPrevious,
|
|
11511
|
+
onClick: onPrevious,
|
|
11512
|
+
children: /*#__PURE__*/ jsxRuntime.jsx(IconChevronUpLine_default, {
|
|
11513
|
+
size: 16
|
|
11514
|
+
})
|
|
11515
|
+
}),
|
|
11516
|
+
/*#__PURE__*/ jsxRuntime.jsx(Primitive.button, {
|
|
11517
|
+
type: "button",
|
|
11518
|
+
className: classNames.navbtn,
|
|
11519
|
+
"aria-label": nextRecordLabel,
|
|
11520
|
+
disabled: !onNext,
|
|
11521
|
+
onClick: onNext,
|
|
11522
|
+
children: /*#__PURE__*/ jsxRuntime.jsx(IconChevronDownLine_default, {
|
|
11523
|
+
size: 16
|
|
11524
|
+
})
|
|
11525
|
+
})
|
|
11526
|
+
]
|
|
11527
|
+
}),
|
|
11528
|
+
counterLabel != null && /*#__PURE__*/ jsxRuntime.jsx(Primitive.span, {
|
|
11529
|
+
className: classNames.counter,
|
|
11530
|
+
children: counterLabel
|
|
11531
|
+
}),
|
|
11532
|
+
/*#__PURE__*/ jsxRuntime.jsx(Primitive.span, {
|
|
11533
|
+
className: classNames.toolbarSpacer
|
|
11534
|
+
}),
|
|
11535
|
+
onOpenRecord && /*#__PURE__*/ jsxRuntime.jsx(Primitive.button, {
|
|
11536
|
+
type: "button",
|
|
11537
|
+
className: classNames.navbtn,
|
|
11538
|
+
"aria-label": openRecordLabel,
|
|
11539
|
+
onClick: onOpenRecord,
|
|
11540
|
+
children: /*#__PURE__*/ jsxRuntime.jsx(IconArrowUpRightLine_default, {
|
|
11541
|
+
size: 16
|
|
11542
|
+
})
|
|
11543
|
+
})
|
|
11544
|
+
]
|
|
11545
|
+
}),
|
|
11546
|
+
/*#__PURE__*/ jsxRuntime.jsxs(Primitive.div, {
|
|
11547
|
+
className: classNames.header,
|
|
11548
|
+
children: [
|
|
11549
|
+
avatar ? /*#__PURE__*/ jsxRuntime.jsx(Primitive.img, {
|
|
11550
|
+
className: classNames.fav,
|
|
11551
|
+
src: avatar,
|
|
11552
|
+
alt: ""
|
|
11553
|
+
}) : /*#__PURE__*/ jsxRuntime.jsx(AvatarRoot, {
|
|
11554
|
+
size: "24",
|
|
11555
|
+
children: /*#__PURE__*/ jsxRuntime.jsx(AvatarFallback, {
|
|
11556
|
+
children: (record.name ?? "?").charAt(0)
|
|
11557
|
+
})
|
|
11558
|
+
}),
|
|
11559
|
+
/*#__PURE__*/ jsxRuntime.jsx(Primitive.span, {
|
|
11560
|
+
id: titleId,
|
|
11561
|
+
className: classNames.title,
|
|
11562
|
+
children: heading
|
|
11563
|
+
})
|
|
11564
|
+
]
|
|
11565
|
+
}),
|
|
11566
|
+
/*#__PURE__*/ jsxRuntime.jsxs(Primitive.div, {
|
|
11567
|
+
className: classNames.body,
|
|
11568
|
+
children: [
|
|
11569
|
+
highlights && highlights.length > 0 && /*#__PURE__*/ jsxRuntime.jsxs(Primitive.div, {
|
|
11570
|
+
className: classNames.section,
|
|
11571
|
+
children: [
|
|
11572
|
+
/*#__PURE__*/ jsxRuntime.jsx(Primitive.div, {
|
|
11573
|
+
className: classNames.sectionHead,
|
|
11574
|
+
children: /*#__PURE__*/ jsxRuntime.jsx(Primitive.span, {
|
|
11575
|
+
className: classNames.sectionLabel,
|
|
11576
|
+
children: highlightsLabel
|
|
11577
|
+
})
|
|
11578
|
+
}),
|
|
11579
|
+
/*#__PURE__*/ jsxRuntime.jsx(Primitive.div, {
|
|
11580
|
+
className: classNames.highlights,
|
|
11581
|
+
children: highlights.map((h)=>/*#__PURE__*/ jsxRuntime.jsxs(Primitive.div, {
|
|
11582
|
+
className: classNames.highlight,
|
|
11583
|
+
children: [
|
|
11584
|
+
/*#__PURE__*/ jsxRuntime.jsxs(Primitive.span, {
|
|
11585
|
+
className: classNames.highlightLabel,
|
|
11586
|
+
children: [
|
|
11587
|
+
/*#__PURE__*/ jsxRuntime.jsx("span", {
|
|
11588
|
+
children: h.label
|
|
11589
|
+
}),
|
|
11590
|
+
h.icon ? /*#__PURE__*/ jsxRuntime.jsx(h.icon, {
|
|
11591
|
+
size: 16
|
|
11592
|
+
}) : null
|
|
11593
|
+
]
|
|
11594
|
+
}),
|
|
11595
|
+
/*#__PURE__*/ jsxRuntime.jsx(Primitive.span, {
|
|
11596
|
+
className: classNames.highlightValue,
|
|
11597
|
+
children: h.value
|
|
11598
|
+
})
|
|
11599
|
+
]
|
|
11600
|
+
}, h.key))
|
|
11601
|
+
})
|
|
11602
|
+
]
|
|
11603
|
+
}),
|
|
11604
|
+
activity != null && /*#__PURE__*/ jsxRuntime.jsxs(Primitive.div, {
|
|
11605
|
+
className: classNames.section,
|
|
11606
|
+
children: [
|
|
11607
|
+
/*#__PURE__*/ jsxRuntime.jsxs(Primitive.div, {
|
|
11608
|
+
className: classNames.sectionHead,
|
|
11609
|
+
children: [
|
|
11610
|
+
/*#__PURE__*/ jsxRuntime.jsx(Primitive.span, {
|
|
11611
|
+
className: classNames.sectionLabel,
|
|
11612
|
+
children: activityLabel
|
|
11613
|
+
}),
|
|
11614
|
+
onViewAllActivity && /*#__PURE__*/ jsxRuntime.jsx(Primitive.button, {
|
|
11615
|
+
type: "button",
|
|
11616
|
+
className: classNames.sectionAction,
|
|
11617
|
+
onClick: onViewAllActivity,
|
|
11618
|
+
children: viewAllActivityLabel
|
|
11619
|
+
})
|
|
11620
|
+
]
|
|
11621
|
+
}),
|
|
11622
|
+
/*#__PURE__*/ jsxRuntime.jsx(Primitive.div, {
|
|
11623
|
+
className: classNames.activity,
|
|
11624
|
+
children: activity
|
|
11625
|
+
})
|
|
11626
|
+
]
|
|
11627
|
+
}),
|
|
11628
|
+
sections && sections.length > 0 && /*#__PURE__*/ jsxRuntime.jsx(Primitive.div, {
|
|
11629
|
+
className: classNames.sections,
|
|
11630
|
+
children: sections.map((s)=>{
|
|
11631
|
+
const isOpen = openSections.has(s.key);
|
|
11632
|
+
const panelId = `${titleId}-section-${s.key}`;
|
|
11633
|
+
return /*#__PURE__*/ jsxRuntime.jsxs("div", {
|
|
11634
|
+
children: [
|
|
11635
|
+
s.content ? /*#__PURE__*/ jsxRuntime.jsxs(Primitive.button, {
|
|
11636
|
+
type: "button",
|
|
11637
|
+
className: classNames.sectionTrigger,
|
|
11638
|
+
"aria-expanded": isOpen,
|
|
11639
|
+
"aria-controls": panelId,
|
|
11640
|
+
onClick: ()=>toggleSection(s.key),
|
|
11641
|
+
children: [
|
|
11642
|
+
/*#__PURE__*/ jsxRuntime.jsx(Primitive.span, {
|
|
11643
|
+
className: classNames.sectionRowLabel,
|
|
11644
|
+
children: s.label
|
|
11645
|
+
}),
|
|
11646
|
+
/*#__PURE__*/ jsxRuntime.jsx(Primitive.span, {
|
|
11647
|
+
className: classNames.sectionRowCount,
|
|
11648
|
+
children: s.count
|
|
11649
|
+
}),
|
|
11650
|
+
/*#__PURE__*/ jsxRuntime.jsx(IconChevronDownLine_default, {
|
|
11651
|
+
className: classNames.sectionChevron,
|
|
11652
|
+
size: 14,
|
|
11653
|
+
"data-open": isOpen ? "" : undefined,
|
|
11654
|
+
"aria-hidden": "true"
|
|
11655
|
+
})
|
|
11656
|
+
]
|
|
11657
|
+
}) : /*#__PURE__*/ jsxRuntime.jsxs(Primitive.div, {
|
|
11658
|
+
className: classNames.sectionTrigger,
|
|
11659
|
+
"data-inert": "",
|
|
11660
|
+
children: [
|
|
11661
|
+
/*#__PURE__*/ jsxRuntime.jsx(Primitive.span, {
|
|
11662
|
+
className: classNames.sectionRowLabel,
|
|
11663
|
+
children: s.label
|
|
11664
|
+
}),
|
|
11665
|
+
/*#__PURE__*/ jsxRuntime.jsx(Primitive.span, {
|
|
11666
|
+
className: classNames.sectionRowCount,
|
|
11667
|
+
children: s.count
|
|
11668
|
+
})
|
|
11669
|
+
]
|
|
11670
|
+
}),
|
|
11671
|
+
s.content && isOpen && /*#__PURE__*/ jsxRuntime.jsx(Primitive.div, {
|
|
11672
|
+
id: panelId,
|
|
11673
|
+
className: classNames.sectionContent,
|
|
11674
|
+
children: s.content
|
|
11675
|
+
})
|
|
11676
|
+
]
|
|
11677
|
+
}, s.key);
|
|
11678
|
+
})
|
|
11679
|
+
})
|
|
11680
|
+
]
|
|
11681
|
+
}),
|
|
11682
|
+
footer != null && /*#__PURE__*/ jsxRuntime.jsx(Primitive.div, {
|
|
11683
|
+
className: classNames.footer,
|
|
11684
|
+
children: footer
|
|
11685
|
+
})
|
|
11686
|
+
]
|
|
11687
|
+
})
|
|
11688
|
+
});
|
|
11689
|
+
}
|
|
11690
|
+
RecordPreview.displayName = "RecordPreview";
|
|
11691
|
+
|
|
10945
11692
|
exports.DataTable = DataTable;
|
|
10946
11693
|
exports.DataTableViewsControl = DataTableViewsControl;
|
|
11694
|
+
exports.RecordPreview = RecordPreview;
|
|
11695
|
+
exports.ResizablePanel = ResizablePanel;
|