@crewlethq/ui 0.27.0 → 0.28.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/README.md +27 -1
- package/dist/AppShell/index.js +3 -3
- package/dist/ArrangeGrid/ArrangeGrid.d.ts +22 -0
- package/dist/ArrangeGrid/index.d.ts +3 -0
- package/dist/ArrangeGrid/index.js +2 -0
- package/dist/ArrangeGrid-XM4ZFTED.css +17 -0
- package/dist/ArrangeGroup/index.js +1 -1
- package/dist/{ArrangeGroup-SHFHA7BE.css → ArrangeGroup-GY5YMP6E.css} +3 -4
- package/dist/Canvas/index.js +2 -2
- package/dist/CanvasBoard/index.js +4 -4
- package/dist/Charts/index.js +1 -1
- package/dist/{Charts-JYW4X5ZL.css → Charts-RY4JN5FC.css} +12 -0
- package/dist/CommandPalette/index.js +3 -3
- package/dist/DataTable/DataTable.d.ts +9 -0
- package/dist/DataTable/index.js +4 -4
- package/dist/DataView/index.js +9 -9
- package/dist/DatasetSource/index.js +1 -1
- package/dist/{DatasetSource-47LBDMPR.css → DatasetSource-XFPZBRXL.css} +12 -4
- package/dist/DateTimePicker/index.js +3 -3
- package/dist/FollowBanner/index.js +2 -2
- package/dist/LinkInterstitial/index.js +3 -3
- package/dist/Menu/index.js +2 -2
- package/dist/Modal/index.js +2 -2
- package/dist/Note/Note.d.ts +10 -0
- package/dist/Note/index.js +1 -1
- package/dist/{Note-RT4L6VUT.css → Note-ONSKKTOA.css} +10 -0
- package/dist/PeopleRail/index.js +1 -1
- package/dist/PresenceStack/index.js +1 -1
- package/dist/PresenterView/index.js +3 -3
- package/dist/ShareDialog/index.js +4 -4
- package/dist/SheetGrid/index.js +4 -4
- package/dist/SlideCompare/index.js +3 -3
- package/dist/SlideFilmstrip/index.js +2 -2
- package/dist/SlideGrid/index.js +2 -2
- package/dist/SlideStage/index.js +1 -1
- package/dist/SlideStage/useSlideKeys.d.ts +9 -0
- package/dist/Switcher/index.js +4 -4
- package/dist/TimeWindowPicker/index.js +3 -3
- package/dist/TreeCanvas/index.js +3 -3
- package/dist/WidgetFrame/WidgetFrame.d.ts +14 -1
- package/dist/WidgetFrame/index.js +1 -1
- package/dist/WidgetFrame-LRZIL62O.css +206 -0
- package/dist/{chunk-TD2MIINY.js → chunk-3C3BRIMY.js} +1 -1
- package/dist/{chunk-MLT2HBPN.js → chunk-77DRMDXR.js} +7 -2
- package/dist/{chunk-BQYQWJPK.js → chunk-AAOH2P6Y.js} +8 -2
- package/dist/{chunk-33Z2SEDQ.js → chunk-ALMSY7RL.js} +1 -1
- package/dist/{chunk-35XVR5JQ.js → chunk-B4EBHPK3.js} +2 -2
- package/dist/chunk-CJKMURZO.js +31 -0
- package/dist/{chunk-INTEH4F3.js → chunk-CT4EZF62.js} +2 -2
- package/dist/{chunk-SVW3VG72.js → chunk-EBJREOKS.js} +5 -4
- package/dist/{chunk-GTLJXJ3U.js → chunk-HCKJGBQH.js} +1 -1
- package/dist/{chunk-5OY4LJFH.js → chunk-HVNTQ36V.js} +2 -2
- package/dist/{chunk-3D7PSL2L.js → chunk-JODJS7MR.js} +2 -2
- package/dist/{chunk-URUGEAFB.js → chunk-JQLTG4KH.js} +1 -1
- package/dist/{chunk-UOPHR5CE.js → chunk-LR5QTFOE.js} +1 -1
- package/dist/{chunk-VCRFFIYI.js → chunk-O63MWA4G.js} +18 -13
- package/dist/{chunk-CTHM6YSJ.js → chunk-OGAAHVF6.js} +1 -1
- package/dist/chunk-QBA5B2Z5.js +17 -0
- package/dist/{chunk-RSC7UJCR.js → chunk-S6VG5ZFZ.js} +1 -1
- package/dist/{chunk-OJRDEVHV.js → chunk-VOMYRJV5.js} +4 -4
- package/dist/{chunk-BFQK7CYJ.js → chunk-WENCSQ47.js} +1 -1
- package/dist/{chunk-ZZDY4XL7.js → chunk-ZB5O3ELS.js} +12 -12
- package/dist/{chunk-L2OQRPXJ.js → chunk-ZR5VN5IV.js} +1 -1
- package/dist/generated/index.d.ts +1 -0
- package/dist/generated/index.js +62 -61
- package/dist/index.js +62 -61
- package/dist/styles.css +148 -20
- package/package.json +3 -3
- package/dist/WidgetFrame-4EFJOJMW.css +0 -127
- package/dist/chunk-63WJLRB2.js +0 -24
- package/dist/{chunk-UFKUWVMV.js → chunk-2HIOJ4YZ.js} +1 -1
- package/dist/{chunk-F4DPAJCN.js → chunk-I3KKZ2O3.js} +1 -1
- package/dist/{chunk-FW7HN6AP.js → chunk-LDJ3J4TQ.js} +1 -1
- package/dist/{chunk-SLRKS5PF.js → chunk-NWW4IQJU.js} +0 -0
- package/dist/{chunk-KZOGQXSP.js → chunk-OJ45PPCV.js} +1 -1
- package/dist/{chunk-LREN6TUG.js → chunk-UZ6MA2V6.js} +2 -2
- package/dist/{chunk-WG5WUFBX.js → chunk-Y5NQ2LMS.js} +1 -1
package/dist/TreeCanvas/index.js
CHANGED
|
@@ -1,10 +1,10 @@
|
|
|
1
|
-
export { TreeCanvas } from '../chunk-
|
|
1
|
+
export { TreeCanvas } from '../chunk-S6VG5ZFZ.js';
|
|
2
2
|
import '../chunk-MY374UUD.js';
|
|
3
|
-
import '../chunk-
|
|
3
|
+
import '../chunk-OJ45PPCV.js';
|
|
4
4
|
import '../chunk-VYOKRN2I.js';
|
|
5
|
-
import '../chunk-OG6CL3EB.js';
|
|
6
5
|
import '../chunk-HMPFGIWM.js';
|
|
7
6
|
import '../chunk-R25RGPUB.js';
|
|
7
|
+
import '../chunk-OG6CL3EB.js';
|
|
8
8
|
import '../chunk-4FQT6ZAY.js';
|
|
9
9
|
import '../chunk-BZFWDIV6.js';
|
|
10
10
|
import '../chunk-ODEQTPFM.js';
|
|
@@ -44,6 +44,12 @@ export interface WidgetFrameProps extends Omit<HTMLAttributes<HTMLElement>, 'tit
|
|
|
44
44
|
onCite?: (() => void) | undefined;
|
|
45
45
|
/** The host's controls for this figure, such as a menu offering CSV and PNG. */
|
|
46
46
|
actions?: ReactNode;
|
|
47
|
+
/**
|
|
48
|
+
* The figure reaches the frame's sides: a table, whose row rules meet the
|
|
49
|
+
* frame's border and whose first column starts where the title does. Any
|
|
50
|
+
* other figure keeps the frame's inset.
|
|
51
|
+
*/
|
|
52
|
+
flush?: boolean | undefined;
|
|
47
53
|
/** The heading level of the title. Default 3, under a board's own heading. */
|
|
48
54
|
headingLevel?: 2 | 3 | 4 | undefined;
|
|
49
55
|
/** Overrides the shared clock, for a story or a suite. */
|
|
@@ -67,7 +73,14 @@ export interface WidgetFrameProps extends Omit<HTMLAttributes<HTMLElement>, 'tit
|
|
|
67
73
|
* of the figure itself: a host that passed rows by mistake still shows none.
|
|
68
74
|
* `failed` reads the same way with its own sentence.
|
|
69
75
|
*
|
|
76
|
+
* ONE INSET FOR EVERY PART. The title, the figure and the citation stand on
|
|
77
|
+
* the card's own 16px from each side, so a frame lines up with every other
|
|
78
|
+
* card on a board. A table passes `flush` and reaches the sides instead, its
|
|
79
|
+
* cells taking the same inset so its first column starts under the title. A
|
|
80
|
+
* stat tile drawn `flush` as the figure takes the frame's inset, not one of
|
|
81
|
+
* its own on top of it.
|
|
82
|
+
*
|
|
70
83
|
* Sits inside the host's `ArrangeFrame`, which owns the grid, the drag and
|
|
71
84
|
* the resize; this owns what is inside the card.
|
|
72
85
|
*/
|
|
73
|
-
export declare function WidgetFrame({ title, source, onCite, actions, headingLevel, now, labels, className, children, ...rest }: WidgetFrameProps): import("react").JSX.Element;
|
|
86
|
+
export declare function WidgetFrame({ title, source, onCite, actions, flush, headingLevel, now, labels, className, children, ...rest }: WidgetFrameProps): import("react").JSX.Element;
|
|
@@ -0,0 +1,206 @@
|
|
|
1
|
+
/*
|
|
2
|
+
* WidgetFrame: one figure on a dashboard. A title row, the figure filling the
|
|
3
|
+
* height the host's frame gives it, and the citation line at the foot.
|
|
4
|
+
*/
|
|
5
|
+
|
|
6
|
+
.crewlet-widget-frame {
|
|
7
|
+
box-sizing: border-box;
|
|
8
|
+
display: flex;
|
|
9
|
+
flex-direction: column;
|
|
10
|
+
gap: var(--spacing-3);
|
|
11
|
+
min-width: 0;
|
|
12
|
+
height: 100%;
|
|
13
|
+
min-height: 0;
|
|
14
|
+
/* THE CARD'S OWN INSET, set on each part rather than on the frame, so a
|
|
15
|
+
flush figure can give up its sides while the title and the citation keep
|
|
16
|
+
theirs. */
|
|
17
|
+
padding-block: var(--spacing-4);
|
|
18
|
+
/* THE CARD RECIPE: the ground, the hairline and the corner every card on a
|
|
19
|
+
board stands on, so a figure and the cards around it are one object. */
|
|
20
|
+
border: 1px solid var(--color-border-default);
|
|
21
|
+
border-radius: var(--radius-lg);
|
|
22
|
+
background: var(--color-surface-subtle);
|
|
23
|
+
/* Measured by its own width, for the citation below. */
|
|
24
|
+
container: crewlet-widget-frame / inline-size;
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
.crewlet-widget-frame__head,
|
|
28
|
+
.crewlet-widget-frame__body,
|
|
29
|
+
.crewlet-widget-frame__cite {
|
|
30
|
+
padding-inline: var(--spacing-4);
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
.crewlet-widget-frame__head {
|
|
34
|
+
display: flex;
|
|
35
|
+
align-items: flex-start;
|
|
36
|
+
gap: var(--spacing-2);
|
|
37
|
+
min-width: 0;
|
|
38
|
+
}
|
|
39
|
+
|
|
40
|
+
/*
|
|
41
|
+
* THE TITLE IS THE FIGURE'S ONLY NAME, so it is read whole: it takes a second
|
|
42
|
+
* line before it gives up a word, and only a title longer than two lines ends
|
|
43
|
+
* in an ellipsis. Cut at one line, a frame three columns wide named "Tokens,
|
|
44
|
+
* last 14 days" as "Tokens, last 14 da".
|
|
45
|
+
*/
|
|
46
|
+
.crewlet-widget-frame__title {
|
|
47
|
+
display: -webkit-box;
|
|
48
|
+
flex: 1;
|
|
49
|
+
min-width: 0;
|
|
50
|
+
margin: 0;
|
|
51
|
+
overflow: hidden;
|
|
52
|
+
color: var(--color-text-primary);
|
|
53
|
+
font-size: var(--font-size-sm);
|
|
54
|
+
font-weight: var(--font-weight-semibold);
|
|
55
|
+
line-height: var(--font-line-height-snug);
|
|
56
|
+
overflow-wrap: anywhere;
|
|
57
|
+
text-wrap: pretty;
|
|
58
|
+
-webkit-box-orient: vertical;
|
|
59
|
+
-webkit-line-clamp: 2;
|
|
60
|
+
line-clamp: 2;
|
|
61
|
+
}
|
|
62
|
+
|
|
63
|
+
/* The controls stand on the title's first line: the box is one line of the
|
|
64
|
+
title tall and the control is centred in it, whatever its own height. */
|
|
65
|
+
.crewlet-widget-frame__actions {
|
|
66
|
+
display: inline-flex;
|
|
67
|
+
flex: none;
|
|
68
|
+
align-items: center;
|
|
69
|
+
gap: var(--spacing-1);
|
|
70
|
+
height: calc(var(--font-size-sm) * var(--font-line-height-snug));
|
|
71
|
+
}
|
|
72
|
+
|
|
73
|
+
.crewlet-widget-frame__body {
|
|
74
|
+
flex: 1;
|
|
75
|
+
min-width: 0;
|
|
76
|
+
min-height: 0;
|
|
77
|
+
overflow: auto;
|
|
78
|
+
}
|
|
79
|
+
|
|
80
|
+
/* A flush figure reaches the frame's sides, and a table's cells take the
|
|
81
|
+
frame's inset, so its first column starts under the title and its row
|
|
82
|
+
rules meet the border. */
|
|
83
|
+
.crewlet-widget-frame--flush .crewlet-widget-frame__body {
|
|
84
|
+
padding-inline: 0;
|
|
85
|
+
}
|
|
86
|
+
|
|
87
|
+
.crewlet-widget-frame--flush .crewlet-data-table--compact {
|
|
88
|
+
--crewlet-data-table-cell-pad-x: var(--spacing-4);
|
|
89
|
+
}
|
|
90
|
+
|
|
91
|
+
/* A stat tile drawn flush as the figure stands on the frame's inset; its own
|
|
92
|
+
is for a column of a StatGroup, and inside a frame it doubled the space
|
|
93
|
+
around the label and under the value. */
|
|
94
|
+
.crewlet-widget-frame__body .crewlet-statcard--flush {
|
|
95
|
+
padding: 0;
|
|
96
|
+
}
|
|
97
|
+
|
|
98
|
+
.crewlet-widget-frame__blocked {
|
|
99
|
+
display: flex;
|
|
100
|
+
align-items: flex-start;
|
|
101
|
+
gap: var(--spacing-2);
|
|
102
|
+
margin: 0;
|
|
103
|
+
color: var(--color-text-secondary);
|
|
104
|
+
font-size: var(--font-size-sm);
|
|
105
|
+
line-height: var(--font-line-height-normal);
|
|
106
|
+
}
|
|
107
|
+
|
|
108
|
+
.crewlet-widget-frame__blocked-glyph {
|
|
109
|
+
display: inline-flex;
|
|
110
|
+
flex: none;
|
|
111
|
+
padding-top: 2px;
|
|
112
|
+
color: var(--color-text-tertiary);
|
|
113
|
+
}
|
|
114
|
+
|
|
115
|
+
.crewlet-widget-frame__cite {
|
|
116
|
+
display: flex;
|
|
117
|
+
min-width: 0;
|
|
118
|
+
}
|
|
119
|
+
|
|
120
|
+
/*
|
|
121
|
+
* ONE LINE: the dataset's title gives up its tail before the time leaves the
|
|
122
|
+
* line. Allowed to wrap, a long title was cut and its "as of" fell to a line
|
|
123
|
+
* of its own that began with the separator.
|
|
124
|
+
*/
|
|
125
|
+
.crewlet-widget-frame__cite-text,
|
|
126
|
+
.crewlet-widget-frame__cite-button {
|
|
127
|
+
display: inline-flex;
|
|
128
|
+
flex-wrap: nowrap;
|
|
129
|
+
max-width: 100%;
|
|
130
|
+
align-items: center;
|
|
131
|
+
gap: 0 var(--spacing-1);
|
|
132
|
+
min-width: 0;
|
|
133
|
+
color: var(--color-text-tertiary);
|
|
134
|
+
font-size: var(--font-size-xs);
|
|
135
|
+
line-height: var(--font-line-height-snug);
|
|
136
|
+
}
|
|
137
|
+
|
|
138
|
+
.crewlet-widget-frame__cite-button {
|
|
139
|
+
margin: 0;
|
|
140
|
+
padding: 0;
|
|
141
|
+
border: 0;
|
|
142
|
+
border-radius: var(--radius-xs);
|
|
143
|
+
background: none;
|
|
144
|
+
font: inherit;
|
|
145
|
+
font-size: var(--font-size-xs);
|
|
146
|
+
text-align: start;
|
|
147
|
+
cursor: pointer;
|
|
148
|
+
}
|
|
149
|
+
|
|
150
|
+
.crewlet-widget-frame__cite-button:hover .crewlet-widget-frame__source {
|
|
151
|
+
color: var(--color-text-primary);
|
|
152
|
+
text-decoration: underline;
|
|
153
|
+
}
|
|
154
|
+
|
|
155
|
+
.crewlet-widget-frame__cite-button:focus-visible {
|
|
156
|
+
outline: 2px solid var(--color-focus);
|
|
157
|
+
outline-offset: var(--size-focus-ring-inset-offset);
|
|
158
|
+
}
|
|
159
|
+
|
|
160
|
+
.crewlet-widget-frame__source {
|
|
161
|
+
flex: 0 1 auto;
|
|
162
|
+
min-width: 0;
|
|
163
|
+
overflow: hidden;
|
|
164
|
+
color: var(--color-text-secondary);
|
|
165
|
+
font-weight: var(--font-weight-medium);
|
|
166
|
+
text-overflow: ellipsis;
|
|
167
|
+
white-space: nowrap;
|
|
168
|
+
}
|
|
169
|
+
|
|
170
|
+
/* The separator is drawn, not typed, so a screen reader hears the facts alone. */
|
|
171
|
+
.crewlet-widget-frame__when::before {
|
|
172
|
+
content: '\00b7' / '';
|
|
173
|
+
margin-inline-end: var(--spacing-1);
|
|
174
|
+
}
|
|
175
|
+
|
|
176
|
+
.crewlet-widget-frame__when {
|
|
177
|
+
flex: none;
|
|
178
|
+
white-space: nowrap;
|
|
179
|
+
}
|
|
180
|
+
|
|
181
|
+
/*
|
|
182
|
+
* A NARROW FRAME STACKS ITS CITATION: the dataset's title on one line and
|
|
183
|
+
* when it was true under it, with no separator to begin a line. Side by side
|
|
184
|
+
* in a frame three columns wide, the title kept four letters ("Open w...").
|
|
185
|
+
*/
|
|
186
|
+
@container crewlet-widget-frame (width < 18rem) {
|
|
187
|
+
.crewlet-widget-frame__cite-text,
|
|
188
|
+
.crewlet-widget-frame__cite-button {
|
|
189
|
+
flex-direction: column;
|
|
190
|
+
align-items: flex-start;
|
|
191
|
+
}
|
|
192
|
+
|
|
193
|
+
.crewlet-widget-frame__source {
|
|
194
|
+
max-width: 100%;
|
|
195
|
+
}
|
|
196
|
+
|
|
197
|
+
.crewlet-widget-frame__when::before {
|
|
198
|
+
content: none;
|
|
199
|
+
}
|
|
200
|
+
}
|
|
201
|
+
|
|
202
|
+
.crewlet-widget-frame__stale {
|
|
203
|
+
display: inline-flex;
|
|
204
|
+
flex: none;
|
|
205
|
+
color: var(--color-feedback-warning-ink);
|
|
206
|
+
}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { VisuallyHidden } from './chunk-BZFWDIV6.js';
|
|
2
2
|
import { cx } from './chunk-ODEQTPFM.js';
|
|
3
|
-
import './Charts-
|
|
3
|
+
import './Charts-RY4JN5FC.css';
|
|
4
4
|
import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
|
|
5
5
|
import { useState, useRef, useCallback, useId } from 'react';
|
|
6
6
|
|
|
@@ -502,7 +502,12 @@ function StackedColumns({
|
|
|
502
502
|
return /* @__PURE__ */ jsxs(
|
|
503
503
|
"figure",
|
|
504
504
|
{
|
|
505
|
-
className: cx(
|
|
505
|
+
className: cx(
|
|
506
|
+
"crewlet-stacked-columns",
|
|
507
|
+
fill && "crewlet-stacked-columns--fill",
|
|
508
|
+
!headed && "crewlet-stacked-columns--headless",
|
|
509
|
+
className
|
|
510
|
+
),
|
|
506
511
|
style: rows === void 0 ? void 0 : { gridTemplateRows: rows },
|
|
507
512
|
children: [
|
|
508
513
|
headed ? /* @__PURE__ */ jsxs("div", { className: "crewlet-stacked-columns__head", children: [
|
|
@@ -2,7 +2,7 @@ import { Skeleton } from './chunk-W5J7R5EB.js';
|
|
|
2
2
|
import { RelativeTime } from './chunk-3CZ7XAVY.js';
|
|
3
3
|
import { VisuallyHidden } from './chunk-BZFWDIV6.js';
|
|
4
4
|
import { cx } from './chunk-ODEQTPFM.js';
|
|
5
|
-
import './WidgetFrame-
|
|
5
|
+
import './WidgetFrame-LRZIL62O.css';
|
|
6
6
|
import { useId } from 'react';
|
|
7
7
|
import { ClockGlyph, LockGlyph, CircleAlertGlyph } from '@crewlethq/icons/glyphs';
|
|
8
8
|
import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
|
|
@@ -21,6 +21,7 @@ function WidgetFrame({
|
|
|
21
21
|
source,
|
|
22
22
|
onCite,
|
|
23
23
|
actions,
|
|
24
|
+
flush = false,
|
|
24
25
|
headingLevel = 3,
|
|
25
26
|
now,
|
|
26
27
|
labels,
|
|
@@ -59,7 +60,12 @@ function WidgetFrame({
|
|
|
59
60
|
"section",
|
|
60
61
|
{
|
|
61
62
|
...rest,
|
|
62
|
-
className: cx(
|
|
63
|
+
className: cx(
|
|
64
|
+
"crewlet-widget-frame",
|
|
65
|
+
`crewlet-widget-frame--${source.status}`,
|
|
66
|
+
flush && "crewlet-widget-frame--flush",
|
|
67
|
+
className
|
|
68
|
+
),
|
|
63
69
|
"aria-labelledby": titleId,
|
|
64
70
|
"aria-busy": source.status === "loading" || void 0,
|
|
65
71
|
children: [
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { Count } from './chunk-BHHIIK3M.js';
|
|
2
2
|
import { cx } from './chunk-ODEQTPFM.js';
|
|
3
|
-
import './ArrangeGroup-
|
|
3
|
+
import './ArrangeGroup-GY5YMP6E.css';
|
|
4
4
|
import { useId } from 'react';
|
|
5
5
|
import { ChevronDownGlyph } from '@crewlethq/icons/glyphs';
|
|
6
6
|
import { jsxs, jsx } from 'react/jsx-runtime';
|
|
@@ -66,7 +66,7 @@ function ArrangeGroup({
|
|
|
66
66
|
"div",
|
|
67
67
|
{
|
|
68
68
|
id: bodyId,
|
|
69
|
-
className: cx("crewlet-arrange-group__body", bodyClass),
|
|
69
|
+
className: cx("crewlet-arrange-grid", "crewlet-arrange-group__body", bodyClass),
|
|
70
70
|
style: { ...bodyStyle, ["--crewlet-arrange-columns"]: columns },
|
|
71
71
|
hidden: collapsed,
|
|
72
72
|
...body,
|
|
@@ -0,0 +1,31 @@
|
|
|
1
|
+
import { cx } from './chunk-ODEQTPFM.js';
|
|
2
|
+
import './Note-ONSKKTOA.css';
|
|
3
|
+
import { forwardRef, useId } from 'react';
|
|
4
|
+
import { jsxs, jsx } from 'react/jsx-runtime';
|
|
5
|
+
|
|
6
|
+
var Note = forwardRef(function Note2({ tone = "amber", align = "start", size = "md", heading, headingLevel = 3, className, children, ...rest }, ref) {
|
|
7
|
+
const headingId = useId();
|
|
8
|
+
const Heading = `h${headingLevel}`;
|
|
9
|
+
const named = heading !== void 0 && heading !== null && heading !== false;
|
|
10
|
+
return /* @__PURE__ */ jsxs(
|
|
11
|
+
"div",
|
|
12
|
+
{
|
|
13
|
+
ref,
|
|
14
|
+
...named ? { role: "region", "aria-labelledby": headingId } : {},
|
|
15
|
+
className: cx(
|
|
16
|
+
"crewlet-note",
|
|
17
|
+
`crewlet-note--${tone}`,
|
|
18
|
+
align === "center" && "crewlet-note--center",
|
|
19
|
+
size === "lg" && "crewlet-note--lg",
|
|
20
|
+
className
|
|
21
|
+
),
|
|
22
|
+
...rest,
|
|
23
|
+
children: [
|
|
24
|
+
named ? /* @__PURE__ */ jsx(Heading, { id: headingId, className: "crewlet-note__heading", children: heading }) : null,
|
|
25
|
+
children
|
|
26
|
+
]
|
|
27
|
+
}
|
|
28
|
+
);
|
|
29
|
+
});
|
|
30
|
+
|
|
31
|
+
export { Note };
|
|
@@ -7,9 +7,9 @@ import { ChangeMark } from './chunk-YEKYVJQR.js';
|
|
|
7
7
|
import { isEmptyValue, displayText, ratingMax, findPerson, findOption, statusTone, editText, textMax, sheetLabels, normalizeValue, sameValue, spokenText, drawnColumns, sortRows, SHEET_ROW_HEIGHT, cellKey, columnOffsets, SHEET_ROW_NUMBER_WIDTH, columnWidth, rangeOf, presenceByCell, presenceByRow, presenceByColumn, scrollToRow, planClear, visibleRows, cellDescription, nextSort, rowName, inRange, hasPrevious, flagText, toTSV, planPaste, parseTSV, isMod, moveFrom, isTypingKey, editorSide, optionHue, parseText, liveOptions, checkValue } from './chunk-NHBP2XS5.js';
|
|
8
8
|
import { presenceLabels } from './chunk-Z7JYG5TF.js';
|
|
9
9
|
import { Avatar } from './chunk-5OM447RW.js';
|
|
10
|
-
import { Menu } from './chunk-
|
|
11
|
-
import { Button } from './chunk-OG6CL3EB.js';
|
|
10
|
+
import { Menu } from './chunk-2HIOJ4YZ.js';
|
|
12
11
|
import { isComposing } from './chunk-R25RGPUB.js';
|
|
12
|
+
import { Button } from './chunk-OG6CL3EB.js';
|
|
13
13
|
import { VisuallyHidden } from './chunk-BZFWDIV6.js';
|
|
14
14
|
import { cx } from './chunk-ODEQTPFM.js';
|
|
15
15
|
import './SheetGrid-J3TKKXZL.css';
|
|
@@ -1,9 +1,9 @@
|
|
|
1
|
-
import { Modal } from './chunk-F4DPAJCN.js';
|
|
2
1
|
import { useClipboard } from './chunk-STJ7QBC3.js';
|
|
2
|
+
import { Modal } from './chunk-I3KKZ2O3.js';
|
|
3
3
|
import { Checkbox } from './chunk-7T42VQQT.js';
|
|
4
4
|
import { EmptyValue } from './chunk-EUCC37WY.js';
|
|
5
5
|
import { useCardHeaderSlot } from './chunk-AV2DXAEL.js';
|
|
6
|
-
import { Menu } from './chunk-
|
|
6
|
+
import { Menu } from './chunk-2HIOJ4YZ.js';
|
|
7
7
|
import { Button } from './chunk-OG6CL3EB.js';
|
|
8
8
|
import { IconButton } from './chunk-4FQT6ZAY.js';
|
|
9
9
|
import { VisuallyHidden } from './chunk-BZFWDIV6.js';
|
|
@@ -516,6 +516,7 @@ var DataTable = ({
|
|
|
516
516
|
if (leftover >= 0 && leftover <= 1) return;
|
|
517
517
|
const next = { ...columnWidths2 };
|
|
518
518
|
const widthOf = (key) => next[key] ?? minColumnWidth2;
|
|
519
|
+
const floorOf = (key) => Math.max(minColumnWidth2, columns2[key]?.minWidth ?? 0);
|
|
519
520
|
visibleDataKeys.forEach((key) => {
|
|
520
521
|
next[key] = widthOf(key);
|
|
521
522
|
});
|
|
@@ -529,10 +530,10 @@ var DataTable = ({
|
|
|
529
530
|
pool.forEach((key, idx) => {
|
|
530
531
|
const current = widthOf(key);
|
|
531
532
|
const rawShare = idx === pool.length - 1 ? outstanding - moved : Math.round(outstanding * (current / poolTotal));
|
|
532
|
-
const clamped = Math.max(
|
|
533
|
+
const clamped = Math.max(Math.min(floorOf(key), current), current + rawShare);
|
|
533
534
|
moved += clamped - current;
|
|
534
535
|
next[key] = clamped;
|
|
535
|
-
if (clamped >
|
|
536
|
+
if (clamped > floorOf(key)) roomLeft.push(key);
|
|
536
537
|
});
|
|
537
538
|
if (moved === 0) break;
|
|
538
539
|
outstanding -= moved;
|
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
import { Skeleton } from './chunk-W5J7R5EB.js';
|
|
2
|
-
import { Modal } from './chunk-
|
|
2
|
+
import { Modal } from './chunk-I3KKZ2O3.js';
|
|
3
3
|
import { useListbox, useOptionKeys } from './chunk-F73MC7EZ.js';
|
|
4
|
+
import { Popover } from './chunk-BWRGFKJP.js';
|
|
4
5
|
import { KeyChip, highlightMatch } from './chunk-FYTIJM2T.js';
|
|
5
6
|
import { Input } from './chunk-6QFAK2WV.js';
|
|
6
|
-
import { Popover } from './chunk-BWRGFKJP.js';
|
|
7
7
|
import { useMediaMatch } from './chunk-IG75YMUN.js';
|
|
8
8
|
import { focusables, isComposing } from './chunk-R25RGPUB.js';
|
|
9
9
|
import { announce } from './chunk-RSAQOKH3.js';
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import { Note } from './chunk-
|
|
2
|
-
import { IDENTITY_VIEW, Canvas } from './chunk-
|
|
1
|
+
import { Note } from './chunk-CJKMURZO.js';
|
|
2
|
+
import { IDENTITY_VIEW, Canvas } from './chunk-OJ45PPCV.js';
|
|
3
3
|
import { IconButton } from './chunk-4FQT6ZAY.js';
|
|
4
4
|
import { cx } from './chunk-ODEQTPFM.js';
|
|
5
5
|
import './CanvasBoard-ZLPDINSM.css';
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { Select } from './chunk-FC4YTTFJ.js';
|
|
2
|
-
import { Modal } from './chunk-F4DPAJCN.js';
|
|
3
2
|
import { CopyButton } from './chunk-W46LPU4R.js';
|
|
3
|
+
import { Modal } from './chunk-I3KKZ2O3.js';
|
|
4
4
|
import { Callout } from './chunk-SVSCLHHI.js';
|
|
5
5
|
import { PrincipalAvatar } from './chunk-4KP4RC3O.js';
|
|
6
6
|
import { useHeadingLevel, headingTag } from './chunk-PQADV6P6.js';
|
|
@@ -134,24 +134,29 @@ function typing(target) {
|
|
|
134
134
|
return target.isContentEditable || ["INPUT", "TEXTAREA", "SELECT"].includes(target.tagName);
|
|
135
135
|
}
|
|
136
136
|
function useSlideKeys({ onNext, onPrevious, onFirst, onLast, onExit, enabled = true }) {
|
|
137
|
+
const keys = useRef({ onNext, onPrevious, onFirst, onLast, onExit });
|
|
138
|
+
useLayoutEffect(() => {
|
|
139
|
+
keys.current = { onNext, onPrevious, onFirst, onLast, onExit };
|
|
140
|
+
});
|
|
137
141
|
useEffect(() => {
|
|
138
142
|
if (!enabled) return void 0;
|
|
139
143
|
const onKeyDown = (event) => {
|
|
140
144
|
if (event.defaultPrevented || isComposing(event) || typing(event.target)) return;
|
|
141
145
|
if (event.altKey || event.ctrlKey || event.metaKey) return;
|
|
146
|
+
const { onNext: onNext2, onPrevious: onPrevious2, onFirst: onFirst2, onLast: onLast2, onExit: onExit2 } = keys.current;
|
|
142
147
|
const act = {
|
|
143
|
-
ArrowRight:
|
|
144
|
-
ArrowDown:
|
|
145
|
-
PageDown:
|
|
146
|
-
" ":
|
|
147
|
-
Enter:
|
|
148
|
-
ArrowLeft:
|
|
149
|
-
ArrowUp:
|
|
150
|
-
PageUp:
|
|
151
|
-
Backspace:
|
|
152
|
-
Home:
|
|
153
|
-
End:
|
|
154
|
-
Escape:
|
|
148
|
+
ArrowRight: onNext2,
|
|
149
|
+
ArrowDown: onNext2,
|
|
150
|
+
PageDown: onNext2,
|
|
151
|
+
" ": onNext2,
|
|
152
|
+
Enter: onNext2,
|
|
153
|
+
ArrowLeft: onPrevious2,
|
|
154
|
+
ArrowUp: onPrevious2,
|
|
155
|
+
PageUp: onPrevious2,
|
|
156
|
+
Backspace: onPrevious2,
|
|
157
|
+
Home: onFirst2,
|
|
158
|
+
End: onLast2,
|
|
159
|
+
Escape: onExit2
|
|
155
160
|
};
|
|
156
161
|
const fn = act[event.key];
|
|
157
162
|
if (!fn) return;
|
|
@@ -161,7 +166,7 @@ function useSlideKeys({ onNext, onPrevious, onFirst, onLast, onExit, enabled = t
|
|
|
161
166
|
};
|
|
162
167
|
document.addEventListener("keydown", onKeyDown);
|
|
163
168
|
return () => document.removeEventListener("keydown", onKeyDown);
|
|
164
|
-
}, [enabled
|
|
169
|
+
}, [enabled]);
|
|
165
170
|
}
|
|
166
171
|
|
|
167
172
|
export { SLIDE_HEIGHT, SLIDE_WIDTH, SlideStage, useSlideKeys };
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
import { cx } from './chunk-ODEQTPFM.js';
|
|
2
|
+
import './ArrangeGrid-XM4ZFTED.css';
|
|
3
|
+
import { jsx } from 'react/jsx-runtime';
|
|
4
|
+
|
|
5
|
+
function ArrangeGrid({ columns = 12, className, style, children, ...rest }) {
|
|
6
|
+
return /* @__PURE__ */ jsx(
|
|
7
|
+
"div",
|
|
8
|
+
{
|
|
9
|
+
className: cx("crewlet-arrange-grid", className),
|
|
10
|
+
style: { ...style, "--crewlet-arrange-columns": columns },
|
|
11
|
+
...rest,
|
|
12
|
+
children
|
|
13
|
+
}
|
|
14
|
+
);
|
|
15
|
+
}
|
|
16
|
+
|
|
17
|
+
export { ArrangeGrid };
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { useTreeState, useMeasuredSizes, layoutForest, treeAncestors, useLayoutAnchor, treeExpandable, layoutConnectors, treeItemAction, treeStep, treePosInSet, treeSetSize, treeLevel, placeGroups } from './chunk-MY374UUD.js';
|
|
2
|
-
import { CANVAS_COMPOSE_CONTEXT, CANVAS_FIT_MAX_ZOOM, Canvas } from './chunk-
|
|
2
|
+
import { CANVAS_COMPOSE_CONTEXT, CANVAS_FIT_MAX_ZOOM, Canvas } from './chunk-OJ45PPCV.js';
|
|
3
3
|
import { focusables } from './chunk-R25RGPUB.js';
|
|
4
4
|
import { cx } from './chunk-ODEQTPFM.js';
|
|
5
5
|
import './TreeCanvas-L2XYONWL.css';
|
|
@@ -1,14 +1,14 @@
|
|
|
1
1
|
import { PageHeader } from './chunk-HOXGBLEY.js';
|
|
2
2
|
import { Toolbar } from './chunk-PGRPNDWM.js';
|
|
3
|
-
import { DataTable } from './chunk-
|
|
4
|
-
import { DateTimePicker } from './chunk-
|
|
3
|
+
import { DataTable } from './chunk-EBJREOKS.js';
|
|
4
|
+
import { DateTimePicker } from './chunk-Y5NQ2LMS.js';
|
|
5
5
|
import { useListbox, useOptionKeys } from './chunk-F73MC7EZ.js';
|
|
6
6
|
import { Kbd } from './chunk-SMBKXWML.js';
|
|
7
|
+
import { Popover } from './chunk-BWRGFKJP.js';
|
|
7
8
|
import { Input } from './chunk-6QFAK2WV.js';
|
|
8
9
|
import { RelativeTime } from './chunk-3CZ7XAVY.js';
|
|
9
|
-
import { Popover } from './chunk-BWRGFKJP.js';
|
|
10
10
|
import { Count } from './chunk-BHHIIK3M.js';
|
|
11
|
-
import { Menu } from './chunk-
|
|
11
|
+
import { Menu } from './chunk-2HIOJ4YZ.js';
|
|
12
12
|
import { Button } from './chunk-OG6CL3EB.js';
|
|
13
13
|
import { IconButton } from './chunk-4FQT6ZAY.js';
|
|
14
14
|
import { VisuallyHidden } from './chunk-BZFWDIV6.js';
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { useMediaMatch } from './chunk-IG75YMUN.js';
|
|
2
|
-
import { Menu } from './chunk-
|
|
2
|
+
import { Menu } from './chunk-2HIOJ4YZ.js';
|
|
3
3
|
import { useModalLayer, focusables } from './chunk-R25RGPUB.js';
|
|
4
4
|
import { IconButton } from './chunk-4FQT6ZAY.js';
|
|
5
5
|
import { VisuallyHidden } from './chunk-BZFWDIV6.js';
|
|
@@ -2,7 +2,7 @@ import { Tag } from './chunk-GFV4LJHH.js';
|
|
|
2
2
|
import { RelativeTime } from './chunk-3CZ7XAVY.js';
|
|
3
3
|
import { VisuallyHidden } from './chunk-BZFWDIV6.js';
|
|
4
4
|
import { cx } from './chunk-ODEQTPFM.js';
|
|
5
|
-
import './DatasetSource-
|
|
5
|
+
import './DatasetSource-XFPZBRXL.css';
|
|
6
6
|
import { useId, Children, isValidElement } from 'react';
|
|
7
7
|
import { ClockGlyph } from '@crewlethq/icons/glyphs';
|
|
8
8
|
import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
|
|
@@ -66,18 +66,18 @@ function DatasetSource({
|
|
|
66
66
|
rows !== void 0 && !blocked && status !== "loading" ? /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
67
67
|
" ",
|
|
68
68
|
/* @__PURE__ */ jsx("span", { className: "crewlet-dataset-source__rows", children: text.rows(rows) })
|
|
69
|
-
] }) : null,
|
|
70
|
-
refresh ? /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
71
|
-
" ",
|
|
72
|
-
/* @__PURE__ */ jsxs("span", { className: "crewlet-dataset-source__refresh", children: [
|
|
73
|
-
/* @__PURE__ */ jsxs(VisuallyHidden, { children: [
|
|
74
|
-
text.refresh,
|
|
75
|
-
" "
|
|
76
|
-
] }),
|
|
77
|
-
refresh
|
|
78
|
-
] })
|
|
79
69
|
] }) : null
|
|
80
|
-
] })
|
|
70
|
+
] }),
|
|
71
|
+
refresh ? /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
72
|
+
" ",
|
|
73
|
+
/* @__PURE__ */ jsxs("span", { className: "crewlet-dataset-source__refresh", children: [
|
|
74
|
+
/* @__PURE__ */ jsxs(VisuallyHidden, { children: [
|
|
75
|
+
text.refresh,
|
|
76
|
+
" "
|
|
77
|
+
] }),
|
|
78
|
+
refresh
|
|
79
|
+
] })
|
|
80
|
+
] }) : null
|
|
81
81
|
] });
|
|
82
82
|
return /* @__PURE__ */ jsxs(
|
|
83
83
|
"div",
|
|
@@ -5,6 +5,7 @@ export * from '../Announcer/index.js';
|
|
|
5
5
|
export * from '../AppShell/index.js';
|
|
6
6
|
export * from '../ArrangeBoard/index.js';
|
|
7
7
|
export * from '../ArrangeFrame/index.js';
|
|
8
|
+
export * from '../ArrangeGrid/index.js';
|
|
8
9
|
export * from '../ArrangeGroup/index.js';
|
|
9
10
|
export * from '../ArrangeList/index.js';
|
|
10
11
|
export * from '../ArtifactCard/index.js';
|