@rebasepro/ui 0.14.2-canary.gf913b76 → 0.15.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/components/Typography.d.ts +4 -0
- package/dist/index.css +56 -4
- package/dist/index.es.js +162 -37
- package/dist/index.es.js.map +1 -1
- package/dist/src/index.css +56 -4
- package/dist/src/theme.css +8 -5
- package/dist/styles.d.ts +29 -1
- package/dist/theme.css +8 -5
- package/dist/util/chip_colors.d.ts +14 -0
- package/dist/views/CollectionView/CollectionView.d.ts +22 -2
- package/dist/views/CollectionView/CollectionViewToolbar.d.ts +11 -1
- package/dist/views/CollectionView/CollectionViewTypes.d.ts +40 -2
- package/package.json +1 -1
- package/src/components/Chip.tsx +10 -0
- package/src/components/Typography.tsx +15 -3
- package/src/index.css +56 -4
- package/src/styles.ts +47 -1
- package/src/theme.css +8 -5
- package/src/util/chip_colors.ts +119 -5
- package/src/views/CollectionView/CollectionView.tsx +56 -0
- package/src/views/CollectionView/CollectionViewToolbar.tsx +20 -7
- package/src/views/CollectionView/CollectionViewTypes.ts +44 -2
|
@@ -31,6 +31,10 @@ declare const typographyVariants: {
|
|
|
31
31
|
inherit: string;
|
|
32
32
|
caption: string;
|
|
33
33
|
button: string;
|
|
34
|
+
lead: string;
|
|
35
|
+
micro: string;
|
|
36
|
+
mono: string;
|
|
37
|
+
stat: string;
|
|
34
38
|
};
|
|
35
39
|
export declare function Typography<C extends React.ElementType = "span">({ align, color, children, className, component, gutterBottom, noWrap, paragraph, variant, variantMapping, style, onClick, ...other }: TypographyProps<C>): React.JSX.Element;
|
|
36
40
|
export {};
|
package/dist/index.css
CHANGED
|
@@ -36,26 +36,40 @@ html.dark {
|
|
|
36
36
|
size goes up. Seven consecutive levels of semibold was a Rubik-era setting,
|
|
37
37
|
and holding 600 all the way down to text-sm made every heading shout equally
|
|
38
38
|
— a heading stops being a headline somewhere, and the scale should say where.
|
|
39
|
-
|
|
39
|
+
|
|
40
|
+
The ladder now spans three weights rather than two. 600 everywhere at the top
|
|
41
|
+
meant a page title and the section heading inside it were the same voice at
|
|
42
|
+
two sizes, so a screen had no clear first thing to read. 700 is the *display*
|
|
43
|
+
tier only — h1 and h2, page titles and stat numbers — and nothing in the UI
|
|
44
|
+
chrome (nav, labels, buttons, table headers) goes above 600.
|
|
45
|
+
|
|
46
|
+
This costs nothing on the wire: both faces are loaded as VARIABLE fonts
|
|
47
|
+
(@fontsource-variable/inter, @fontsource-variable/instrument-sans), so the
|
|
48
|
+
whole weight axis is already in the file that ships. The earlier "never above
|
|
49
|
+
600" rule was written when static weights meant every step was another
|
|
50
|
+
download; that constraint no longer exists.
|
|
40
51
|
|
|
41
52
|
With a single face carrying both headings and body, weight and tracking are
|
|
42
53
|
the only things separating a heading from the copy around it — so the tiers
|
|
43
54
|
have to actually differ, rather than all sitting at 600. */
|
|
44
55
|
|
|
45
56
|
.typography-h1 {
|
|
46
|
-
@apply text-4xl font-headers font-
|
|
57
|
+
@apply text-4xl font-headers font-bold tracking-display;
|
|
47
58
|
}
|
|
48
59
|
|
|
49
60
|
.typography-h2 {
|
|
50
|
-
@apply text-3xl font-headers font-
|
|
61
|
+
@apply text-3xl font-headers font-bold tracking-display;
|
|
51
62
|
}
|
|
52
63
|
|
|
53
64
|
.typography-h3 {
|
|
54
65
|
@apply text-2xl font-headers font-semibold tracking-title;
|
|
55
66
|
}
|
|
56
67
|
|
|
68
|
+
/* Semibold, not medium: h4 is the section heading inside a page, and at 20px
|
|
69
|
+
medium sits close enough to body copy that a long page reads as one
|
|
70
|
+
undifferentiated column. */
|
|
57
71
|
.typography-h4 {
|
|
58
|
-
@apply text-xl font-headers font-
|
|
72
|
+
@apply text-xl font-headers font-semibold tracking-title;
|
|
59
73
|
}
|
|
60
74
|
|
|
61
75
|
.typography-h5 {
|
|
@@ -98,6 +112,44 @@ html.dark {
|
|
|
98
112
|
@apply text-sm font-semibold tracking-wide;
|
|
99
113
|
}
|
|
100
114
|
|
|
115
|
+
/* ---------------------------------------------------------------------------
|
|
116
|
+
* Three tiers the product kept improvising because the system had no name for
|
|
117
|
+
* them. Each existed as hand-written utilities in several places before it
|
|
118
|
+
* existed here, which is the definition of a missing token.
|
|
119
|
+
* ------------------------------------------------------------------------- */
|
|
120
|
+
|
|
121
|
+
/* The sentence under a page title. `body2` (12px) was standing in for it, which
|
|
122
|
+
made the one line explaining what a page is FOR smaller than the page's own
|
|
123
|
+
table rows. A lead is read once, deliberately, and it gets room to be read. */
|
|
124
|
+
.typography-lead {
|
|
125
|
+
@apply text-base leading-relaxed;
|
|
126
|
+
}
|
|
127
|
+
|
|
128
|
+
/* The micro-label above a value: SCANNED, KEPT, TOOK, WHEN. Uppercase and
|
|
129
|
+
tracked so it reads as a field name rather than as copy, and small enough
|
|
130
|
+
that it never competes with the value it names.
|
|
131
|
+
|
|
132
|
+
This is the one product tier below `text-xs`. It earns the exception by never
|
|
133
|
+
carrying a sentence — it is always one or two words naming the thing directly
|
|
134
|
+
underneath it, and at 11px uppercase with this tracking it stays legible
|
|
135
|
+
where 11px prose would not. */
|
|
136
|
+
.typography-micro {
|
|
137
|
+
@apply text-2xs font-medium uppercase tracking-[0.08em];
|
|
138
|
+
}
|
|
139
|
+
|
|
140
|
+
/* A measured value: a count, a duration, a timestamp, an id, a size.
|
|
141
|
+
`tabular-nums` is the point — proportional digits make a column of numbers
|
|
142
|
+
ragged and a live-updating counter jitter as its glyphs change width. */
|
|
143
|
+
.typography-mono {
|
|
144
|
+
@apply font-mono tabular-nums;
|
|
145
|
+
}
|
|
146
|
+
|
|
147
|
+
/* The headline number on a stat tile. Display weight, display tracking, and
|
|
148
|
+
tabular figures so a row of tiles shares a baseline grid. */
|
|
149
|
+
.typography-stat {
|
|
150
|
+
@apply text-3xl font-headers font-bold tracking-display tabular-nums;
|
|
151
|
+
}
|
|
152
|
+
|
|
101
153
|
:focus-visible {
|
|
102
154
|
@apply outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-0 focus-visible:ring-offset-transparent
|
|
103
155
|
}
|
package/dist/index.es.js
CHANGED
|
@@ -68,7 +68,35 @@ var fieldBackgroundDisabledMixin = "bg-surface-accent-200/50 dark:bg-white/[0.03
|
|
|
68
68
|
var fieldBackgroundHoverMixin = "hover:bg-surface-accent-200/70 hover:dark:bg-white/[0.09]";
|
|
69
69
|
var defaultBorderMixin = "border-surface-200 dark:border-surface-700/60 ";
|
|
70
70
|
var paperMixin = "bg-white rounded-lg dark:bg-surface-900 border border-surface-200 dark:border-surface-700";
|
|
71
|
-
var cardMixin = "bg-white dark:bg-surface-900 rounded-
|
|
71
|
+
var cardMixin = "bg-white dark:bg-surface-900 rounded-xl border border-surface-200 dark:border-surface-700/60";
|
|
72
|
+
/**
|
|
73
|
+
* An inset well: code, a query, a log tail, a connection string.
|
|
74
|
+
*
|
|
75
|
+
* It must read as *recessed into* the surface holding it, which means darker
|
|
76
|
+
* than that surface in dark mode — `surface-950` under a `surface-900` card.
|
|
77
|
+
* The obvious-looking `surface-800` is a trap: `#111111` is LIGHTER than the
|
|
78
|
+
* `#0a0a0a` card around it, so the well appears to float above the thing it is
|
|
79
|
+
* set into. Pair with `font-mono`; this mixin carries the surface only.
|
|
80
|
+
*/
|
|
81
|
+
var codeSurfaceMixin = "bg-surface-100 dark:bg-surface-950 rounded-md";
|
|
82
|
+
/**
|
|
83
|
+
* The accent, used as TEXT.
|
|
84
|
+
*
|
|
85
|
+
* `--color-primary` (#0070F4) is tuned to be a fill — white text on it, it on
|
|
86
|
+
* white. Read as text on our dark surfaces it lands at **4.36:1 on a
|
|
87
|
+
* `surface-900` card** (measured), which is below AA for body-sized text, and
|
|
88
|
+
* every accent link in the product sits on exactly that surface. On the page's
|
|
89
|
+
* `surface-950` it only reaches 4.62:1, so the margin was never real.
|
|
90
|
+
*
|
|
91
|
+
* `--color-primary-light` is the same hue lifted 0.15 in OKLCH lightness and
|
|
92
|
+
* measures **7.34:1** on the same card. It is indistinguishable as "the blue"
|
|
93
|
+
* and comfortably legible, so dark mode swaps to it for text.
|
|
94
|
+
*
|
|
95
|
+
* Use this for links, accent labels and any accent-coloured type. It is NOT for
|
|
96
|
+
* fills — a filled button keeps `bg-primary`, where the contrast question runs
|
|
97
|
+
* the other way and #0070F4 is already correct.
|
|
98
|
+
*/
|
|
99
|
+
var accentTextMixin = "text-primary dark:text-primary-light";
|
|
72
100
|
var cardClickableMixin = "hover:bg-primary/5 dark:hover:bg-primary/5 cursor-pointer transition-colors duration-150";
|
|
73
101
|
var cardSelectedMixin = "bg-primary-bg/30 dark:bg-primary-bg/10 ring-1 ring-primary/75";
|
|
74
102
|
//#endregion
|
|
@@ -110,6 +138,64 @@ function hashString(str) {
|
|
|
110
138
|
}
|
|
111
139
|
//#endregion
|
|
112
140
|
//#region src/util/chip_colors.ts
|
|
141
|
+
/** WCAG floor, plus a little margin so rounding cannot drop a pair below 4.5. */
|
|
142
|
+
var CONTRAST_TARGET = 4.6;
|
|
143
|
+
/** Page backgrounds the outlined variant sits on: `bg-white` and `surface-950`. */
|
|
144
|
+
var PAGE_LIGHT = "#ffffff";
|
|
145
|
+
var PAGE_DARK = "#0a0a0a";
|
|
146
|
+
function toRgb(hex) {
|
|
147
|
+
let h = hex.replace("#", "");
|
|
148
|
+
if (h.length === 3) h = h.split("").map((c) => c + c).join("");
|
|
149
|
+
return [
|
|
150
|
+
0,
|
|
151
|
+
2,
|
|
152
|
+
4
|
|
153
|
+
].map((i) => parseInt(h.slice(i, i + 2), 16));
|
|
154
|
+
}
|
|
155
|
+
function toHex(rgb) {
|
|
156
|
+
return "#" + rgb.map((v) => Math.round(Math.max(0, Math.min(255, v))).toString(16).padStart(2, "0")).join("");
|
|
157
|
+
}
|
|
158
|
+
function relativeLuminance(hex) {
|
|
159
|
+
const [r, g, b] = toRgb(hex).map((v) => {
|
|
160
|
+
const c = v / 255;
|
|
161
|
+
return c <= .03928 ? c / 12.92 : Math.pow((c + .055) / 1.055, 2.4);
|
|
162
|
+
});
|
|
163
|
+
return .2126 * r + .7152 * g + .0722 * b;
|
|
164
|
+
}
|
|
165
|
+
function contrastRatio(a, b) {
|
|
166
|
+
const x = relativeLuminance(a);
|
|
167
|
+
const y = relativeLuminance(b);
|
|
168
|
+
const [hi, lo] = x > y ? [x, y] : [y, x];
|
|
169
|
+
return (hi + .05) / (lo + .05);
|
|
170
|
+
}
|
|
171
|
+
function mixHex(from, to, t) {
|
|
172
|
+
const A = toRgb(from);
|
|
173
|
+
const B = toRgb(to);
|
|
174
|
+
return toHex([
|
|
175
|
+
0,
|
|
176
|
+
1,
|
|
177
|
+
2
|
|
178
|
+
].map((i) => A[i] + (B[i] - A[i]) * t));
|
|
179
|
+
}
|
|
180
|
+
/**
|
|
181
|
+
* Walk a tinted ink toward black or white until it clears the floor on `bg`.
|
|
182
|
+
*
|
|
183
|
+
* Stops at the first passing step rather than going all the way, so the ink
|
|
184
|
+
* keeps as much of its hue as legibility allows.
|
|
185
|
+
*/
|
|
186
|
+
function push(base, toward, bg) {
|
|
187
|
+
for (let t = 0; t <= 1.0001; t += .02) {
|
|
188
|
+
const candidate = mixHex(base, toward, t);
|
|
189
|
+
if (contrastRatio(candidate, bg) >= CONTRAST_TARGET) return candidate;
|
|
190
|
+
}
|
|
191
|
+
return toward;
|
|
192
|
+
}
|
|
193
|
+
/** The ink for a chip filled with `bg`: whichever direction has more headroom. */
|
|
194
|
+
function inkOn(stops, bg) {
|
|
195
|
+
const dark = push(stops.text, "#000000", bg);
|
|
196
|
+
const light = push(stops.onDeep ?? stops.pale, "#ffffff", bg);
|
|
197
|
+
return contrastRatio(dark, bg) >= contrastRatio(light, bg) ? dark : light;
|
|
198
|
+
}
|
|
113
199
|
var CHIP_HUES = [
|
|
114
200
|
"blue",
|
|
115
201
|
"cyan",
|
|
@@ -235,33 +321,30 @@ var HUE_STOPS = {
|
|
|
235
321
|
text: "#064e3b"
|
|
236
322
|
}
|
|
237
323
|
};
|
|
324
|
+
/**
|
|
325
|
+
* One tone of one hue.
|
|
326
|
+
*
|
|
327
|
+
* Backgrounds are the palette's, unchanged — the stops were not the problem and
|
|
328
|
+
* moving them would have restyled every chip in the product. Only the ink moved,
|
|
329
|
+
* and it moved to wherever the measurement says it has to be.
|
|
330
|
+
*/
|
|
238
331
|
function tone(stops, chipTone) {
|
|
239
|
-
const
|
|
332
|
+
const outline = {
|
|
333
|
+
outlineText: push(stops.text, "#000000", PAGE_LIGHT),
|
|
334
|
+
darkOutlineText: push(stops.onDeep ?? stops.pale, "#ffffff", PAGE_DARK)
|
|
335
|
+
};
|
|
336
|
+
const filled = (light, dark) => ({
|
|
337
|
+
color: light,
|
|
338
|
+
text: inkOn(stops, light),
|
|
339
|
+
darkColor: dark,
|
|
340
|
+
darkText: inkOn(stops, dark),
|
|
341
|
+
...outline
|
|
342
|
+
});
|
|
240
343
|
switch (chipTone) {
|
|
241
|
-
case "Light": return
|
|
242
|
-
|
|
243
|
-
|
|
244
|
-
|
|
245
|
-
darkText: "#fff"
|
|
246
|
-
};
|
|
247
|
-
case "Dark": return {
|
|
248
|
-
color: stops.solid,
|
|
249
|
-
text: "#fff",
|
|
250
|
-
darkColor: stops.solid,
|
|
251
|
-
darkText: "#fff"
|
|
252
|
-
};
|
|
253
|
-
case "Darker": return {
|
|
254
|
-
color: stops.deep,
|
|
255
|
-
text: onDeep,
|
|
256
|
-
darkColor: stops.deep,
|
|
257
|
-
darkText: onDeep
|
|
258
|
-
};
|
|
259
|
-
default: return {
|
|
260
|
-
color: stops.pale,
|
|
261
|
-
text: stops.text,
|
|
262
|
-
darkColor: stops.deep,
|
|
263
|
-
darkText: onDeep
|
|
264
|
-
};
|
|
344
|
+
case "Light": return filled(stops.mid, stops.solid);
|
|
345
|
+
case "Dark": return filled(stops.solid, stops.solid);
|
|
346
|
+
case "Darker": return filled(stops.deep, stops.deep);
|
|
347
|
+
default: return filled(stops.pale, stops.deep);
|
|
265
348
|
}
|
|
266
349
|
}
|
|
267
350
|
var CHIP_TONES = [
|
|
@@ -3051,7 +3134,11 @@ var typographyVariants = {
|
|
|
3051
3134
|
body2: "p",
|
|
3052
3135
|
inherit: "p",
|
|
3053
3136
|
caption: "p",
|
|
3054
|
-
button: "span"
|
|
3137
|
+
button: "span",
|
|
3138
|
+
lead: "p",
|
|
3139
|
+
micro: "span",
|
|
3140
|
+
mono: "span",
|
|
3141
|
+
stat: "span"
|
|
3055
3142
|
};
|
|
3056
3143
|
var colorToClasses = {
|
|
3057
3144
|
inherit: "text-inherit",
|
|
@@ -3075,7 +3162,11 @@ var gutterBottomClasses = {
|
|
|
3075
3162
|
inherit: "mb-3",
|
|
3076
3163
|
caption: "mb-2",
|
|
3077
3164
|
button: "mb-2",
|
|
3078
|
-
label: "mb-2"
|
|
3165
|
+
label: "mb-2",
|
|
3166
|
+
lead: "mb-4",
|
|
3167
|
+
micro: "mb-1",
|
|
3168
|
+
mono: "mb-2",
|
|
3169
|
+
stat: "mb-1"
|
|
3079
3170
|
};
|
|
3080
3171
|
var variantToClasses = {
|
|
3081
3172
|
h1: "typography-h1",
|
|
@@ -3091,7 +3182,11 @@ var variantToClasses = {
|
|
|
3091
3182
|
label: "typography-label",
|
|
3092
3183
|
inherit: "typography-inherit",
|
|
3093
3184
|
caption: "typography-caption",
|
|
3094
|
-
button: "typography-button"
|
|
3185
|
+
button: "typography-button",
|
|
3186
|
+
lead: "typography-lead",
|
|
3187
|
+
micro: "typography-micro",
|
|
3188
|
+
mono: "typography-mono",
|
|
3189
|
+
stat: "typography-stat"
|
|
3095
3190
|
};
|
|
3096
3191
|
function Typography({ align = "inherit", color = "primary", children, className, component, gutterBottom = false, noWrap = false, paragraph = false, variant = "body1", variantMapping = typographyVariants, style, onClick, ...other }) {
|
|
3097
3192
|
return /* @__PURE__ */ jsx(component || (paragraph ? "p" : variantMapping[variant] || typographyVariants[variant]) || "span", {
|
|
@@ -3456,6 +3551,10 @@ function Chip({ children, colorScheme, error, outlined, onClick, icon, size = "m
|
|
|
3456
3551
|
else if (usedColorScheme) textColor = dark && usedColorScheme.darkText ? usedColorScheme.darkText : usedColorScheme.text;
|
|
3457
3552
|
if (hasScheme) {
|
|
3458
3553
|
if (outlined) {
|
|
3554
|
+
if (!error && usedColorScheme) {
|
|
3555
|
+
const outlineInk = dark ? usedColorScheme.darkOutlineText ?? usedColorScheme.darkText : usedColorScheme.outlineText;
|
|
3556
|
+
if (outlineInk) textColor = outlineInk;
|
|
3557
|
+
}
|
|
3459
3558
|
bgColor = getRgba(textColor, dark ? .1 : .06);
|
|
3460
3559
|
border = `1px solid ${getRgba(textColor, dark ? .2 : .14)}`;
|
|
3461
3560
|
} else if (error) {
|
|
@@ -7681,13 +7780,16 @@ function CollectionViewToolbar({ viewMode, onViewModeChange, enabledViews = [
|
|
|
7681
7780
|
"table",
|
|
7682
7781
|
"cards",
|
|
7683
7782
|
"kanban"
|
|
7684
|
-
], size = "m", onSizeChange, searchString, onSearchChange, loading, actionsStart, actionsEnd, compact, kanbanPropertyOptions, selectedKanbanProperty, onKanbanPropertyChange }) {
|
|
7783
|
+
], customViews, size = "m", onSizeChange, searchString, onSearchChange, loading, actionsStart, actionsEnd, compact, kanbanPropertyOptions, selectedKanbanProperty, onKanbanPropertyChange }) {
|
|
7685
7784
|
const [popoverOpen, setPopoverOpen] = useState(false);
|
|
7686
|
-
const viewOptions = enabledViews.map((mode) =>
|
|
7687
|
-
|
|
7688
|
-
|
|
7689
|
-
|
|
7690
|
-
|
|
7785
|
+
const viewOptions = enabledViews.map((mode) => {
|
|
7786
|
+
const custom = customViews?.find((entry) => entry.key === mode);
|
|
7787
|
+
return {
|
|
7788
|
+
value: mode,
|
|
7789
|
+
label: VIEW_MODE_LABELS[mode] ?? custom?.name ?? mode,
|
|
7790
|
+
icon: VIEW_MODE_ICONS[mode] ?? custom?.icon ?? /* @__PURE__ */ jsx(LayoutList, { size: iconSize.small })
|
|
7791
|
+
};
|
|
7792
|
+
});
|
|
7691
7793
|
const handleViewModeChange = useCallback((mode) => {
|
|
7692
7794
|
onViewModeChange?.(mode);
|
|
7693
7795
|
}, [onViewModeChange]);
|
|
@@ -8766,7 +8868,7 @@ var DEFAULT_ENABLED_VIEWS = [
|
|
|
8766
8868
|
*
|
|
8767
8869
|
* @group Collection View
|
|
8768
8870
|
*/
|
|
8769
|
-
function CollectionView({ dataController, properties, propertiesOrder, displayedColumnIds, idProperty = "id", titleProperty, title, viewMode: viewModeProp, defaultViewMode = "list", enabledViews = DEFAULT_ENABLED_VIEWS, onViewModeChange: onViewModeChangeProp, size: sizeProp, defaultSize = "m", onSizeChange: onSizeChangeProp, kanbanProperty: kanbanPropertyProp, kanbanPropertyOptions, onKanbanPropertyChange: onKanbanPropertyChangeProp, onRowClick, onRowCreate, canCreate = true, selectionEnabled, selectionController, highlightedItems, onMultipleDelete, cellRenderer, emptyComponent, toolbarActionsStart, toolbarActionsEnd, hideToolbar, hoverRow = true, onColumnResize, onColumnsOrderChange, className }) {
|
|
8871
|
+
function CollectionView({ dataController, properties, propertiesOrder, displayedColumnIds, idProperty = "id", titleProperty, title, viewMode: viewModeProp, defaultViewMode = "list", enabledViews = DEFAULT_ENABLED_VIEWS, onViewModeChange: onViewModeChangeProp, size: sizeProp, defaultSize = "m", onSizeChange: onSizeChangeProp, kanbanProperty: kanbanPropertyProp, kanbanPropertyOptions, onKanbanPropertyChange: onKanbanPropertyChangeProp, onRowClick, onRowCreate, canCreate = true, selectionEnabled, selectionController, highlightedItems, onMultipleDelete, cellRenderer, emptyComponent, customViews, toolbarActionsStart, toolbarActionsEnd, hideToolbar, hoverRow = true, onColumnResize, onColumnsOrderChange, className }) {
|
|
8770
8872
|
const [internalViewMode, setInternalViewMode] = useState(defaultViewMode);
|
|
8771
8873
|
const viewMode = viewModeProp ?? internalViewMode;
|
|
8772
8874
|
const onViewModeChange = useCallback((mode) => {
|
|
@@ -8827,7 +8929,29 @@ function CollectionView({ dataController, properties, propertiesOrder, displayed
|
|
|
8827
8929
|
highlightedItems,
|
|
8828
8930
|
emptyComponent
|
|
8829
8931
|
};
|
|
8932
|
+
const customViewEntries = useMemo(() => {
|
|
8933
|
+
if (!customViews) return [];
|
|
8934
|
+
return Object.entries(customViews).filter(([key]) => !DEFAULT_ENABLED_VIEWS.includes(key)).map(([key, entry]) => {
|
|
8935
|
+
const isBare = typeof entry === "function";
|
|
8936
|
+
return {
|
|
8937
|
+
key,
|
|
8938
|
+
name: isBare ? key : entry.name ?? key,
|
|
8939
|
+
icon: isBare ? void 0 : entry.icon,
|
|
8940
|
+
Component: isBare ? entry : entry.Component
|
|
8941
|
+
};
|
|
8942
|
+
});
|
|
8943
|
+
}, [customViews]);
|
|
8830
8944
|
function renderView() {
|
|
8945
|
+
const custom = customViewEntries.find((entry) => entry.key === viewMode);
|
|
8946
|
+
if (custom) {
|
|
8947
|
+
const { Component } = custom;
|
|
8948
|
+
return /* @__PURE__ */ jsx(Component, {
|
|
8949
|
+
...sharedProps,
|
|
8950
|
+
onRowCreate: canCreate ? onRowCreate : void 0,
|
|
8951
|
+
canCreate,
|
|
8952
|
+
size
|
|
8953
|
+
});
|
|
8954
|
+
}
|
|
8831
8955
|
switch (viewMode) {
|
|
8832
8956
|
case "table": return /* @__PURE__ */ jsx(CollectionTableView, {
|
|
8833
8957
|
...sharedProps,
|
|
@@ -8878,6 +9002,7 @@ function CollectionView({ dataController, properties, propertiesOrder, displayed
|
|
|
8878
9002
|
viewMode,
|
|
8879
9003
|
onViewModeChange: enabledViews.length > 1 ? onViewModeChange : void 0,
|
|
8880
9004
|
enabledViews,
|
|
9005
|
+
customViews: customViewEntries,
|
|
8881
9006
|
size,
|
|
8882
9007
|
onSizeChange,
|
|
8883
9008
|
searchString: dataController.searchString,
|
|
@@ -8897,6 +9022,6 @@ function CollectionView({ dataController, properties, propertiesOrder, displayed
|
|
|
8897
9022
|
});
|
|
8898
9023
|
}
|
|
8899
9024
|
//#endregion
|
|
8900
|
-
export { Alert, AlertCircleIcon, AlertTriangleIcon, AlignLeftIcon, AppWindow, ArrowDownIcon, ArrowDownToLineIcon, ArrowLeftIcon, ArrowRightFromLineIcon, ArrowRightIcon, ArrowRightLeftIcon, ArrowRightToLineIcon, ArrowUpDownIcon, ArrowUpIcon, ArrowUpToLineIcon, Autocomplete, AutocompleteItem, Avatar, Badge, BoldIcon, BookOpenIcon, BooleanSwitch, BooleanSwitchWithLabel, Button, CHIP_COLORS, CHIP_HUES, CHIP_SEED_KEYS, CONTROL_HEIGHT, CalendarIcon, Card, CardView, CenteredView, CheckCircle2Icon, CheckCircleIcon, CheckIcon, CheckSquareIcon, Checkbox, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, ChevronUpIcon, ChevronsLeftIcon, ChevronsRightIcon, ChevronsUpDownIcon, Chip, CircleDotIcon, CircleIcon, CircleUserIcon, CircularProgress, CircularProgressCenter, CodeIcon, Collapse, CollectionView, ColorPicker, ColumnsIcon, Container, CopyIcon, DatabaseIcon, DateTimeField, DebouncedTextField, Dialog, DialogActions, DialogContent, DialogTitle, DollarSignIcon, DownloadIcon, ErrorBoundary, ExpandablePanel, ExternalLinkIcon, EyeIcon, EyeOffIcon, FileIcon, FileSearchIcon, FileTextIcon, FileUpload, FilterChip, FilterIcon, FilterXIcon, FlagIcon, FolderIcon, FolderKanbanIcon, FolderPlusIcon, FolderUpIcon, FunctionSquareIcon, GitBranchIcon, GitHubIcon, GlobeIcon, HandleIcon, HashIcon, Heading1Icon, Heading2Icon, Heading3Icon, HelpCircleIcon, HistoryIcon, HomeIcon, IconButton, ImageIcon, ImageOffIcon, InfoIcon, InfoLabel, InputLabel, ItalicIcon, KanbanIcon, KanbanView, KeyIcon, KeyRoundIcon, Label, LanguagesIcon, LayoutGridIcon, Link2Icon, LinkIcon, ListIcon, ListOrderedIcon, ListPlusIcon, ListTodoIcon, ListView, LoaderIcon, LoadingButton, LockIcon, LogOutIcon, LucideIconByName, MailIcon, Markdown, Maximize2Icon, Menu, MenuIcon, MenuItem, Menubar, MenubarCheckboxItem, MenubarContent, MenubarItem, MenubarItemIndicator, MenubarMenu, MenubarPortal, MenubarRadioGroup, MenubarRadioItem, MenubarSeparator, MenubarShortcut, MenubarSub, MenubarSubContent, MenubarSubTrigger, MenubarSubTriggerIndicator, MenubarTrigger, MessageCircleIcon, MinusCircleIcon, MinusIcon, MoonIcon, MoreVerticalIcon, MultiSelect, MultiSelectContext, MultiSelectItem, Music2Icon, PanelLeftCloseIcon, PanelLeftIcon, PanelLeftOpenIcon, Paper, PauseIcon, PenLineIcon, PencilIcon, PhoneIcon, PinIcon, PlayIcon, PlusIcon, Popover, PopoverPrimitive, Portal, PortalContainerProvider, QuoteIcon, RadioGroup, RadioGroupItem, RefreshCcwIcon, RefreshCwIcon, RepeatIcon, ResizablePanels, Rows3Icon, SaveIcon, SearchBar, SearchIcon, Select, SelectGroup, SelectItem, SendIcon, Separator, SettingsIcon, Sheet, ShieldIcon, ShoppingCartIcon, Skeleton, Slider, SlidersHorizontalIcon, Slot, SquareIcon, StarIcon, StickyNoteIcon, StrikethroughIcon, SunIcon, SunMoonIcon, Tab, Table, TableBody, TableCell, TableHeader, TableIcon, TableRow, Tabs, TagIcon, TerminalIcon, TextField, TextIcon, TextareaAutosize, ToggleButtonGroup, Tooltip, Trash2Icon, TrendingUpIcon, TypeIcon, Typography, UnderlineIcon, UndoIcon, Unlink2Icon, UploadCloudIcon, UploadIcon, UserCheckIcon, UserIcon, UserPlus, UsersIcon, VideoIcon, VirtualTable, VirtualTableDateField, VirtualTableInput, VirtualTableNumberInput, VirtualTableSelect, VirtualTableSelectionProvider, VirtualTableSwitch, VoteIcon, Wand2Icon, WrenchIcon, XCircleIcon, XIcon, cardClickableMixin, cardMixin, cardSelectedMixin, cls, colorClassesMapping, controlHeightMixin, controlPaddingMixin, coolIconKeys, createVirtualTableSelectionStore, debounce, defaultBorderMixin, fieldBackgroundDisabledMixin, fieldBackgroundHoverMixin, fieldBackgroundInvisibleMixin, fieldBackgroundMixin, focusedClasses, focusedDisabled, focusedInvisibleMixin, getColorSchemeForKey, getColorSchemeForSeed, getLoadedLucideIcons, iconKeys, iconSize, isChunkLoadError, lazyChunk, loadChunk, loadLucideIcons, lucideIcons, paperMixin, resolveLucideIcon, useAutoComplete, useDebounceCallback, useDebounceValue, useDebouncedCallback, useInjectStyles, useLucideIcons, useOutsideAlerter, usePortalContainer, useVirtualTableCellSelected, useVirtualTableSelection };
|
|
9025
|
+
export { Alert, AlertCircleIcon, AlertTriangleIcon, AlignLeftIcon, AppWindow, ArrowDownIcon, ArrowDownToLineIcon, ArrowLeftIcon, ArrowRightFromLineIcon, ArrowRightIcon, ArrowRightLeftIcon, ArrowRightToLineIcon, ArrowUpDownIcon, ArrowUpIcon, ArrowUpToLineIcon, Autocomplete, AutocompleteItem, Avatar, Badge, BoldIcon, BookOpenIcon, BooleanSwitch, BooleanSwitchWithLabel, Button, CHIP_COLORS, CHIP_HUES, CHIP_SEED_KEYS, CONTROL_HEIGHT, CalendarIcon, Card, CardView, CenteredView, CheckCircle2Icon, CheckCircleIcon, CheckIcon, CheckSquareIcon, Checkbox, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, ChevronUpIcon, ChevronsLeftIcon, ChevronsRightIcon, ChevronsUpDownIcon, Chip, CircleDotIcon, CircleIcon, CircleUserIcon, CircularProgress, CircularProgressCenter, CodeIcon, Collapse, CollectionView, ColorPicker, ColumnsIcon, Container, CopyIcon, DatabaseIcon, DateTimeField, DebouncedTextField, Dialog, DialogActions, DialogContent, DialogTitle, DollarSignIcon, DownloadIcon, ErrorBoundary, ExpandablePanel, ExternalLinkIcon, EyeIcon, EyeOffIcon, FileIcon, FileSearchIcon, FileTextIcon, FileUpload, FilterChip, FilterIcon, FilterXIcon, FlagIcon, FolderIcon, FolderKanbanIcon, FolderPlusIcon, FolderUpIcon, FunctionSquareIcon, GitBranchIcon, GitHubIcon, GlobeIcon, HandleIcon, HashIcon, Heading1Icon, Heading2Icon, Heading3Icon, HelpCircleIcon, HistoryIcon, HomeIcon, IconButton, ImageIcon, ImageOffIcon, InfoIcon, InfoLabel, InputLabel, ItalicIcon, KanbanIcon, KanbanView, KeyIcon, KeyRoundIcon, Label, LanguagesIcon, LayoutGridIcon, Link2Icon, LinkIcon, ListIcon, ListOrderedIcon, ListPlusIcon, ListTodoIcon, ListView, LoaderIcon, LoadingButton, LockIcon, LogOutIcon, LucideIconByName, MailIcon, Markdown, Maximize2Icon, Menu, MenuIcon, MenuItem, Menubar, MenubarCheckboxItem, MenubarContent, MenubarItem, MenubarItemIndicator, MenubarMenu, MenubarPortal, MenubarRadioGroup, MenubarRadioItem, MenubarSeparator, MenubarShortcut, MenubarSub, MenubarSubContent, MenubarSubTrigger, MenubarSubTriggerIndicator, MenubarTrigger, MessageCircleIcon, MinusCircleIcon, MinusIcon, MoonIcon, MoreVerticalIcon, MultiSelect, MultiSelectContext, MultiSelectItem, Music2Icon, PanelLeftCloseIcon, PanelLeftIcon, PanelLeftOpenIcon, Paper, PauseIcon, PenLineIcon, PencilIcon, PhoneIcon, PinIcon, PlayIcon, PlusIcon, Popover, PopoverPrimitive, Portal, PortalContainerProvider, QuoteIcon, RadioGroup, RadioGroupItem, RefreshCcwIcon, RefreshCwIcon, RepeatIcon, ResizablePanels, Rows3Icon, SaveIcon, SearchBar, SearchIcon, Select, SelectGroup, SelectItem, SendIcon, Separator, SettingsIcon, Sheet, ShieldIcon, ShoppingCartIcon, Skeleton, Slider, SlidersHorizontalIcon, Slot, SquareIcon, StarIcon, StickyNoteIcon, StrikethroughIcon, SunIcon, SunMoonIcon, Tab, Table, TableBody, TableCell, TableHeader, TableIcon, TableRow, Tabs, TagIcon, TerminalIcon, TextField, TextIcon, TextareaAutosize, ToggleButtonGroup, Tooltip, Trash2Icon, TrendingUpIcon, TypeIcon, Typography, UnderlineIcon, UndoIcon, Unlink2Icon, UploadCloudIcon, UploadIcon, UserCheckIcon, UserIcon, UserPlus, UsersIcon, VideoIcon, VirtualTable, VirtualTableDateField, VirtualTableInput, VirtualTableNumberInput, VirtualTableSelect, VirtualTableSelectionProvider, VirtualTableSwitch, VoteIcon, Wand2Icon, WrenchIcon, XCircleIcon, XIcon, accentTextMixin, cardClickableMixin, cardMixin, cardSelectedMixin, cls, codeSurfaceMixin, colorClassesMapping, controlHeightMixin, controlPaddingMixin, coolIconKeys, createVirtualTableSelectionStore, debounce, defaultBorderMixin, fieldBackgroundDisabledMixin, fieldBackgroundHoverMixin, fieldBackgroundInvisibleMixin, fieldBackgroundMixin, focusedClasses, focusedDisabled, focusedInvisibleMixin, getColorSchemeForKey, getColorSchemeForSeed, getLoadedLucideIcons, iconKeys, iconSize, isChunkLoadError, lazyChunk, loadChunk, loadLucideIcons, lucideIcons, paperMixin, resolveLucideIcon, useAutoComplete, useDebounceCallback, useDebounceValue, useDebouncedCallback, useInjectStyles, useLucideIcons, useOutsideAlerter, usePortalContainer, useVirtualTableCellSelected, useVirtualTableSelection };
|
|
8901
9026
|
|
|
8902
9027
|
//# sourceMappingURL=index.es.js.map
|