@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.js
CHANGED
|
@@ -10,7 +10,7 @@ function __insertCSS(code) {
|
|
|
10
10
|
|
|
11
11
|
import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
|
|
12
12
|
import * as React from 'react';
|
|
13
|
-
import React__default, { forwardRef, useCallback, useMemo, useState, useRef, useEffect, createContext, useContext } from 'react';
|
|
13
|
+
import React__default, { forwardRef, useCallback, useMemo, useState, useRef, useEffect, createContext, useContext, useId } from 'react';
|
|
14
14
|
import { dataAttr, elementProps, ariaAttr, mergeProps as mergeProps$1 } from '@seed-design/dom-utils';
|
|
15
15
|
import { checkbox } from '@seed-design/css/recipes/checkbox';
|
|
16
16
|
import { checkmark } from '@seed-design/css/recipes/checkmark';
|
|
@@ -36,7 +36,7 @@ import { menu } from '@seed-design/css/recipes/menu';
|
|
|
36
36
|
import { menuItem } from '@seed-design/css/recipes/menu-item';
|
|
37
37
|
|
|
38
38
|
// src/IconArrowUpLine.tsx
|
|
39
|
-
var Icon$
|
|
39
|
+
var Icon$h = ({ size = 24, ...props }, ref)=>/* @__PURE__ */ jsx("svg", {
|
|
40
40
|
viewBox: "0 0 24 24",
|
|
41
41
|
fill: "none",
|
|
42
42
|
xmlns: "http://www.w3.org/2000/svg",
|
|
@@ -54,11 +54,11 @@ var Icon$f = ({ size = 24, ...props }, ref)=>/* @__PURE__ */ jsx("svg", {
|
|
|
54
54
|
})
|
|
55
55
|
})
|
|
56
56
|
});
|
|
57
|
-
var IconArrowUpLine = /*#__PURE__*/ forwardRef(Icon$
|
|
57
|
+
var IconArrowUpLine = /*#__PURE__*/ forwardRef(Icon$h);
|
|
58
58
|
var IconArrowUpLine_default = IconArrowUpLine;
|
|
59
59
|
|
|
60
60
|
// src/IconArrowDownLine.tsx
|
|
61
|
-
var Icon$
|
|
61
|
+
var Icon$g = ({ size = 24, ...props }, ref)=>/* @__PURE__ */ jsx("svg", {
|
|
62
62
|
viewBox: "0 0 24 24",
|
|
63
63
|
fill: "none",
|
|
64
64
|
xmlns: "http://www.w3.org/2000/svg",
|
|
@@ -76,11 +76,33 @@ var Icon$e = ({ size = 24, ...props }, ref)=>/* @__PURE__ */ jsx("svg", {
|
|
|
76
76
|
})
|
|
77
77
|
})
|
|
78
78
|
});
|
|
79
|
-
var IconArrowDownLine = /*#__PURE__*/ forwardRef(Icon$
|
|
79
|
+
var IconArrowDownLine = /*#__PURE__*/ forwardRef(Icon$g);
|
|
80
80
|
var IconArrowDownLine_default = IconArrowDownLine;
|
|
81
81
|
|
|
82
|
+
// src/IconArrowUpRightLine.tsx
|
|
83
|
+
var Icon$f = ({ size = 24, ...props }, ref)=>/* @__PURE__ */ jsx("svg", {
|
|
84
|
+
viewBox: "0 0 24 24",
|
|
85
|
+
fill: "none",
|
|
86
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
87
|
+
"data-seed-icon": "true",
|
|
88
|
+
width: size,
|
|
89
|
+
height: size,
|
|
90
|
+
ref,
|
|
91
|
+
...props,
|
|
92
|
+
children: /* @__PURE__ */ jsx("g", {
|
|
93
|
+
children: /* @__PURE__ */ jsx("path", {
|
|
94
|
+
fillRule: "evenodd",
|
|
95
|
+
clipRule: "evenodd",
|
|
96
|
+
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",
|
|
97
|
+
fill: "currentColor"
|
|
98
|
+
})
|
|
99
|
+
})
|
|
100
|
+
});
|
|
101
|
+
var IconArrowUpRightLine = /*#__PURE__*/ forwardRef(Icon$f);
|
|
102
|
+
var IconArrowUpRightLine_default = IconArrowUpRightLine;
|
|
103
|
+
|
|
82
104
|
// src/IconArrowUpArrowDownLine.tsx
|
|
83
|
-
var Icon$
|
|
105
|
+
var Icon$e = ({ size = 24, ...props }, ref)=>/* @__PURE__ */ jsx("svg", {
|
|
84
106
|
viewBox: "0 0 24 24",
|
|
85
107
|
fill: "none",
|
|
86
108
|
xmlns: "http://www.w3.org/2000/svg",
|
|
@@ -104,11 +126,11 @@ var Icon$d = ({ size = 24, ...props }, ref)=>/* @__PURE__ */ jsx("svg", {
|
|
|
104
126
|
})
|
|
105
127
|
})
|
|
106
128
|
});
|
|
107
|
-
var IconArrowUpArrowDownLine = /*#__PURE__*/ forwardRef(Icon$
|
|
129
|
+
var IconArrowUpArrowDownLine = /*#__PURE__*/ forwardRef(Icon$e);
|
|
108
130
|
var IconArrowUpArrowDownLine_default = IconArrowUpArrowDownLine;
|
|
109
131
|
|
|
110
132
|
// src/IconChevronDownLine.tsx
|
|
111
|
-
var Icon$
|
|
133
|
+
var Icon$d = ({ size = 24, ...props }, ref)=>/* @__PURE__ */ jsx("svg", {
|
|
112
134
|
viewBox: "0 0 24 24",
|
|
113
135
|
fill: "none",
|
|
114
136
|
xmlns: "http://www.w3.org/2000/svg",
|
|
@@ -126,11 +148,11 @@ var Icon$c = ({ size = 24, ...props }, ref)=>/* @__PURE__ */ jsx("svg", {
|
|
|
126
148
|
})
|
|
127
149
|
})
|
|
128
150
|
});
|
|
129
|
-
var IconChevronDownLine = /*#__PURE__*/ forwardRef(Icon$
|
|
151
|
+
var IconChevronDownLine = /*#__PURE__*/ forwardRef(Icon$d);
|
|
130
152
|
var IconChevronDownLine_default = IconChevronDownLine;
|
|
131
153
|
|
|
132
154
|
// src/IconChevronUpLine.tsx
|
|
133
|
-
var Icon$
|
|
155
|
+
var Icon$c = ({ size = 24, ...props }, ref)=>/* @__PURE__ */ jsx("svg", {
|
|
134
156
|
viewBox: "0 0 24 24",
|
|
135
157
|
fill: "none",
|
|
136
158
|
xmlns: "http://www.w3.org/2000/svg",
|
|
@@ -148,11 +170,11 @@ var Icon$b = ({ size = 24, ...props }, ref)=>/* @__PURE__ */ jsx("svg", {
|
|
|
148
170
|
})
|
|
149
171
|
})
|
|
150
172
|
});
|
|
151
|
-
var IconChevronUpLine = /*#__PURE__*/ forwardRef(Icon$
|
|
173
|
+
var IconChevronUpLine = /*#__PURE__*/ forwardRef(Icon$c);
|
|
152
174
|
var IconChevronUpLine_default = IconChevronUpLine;
|
|
153
175
|
|
|
154
176
|
// src/IconDot3HorizontalLine.tsx
|
|
155
|
-
var Icon$
|
|
177
|
+
var Icon$b = ({ size = 24, ...props }, ref)=>/* @__PURE__ */ jsx("svg", {
|
|
156
178
|
viewBox: "0 0 24 24",
|
|
157
179
|
fill: "none",
|
|
158
180
|
xmlns: "http://www.w3.org/2000/svg",
|
|
@@ -180,9 +202,37 @@ var Icon$a = ({ size = 24, ...props }, ref)=>/* @__PURE__ */ jsx("svg", {
|
|
|
180
202
|
})
|
|
181
203
|
})
|
|
182
204
|
});
|
|
183
|
-
var IconDot3HorizontalLine = /*#__PURE__*/ forwardRef(Icon$
|
|
205
|
+
var IconDot3HorizontalLine = /*#__PURE__*/ forwardRef(Icon$b);
|
|
184
206
|
var IconDot3HorizontalLine_default = IconDot3HorizontalLine;
|
|
185
207
|
|
|
208
|
+
// src/IconEyeLine.tsx
|
|
209
|
+
var Icon$a = ({ size = 24, ...props }, ref)=>/* @__PURE__ */ jsx("svg", {
|
|
210
|
+
viewBox: "0 0 24 24",
|
|
211
|
+
fill: "none",
|
|
212
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
213
|
+
"data-seed-icon": "true",
|
|
214
|
+
width: size,
|
|
215
|
+
height: size,
|
|
216
|
+
ref,
|
|
217
|
+
...props,
|
|
218
|
+
children: /* @__PURE__ */ jsx("g", {
|
|
219
|
+
children: /* @__PURE__ */ jsxs("g", {
|
|
220
|
+
children: [
|
|
221
|
+
/* @__PURE__ */ jsx("path", {
|
|
222
|
+
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",
|
|
223
|
+
fill: "currentColor"
|
|
224
|
+
}),
|
|
225
|
+
/* @__PURE__ */ jsx("path", {
|
|
226
|
+
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",
|
|
227
|
+
fill: "currentColor"
|
|
228
|
+
})
|
|
229
|
+
]
|
|
230
|
+
})
|
|
231
|
+
})
|
|
232
|
+
});
|
|
233
|
+
var IconEyeLine = /*#__PURE__*/ forwardRef(Icon$a);
|
|
234
|
+
var IconEyeLine_default = IconEyeLine;
|
|
235
|
+
|
|
186
236
|
// src/IconMagnifyingglassLine.tsx
|
|
187
237
|
var Icon$9 = ({ size = 24, ...props }, ref)=>/* @__PURE__ */ jsx("svg", {
|
|
188
238
|
viewBox: "0 0 24 24",
|
|
@@ -2484,7 +2534,7 @@ function formatDateTimeCell(value, locale) {
|
|
|
2484
2534
|
minute: "2-digit"
|
|
2485
2535
|
}).format(date);
|
|
2486
2536
|
}
|
|
2487
|
-
function EntityCell({ value, className, nameClassName }) {
|
|
2537
|
+
function EntityCell({ value, className, nameClassName, actionsClassName, actionClassName, column, row, openPreviewLabel }) {
|
|
2488
2538
|
const entity = typeof value === "object" && value !== null ? value : {
|
|
2489
2539
|
name: String(value ?? "")
|
|
2490
2540
|
};
|
|
@@ -2507,6 +2557,21 @@ function EntityCell({ value, className, nameClassName }) {
|
|
|
2507
2557
|
/*#__PURE__*/ jsx("span", {
|
|
2508
2558
|
className: nameClassName,
|
|
2509
2559
|
children: entity.name
|
|
2560
|
+
}),
|
|
2561
|
+
column?.onOpenPreview && row !== undefined && /*#__PURE__*/ jsx("span", {
|
|
2562
|
+
className: actionsClassName,
|
|
2563
|
+
children: /*#__PURE__*/ jsx("button", {
|
|
2564
|
+
type: "button",
|
|
2565
|
+
className: actionClassName,
|
|
2566
|
+
"aria-label": openPreviewLabel ?? "Open preview",
|
|
2567
|
+
onClick: (event)=>{
|
|
2568
|
+
event.stopPropagation();
|
|
2569
|
+
column.onOpenPreview?.(row);
|
|
2570
|
+
},
|
|
2571
|
+
children: /*#__PURE__*/ jsx(IconEyeLine_default, {
|
|
2572
|
+
size: 16
|
|
2573
|
+
})
|
|
2574
|
+
})
|
|
2510
2575
|
})
|
|
2511
2576
|
]
|
|
2512
2577
|
});
|
|
@@ -3065,7 +3130,7 @@ const TextFieldTextarea = /*#__PURE__*/ forwardRef(({ className, autoresize = tr
|
|
|
3065
3130
|
});
|
|
3066
3131
|
TextFieldTextarea.displayName = "TextFieldTextarea";
|
|
3067
3132
|
|
|
3068
|
-
__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))}");
|
|
3133
|
+
__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))}");
|
|
3069
3134
|
|
|
3070
3135
|
const createClassName = (className, variants, compoundVariants = [])=>{
|
|
3071
3136
|
const variantKeys = Object.keys(variants);
|
|
@@ -3160,6 +3225,14 @@ const dataTableSlotNames = [
|
|
|
3160
3225
|
"link",
|
|
3161
3226
|
"seed-data-table__link"
|
|
3162
3227
|
],
|
|
3228
|
+
[
|
|
3229
|
+
"entityActions",
|
|
3230
|
+
"seed-data-table__entityActions"
|
|
3231
|
+
],
|
|
3232
|
+
[
|
|
3233
|
+
"entityAction",
|
|
3234
|
+
"seed-data-table__entityAction"
|
|
3235
|
+
],
|
|
3163
3236
|
[
|
|
3164
3237
|
"toolbar",
|
|
3165
3238
|
"seed-data-table__toolbar"
|
|
@@ -3209,11 +3282,11 @@ const dataTableSlotNames = [
|
|
|
3209
3282
|
"seed-data-table__selectionCell"
|
|
3210
3283
|
]
|
|
3211
3284
|
];
|
|
3212
|
-
const defaultVariant$
|
|
3285
|
+
const defaultVariant$6 = {
|
|
3213
3286
|
"surface": "card",
|
|
3214
3287
|
"interactive": false
|
|
3215
3288
|
};
|
|
3216
|
-
const compoundVariants$
|
|
3289
|
+
const compoundVariants$6 = [];
|
|
3217
3290
|
const dataTableVariantMap = {
|
|
3218
3291
|
"surface": [
|
|
3219
3292
|
"card",
|
|
@@ -3228,7 +3301,7 @@ function dataTable(props) {
|
|
|
3228
3301
|
return Object.fromEntries(dataTableSlotNames.map(([slot, className])=>{
|
|
3229
3302
|
return [
|
|
3230
3303
|
slot,
|
|
3231
|
-
createClassName(className, mergeVariants(defaultVariant$
|
|
3304
|
+
createClassName(className, mergeVariants(defaultVariant$6, props), compoundVariants$6)
|
|
3232
3305
|
];
|
|
3233
3306
|
}));
|
|
3234
3307
|
}
|
|
@@ -3908,7 +3981,12 @@ function DisplayCellContent({ column, row, value, classNames, locale }) {
|
|
|
3908
3981
|
return /*#__PURE__*/ jsx(EntityCell, {
|
|
3909
3982
|
value: value,
|
|
3910
3983
|
className: classNames.entity,
|
|
3911
|
-
nameClassName: classNames.entityName
|
|
3984
|
+
nameClassName: classNames.entityName,
|
|
3985
|
+
actionsClassName: classNames.entityActions,
|
|
3986
|
+
actionClassName: classNames.entityAction,
|
|
3987
|
+
column: column,
|
|
3988
|
+
row: row,
|
|
3989
|
+
openPreviewLabel: column.openPreviewLabel
|
|
3912
3990
|
});
|
|
3913
3991
|
case "url":
|
|
3914
3992
|
case "email":
|
|
@@ -4521,12 +4599,12 @@ function ColumnRenameInput({ column, initialLabel, onDone }) {
|
|
|
4521
4599
|
|
|
4522
4600
|
__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)}}");
|
|
4523
4601
|
|
|
4524
|
-
const defaultVariant$
|
|
4602
|
+
const defaultVariant$5 = {
|
|
4525
4603
|
"variant": "brandSolid",
|
|
4526
4604
|
"size": "medium",
|
|
4527
4605
|
"layout": "withText"
|
|
4528
4606
|
};
|
|
4529
|
-
const compoundVariants$
|
|
4607
|
+
const compoundVariants$5 = [
|
|
4530
4608
|
{
|
|
4531
4609
|
"size": "xsmall",
|
|
4532
4610
|
"layout": "withText"
|
|
@@ -4582,7 +4660,7 @@ const actionButtonVariantMap = {
|
|
|
4582
4660
|
]
|
|
4583
4661
|
};
|
|
4584
4662
|
function actionButton(props) {
|
|
4585
|
-
return createClassName("seed-action-button", mergeVariants(defaultVariant$
|
|
4663
|
+
return createClassName("seed-action-button", mergeVariants(defaultVariant$5, props), compoundVariants$5);
|
|
4586
4664
|
}
|
|
4587
4665
|
Object.assign(actionButton, {
|
|
4588
4666
|
splitVariantProps: (props)=>splitVariantProps(props, actionButtonVariantMap)
|
|
@@ -5664,10 +5742,10 @@ const datePickerSlotNames = [
|
|
|
5664
5742
|
"seed-date-picker__liveRegion"
|
|
5665
5743
|
]
|
|
5666
5744
|
];
|
|
5667
|
-
const defaultVariant$
|
|
5745
|
+
const defaultVariant$4 = {
|
|
5668
5746
|
"visibleRange": "month"
|
|
5669
5747
|
};
|
|
5670
|
-
const compoundVariants$
|
|
5748
|
+
const compoundVariants$4 = [];
|
|
5671
5749
|
const datePickerVariantMap = {
|
|
5672
5750
|
"visibleRange": [
|
|
5673
5751
|
"month",
|
|
@@ -5680,7 +5758,7 @@ function datePicker(props) {
|
|
|
5680
5758
|
return Object.fromEntries(datePickerSlotNames.map(([slot, className])=>{
|
|
5681
5759
|
return [
|
|
5682
5760
|
slot,
|
|
5683
|
-
createClassName(className, mergeVariants(defaultVariant$
|
|
5761
|
+
createClassName(className, mergeVariants(defaultVariant$4, props), compoundVariants$4)
|
|
5684
5762
|
];
|
|
5685
5763
|
}));
|
|
5686
5764
|
}
|
|
@@ -8014,14 +8092,14 @@ const wheelPickerSlotNames = [
|
|
|
8014
8092
|
"seed-wheel-picker__selectionIndicator"
|
|
8015
8093
|
]
|
|
8016
8094
|
];
|
|
8017
|
-
const defaultVariant$
|
|
8018
|
-
const compoundVariants$
|
|
8095
|
+
const defaultVariant$3 = {};
|
|
8096
|
+
const compoundVariants$3 = [];
|
|
8019
8097
|
const wheelPickerVariantMap = {};
|
|
8020
8098
|
function wheelPicker(props) {
|
|
8021
8099
|
return Object.fromEntries(wheelPickerSlotNames.map(([slot, className])=>{
|
|
8022
8100
|
return [
|
|
8023
8101
|
slot,
|
|
8024
|
-
createClassName(className, mergeVariants(defaultVariant$
|
|
8102
|
+
createClassName(className, mergeVariants(defaultVariant$3, props), compoundVariants$3)
|
|
8025
8103
|
];
|
|
8026
8104
|
}));
|
|
8027
8105
|
}
|
|
@@ -8803,17 +8881,17 @@ var WheelPicker_namespace = {
|
|
|
8803
8881
|
|
|
8804
8882
|
__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}");
|
|
8805
8883
|
|
|
8806
|
-
const defaultVariant = {
|
|
8884
|
+
const defaultVariant$2 = {
|
|
8807
8885
|
"hideScrollBar": false
|
|
8808
8886
|
};
|
|
8809
|
-
const compoundVariants = [];
|
|
8887
|
+
const compoundVariants$2 = [];
|
|
8810
8888
|
const scrollFogVariantMap = {
|
|
8811
8889
|
"hideScrollBar": [
|
|
8812
8890
|
true
|
|
8813
8891
|
]
|
|
8814
8892
|
};
|
|
8815
8893
|
function scrollFog(props) {
|
|
8816
|
-
return createClassName("seed-scroll-fog", mergeVariants(defaultVariant, props), compoundVariants);
|
|
8894
|
+
return createClassName("seed-scroll-fog", mergeVariants(defaultVariant$2, props), compoundVariants$2);
|
|
8817
8895
|
}
|
|
8818
8896
|
Object.assign(scrollFog, {
|
|
8819
8897
|
splitVariantProps: (props)=>splitVariantProps(props, scrollFogVariantMap)
|
|
@@ -10923,4 +11001,673 @@ DataTableViewsControl.displayName = "DataTableViewsControl";
|
|
|
10923
11001
|
});
|
|
10924
11002
|
}
|
|
10925
11003
|
|
|
10926
|
-
|
|
11004
|
+
__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}");
|
|
11005
|
+
|
|
11006
|
+
const resizablePanelSlotNames = [
|
|
11007
|
+
[
|
|
11008
|
+
"root",
|
|
11009
|
+
"seed-resizable-panel__root"
|
|
11010
|
+
],
|
|
11011
|
+
[
|
|
11012
|
+
"spacer",
|
|
11013
|
+
"seed-resizable-panel__spacer"
|
|
11014
|
+
],
|
|
11015
|
+
[
|
|
11016
|
+
"panel",
|
|
11017
|
+
"seed-resizable-panel__panel"
|
|
11018
|
+
],
|
|
11019
|
+
[
|
|
11020
|
+
"inner",
|
|
11021
|
+
"seed-resizable-panel__inner"
|
|
11022
|
+
],
|
|
11023
|
+
[
|
|
11024
|
+
"handle",
|
|
11025
|
+
"seed-resizable-panel__handle"
|
|
11026
|
+
],
|
|
11027
|
+
[
|
|
11028
|
+
"handleInner",
|
|
11029
|
+
"seed-resizable-panel__handleInner"
|
|
11030
|
+
]
|
|
11031
|
+
];
|
|
11032
|
+
const defaultVariant$1 = {};
|
|
11033
|
+
const compoundVariants$1 = [];
|
|
11034
|
+
const resizablePanelVariantMap = {};
|
|
11035
|
+
function resizablePanel(props) {
|
|
11036
|
+
return Object.fromEntries(resizablePanelSlotNames.map(([slot, className])=>{
|
|
11037
|
+
return [
|
|
11038
|
+
slot,
|
|
11039
|
+
createClassName(className, mergeVariants(defaultVariant$1, props), compoundVariants$1)
|
|
11040
|
+
];
|
|
11041
|
+
}));
|
|
11042
|
+
}
|
|
11043
|
+
Object.assign(resizablePanel, {
|
|
11044
|
+
splitVariantProps: (props)=>splitVariantProps(props, resizablePanelVariantMap)
|
|
11045
|
+
}); // @recipe(seed): resizable-panel
|
|
11046
|
+
|
|
11047
|
+
// Pure geometry + persistence helpers for ResizablePanel -- isolated from React so
|
|
11048
|
+
// they're unit-testable without a DOM, the same split `useDataTable`'s own dom.ts
|
|
11049
|
+
// draws for its column-layout math. Ported from your-moon/crisp's
|
|
11050
|
+
// `components/resizablepanel/resizablepanel.tsx` (computeDragWidth/widthToPercent/
|
|
11051
|
+
// percentToWidth/readStoredPercent/writeStoredPercent), unchanged in behavior.
|
|
11052
|
+
/**
|
|
11053
|
+
* Drag delta -> next width, in px, signed by which edge of the panel the handle
|
|
11054
|
+
* drags from. A left-side panel's handle sits at its *right* edge, so dragging
|
|
11055
|
+
* right (positive dx) grows it; a right-side panel's handle sits at its *left*
|
|
11056
|
+
* edge, so dragging right shrinks it.
|
|
11057
|
+
*/ function computeDragWidth(startWidth, startX, clientX, side) {
|
|
11058
|
+
const dx = clientX - startX;
|
|
11059
|
+
return side === "left" ? startWidth + dx : startWidth - dx;
|
|
11060
|
+
}
|
|
11061
|
+
/** width (px) -> percentage of the container's width. Pure, unrounded. */ function widthToPercent(width, containerWidth) {
|
|
11062
|
+
if (!(containerWidth > 0)) return 0;
|
|
11063
|
+
return width / containerWidth * 100;
|
|
11064
|
+
}
|
|
11065
|
+
/** percentage of the container's width -> width (px). Pure, unrounded. */ function percentToWidth(percent, containerWidth) {
|
|
11066
|
+
return percent / 100 * containerWidth;
|
|
11067
|
+
}
|
|
11068
|
+
/**
|
|
11069
|
+
* Reads a persisted width percentage, wrapped in try/catch: `localStorage` can
|
|
11070
|
+
* throw (private browsing, storage disabled), and a resizable panel failing to
|
|
11071
|
+
* *render* over a persistence error would be worse than the panel simply
|
|
11072
|
+
* forgetting its width. `storage` defaults to `window.localStorage` and exists
|
|
11073
|
+
* as a seam for tests -- dropping the try/catch here is the exact failure this
|
|
11074
|
+
* must catch.
|
|
11075
|
+
*/ function readStoredPercent(key, storage = window.localStorage) {
|
|
11076
|
+
try {
|
|
11077
|
+
const raw = storage.getItem(key);
|
|
11078
|
+
if (raw == null) return null;
|
|
11079
|
+
const n = Number(raw);
|
|
11080
|
+
return Number.isFinite(n) ? n : null;
|
|
11081
|
+
} catch {
|
|
11082
|
+
// private mode / storage disabled -- behave as if nothing is stored
|
|
11083
|
+
return null;
|
|
11084
|
+
}
|
|
11085
|
+
}
|
|
11086
|
+
/** Writes a persisted width percentage, wrapped in try/catch -- see {@link readStoredPercent}. */ function writeStoredPercent(key, percent, storage = window.localStorage) {
|
|
11087
|
+
try {
|
|
11088
|
+
storage.setItem(key, String(percent));
|
|
11089
|
+
} catch {
|
|
11090
|
+
// private mode / quota exceeded -- persistence is best-effort
|
|
11091
|
+
}
|
|
11092
|
+
}
|
|
11093
|
+
/**
|
|
11094
|
+
* Owns ResizablePanel's width state and pointer-drag handling -- the same
|
|
11095
|
+
* split `useDataTableSort` draws between the state it owns and the DOM
|
|
11096
|
+
* ref/style/recipe-class assembly a styled component does on top. Ported
|
|
11097
|
+
* from your-moon/crisp's `resizablepanel.tsx`; ONLY the state/behavior moved
|
|
11098
|
+
* here, not the DOM -- `ResizablePanel.tsx` (react package) still renders
|
|
11099
|
+
* the spacer/panel/handle and reads back the panel's actual rendered rect,
|
|
11100
|
+
* because crisp's own comment matters just as much in this split: constraints
|
|
11101
|
+
* are CSS `min-width`/`max-width`, never re-clamped in JS. This hook only
|
|
11102
|
+
* ever writes an UNclamped drag width; the caller's own panel ref is what
|
|
11103
|
+
* gets read back after layout on pointerup.
|
|
11104
|
+
*/ function useResizablePanel(props) {
|
|
11105
|
+
const { side = "left", size, defaultSize = 280, onSizeChange, storageKey } = props;
|
|
11106
|
+
const controlled = size != null;
|
|
11107
|
+
const [width, setWidth] = useControllableState$1({
|
|
11108
|
+
prop: size,
|
|
11109
|
+
defaultProp: defaultSize,
|
|
11110
|
+
onChange: onSizeChange
|
|
11111
|
+
});
|
|
11112
|
+
const containerRef = React.useRef(null);
|
|
11113
|
+
const panelRef = React.useRef(null);
|
|
11114
|
+
const dragRef = React.useRef(null);
|
|
11115
|
+
const [dragging, setDragging] = React.useState(false);
|
|
11116
|
+
// Restore a persisted percentage on mount (uncontrolled + storageKey only).
|
|
11117
|
+
// biome-ignore lint/correctness/useExhaustiveDependencies: restore the persisted width once, on mount only
|
|
11118
|
+
React.useEffect(()=>{
|
|
11119
|
+
if (controlled || !storageKey) return;
|
|
11120
|
+
const percent = readStoredPercent(storageKey);
|
|
11121
|
+
if (percent == null) return;
|
|
11122
|
+
const containerWidth = containerRef.current?.getBoundingClientRect().width;
|
|
11123
|
+
if (!containerWidth) return;
|
|
11124
|
+
setWidth(percentToWidth(percent, containerWidth));
|
|
11125
|
+
}, []);
|
|
11126
|
+
const commitSize = React.useCallback((next)=>{
|
|
11127
|
+
setWidth(next);
|
|
11128
|
+
if (!controlled && storageKey) {
|
|
11129
|
+
const containerWidth = containerRef.current?.getBoundingClientRect().width;
|
|
11130
|
+
if (containerWidth) {
|
|
11131
|
+
writeStoredPercent(storageKey, widthToPercent(next, containerWidth));
|
|
11132
|
+
}
|
|
11133
|
+
}
|
|
11134
|
+
}, [
|
|
11135
|
+
controlled,
|
|
11136
|
+
setWidth,
|
|
11137
|
+
storageKey
|
|
11138
|
+
]);
|
|
11139
|
+
const onHandlePointerDown = React.useCallback((event)=>{
|
|
11140
|
+
event.preventDefault();
|
|
11141
|
+
event.target.setPointerCapture?.(event.pointerId);
|
|
11142
|
+
dragRef.current = {
|
|
11143
|
+
startX: event.clientX,
|
|
11144
|
+
startWidth: width,
|
|
11145
|
+
moved: false
|
|
11146
|
+
};
|
|
11147
|
+
}, [
|
|
11148
|
+
width
|
|
11149
|
+
]);
|
|
11150
|
+
const onHandlePointerMove = React.useCallback((event)=>{
|
|
11151
|
+
const drag = dragRef.current;
|
|
11152
|
+
if (!drag) return;
|
|
11153
|
+
if (!drag.moved) {
|
|
11154
|
+
drag.moved = true;
|
|
11155
|
+
setDragging(true);
|
|
11156
|
+
}
|
|
11157
|
+
const next = computeDragWidth(drag.startWidth, drag.startX, event.clientX, side);
|
|
11158
|
+
setWidth(next);
|
|
11159
|
+
}, [
|
|
11160
|
+
side,
|
|
11161
|
+
setWidth
|
|
11162
|
+
]);
|
|
11163
|
+
const onHandlePointerUp = React.useCallback((event)=>{
|
|
11164
|
+
const drag = dragRef.current;
|
|
11165
|
+
dragRef.current = null;
|
|
11166
|
+
setDragging(false);
|
|
11167
|
+
event.target.releasePointerCapture?.(event.pointerId);
|
|
11168
|
+
if (!drag) return;
|
|
11169
|
+
// Never re-clamp here: read back the panel's actual, CSS-clamped
|
|
11170
|
+
// rendered width after layout, and commit *that* value.
|
|
11171
|
+
const rect = panelRef.current?.getBoundingClientRect();
|
|
11172
|
+
const finalWidth = rect ? Math.round(rect.width) : width;
|
|
11173
|
+
commitSize(finalWidth);
|
|
11174
|
+
}, [
|
|
11175
|
+
width,
|
|
11176
|
+
commitSize
|
|
11177
|
+
]);
|
|
11178
|
+
// your-moon/crisp#795: double-click resets to `defaultSize`, confirmed
|
|
11179
|
+
// live on Attio's own record-page divider. Reuses `commitSize`, the same
|
|
11180
|
+
// commit path a drag already uses, so persistence (`storageKey`) picks up
|
|
11181
|
+
// the reset the same way it picks up a drag.
|
|
11182
|
+
const onHandleDoubleClick = React.useCallback(()=>{
|
|
11183
|
+
commitSize(defaultSize);
|
|
11184
|
+
}, [
|
|
11185
|
+
commitSize,
|
|
11186
|
+
defaultSize
|
|
11187
|
+
]);
|
|
11188
|
+
return {
|
|
11189
|
+
width,
|
|
11190
|
+
dragging,
|
|
11191
|
+
containerRef,
|
|
11192
|
+
panelRef,
|
|
11193
|
+
handleHandlers: {
|
|
11194
|
+
onPointerDown: onHandlePointerDown,
|
|
11195
|
+
onPointerMove: onHandlePointerMove,
|
|
11196
|
+
onPointerUp: onHandlePointerUp,
|
|
11197
|
+
onDoubleClick: onHandleDoubleClick
|
|
11198
|
+
}
|
|
11199
|
+
};
|
|
11200
|
+
}
|
|
11201
|
+
|
|
11202
|
+
// The "column" handle variant's own wider hit-target class -- a literal
|
|
11203
|
+
// class name (not a recipe slot) the same way the recipe itself keys off it
|
|
11204
|
+
// (`resizable-panel.ts`'s own `.crisp-seed-resizable-panel-handle--column`
|
|
11205
|
+
// selector), so this component and that recipe stay in lockstep without a
|
|
11206
|
+
// second source of truth for the string.
|
|
11207
|
+
const COLUMN_HANDLE_CLASS = "crisp-seed-resizable-panel-handle--column";
|
|
11208
|
+
/**
|
|
11209
|
+
* An adjustable-panel primitive: a spacer that reserves layout width plus a
|
|
11210
|
+
* panel that overlays it, so the panel can move between docked (in-flow) and
|
|
11211
|
+
* floating (`position: fixed`, an overlay) without a reflow glitch. Drag the
|
|
11212
|
+
* edge handle to resize; constraints are CSS `min-width`/`max-width`, never
|
|
11213
|
+
* re-clamped in JS. Ported from your-moon/crisp's `ResizablePanel`
|
|
11214
|
+
* (`components/resizablepanel/`); state/drag behavior lives in
|
|
11215
|
+
* `useResizablePanel` (`@seed-design/react-resizable-panel`), this component
|
|
11216
|
+
* owns the DOM + recipe classes on top of it.
|
|
11217
|
+
*/ const ResizablePanel = /*#__PURE__*/ forwardRef(({ side = "left", width: sizeProp, defaultSize = 280, onWidthChange, min = 200, max, floating = false, handleVariant = "panel", resizable = true, storageKey, className, children, ...rest }, forwardedRef)=>{
|
|
11218
|
+
const { width, dragging, containerRef, panelRef, handleHandlers } = useResizablePanel({
|
|
11219
|
+
side,
|
|
11220
|
+
size: sizeProp,
|
|
11221
|
+
defaultSize,
|
|
11222
|
+
onSizeChange: onWidthChange,
|
|
11223
|
+
storageKey
|
|
11224
|
+
});
|
|
11225
|
+
const classNames = resizablePanel();
|
|
11226
|
+
const maxStyle = max == null ? undefined : typeof max === "number" ? `${max}px` : max;
|
|
11227
|
+
const panelSizeStyle = {
|
|
11228
|
+
width,
|
|
11229
|
+
minWidth: min,
|
|
11230
|
+
maxWidth: maxStyle
|
|
11231
|
+
};
|
|
11232
|
+
return /*#__PURE__*/ jsxs(Primitive.div, {
|
|
11233
|
+
ref: (node)=>{
|
|
11234
|
+
containerRef.current = node;
|
|
11235
|
+
if (typeof forwardedRef === "function") forwardedRef(node);
|
|
11236
|
+
else if (forwardedRef) forwardedRef.current = node;
|
|
11237
|
+
},
|
|
11238
|
+
className: clsx(classNames.root, className),
|
|
11239
|
+
...rest,
|
|
11240
|
+
children: [
|
|
11241
|
+
/*#__PURE__*/ jsx(Primitive.div, {
|
|
11242
|
+
className: classNames.spacer,
|
|
11243
|
+
style: floating ? {
|
|
11244
|
+
width: 0
|
|
11245
|
+
} : {
|
|
11246
|
+
width,
|
|
11247
|
+
minWidth: min,
|
|
11248
|
+
maxWidth: maxStyle
|
|
11249
|
+
}
|
|
11250
|
+
}),
|
|
11251
|
+
/*#__PURE__*/ jsxs(Primitive.div, {
|
|
11252
|
+
ref: panelRef,
|
|
11253
|
+
className: classNames.panel,
|
|
11254
|
+
"data-side": side,
|
|
11255
|
+
"data-floating": floating ? "true" : "false",
|
|
11256
|
+
style: panelSizeStyle,
|
|
11257
|
+
children: [
|
|
11258
|
+
/*#__PURE__*/ jsx(Primitive.div, {
|
|
11259
|
+
className: classNames.inner,
|
|
11260
|
+
children: children
|
|
11261
|
+
}),
|
|
11262
|
+
resizable && /*#__PURE__*/ jsx(Primitive.div, {
|
|
11263
|
+
className: clsx(classNames.handle, handleVariant === "column" && COLUMN_HANDLE_CLASS),
|
|
11264
|
+
"data-side": side,
|
|
11265
|
+
"data-dragging": dragging ? "true" : undefined,
|
|
11266
|
+
"data-handle": "",
|
|
11267
|
+
...handleHandlers,
|
|
11268
|
+
children: handleVariant === "column" && /*#__PURE__*/ jsx(Primitive.span, {
|
|
11269
|
+
className: classNames.handleInner,
|
|
11270
|
+
"aria-hidden": "true"
|
|
11271
|
+
})
|
|
11272
|
+
})
|
|
11273
|
+
]
|
|
11274
|
+
})
|
|
11275
|
+
]
|
|
11276
|
+
});
|
|
11277
|
+
});
|
|
11278
|
+
ResizablePanel.displayName = "ResizablePanel";
|
|
11279
|
+
|
|
11280
|
+
__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)}");
|
|
11281
|
+
|
|
11282
|
+
const recordPreviewSlotNames = [
|
|
11283
|
+
[
|
|
11284
|
+
"root",
|
|
11285
|
+
"seed-record-preview__root"
|
|
11286
|
+
],
|
|
11287
|
+
[
|
|
11288
|
+
"toolbar",
|
|
11289
|
+
"seed-record-preview__toolbar"
|
|
11290
|
+
],
|
|
11291
|
+
[
|
|
11292
|
+
"toolbarSpacer",
|
|
11293
|
+
"seed-record-preview__toolbarSpacer"
|
|
11294
|
+
],
|
|
11295
|
+
[
|
|
11296
|
+
"pager",
|
|
11297
|
+
"seed-record-preview__pager"
|
|
11298
|
+
],
|
|
11299
|
+
[
|
|
11300
|
+
"counter",
|
|
11301
|
+
"seed-record-preview__counter"
|
|
11302
|
+
],
|
|
11303
|
+
[
|
|
11304
|
+
"iconbtn",
|
|
11305
|
+
"seed-record-preview__iconbtn"
|
|
11306
|
+
],
|
|
11307
|
+
[
|
|
11308
|
+
"navbtn",
|
|
11309
|
+
"seed-record-preview__navbtn"
|
|
11310
|
+
],
|
|
11311
|
+
[
|
|
11312
|
+
"header",
|
|
11313
|
+
"seed-record-preview__header"
|
|
11314
|
+
],
|
|
11315
|
+
[
|
|
11316
|
+
"fav",
|
|
11317
|
+
"seed-record-preview__fav"
|
|
11318
|
+
],
|
|
11319
|
+
[
|
|
11320
|
+
"title",
|
|
11321
|
+
"seed-record-preview__title"
|
|
11322
|
+
],
|
|
11323
|
+
[
|
|
11324
|
+
"body",
|
|
11325
|
+
"seed-record-preview__body"
|
|
11326
|
+
],
|
|
11327
|
+
[
|
|
11328
|
+
"section",
|
|
11329
|
+
"seed-record-preview__section"
|
|
11330
|
+
],
|
|
11331
|
+
[
|
|
11332
|
+
"sectionHead",
|
|
11333
|
+
"seed-record-preview__sectionHead"
|
|
11334
|
+
],
|
|
11335
|
+
[
|
|
11336
|
+
"sectionLabel",
|
|
11337
|
+
"seed-record-preview__sectionLabel"
|
|
11338
|
+
],
|
|
11339
|
+
[
|
|
11340
|
+
"sectionAction",
|
|
11341
|
+
"seed-record-preview__sectionAction"
|
|
11342
|
+
],
|
|
11343
|
+
[
|
|
11344
|
+
"highlights",
|
|
11345
|
+
"seed-record-preview__highlights"
|
|
11346
|
+
],
|
|
11347
|
+
[
|
|
11348
|
+
"highlight",
|
|
11349
|
+
"seed-record-preview__highlight"
|
|
11350
|
+
],
|
|
11351
|
+
[
|
|
11352
|
+
"highlightLabel",
|
|
11353
|
+
"seed-record-preview__highlightLabel"
|
|
11354
|
+
],
|
|
11355
|
+
[
|
|
11356
|
+
"highlightValue",
|
|
11357
|
+
"seed-record-preview__highlightValue"
|
|
11358
|
+
],
|
|
11359
|
+
[
|
|
11360
|
+
"activity",
|
|
11361
|
+
"seed-record-preview__activity"
|
|
11362
|
+
],
|
|
11363
|
+
[
|
|
11364
|
+
"sections",
|
|
11365
|
+
"seed-record-preview__sections"
|
|
11366
|
+
],
|
|
11367
|
+
[
|
|
11368
|
+
"sectionTrigger",
|
|
11369
|
+
"seed-record-preview__sectionTrigger"
|
|
11370
|
+
],
|
|
11371
|
+
[
|
|
11372
|
+
"sectionRowLabel",
|
|
11373
|
+
"seed-record-preview__sectionRowLabel"
|
|
11374
|
+
],
|
|
11375
|
+
[
|
|
11376
|
+
"sectionRowCount",
|
|
11377
|
+
"seed-record-preview__sectionRowCount"
|
|
11378
|
+
],
|
|
11379
|
+
[
|
|
11380
|
+
"sectionChevron",
|
|
11381
|
+
"seed-record-preview__sectionChevron"
|
|
11382
|
+
],
|
|
11383
|
+
[
|
|
11384
|
+
"sectionContent",
|
|
11385
|
+
"seed-record-preview__sectionContent"
|
|
11386
|
+
],
|
|
11387
|
+
[
|
|
11388
|
+
"footer",
|
|
11389
|
+
"seed-record-preview__footer"
|
|
11390
|
+
]
|
|
11391
|
+
];
|
|
11392
|
+
const defaultVariant = {};
|
|
11393
|
+
const compoundVariants = [];
|
|
11394
|
+
const recordPreviewVariantMap = {};
|
|
11395
|
+
function recordPreview(props) {
|
|
11396
|
+
return Object.fromEntries(recordPreviewSlotNames.map(([slot, className])=>{
|
|
11397
|
+
return [
|
|
11398
|
+
slot,
|
|
11399
|
+
createClassName(className, mergeVariants(defaultVariant, props), compoundVariants)
|
|
11400
|
+
];
|
|
11401
|
+
}));
|
|
11402
|
+
}
|
|
11403
|
+
Object.assign(recordPreview, {
|
|
11404
|
+
splitVariantProps: (props)=>splitVariantProps(props, recordPreviewVariantMap)
|
|
11405
|
+
}); // @recipe(seed): record-preview
|
|
11406
|
+
|
|
11407
|
+
const RESIZE_MIN_WIDTH = 360;
|
|
11408
|
+
const RESIZE_MAX_WIDTH = 720;
|
|
11409
|
+
/**
|
|
11410
|
+
* Right-side record peek panel -- Attio's own peek shows a Highlights card
|
|
11411
|
+
* area and an Activity feed (measured live). Ported from your-moon/crisp's
|
|
11412
|
+
* `RecordPanel` (`product/recordpanel/`), built ON `ResizablePanel`
|
|
11413
|
+
* (`side="right" floating`) rather than crisp's own duplicate absolute-
|
|
11414
|
+
* positioning/slide-in/resize-handle implementation -- the outer shell (the
|
|
11415
|
+
* `@starting-style` slide-in, the floating elevation, the drag handle
|
|
11416
|
+
* itself) all come from that primitive; this component only renders the
|
|
11417
|
+
* CONTENT inside it.
|
|
11418
|
+
*/ 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 }) {
|
|
11419
|
+
const titleId = useId();
|
|
11420
|
+
const classNames = recordPreview();
|
|
11421
|
+
// Which sections (your-moon/crisp#413) are expanded -- uncontrolled and
|
|
11422
|
+
// independent (Attio's own Emails/Notes/Tasks open without closing one
|
|
11423
|
+
// another): a plain `Set`, reset whenever the record itself changes so a
|
|
11424
|
+
// stale open section doesn't carry over between two different records.
|
|
11425
|
+
const [openSections, setOpenSections] = useState(()=>new Set());
|
|
11426
|
+
// 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.
|
|
11427
|
+
useEffect(()=>{
|
|
11428
|
+
setOpenSections(new Set());
|
|
11429
|
+
}, [
|
|
11430
|
+
record
|
|
11431
|
+
]);
|
|
11432
|
+
const toggleSection = (key)=>setOpenSections((prev)=>{
|
|
11433
|
+
const next = new Set(prev);
|
|
11434
|
+
if (next.has(key)) next.delete(key);
|
|
11435
|
+
else next.add(key);
|
|
11436
|
+
return next;
|
|
11437
|
+
});
|
|
11438
|
+
// Close on Escape while open. Simpler than crisp's own version (crisp
|
|
11439
|
+
// additionally checks `hasOpenFloatingLayer()` so an Escape meant for a
|
|
11440
|
+
// nested Menu/Select/Popover doesn't also close this panel) -- crispy-seed
|
|
11441
|
+
// has no equivalent floating-stack registry to read, so a consumer nesting
|
|
11442
|
+
// its own floating layers inside `footer`/`sections` content should stop
|
|
11443
|
+
// propagation on its own Escape handler.
|
|
11444
|
+
useEffect(()=>{
|
|
11445
|
+
if (!open) return;
|
|
11446
|
+
const onKey = (event)=>{
|
|
11447
|
+
if (event.key === "Escape") onClose();
|
|
11448
|
+
};
|
|
11449
|
+
document.addEventListener("keydown", onKey);
|
|
11450
|
+
return ()=>document.removeEventListener("keydown", onKey);
|
|
11451
|
+
}, [
|
|
11452
|
+
open,
|
|
11453
|
+
onClose
|
|
11454
|
+
]);
|
|
11455
|
+
if (!open || !record) return null;
|
|
11456
|
+
const heading = title ?? record.name ?? "Record";
|
|
11457
|
+
return /*#__PURE__*/ jsx(ResizablePanel, {
|
|
11458
|
+
side: "right",
|
|
11459
|
+
floating: true,
|
|
11460
|
+
resizable: resizable,
|
|
11461
|
+
width: width,
|
|
11462
|
+
defaultSize: defaultWidth,
|
|
11463
|
+
onWidthChange: onWidthChange,
|
|
11464
|
+
min: minWidth,
|
|
11465
|
+
max: maxWidth,
|
|
11466
|
+
children: /*#__PURE__*/ jsxs(Primitive.div, {
|
|
11467
|
+
className: clsx(classNames.root, className),
|
|
11468
|
+
...rest,
|
|
11469
|
+
role: "dialog",
|
|
11470
|
+
"aria-labelledby": titleId,
|
|
11471
|
+
children: [
|
|
11472
|
+
/*#__PURE__*/ jsxs(Primitive.div, {
|
|
11473
|
+
className: classNames.toolbar,
|
|
11474
|
+
children: [
|
|
11475
|
+
/*#__PURE__*/ jsx(Primitive.button, {
|
|
11476
|
+
type: "button",
|
|
11477
|
+
className: classNames.iconbtn,
|
|
11478
|
+
"aria-label": closeLabel,
|
|
11479
|
+
onClick: onClose,
|
|
11480
|
+
children: /*#__PURE__*/ jsx(IconXmarkLine_default, {
|
|
11481
|
+
size: 16
|
|
11482
|
+
})
|
|
11483
|
+
}),
|
|
11484
|
+
(onPrevious || onNext) && /*#__PURE__*/ jsxs(Primitive.span, {
|
|
11485
|
+
className: classNames.pager,
|
|
11486
|
+
children: [
|
|
11487
|
+
/*#__PURE__*/ jsx(Primitive.button, {
|
|
11488
|
+
type: "button",
|
|
11489
|
+
className: classNames.navbtn,
|
|
11490
|
+
"aria-label": previousRecordLabel,
|
|
11491
|
+
disabled: !onPrevious,
|
|
11492
|
+
onClick: onPrevious,
|
|
11493
|
+
children: /*#__PURE__*/ jsx(IconChevronUpLine_default, {
|
|
11494
|
+
size: 16
|
|
11495
|
+
})
|
|
11496
|
+
}),
|
|
11497
|
+
/*#__PURE__*/ jsx(Primitive.button, {
|
|
11498
|
+
type: "button",
|
|
11499
|
+
className: classNames.navbtn,
|
|
11500
|
+
"aria-label": nextRecordLabel,
|
|
11501
|
+
disabled: !onNext,
|
|
11502
|
+
onClick: onNext,
|
|
11503
|
+
children: /*#__PURE__*/ jsx(IconChevronDownLine_default, {
|
|
11504
|
+
size: 16
|
|
11505
|
+
})
|
|
11506
|
+
})
|
|
11507
|
+
]
|
|
11508
|
+
}),
|
|
11509
|
+
counterLabel != null && /*#__PURE__*/ jsx(Primitive.span, {
|
|
11510
|
+
className: classNames.counter,
|
|
11511
|
+
children: counterLabel
|
|
11512
|
+
}),
|
|
11513
|
+
/*#__PURE__*/ jsx(Primitive.span, {
|
|
11514
|
+
className: classNames.toolbarSpacer
|
|
11515
|
+
}),
|
|
11516
|
+
onOpenRecord && /*#__PURE__*/ jsx(Primitive.button, {
|
|
11517
|
+
type: "button",
|
|
11518
|
+
className: classNames.navbtn,
|
|
11519
|
+
"aria-label": openRecordLabel,
|
|
11520
|
+
onClick: onOpenRecord,
|
|
11521
|
+
children: /*#__PURE__*/ jsx(IconArrowUpRightLine_default, {
|
|
11522
|
+
size: 16
|
|
11523
|
+
})
|
|
11524
|
+
})
|
|
11525
|
+
]
|
|
11526
|
+
}),
|
|
11527
|
+
/*#__PURE__*/ jsxs(Primitive.div, {
|
|
11528
|
+
className: classNames.header,
|
|
11529
|
+
children: [
|
|
11530
|
+
avatar ? /*#__PURE__*/ jsx(Primitive.img, {
|
|
11531
|
+
className: classNames.fav,
|
|
11532
|
+
src: avatar,
|
|
11533
|
+
alt: ""
|
|
11534
|
+
}) : /*#__PURE__*/ jsx(AvatarRoot, {
|
|
11535
|
+
size: "24",
|
|
11536
|
+
children: /*#__PURE__*/ jsx(AvatarFallback, {
|
|
11537
|
+
children: (record.name ?? "?").charAt(0)
|
|
11538
|
+
})
|
|
11539
|
+
}),
|
|
11540
|
+
/*#__PURE__*/ jsx(Primitive.span, {
|
|
11541
|
+
id: titleId,
|
|
11542
|
+
className: classNames.title,
|
|
11543
|
+
children: heading
|
|
11544
|
+
})
|
|
11545
|
+
]
|
|
11546
|
+
}),
|
|
11547
|
+
/*#__PURE__*/ jsxs(Primitive.div, {
|
|
11548
|
+
className: classNames.body,
|
|
11549
|
+
children: [
|
|
11550
|
+
highlights && highlights.length > 0 && /*#__PURE__*/ jsxs(Primitive.div, {
|
|
11551
|
+
className: classNames.section,
|
|
11552
|
+
children: [
|
|
11553
|
+
/*#__PURE__*/ jsx(Primitive.div, {
|
|
11554
|
+
className: classNames.sectionHead,
|
|
11555
|
+
children: /*#__PURE__*/ jsx(Primitive.span, {
|
|
11556
|
+
className: classNames.sectionLabel,
|
|
11557
|
+
children: highlightsLabel
|
|
11558
|
+
})
|
|
11559
|
+
}),
|
|
11560
|
+
/*#__PURE__*/ jsx(Primitive.div, {
|
|
11561
|
+
className: classNames.highlights,
|
|
11562
|
+
children: highlights.map((h)=>/*#__PURE__*/ jsxs(Primitive.div, {
|
|
11563
|
+
className: classNames.highlight,
|
|
11564
|
+
children: [
|
|
11565
|
+
/*#__PURE__*/ jsxs(Primitive.span, {
|
|
11566
|
+
className: classNames.highlightLabel,
|
|
11567
|
+
children: [
|
|
11568
|
+
/*#__PURE__*/ jsx("span", {
|
|
11569
|
+
children: h.label
|
|
11570
|
+
}),
|
|
11571
|
+
h.icon ? /*#__PURE__*/ jsx(h.icon, {
|
|
11572
|
+
size: 16
|
|
11573
|
+
}) : null
|
|
11574
|
+
]
|
|
11575
|
+
}),
|
|
11576
|
+
/*#__PURE__*/ jsx(Primitive.span, {
|
|
11577
|
+
className: classNames.highlightValue,
|
|
11578
|
+
children: h.value
|
|
11579
|
+
})
|
|
11580
|
+
]
|
|
11581
|
+
}, h.key))
|
|
11582
|
+
})
|
|
11583
|
+
]
|
|
11584
|
+
}),
|
|
11585
|
+
activity != null && /*#__PURE__*/ jsxs(Primitive.div, {
|
|
11586
|
+
className: classNames.section,
|
|
11587
|
+
children: [
|
|
11588
|
+
/*#__PURE__*/ jsxs(Primitive.div, {
|
|
11589
|
+
className: classNames.sectionHead,
|
|
11590
|
+
children: [
|
|
11591
|
+
/*#__PURE__*/ jsx(Primitive.span, {
|
|
11592
|
+
className: classNames.sectionLabel,
|
|
11593
|
+
children: activityLabel
|
|
11594
|
+
}),
|
|
11595
|
+
onViewAllActivity && /*#__PURE__*/ jsx(Primitive.button, {
|
|
11596
|
+
type: "button",
|
|
11597
|
+
className: classNames.sectionAction,
|
|
11598
|
+
onClick: onViewAllActivity,
|
|
11599
|
+
children: viewAllActivityLabel
|
|
11600
|
+
})
|
|
11601
|
+
]
|
|
11602
|
+
}),
|
|
11603
|
+
/*#__PURE__*/ jsx(Primitive.div, {
|
|
11604
|
+
className: classNames.activity,
|
|
11605
|
+
children: activity
|
|
11606
|
+
})
|
|
11607
|
+
]
|
|
11608
|
+
}),
|
|
11609
|
+
sections && sections.length > 0 && /*#__PURE__*/ jsx(Primitive.div, {
|
|
11610
|
+
className: classNames.sections,
|
|
11611
|
+
children: sections.map((s)=>{
|
|
11612
|
+
const isOpen = openSections.has(s.key);
|
|
11613
|
+
const panelId = `${titleId}-section-${s.key}`;
|
|
11614
|
+
return /*#__PURE__*/ jsxs("div", {
|
|
11615
|
+
children: [
|
|
11616
|
+
s.content ? /*#__PURE__*/ jsxs(Primitive.button, {
|
|
11617
|
+
type: "button",
|
|
11618
|
+
className: classNames.sectionTrigger,
|
|
11619
|
+
"aria-expanded": isOpen,
|
|
11620
|
+
"aria-controls": panelId,
|
|
11621
|
+
onClick: ()=>toggleSection(s.key),
|
|
11622
|
+
children: [
|
|
11623
|
+
/*#__PURE__*/ jsx(Primitive.span, {
|
|
11624
|
+
className: classNames.sectionRowLabel,
|
|
11625
|
+
children: s.label
|
|
11626
|
+
}),
|
|
11627
|
+
/*#__PURE__*/ jsx(Primitive.span, {
|
|
11628
|
+
className: classNames.sectionRowCount,
|
|
11629
|
+
children: s.count
|
|
11630
|
+
}),
|
|
11631
|
+
/*#__PURE__*/ jsx(IconChevronDownLine_default, {
|
|
11632
|
+
className: classNames.sectionChevron,
|
|
11633
|
+
size: 14,
|
|
11634
|
+
"data-open": isOpen ? "" : undefined,
|
|
11635
|
+
"aria-hidden": "true"
|
|
11636
|
+
})
|
|
11637
|
+
]
|
|
11638
|
+
}) : /*#__PURE__*/ jsxs(Primitive.div, {
|
|
11639
|
+
className: classNames.sectionTrigger,
|
|
11640
|
+
"data-inert": "",
|
|
11641
|
+
children: [
|
|
11642
|
+
/*#__PURE__*/ jsx(Primitive.span, {
|
|
11643
|
+
className: classNames.sectionRowLabel,
|
|
11644
|
+
children: s.label
|
|
11645
|
+
}),
|
|
11646
|
+
/*#__PURE__*/ jsx(Primitive.span, {
|
|
11647
|
+
className: classNames.sectionRowCount,
|
|
11648
|
+
children: s.count
|
|
11649
|
+
})
|
|
11650
|
+
]
|
|
11651
|
+
}),
|
|
11652
|
+
s.content && isOpen && /*#__PURE__*/ jsx(Primitive.div, {
|
|
11653
|
+
id: panelId,
|
|
11654
|
+
className: classNames.sectionContent,
|
|
11655
|
+
children: s.content
|
|
11656
|
+
})
|
|
11657
|
+
]
|
|
11658
|
+
}, s.key);
|
|
11659
|
+
})
|
|
11660
|
+
})
|
|
11661
|
+
]
|
|
11662
|
+
}),
|
|
11663
|
+
footer != null && /*#__PURE__*/ jsx(Primitive.div, {
|
|
11664
|
+
className: classNames.footer,
|
|
11665
|
+
children: footer
|
|
11666
|
+
})
|
|
11667
|
+
]
|
|
11668
|
+
})
|
|
11669
|
+
});
|
|
11670
|
+
}
|
|
11671
|
+
RecordPreview.displayName = "RecordPreview";
|
|
11672
|
+
|
|
11673
|
+
export { DataTable, DataTableViewsControl, RecordPreview, ResizablePanel };
|