@xeonr/platform-ui 0.3.21 → 0.4.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/index.d.ts +4 -1
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +11 -0
- package/dist/index.js.map +1 -1
- package/dist/kit/Button.d.ts +1 -1
- package/dist/kit/Button.d.ts.map +1 -1
- package/dist/kit/Button.js.map +1 -1
- package/dist/kit/Combobox.d.ts +17 -1
- package/dist/kit/Combobox.d.ts.map +1 -1
- package/dist/kit/Combobox.js +12 -3
- package/dist/kit/Combobox.js.map +1 -1
- package/dist/kit/MultiCombobox.d.ts +19 -1
- package/dist/kit/MultiCombobox.d.ts.map +1 -1
- package/dist/kit/MultiCombobox.js +32 -9
- package/dist/kit/MultiCombobox.js.map +1 -1
- package/dist/kit/Sparkline.d.ts +57 -0
- package/dist/kit/Sparkline.d.ts.map +1 -0
- package/dist/kit/Sparkline.js +109 -0
- package/dist/kit/Sparkline.js.map +1 -0
- package/dist/kit/Text.d.ts +5 -0
- package/dist/kit/Text.d.ts.map +1 -1
- package/dist/kit/Text.js +12 -2
- package/dist/kit/Text.js.map +1 -1
- package/dist/kit/Tooltip.d.ts +41 -0
- package/dist/kit/Tooltip.d.ts.map +1 -0
- package/dist/kit/Tooltip.js +129 -0
- package/dist/kit/Tooltip.js.map +1 -0
- package/dist/theme/paint.d.ts +43 -0
- package/dist/theme/paint.d.ts.map +1 -0
- package/dist/theme/paint.js +109 -0
- package/dist/theme/paint.js.map +1 -0
- package/dist/theme/tokens.d.ts +10 -0
- package/dist/theme/tokens.d.ts.map +1 -1
- package/dist/theme/tokens.js +43 -0
- package/dist/theme/tokens.js.map +1 -1
- package/package.json +1 -1
package/dist/index.d.ts
CHANGED
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
export { BRAND, GRAD, GRAD_90, cssVariables, globalCss, v } from "./theme/tokens.ts";
|
|
2
2
|
export { AppThemeProvider, useTheme, useThemeMaybe, type ThemePref, type AppThemeProviderProps } from "./theme/ThemeProvider.tsx";
|
|
3
3
|
export { brandCss, brandRamp, type BrandRamp } from "./theme/brand.ts";
|
|
4
|
+
export { tokenValue, useTokenColours, useSeriesColours, SERIES_TOKENS, seriesToken } from "./theme/paint.ts";
|
|
4
5
|
export { Icon, extendIcons, type IconName } from "./kit/Icon.tsx";
|
|
5
6
|
export { AppButton, IconButton, ButtonRow, type AppButtonProps } from "./kit/Button.tsx";
|
|
6
7
|
export { StatusPill, Tag, LiveDot, InitialsTile, RemovableTag, type Tone } from "./kit/Badge.tsx";
|
|
@@ -17,7 +18,7 @@ export { LogSurface, LogPanel, type LogLine } from "./kit/LogView.tsx";
|
|
|
17
18
|
export { KVGrid } from "./kit/KV.tsx";
|
|
18
19
|
export { SecretField, CopyIcon, Digest } from "./kit/Secret.tsx";
|
|
19
20
|
export { ToastProvider, useToast, toastError, type ToastKind } from "./kit/Toast.tsx";
|
|
20
|
-
export { Mono, Num, Hint, InlineHint, Cell, InlineLink, Muted, Faint, InlineCode, Prose, Ago, toDate, relative, } from "./kit/Text.tsx";
|
|
21
|
+
export { Mono, Num, Hint, InlineHint, Cell, InlineLink, Muted, Faint, InlineCode, Prose, Ago, toDate, relative, type TextTone, } from "./kit/Text.tsx";
|
|
21
22
|
export { RowList, ListRow, RowActions, SelectableList, Breadcrumbs } from "./kit/List.tsx";
|
|
22
23
|
export { FilterBar, FilterField, Chip, EditableChip } from "./kit/Chip.tsx";
|
|
23
24
|
export { StatGrid, StatTile, StatValue, Meter } from "./kit/Stat.tsx";
|
|
@@ -41,5 +42,7 @@ export { Dot, LevelBars, PersonChip, initials } from "./kit/Marker.tsx";
|
|
|
41
42
|
export { CommentList, Comment, CommentComposer } from "./kit/Comment.tsx";
|
|
42
43
|
export { Board, BoardCardLine, BoardCardTitle, BoardCardFoot, type BoardLane } from "./kit/Board.tsx";
|
|
43
44
|
export { EditableTitle } from "./kit/Editable.tsx";
|
|
45
|
+
export { Tooltip, type TooltipProps } from "./kit/Tooltip.tsx";
|
|
46
|
+
export { Sparkline, SparkRow, type SparklineProps } from "./kit/Sparkline.tsx";
|
|
44
47
|
export { ApiKeys, keyHint, type ApiKeysProps, type ApiKeyRow, type ApiKeyBindingRow, type ApiKeyOwnerKind, type ApiKeyResourceMode, type ApiKeyScopePreset, type ApiKeyResourceTypeSpec, type ApiKeyCreateInput, type ApiKeyUpdateInput, } from "./kit/ApiKeys.tsx";
|
|
45
48
|
//# sourceMappingURL=index.d.ts.map
|
package/dist/index.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,KAAK,EAAE,IAAI,EAAE,OAAO,EAAE,YAAY,EAAE,SAAS,EAAE,CAAC,EAAE,MAAM,mBAAmB,CAAC;AACrF,OAAO,EAAE,gBAAgB,EAAE,QAAQ,EAAE,aAAa,EAAE,KAAK,SAAS,EAAE,KAAK,qBAAqB,EAAE,MAAM,2BAA2B,CAAC;AAKlI,OAAO,EAAE,QAAQ,EAAE,SAAS,EAAE,KAAK,SAAS,EAAE,MAAM,kBAAkB,CAAC;
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"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"}
|
package/dist/index.js
CHANGED
|
@@ -9,6 +9,12 @@ export { AppThemeProvider, useTheme, useThemeMaybe } from "./theme/ThemeProvider
|
|
|
9
9
|
// this for anything mounting the shell; `brandCss` is for SSR hosts that inline
|
|
10
10
|
// the sheet themselves.
|
|
11
11
|
export { brandCss, brandRamp } from "./theme/brand.js";
|
|
12
|
+
// Token values as concrete colours, for the surfaces that cannot use var() —
|
|
13
|
+
// a <canvas>, or a charting library configured through JS. Added for the
|
|
14
|
+
// Lantern adoption (2026-10-13): every console with a uPlot chart had
|
|
15
|
+
// hardcoded its axis and series colours, which is how a chart ends up
|
|
16
|
+
// unreadable in whichever theme its author did not have open.
|
|
17
|
+
export { tokenValue, useTokenColours, useSeriesColours, SERIES_TOKENS, seriesToken } from "./theme/paint.js";
|
|
12
18
|
// Kit: the same names and props container-platform/ui and functions/ui use,
|
|
13
19
|
// so adopting the package is an import-path change.
|
|
14
20
|
export { Icon, extendIcons } from "./kit/Icon.js";
|
|
@@ -67,6 +73,11 @@ export { Dot, LevelBars, PersonChip, initials } from "./kit/Marker.js";
|
|
|
67
73
|
export { CommentList, Comment, CommentComposer } from "./kit/Comment.js";
|
|
68
74
|
export { Board, BoardCardLine, BoardCardTitle, BoardCardFoot } from "./kit/Board.js";
|
|
69
75
|
export { EditableTitle } from "./kit/Editable.js";
|
|
76
|
+
// Added for the Lantern adoption (2026-10-13): the hover explanation the kit
|
|
77
|
+
// had been doing with the native `title` attribute, and the cell-sized series
|
|
78
|
+
// every list of entities-with-a-trend wants.
|
|
79
|
+
export { Tooltip } from "./kit/Tooltip.js";
|
|
80
|
+
export { Sparkline, SparkRow } from "./kit/Sparkline.js";
|
|
70
81
|
// Added for centralised API keys (2026-10-13, CON-23): the one keys screen
|
|
71
82
|
// every product shows for the keys auth holds on its behalf, and the portal's
|
|
72
83
|
// read-only view across products. API-agnostic — the host maps its wire type
|
package/dist/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,iEAAiE;AACjE,EAAE;AACF,2EAA2E;AAC3E,sEAAsE;AACtE,OAAO,EAAE,KAAK,EAAE,IAAI,EAAE,OAAO,EAAE,YAAY,EAAE,SAAS,EAAE,CAAC,EAAE,MAAM,mBAAmB,CAAC;AACrF,OAAO,EAAE,gBAAgB,EAAE,QAAQ,EAAE,aAAa,EAA8C,MAAM,0BAA2B,CAAC;AAClI,4EAA4E;AAC5E,6EAA6E;AAC7E,gFAAgF;AAChF,wBAAwB;AACxB,OAAO,EAAE,QAAQ,EAAE,SAAS,EAAkB,MAAM,kBAAkB,CAAC;
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"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"}
|
package/dist/kit/Button.d.ts
CHANGED
|
@@ -2,7 +2,7 @@ import type { ReactNode, ComponentProps } from "react";
|
|
|
2
2
|
import { type IconName } from "./Icon.tsx";
|
|
3
3
|
type Variant = "grad" | "ghost" | "quiet" | "danger";
|
|
4
4
|
type Size = "md" | "sm" | "xs";
|
|
5
|
-
export interface AppButtonProps extends
|
|
5
|
+
export interface AppButtonProps extends ComponentProps<"button"> {
|
|
6
6
|
variant?: Variant | undefined;
|
|
7
7
|
size?: Size | undefined;
|
|
8
8
|
icon?: IconName | (string & {}) | undefined;
|
package/dist/kit/Button.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../src/kit/Button.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAEvD,OAAO,EAAQ,KAAK,QAAQ,EAAE,MAAM,YAAY,CAAC;AAEjD,KAAK,OAAO,GAAG,MAAM,GAAG,OAAO,GAAG,OAAO,GAAG,QAAQ,CAAC;AACrD,KAAK,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;
|
|
1
|
+
{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../src/kit/Button.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAEvD,OAAO,EAAQ,KAAK,QAAQ,EAAE,MAAM,YAAY,CAAC;AAEjD,KAAK,OAAO,GAAG,MAAM,GAAG,OAAO,GAAG,OAAO,GAAG,QAAQ,CAAC;AACrD,KAAK,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AA2D/B,MAAM,WAAW,cAAe,SAAQ,cAAc,CAAC,QAAQ,CAAC;IAC9D,OAAO,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;IAC9B,IAAI,CAAC,EAAE,IAAI,GAAG,SAAS,CAAC;IACxB,IAAI,CAAC,EAAE,QAAQ,GAAG,CAAC,MAAM,GAAG,EAAE,CAAC,GAAG,SAAS,CAAC;IAC5C,OAAO,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;IAC9B,8EAA8E;IAC9E,SAAS,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;IAChC,QAAQ,CAAC,EAAE,SAAS,GAAG,SAAS,CAAC;IACjC,sDAAsD;IACtD,EAAE,CAAC,EAAE,KAAK,CAAC,WAAW,GAAG,SAAS,CAAC;IACnC,EAAE,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IACxB,IAAI,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAC1B,MAAM,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAC5B,GAAG,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;CAC1B;AAED,wBAAgB,SAAS,CAAC,EAAE,OAAiB,EAAE,IAAW,EAAE,IAAI,EAAE,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,QAAQ,EAAE,GAAG,IAAI,EAAE,EAAE,cAAc,+BAclI;AAED;;;;;GAKG;AACH,eAAO,MAAM,UAAU;;;WAAgC,cAAc,CAAC,QAAQ,CAAC,CAAC,MAAM,CAAC;;YAEzE,MAAM,GAAG,SAAS;UAAQ,OAAO,GAAG,SAAS;;;;WAFJ,cAAc,CAAC,QAAQ,CAAC,CAAC,MAAM,CAAC;;YAEzE,MAAM,GAAG,SAAS;UAAQ,OAAO,GAAG,SAAS;6jKAa1D,CAAC;AAEF,eAAO,MAAM,SAAS;;WAIrB,CAAC"}
|
package/dist/kit/Button.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Button.js","sourceRoot":"","sources":["../../src/kit/Button.tsx"],"names":[],"mappings":";AAAA,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAE,CAAC,EAAE,MAAM,oBAAoB,CAAC;AACvC,OAAO,EAAE,IAAI,EAAiB,MAAM,WAAY,CAAC;AAKjD,MAAM,KAAK,GAAyC;IAClD,EAAE,EAAE,GAAG,CAAA,mDAAmD;IAC1D,EAAE,EAAE,GAAG,CAAA,iDAAiD;IACxD,EAAE,EAAE,GAAG,CAAA,mDAAmD;CAC3D,CAAC;AAEF,MAAM,IAAI,GAAG,MAAM,CAAC,MAAM,CAAiE;WAChF,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC;;;;;mBAK1B,CAAC,CAAC,IAAI;;;;;;IAMrB,CAAC,CAAC,EAAE,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC,KAAK,CAAC;;;;IAIrB,CAAC,CAAC,EAAE,EAAE,CACN,CAAC,CAAC,QAAQ,KAAK,MAAM;IACrB,GAAG,CAAA;oBACa,CAAC,CAAC,IAAI;eACX,CAAC,CAAC,OAAO;qCACa,CAAC,CAAC,OAAO;;KAEzC;IACD,CAAC,CAAC,EAAE,EAAE,CACN,CAAC,CAAC,QAAQ,KAAK,OAAO;IACtB,GAAG,CAAA;sBACe,CAAC,CAAC,KAAK;oBACT,CAAC,CAAC,OAAO;eACd,CAAC,CAAC,IAAI;+CAC0B,CAAC,CAAC,OAAO;KACnD;IACD,CAAC,CAAC,EAAE,EAAE,CACN,CAAC,CAAC,QAAQ,KAAK,OAAO;IACtB,GAAG,CAAA;oBACa,CAAC,CAAC,KAAK;eACZ,CAAC,CAAC,IAAI;6CACwB,CAAC,CAAC,OAAO;KACjD;IACD,CAAC,CAAC,EAAE,EAAE,CACN,CAAC,CAAC,QAAQ,KAAK,QAAQ;IACvB,GAAG,CAAA;oBACa,CAAC,CAAC,QAAQ;eACf,CAAC,CAAC,MAAM;yEACkD,CAAC,CAAC,MAAM;KAC5E;CACJ,CAAC;
|
|
1
|
+
{"version":3,"file":"Button.js","sourceRoot":"","sources":["../../src/kit/Button.tsx"],"names":[],"mappings":"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"}
|
package/dist/kit/Combobox.d.ts
CHANGED
|
@@ -9,7 +9,7 @@ export interface ComboOption<T> {
|
|
|
9
9
|
* query (so it can debounce and hit whichever RPC it needs) — this only owns
|
|
10
10
|
* the open/highlight/keyboard behaviour.
|
|
11
11
|
*/
|
|
12
|
-
export declare function Combobox<T>({ value, onQueryChange, options, onPick, placeholder, label, loading, emptyNote, autoFocus }: {
|
|
12
|
+
export declare function Combobox<T>({ value, onQueryChange, options, onPick, placeholder, label, loading, emptyNote, autoFocus, onSubmit, onBackspaceWhenEmpty }: {
|
|
13
13
|
value: string;
|
|
14
14
|
onQueryChange: (q: string) => void;
|
|
15
15
|
options: ComboOption<T>[];
|
|
@@ -20,5 +20,21 @@ export declare function Combobox<T>({ value, onQueryChange, options, onPick, pla
|
|
|
20
20
|
/** shown in place of the list when the query returns nothing */
|
|
21
21
|
emptyNote?: ReactNode | undefined;
|
|
22
22
|
autoFocus?: boolean | undefined;
|
|
23
|
+
/**
|
|
24
|
+
* The query is itself a value, and Enter commits it — a filter expression
|
|
25
|
+
* (`service.name=checkout`), a search term, a free-form tag. Called only
|
|
26
|
+
* when there is no option to pick, so the suggestion list still completes
|
|
27
|
+
* what the person has half-typed and Enter only falls through to the raw
|
|
28
|
+
* text once the list has nothing left to offer. The caller clears `value`.
|
|
29
|
+
*
|
|
30
|
+
* Without it, Enter on a query that matches nothing does nothing, which is
|
|
31
|
+
* right for a picker over a closed set and wrong for a filter box.
|
|
32
|
+
*/
|
|
33
|
+
onSubmit?: ((query: string) => void) | undefined;
|
|
34
|
+
/**
|
|
35
|
+
* Backspace in an already-empty box: edit what has already been committed.
|
|
36
|
+
* Every chip input does this (it drops the last chip) and fingers expect it.
|
|
37
|
+
*/
|
|
38
|
+
onBackspaceWhenEmpty?: (() => void) | undefined;
|
|
23
39
|
}): import("react").JSX.Element;
|
|
24
40
|
//# sourceMappingURL=Combobox.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Combobox.d.ts","sourceRoot":"","sources":["../../src/kit/Combobox.tsx"],"names":[],"mappings":"AAAA,OAAO,EAA+B,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAoDpE,MAAM,WAAW,WAAW,CAAC,CAAC;IAC5B,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,CAAC,CAAC;IACT,MAAM,EAAE,SAAS,CAAC;CACnB;AAED;;;;GAIG;AACH,wBAAgB,QAAQ,CAAC,CAAC,EAAE,EAAE,KAAK,EAAE,aAAa,EAAE,OAAO,EAAE,MAAM,EAAE,WAAW,EAAE,KAAK,EAAE,OAAO,EAAE,SAAS,EAAE,SAAS,EAAE,EAAE;
|
|
1
|
+
{"version":3,"file":"Combobox.d.ts","sourceRoot":"","sources":["../../src/kit/Combobox.tsx"],"names":[],"mappings":"AAAA,OAAO,EAA+B,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAoDpE,MAAM,WAAW,WAAW,CAAC,CAAC;IAC5B,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,CAAC,CAAC;IACT,MAAM,EAAE,SAAS,CAAC;CACnB;AAED;;;;GAIG;AACH,wBAAgB,QAAQ,CAAC,CAAC,EAAE,EAAE,KAAK,EAAE,aAAa,EAAE,OAAO,EAAE,MAAM,EAAE,WAAW,EAAE,KAAK,EAAE,OAAO,EAAE,SAAS,EAAE,SAAS,EAAE,QAAQ,EAAE,oBAAoB,EAAE,EAAE;IACxJ,KAAK,EAAE,MAAM,CAAC;IACd,aAAa,EAAE,CAAC,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,OAAO,EAAE,WAAW,CAAC,CAAC,CAAC,EAAE,CAAC;IAC1B,MAAM,EAAE,CAAC,KAAK,EAAE,CAAC,EAAE,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,WAAW,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IACjC,KAAK,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAC3B,OAAO,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;IAC9B,gEAAgE;IAChE,SAAS,CAAC,EAAE,SAAS,GAAG,SAAS,CAAC;IAClC,SAAS,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;IAChC;;;;;;;;;OASG;IACH,QAAQ,CAAC,EAAE,CAAC,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC,GAAG,SAAS,CAAC;IACjD;;;OAGG;IACH,oBAAoB,CAAC,EAAE,CAAC,MAAM,IAAI,CAAC,GAAG,SAAS,CAAC;CACjD,+BAwDA"}
|
package/dist/kit/Combobox.js
CHANGED
|
@@ -50,7 +50,7 @@ const Spin = styled.span `
|
|
|
50
50
|
* query (so it can debounce and hit whichever RPC it needs) — this only owns
|
|
51
51
|
* the open/highlight/keyboard behaviour.
|
|
52
52
|
*/
|
|
53
|
-
export function Combobox({ value, onQueryChange, options, onPick, placeholder, label, loading, emptyNote, autoFocus }) {
|
|
53
|
+
export function Combobox({ value, onQueryChange, options, onPick, placeholder, label, loading, emptyNote, autoFocus, onSubmit, onBackspaceWhenEmpty }) {
|
|
54
54
|
const [open, setOpen] = useState(false);
|
|
55
55
|
const [active, setActive] = useState(0);
|
|
56
56
|
const ref = useRef(null);
|
|
@@ -80,9 +80,18 @@ export function Combobox({ value, onQueryChange, options, onPick, placeholder, l
|
|
|
80
80
|
e.preventDefault();
|
|
81
81
|
setActive((a) => Math.max(a - 1, 0));
|
|
82
82
|
}
|
|
83
|
-
else if (e.key === "Enter"
|
|
83
|
+
else if (e.key === "Enter") {
|
|
84
84
|
e.preventDefault();
|
|
85
|
-
|
|
85
|
+
if (open && options.length)
|
|
86
|
+
pick(active);
|
|
87
|
+
else if (onSubmit && value.trim()) {
|
|
88
|
+
onSubmit(value.trim());
|
|
89
|
+
setOpen(false);
|
|
90
|
+
}
|
|
91
|
+
}
|
|
92
|
+
else if (e.key === "Backspace" && value === "" && onBackspaceWhenEmpty) {
|
|
93
|
+
e.preventDefault();
|
|
94
|
+
onBackspaceWhenEmpty();
|
|
86
95
|
}
|
|
87
96
|
else if (e.key === "Escape")
|
|
88
97
|
setOpen(false);
|
package/dist/kit/Combobox.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Combobox.js","sourceRoot":"","sources":["../../src/kit/Combobox.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,EAAE,QAAQ,EAAkB,MAAM,OAAO,CAAC;AACpE,OAAO,MAAM,MAAM,mBAAmB,CAAC;AACvC,OAAO,EAAE,CAAC,EAAE,MAAM,oBAAoB,CAAC;AACvC,OAAO,EAAE,KAAK,EAAE,MAAM,WAAY,CAAC;AACnC,OAAO,EAAE,IAAI,EAAE,MAAM,WAAY,CAAC;AAElC,MAAM,IAAI,GAAG,MAAM,CAAC,GAAG,CAAA,qBAAqB,CAAC;AAE7C,MAAM,IAAI,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;aAKV,CAAC,CAAC,IAAI;;;gBAGH,CAAC,CAAC,OAAO;sBACH,CAAC,CAAC,KAAK;mBACV,CAAC,CAAC,KAAK;gBACV,CAAC,CAAC,IAAI;;CAErB,CAAC;AAEF,MAAM,MAAM,GAAG,MAAM,CAAC,MAAM,CAAkB;;;;;;;;;WASnC,CAAC,CAAC,IAAI;gBACD,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,aAAa,CAAC;0BAChC,CAAC,CAAC,KAAK;CAChC,CAAC;AAEF,MAAM,IAAI,GAAG,MAAM,CAAC,GAAG,CAAA;;;WAGZ,CAAC,CAAC,KAAK;CACjB,CAAC;AAEF,MAAM,IAAI,GAAG,MAAM,CAAC,IAAI,CAAA;;;;;WAKb,CAAC,CAAC,KAAK;;CAEjB,CAAC;AAQF;;;;GAIG;AACH,MAAM,UAAU,QAAQ,CAAI,EAAE,KAAK,EAAE,aAAa,EAAE,OAAO,EAAE,MAAM,EAAE,WAAW,EAAE,KAAK,EAAE,OAAO,EAAE,SAAS,EAAE,SAAS,
|
|
1
|
+
{"version":3,"file":"Combobox.js","sourceRoot":"","sources":["../../src/kit/Combobox.tsx"],"names":[],"mappings":"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"}
|
|
@@ -16,7 +16,7 @@ import type { ComboOption } from "./Combobox.tsx";
|
|
|
16
16
|
* choosing several in a row is the normal case and reopening between each is
|
|
17
17
|
* the annoying one.
|
|
18
18
|
*/
|
|
19
|
-
export declare function MultiCombobox<T>({ query, onQueryChange, options, selected, onChange, placeholder, label, loading, emptyNote, autoFocus, disabled, }: {
|
|
19
|
+
export declare function MultiCombobox<T>({ query, onQueryChange, options, selected, onChange, placeholder, label, loading, emptyNote, autoFocus, disabled, allowCreate, createLabel, validateNew, max, }: {
|
|
20
20
|
/** the search box's text; the caller owns it so it can debounce or hit an RPC */
|
|
21
21
|
query: string;
|
|
22
22
|
onQueryChange: (q: string) => void;
|
|
@@ -31,5 +31,23 @@ export declare function MultiCombobox<T>({ query, onQueryChange, options, select
|
|
|
31
31
|
emptyNote?: ReactNode | undefined;
|
|
32
32
|
autoFocus?: boolean | undefined;
|
|
33
33
|
disabled?: boolean | undefined;
|
|
34
|
+
/**
|
|
35
|
+
* The typed text is itself a valid value — a free-form tag input rather than
|
|
36
|
+
* a picker over a closed set. Set it where the vocabulary is the user's and
|
|
37
|
+
* not the server's: a notification channel (`slack:#ops-alerts`), a label on
|
|
38
|
+
* an object, a hostname in an allow-list. The committed value is the trimmed
|
|
39
|
+
* query, and it becomes a chip like any other.
|
|
40
|
+
*
|
|
41
|
+
* Left off (the default) the control stays a picker: a key that is not an
|
|
42
|
+
* option cannot be chosen, which is the right behaviour when picking a
|
|
43
|
+
* nonexistent one would silently match nothing.
|
|
44
|
+
*/
|
|
45
|
+
allowCreate?: boolean | undefined;
|
|
46
|
+
/** the create row's caption; default `Add "<query>"` */
|
|
47
|
+
createLabel?: ((query: string) => ReactNode) | undefined;
|
|
48
|
+
/** why the typed value cannot be added, or null — shown in place of the create row */
|
|
49
|
+
validateNew?: ((query: string) => string | null) | undefined;
|
|
50
|
+
/** refuse further additions past this many (a wire limit the server enforces anyway) */
|
|
51
|
+
max?: number | undefined;
|
|
34
52
|
}): import("react").JSX.Element;
|
|
35
53
|
//# sourceMappingURL=MultiCombobox.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"MultiCombobox.d.ts","sourceRoot":"","sources":["../../src/kit/MultiCombobox.tsx"],"names":[],"mappings":"AAAA,OAAO,EAA+B,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAKpE,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAoFlD;;;;;;;;;;;;;;;GAeG;AACH,wBAAgB,aAAa,CAAC,CAAC,EAAE,EAC/B,KAAK,EAAE,aAAa,EAAE,OAAO,EAAE,QAAQ,EAAE,QAAQ,EAAE,WAAW,EAAE,KAAK,EAAE,OAAO,EAAE,SAAS,EAAE,SAAS,EAAE,QAAQ,
|
|
1
|
+
{"version":3,"file":"MultiCombobox.d.ts","sourceRoot":"","sources":["../../src/kit/MultiCombobox.tsx"],"names":[],"mappings":"AAAA,OAAO,EAA+B,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAKpE,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAoFlD;;;;;;;;;;;;;;;GAeG;AACH,wBAAgB,aAAa,CAAC,CAAC,EAAE,EAC/B,KAAK,EAAE,aAAa,EAAE,OAAO,EAAE,QAAQ,EAAE,QAAQ,EAAE,WAAW,EAAE,KAAK,EAAE,OAAO,EAAE,SAAS,EAAE,SAAS,EAAE,QAAQ,EAC9G,WAAW,EAAE,WAAW,EAAE,WAAW,EAAE,GAAG,GAC3C,EAAE;IACD,iFAAiF;IACjF,KAAK,EAAE,MAAM,CAAC;IACd,aAAa,EAAE,CAAC,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,OAAO,EAAE,WAAW,CAAC,CAAC,CAAC,EAAE,CAAC;IAC1B,mCAAmC;IACnC,QAAQ,EAAE,MAAM,EAAE,CAAC;IACnB,QAAQ,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IACnC,WAAW,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IACjC,KAAK,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAC3B,OAAO,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;IAC9B,gEAAgE;IAChE,SAAS,CAAC,EAAE,SAAS,GAAG,SAAS,CAAC;IAClC,SAAS,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;IAChC,QAAQ,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;IAC/B;;;;;;;;;;OAUG;IACH,WAAW,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;IAClC,wDAAwD;IACxD,WAAW,CAAC,EAAE,CAAC,CAAC,KAAK,EAAE,MAAM,KAAK,SAAS,CAAC,GAAG,SAAS,CAAC;IACzD,sFAAsF;IACtF,WAAW,CAAC,EAAE,CAAC,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,GAAG,IAAI,CAAC,GAAG,SAAS,CAAC;IAC7D,wFAAwF;IACxF,GAAG,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;CAC1B,+BAqIA"}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
|
|
2
2
|
import { useEffect, useRef, useState } from "react";
|
|
3
3
|
import styled from "styled-components";
|
|
4
4
|
import { v } from "../theme/tokens.js";
|
|
@@ -93,7 +93,7 @@ const Spin = styled.span `
|
|
|
93
93
|
* choosing several in a row is the normal case and reopening between each is
|
|
94
94
|
* the annoying one.
|
|
95
95
|
*/
|
|
96
|
-
export function MultiCombobox({ query, onQueryChange, options, selected, onChange, placeholder, label, loading, emptyNote, autoFocus, disabled, }) {
|
|
96
|
+
export function MultiCombobox({ query, onQueryChange, options, selected, onChange, placeholder, label, loading, emptyNote, autoFocus, disabled, allowCreate, createLabel, validateNew, max, }) {
|
|
97
97
|
const [open, setOpen] = useState(false);
|
|
98
98
|
const [active, setActive] = useState(0);
|
|
99
99
|
const ref = useRef(null);
|
|
@@ -106,11 +106,32 @@ export function MultiCombobox({ query, onQueryChange, options, selected, onChang
|
|
|
106
106
|
document.addEventListener("mousedown", onDown);
|
|
107
107
|
return () => document.removeEventListener("mousedown", onDown);
|
|
108
108
|
}, [open]);
|
|
109
|
+
const full = max !== undefined && selected.length >= max;
|
|
109
110
|
const toggle = (key) => {
|
|
110
|
-
|
|
111
|
+
if (selected.includes(key)) {
|
|
112
|
+
onChange(selected.filter((k) => k !== key));
|
|
113
|
+
return;
|
|
114
|
+
}
|
|
115
|
+
if (full)
|
|
116
|
+
return;
|
|
117
|
+
onChange([...selected, key]);
|
|
111
118
|
};
|
|
119
|
+
// The create row, when the typed text is a value in its own right and is not
|
|
120
|
+
// already an option or already chosen. It sits FIRST and starts active, so
|
|
121
|
+
// typing a new value and pressing Enter adds it — the whole gesture a tag
|
|
122
|
+
// input exists for — while arrowing down still reaches the suggestions.
|
|
123
|
+
const typed = query.trim();
|
|
124
|
+
const newProblem = allowCreate && typed && validateNew ? validateNew(typed) : null;
|
|
125
|
+
const creatable = !!allowCreate && typed !== "" && !newProblem && !full &&
|
|
126
|
+
!options.some((o) => o.key === typed) && !selected.includes(typed);
|
|
127
|
+
const rows = options.length + (creatable ? 1 : 0);
|
|
112
128
|
const pickActive = () => {
|
|
113
|
-
|
|
129
|
+
if (creatable && active === 0) {
|
|
130
|
+
onChange([...selected, typed]);
|
|
131
|
+
onQueryChange("");
|
|
132
|
+
return;
|
|
133
|
+
}
|
|
134
|
+
const opt = options[creatable ? active - 1 : active];
|
|
114
135
|
if (opt)
|
|
115
136
|
toggle(opt.key);
|
|
116
137
|
};
|
|
@@ -122,14 +143,15 @@ export function MultiCombobox({ query, onQueryChange, options, selected, onChang
|
|
|
122
143
|
if (e.key === "ArrowDown") {
|
|
123
144
|
e.preventDefault();
|
|
124
145
|
setOpen(true);
|
|
125
|
-
setActive((a) => Math.min(a + 1,
|
|
146
|
+
setActive((a) => Math.min(a + 1, rows - 1));
|
|
126
147
|
}
|
|
127
148
|
else if (e.key === "ArrowUp") {
|
|
128
149
|
e.preventDefault();
|
|
129
150
|
setActive((a) => Math.max(a - 1, 0));
|
|
130
151
|
}
|
|
131
|
-
else if (e.key === "Enter" &&
|
|
152
|
+
else if (e.key === "Enter" && rows > 0) {
|
|
132
153
|
e.preventDefault();
|
|
154
|
+
setOpen(true);
|
|
133
155
|
pickActive();
|
|
134
156
|
}
|
|
135
157
|
else if (e.key === "Escape")
|
|
@@ -140,9 +162,10 @@ export function MultiCombobox({ query, onQueryChange, options, selected, onChang
|
|
|
140
162
|
e.preventDefault();
|
|
141
163
|
onChange(selected.slice(0, -1));
|
|
142
164
|
}
|
|
143
|
-
} }), loading ? _jsx(Spin, { children: _jsx(Icon, { name: "spinner", spin: true }) }) : null, open && !disabled && (
|
|
165
|
+
} }), loading ? _jsx(Spin, { children: _jsx(Icon, { name: "spinner", spin: true }) }) : null, open && !disabled && (rows > 0 || emptyNote || newProblem) ? (_jsxs(List, { role: "listbox", "aria-multiselectable": true, children: [creatable ? (_jsxs(Option, { type: "button", role: "option", "aria-selected": false, "$on": active === 0, "$picked": false, onMouseEnter: () => setActive(0), onClick: () => pickActive(), children: [_jsx(Tick, { children: _jsx(Icon, { name: "add" }) }), createLabel ? createLabel(typed) : _jsxs(_Fragment, { children: ["Add \u201C", typed, "\u201D"] })] })) : null, newProblem ? _jsx(Note, { children: newProblem }) : null, options.map((o, i) => {
|
|
144
166
|
const picked = selected.includes(o.key);
|
|
145
|
-
|
|
146
|
-
|
|
167
|
+
const idx = creatable ? i + 1 : i;
|
|
168
|
+
return (_jsxs(Option, { type: "button", role: "option", "aria-selected": picked, "$on": idx === active, "$picked": picked, onMouseEnter: () => setActive(idx), onClick: () => toggle(o.key), children: [_jsx(Tick, { children: picked ? _jsx(Icon, { name: "check" }) : null }), o.render] }, o.key));
|
|
169
|
+
}), rows === 0 && !newProblem && emptyNote ? _jsx(Note, { children: emptyNote }) : null] })) : null] }));
|
|
147
170
|
}
|
|
148
171
|
//# sourceMappingURL=MultiCombobox.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"MultiCombobox.js","sourceRoot":"","sources":["../../src/kit/MultiCombobox.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,EAAE,QAAQ,EAAkB,MAAM,OAAO,CAAC;AACpE,OAAO,MAAM,MAAM,mBAAmB,CAAC;AACvC,OAAO,EAAE,CAAC,EAAE,MAAM,oBAAoB,CAAC;AACvC,OAAO,EAAE,KAAK,EAAE,MAAM,WAAY,CAAC;AACnC,OAAO,EAAE,IAAI,EAAE,MAAM,WAAY,CAAC;AAGlC,MAAM,IAAI,GAAG,MAAM,CAAC,GAAG,CAAA,qBAAqB,CAAC;AAE7C,MAAM,KAAK,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;CAKvB,CAAC;AAEF,MAAM,IAAI,GAAG,MAAM,CAAC,IAAI,CAAA;;;;;;;WAOb,CAAC,CAAC,IAAI;gBACD,CAAC,CAAC,OAAO;sBACH,CAAC,CAAC,KAAK;CAC5B,CAAC;AAEF,MAAM,KAAK,GAAG,MAAM,CAAC,MAAM,CAAA;;;;;WAKhB,CAAC,CAAC,KAAK;;qBAEG,CAAC,CAAC,IAAI,iBAAiB,CAAC,CAAC,KAAK;CAClD,CAAC;AAEF,MAAM,IAAI,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;aAKV,CAAC,CAAC,IAAI;;;gBAGH,CAAC,CAAC,OAAO;sBACH,CAAC,CAAC,KAAK;mBACV,CAAC,CAAC,KAAK;gBACV,CAAC,CAAC,IAAI;;CAErB,CAAC;AAEF,MAAM,MAAM,GAAG,MAAM,CAAC,MAAM,CAAoC;;;;;;;;;WASrD,CAAC,CAAC,IAAI;gBACD,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,aAAa,CAAC;aAC7C,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC;0BAChB,CAAC,CAAC,KAAK;CAChC,CAAC;AAEF,MAAM,IAAI,GAAG,MAAM,CAAC,IAAI,CAAA;;;WAGb,CAAC,CAAC,KAAK;;CAEjB,CAAC;AAEF,MAAM,IAAI,GAAG,MAAM,CAAC,GAAG,CAAA;;;WAGZ,CAAC,CAAC,KAAK;CACjB,CAAC;AAEF,MAAM,IAAI,GAAG,MAAM,CAAC,IAAI,CAAA;;;;WAIb,CAAC,CAAC,KAAK;;CAEjB,CAAC;AAEF;;;;;;;;;;;;;;;GAeG;AACH,MAAM,UAAU,aAAa,CAAI,EAC/B,KAAK,EAAE,aAAa,EAAE,OAAO,EAAE,QAAQ,EAAE,QAAQ,EAAE,WAAW,EAAE,KAAK,EAAE,OAAO,EAAE,SAAS,EAAE,SAAS,EAAE,QAAQ,
|
|
1
|
+
{"version":3,"file":"MultiCombobox.js","sourceRoot":"","sources":["../../src/kit/MultiCombobox.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,EAAE,QAAQ,EAAkB,MAAM,OAAO,CAAC;AACpE,OAAO,MAAM,MAAM,mBAAmB,CAAC;AACvC,OAAO,EAAE,CAAC,EAAE,MAAM,oBAAoB,CAAC;AACvC,OAAO,EAAE,KAAK,EAAE,MAAM,WAAY,CAAC;AACnC,OAAO,EAAE,IAAI,EAAE,MAAM,WAAY,CAAC;AAGlC,MAAM,IAAI,GAAG,MAAM,CAAC,GAAG,CAAA,qBAAqB,CAAC;AAE7C,MAAM,KAAK,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;CAKvB,CAAC;AAEF,MAAM,IAAI,GAAG,MAAM,CAAC,IAAI,CAAA;;;;;;;WAOb,CAAC,CAAC,IAAI;gBACD,CAAC,CAAC,OAAO;sBACH,CAAC,CAAC,KAAK;CAC5B,CAAC;AAEF,MAAM,KAAK,GAAG,MAAM,CAAC,MAAM,CAAA;;;;;WAKhB,CAAC,CAAC,KAAK;;qBAEG,CAAC,CAAC,IAAI,iBAAiB,CAAC,CAAC,KAAK;CAClD,CAAC;AAEF,MAAM,IAAI,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;aAKV,CAAC,CAAC,IAAI;;;gBAGH,CAAC,CAAC,OAAO;sBACH,CAAC,CAAC,KAAK;mBACV,CAAC,CAAC,KAAK;gBACV,CAAC,CAAC,IAAI;;CAErB,CAAC;AAEF,MAAM,MAAM,GAAG,MAAM,CAAC,MAAM,CAAoC;;;;;;;;;WASrD,CAAC,CAAC,IAAI;gBACD,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,aAAa,CAAC;aAC7C,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC;0BAChB,CAAC,CAAC,KAAK;CAChC,CAAC;AAEF,MAAM,IAAI,GAAG,MAAM,CAAC,IAAI,CAAA;;;WAGb,CAAC,CAAC,KAAK;;CAEjB,CAAC;AAEF,MAAM,IAAI,GAAG,MAAM,CAAC,GAAG,CAAA;;;WAGZ,CAAC,CAAC,KAAK;CACjB,CAAC;AAEF,MAAM,IAAI,GAAG,MAAM,CAAC,IAAI,CAAA;;;;WAIb,CAAC,CAAC,KAAK;;CAEjB,CAAC;AAEF;;;;;;;;;;;;;;;GAeG;AACH,MAAM,UAAU,aAAa,CAAI,EAC/B,KAAK,EAAE,aAAa,EAAE,OAAO,EAAE,QAAQ,EAAE,QAAQ,EAAE,WAAW,EAAE,KAAK,EAAE,OAAO,EAAE,SAAS,EAAE,SAAS,EAAE,QAAQ,EAC9G,WAAW,EAAE,WAAW,EAAE,WAAW,EAAE,GAAG,GAkC3C;IACC,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IACxC,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,QAAQ,CAAC,CAAC,CAAC,CAAC;IACxC,MAAM,GAAG,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IAEzC,SAAS,CAAC,GAAG,EAAE,GAAG,SAAS,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,OAAO,CAAC,CAAC,CAAC;IAE9C,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,CAAC,IAAI;YAAE,OAAO;QAClB,MAAM,MAAM,GAAG,CAAC,CAAa,EAAE,EAAE,GAAG,IAAI,CAAC,GAAG,CAAC,OAAO,EAAE,QAAQ,CAAC,CAAC,CAAC,MAAc,CAAC;YAAE,OAAO,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC;QACpG,QAAQ,CAAC,gBAAgB,CAAC,WAAW,EAAE,MAAM,CAAC,CAAC;QAC/C,OAAO,GAAG,EAAE,CAAC,QAAQ,CAAC,mBAAmB,CAAC,WAAW,EAAE,MAAM,CAAC,CAAC;IACjE,CAAC,EAAE,CAAC,IAAI,CAAC,CAAC,CAAC;IAEX,MAAM,IAAI,GAAG,GAAG,KAAK,SAAS,IAAI,QAAQ,CAAC,MAAM,IAAI,GAAG,CAAC;IAEzD,MAAM,MAAM,GAAG,CAAC,GAAW,EAAE,EAAE;QAC7B,IAAI,QAAQ,CAAC,QAAQ,CAAC,GAAG,CAAC,EAAE,CAAC;YAC3B,QAAQ,CAAC,QAAQ,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,KAAK,GAAG,CAAC,CAAC,CAAC;YAC5C,OAAO;QACT,CAAC;QACD,IAAI,IAAI;YAAE,OAAO;QACjB,QAAQ,CAAC,CAAC,GAAG,QAAQ,EAAE,GAAG,CAAC,CAAC,CAAC;IAC/B,CAAC,CAAC;IAEF,6EAA6E;IAC7E,2EAA2E;IAC3E,0EAA0E;IAC1E,wEAAwE;IACxE,MAAM,KAAK,GAAG,KAAK,CAAC,IAAI,EAAE,CAAC;IAC3B,MAAM,UAAU,GAAG,WAAW,IAAI,KAAK,IAAI,WAAW,CAAC,CAAC,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC;IACnF,MAAM,SAAS,GACb,CAAC,CAAC,WAAW,IAAI,KAAK,KAAK,EAAE,IAAI,CAAC,UAAU,IAAI,CAAC,IAAI;QACrD,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,GAAG,KAAK,KAAK,CAAC,IAAI,CAAC,QAAQ,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC;IACrE,MAAM,IAAI,GAAG,OAAO,CAAC,MAAM,GAAG,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;IAElD,MAAM,UAAU,GAAG,GAAG,EAAE;QACtB,IAAI,SAAS,IAAI,MAAM,KAAK,CAAC,EAAE,CAAC;YAC9B,QAAQ,CAAC,CAAC,GAAG,QAAQ,EAAE,KAAK,CAAC,CAAC,CAAC;YAC/B,aAAa,CAAC,EAAE,CAAC,CAAC;YAClB,OAAO;QACT,CAAC;QACD,MAAM,GAAG,GAAG,OAAO,CAAC,SAAS,CAAC,CAAC,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC;QACrD,IAAI,GAAG;YAAE,MAAM,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;IAC3B,CAAC,CAAC;IAEF,8EAA8E;IAC9E,0EAA0E;IAC1E,gEAAgE;IAChE,MAAM,QAAQ,GAAG,CAAC,GAAW,EAAa,EAAE,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,GAAG,KAAK,GAAG,CAAC,EAAE,MAAM,IAAI,GAAG,CAAC;IAE/F,OAAO,CACL,MAAC,IAAI,IAAC,GAAG,EAAE,GAAG,aACX,QAAQ,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,CACrB,KAAC,KAAK,cACH,QAAQ,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,EAAE,CAAC,CACrB,MAAC,IAAI,eACF,QAAQ,CAAC,GAAG,CAAC,EACb,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CACjB,KAAC,KAAK,IAAC,IAAI,EAAC,QAAQ,gBAAa,UAAU,GAAG,EAAE,EAAE,OAAO,EAAE,GAAG,EAAE,CAAC,MAAM,CAAC,GAAG,CAAC,YAC1E,KAAC,IAAI,IAAC,IAAI,EAAC,OAAO,GAAG,GACf,CACT,KANQ,GAAG,CAOP,CACR,CAAC,GACI,CACT,CAAC,CAAC,CAAC,IAAI,EAER,KAAC,KAAK,IACJ,KAAK,EAAE,KAAK,EACZ,SAAS,EAAE,SAAS,EACpB,QAAQ,EAAE,QAAQ,EAClB,WAAW,EAAE,WAAW,gBACZ,KAAK,IAAI,WAAW,EAChC,YAAY,EAAC,KAAK,EAClB,QAAQ,EAAE,CAAC,CAAC,EAAE,EAAE,GAAG,aAAa,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,EAClE,OAAO,EAAE,GAAG,EAAE,CAAC,OAAO,CAAC,IAAI,CAAC,EAC5B,SAAS,EAAE,CAAC,CAAC,EAAE,EAAE;oBACf,IAAI,CAAC,CAAC,GAAG,KAAK,WAAW,EAAE,CAAC;wBAAC,CAAC,CAAC,cAAc,EAAE,CAAC;wBAAC,OAAO,CAAC,IAAI,CAAC,CAAC;wBAAC,SAAS,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,GAAG,CAAC,EAAE,IAAI,GAAG,CAAC,CAAC,CAAC,CAAC;oBAAC,CAAC;yBACzG,IAAI,CAAC,CAAC,GAAG,KAAK,SAAS,EAAE,CAAC;wBAAC,CAAC,CAAC,cAAc,EAAE,CAAC;wBAAC,SAAS,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,GAAG,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC;oBAAC,CAAC;yBACtF,IAAI,CAAC,CAAC,GAAG,KAAK,OAAO,IAAI,IAAI,GAAG,CAAC,EAAE,CAAC;wBAAC,CAAC,CAAC,cAAc,EAAE,CAAC;wBAAC,OAAO,CAAC,IAAI,CAAC,CAAC;wBAAC,UAAU,EAAE,CAAC;oBAAC,CAAC;yBACvF,IAAI,CAAC,CAAC,GAAG,KAAK,QAAQ;wBAAE,OAAO,CAAC,KAAK,CAAC,CAAC;yBACvC,IAAI,CAAC,CAAC,GAAG,KAAK,WAAW,IAAI,KAAK,KAAK,EAAE,IAAI,QAAQ,CAAC,MAAM,GAAG,CAAC,EAAE,CAAC;wBACtE,oEAAoE;wBACpE,0CAA0C;wBAC1C,CAAC,CAAC,cAAc,EAAE,CAAC;wBACnB,QAAQ,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC;oBAClC,CAAC;gBACH,CAAC,GACD,EACD,OAAO,CAAC,CAAC,CAAC,KAAC,IAAI,cAAC,KAAC,IAAI,IAAC,IAAI,EAAC,SAAS,EAAC,IAAI,SAAG,GAAO,CAAC,CAAC,CAAC,IAAI,EAE1D,IAAI,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI,GAAG,CAAC,IAAI,SAAS,IAAI,UAAU,CAAC,CAAC,CAAC,CAAC,CAC5D,MAAC,IAAI,IAAC,IAAI,EAAC,SAAS,2CACjB,SAAS,CAAC,CAAC,CAAC,CACX,MAAC,MAAM,IACL,IAAI,EAAC,QAAQ,EACb,IAAI,EAAC,QAAQ,mBACE,KAAK,SACf,MAAM,KAAK,CAAC,aACR,KAAK,EACd,YAAY,EAAE,GAAG,EAAE,CAAC,SAAS,CAAC,CAAC,CAAC,EAChC,OAAO,EAAE,GAAG,EAAE,CAAC,UAAU,EAAE,aAE3B,KAAC,IAAI,cAAC,KAAC,IAAI,IAAC,IAAI,EAAC,KAAK,GAAG,GAAO,EAC/B,WAAW,CAAC,CAAC,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,4CAAc,KAAK,cAAW,IAC3D,CACV,CAAC,CAAC,CAAC,IAAI,EACP,UAAU,CAAC,CAAC,CAAC,KAAC,IAAI,cAAE,UAAU,GAAQ,CAAC,CAAC,CAAC,IAAI,EAC7C,OAAO,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE;wBACpB,MAAM,MAAM,GAAG,QAAQ,CAAC,QAAQ,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC;wBACxC,MAAM,GAAG,GAAG,SAAS,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;wBAClC,OAAO,CACL,MAAC,MAAM,IAEL,IAAI,EAAC,QAAQ,EACb,IAAI,EAAC,QAAQ,mBACE,MAAM,SAChB,GAAG,KAAK,MAAM,aACV,MAAM,EACf,YAAY,EAAE,GAAG,EAAE,CAAC,SAAS,CAAC,GAAG,CAAC,EAClC,OAAO,EAAE,GAAG,EAAE,CAAC,MAAM,CAAC,CAAC,CAAC,GAAG,CAAC,aAE5B,KAAC,IAAI,cAAE,MAAM,CAAC,CAAC,CAAC,KAAC,IAAI,IAAC,IAAI,EAAC,OAAO,GAAG,CAAC,CAAC,CAAC,IAAI,GAAQ,EACnD,CAAC,CAAC,MAAM,KAVJ,CAAC,CAAC,GAAG,CAWH,CACV,CAAC;oBACJ,CAAC,CAAC,EACD,IAAI,KAAK,CAAC,IAAI,CAAC,UAAU,IAAI,SAAS,CAAC,CAAC,CAAC,KAAC,IAAI,cAAE,SAAS,GAAQ,CAAC,CAAC,CAAC,IAAI,IACpE,CACR,CAAC,CAAC,CAAC,IAAI,IACH,CACR,CAAC;AACJ,CAAC"}
|
|
@@ -0,0 +1,57 @@
|
|
|
1
|
+
export interface SparklineProps {
|
|
2
|
+
/** `[x, y]` pairs — x is usually epoch millis; order does not matter */
|
|
3
|
+
points: [number, number][];
|
|
4
|
+
/** stroke colour; a token (`v.cat1`, `v.success`), never a literal */
|
|
5
|
+
colour?: string | undefined;
|
|
6
|
+
width?: number | undefined;
|
|
7
|
+
height?: number | undefined;
|
|
8
|
+
/**
|
|
9
|
+
* Pin the bottom of the scale to zero. Right for a rate (a flat line near
|
|
10
|
+
* zero should look flat and near zero); wrong for a latency, where the
|
|
11
|
+
* interesting variation is a few percent above a large floor and a
|
|
12
|
+
* zero-based scale flattens it into nothing.
|
|
13
|
+
*/
|
|
14
|
+
zeroBased?: boolean | undefined;
|
|
15
|
+
/** fill the area under the line at low opacity (default true) */
|
|
16
|
+
area?: boolean | undefined;
|
|
17
|
+
/**
|
|
18
|
+
* An instant to mark with a dashed rule — "what was happening when this span
|
|
19
|
+
* ran". Ignored when it falls outside the series.
|
|
20
|
+
*/
|
|
21
|
+
markAt?: number | undefined;
|
|
22
|
+
/** shown in place of the chart when there is nothing to draw (default "—") */
|
|
23
|
+
empty?: string | undefined;
|
|
24
|
+
/** accessible description; omitted leaves the chart `aria-hidden` */
|
|
25
|
+
label?: string | undefined;
|
|
26
|
+
}
|
|
27
|
+
/**
|
|
28
|
+
* Sparkline: the shape of one series, drawn to fit a cell.
|
|
29
|
+
*
|
|
30
|
+
* The y scale is per-sparkline rather than shared down the column: each row
|
|
31
|
+
* shows its own shape instead of being flattened by the busiest row on the
|
|
32
|
+
* screen. These answer "is it trending", not "how does it compare" — a column
|
|
33
|
+
* that needs the second question wants a `Meter` or a number.
|
|
34
|
+
*/
|
|
35
|
+
export declare function Sparkline({ points, colour, width, height, zeroBased, area, markAt, empty, label, }: SparklineProps): import("react").JSX.Element;
|
|
36
|
+
/**
|
|
37
|
+
* SparkRow: a named sparkline with its latest value.
|
|
38
|
+
*
|
|
39
|
+
* Two shapes, because two things want this and they are not the same box:
|
|
40
|
+
*
|
|
41
|
+
* - `inline` (the default) is a line in a list — "name ·····/··· 128 MB" —
|
|
42
|
+
* where the names are a column the eye runs down.
|
|
43
|
+
* - `stacked` is a tile: the name and the value share the first line and the
|
|
44
|
+
* chart gets the whole width under them. In a card narrow enough to be one
|
|
45
|
+
* of twenty on a grid, an inline row spends every pixel on the chart and
|
|
46
|
+
* ellipsises the metric name down to nothing — which loses the only thing
|
|
47
|
+
* that says what you are looking at.
|
|
48
|
+
*
|
|
49
|
+
* The caller formats the value, because only it knows whether 134217728 is
|
|
50
|
+
* "128 MB", "134M" or "2m 14s".
|
|
51
|
+
*/
|
|
52
|
+
export declare function SparkRow({ name, value, layout, ...spark }: SparklineProps & {
|
|
53
|
+
name: string;
|
|
54
|
+
value?: string | undefined;
|
|
55
|
+
layout?: "inline" | "stacked" | undefined;
|
|
56
|
+
}): import("react").JSX.Element;
|
|
57
|
+
//# sourceMappingURL=Sparkline.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Sparkline.d.ts","sourceRoot":"","sources":["../../src/kit/Sparkline.tsx"],"names":[],"mappings":"AAiCA,MAAM,WAAW,cAAc;IAC7B,wEAAwE;IACxE,MAAM,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,EAAE,CAAC;IAC3B,sEAAsE;IACtE,MAAM,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAC5B,KAAK,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAC3B,MAAM,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAC5B;;;;;OAKG;IACH,SAAS,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;IAChC,iEAAiE;IACjE,IAAI,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;IAC3B;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAC5B,8EAA8E;IAC9E,KAAK,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAC3B,qEAAqE;IACrE,KAAK,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;CAC5B;AAED;;;;;;;GAOG;AACH,wBAAgB,SAAS,CAAC,EACxB,MAAM,EAAE,MAAgB,EAAE,KAAU,EAAE,MAAW,EAAE,SAAgB,EAAE,IAAW,EAAE,MAAM,EAAE,KAAW,EAAE,KAAK,GAC7G,EAAE,cAAc,+BAiDhB;AAyBD;;;;;;;;;;;;;;;GAeG;AACH,wBAAgB,QAAQ,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,MAAiB,EAAE,GAAG,KAAK,EAAE,EAAE,cAAc,GAAG;IACtF,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAC3B,MAAM,CAAC,EAAE,QAAQ,GAAG,SAAS,GAAG,SAAS,CAAC;CAC3C,+BAmBA"}
|
|
@@ -0,0 +1,109 @@
|
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
import { useMemo } from "react";
|
|
3
|
+
import styled from "styled-components";
|
|
4
|
+
import { v } from "../theme/tokens.js";
|
|
5
|
+
// Sparkline — shape without a value, for a table cell.
|
|
6
|
+
//
|
|
7
|
+
// `LineChart` answers "what was the number at 14:02"; it has axes, a crosshair
|
|
8
|
+
// and a legend, and it costs a fifth of the screen. A sparkline answers "is
|
|
9
|
+
// this one trending", which is the question a list of thirty rows asks three
|
|
10
|
+
// times per row — and at ninety charts per screen the answer has to be an SVG
|
|
11
|
+
// path rather than a canvas. Both exist because they are different questions.
|
|
12
|
+
//
|
|
13
|
+
// Deliberately no axes, no labels and no tooltip: a cell this size cannot
|
|
14
|
+
// carry them, and the row it sits in already says what the series is. The
|
|
15
|
+
// caller puts the latest value in its own column, where it lines up with every
|
|
16
|
+
// other row's.
|
|
17
|
+
const Wrap = styled.span `
|
|
18
|
+
display: inline-flex;
|
|
19
|
+
align-items: center;
|
|
20
|
+
justify-content: flex-start;
|
|
21
|
+
width: ${(p) => p.$w}px;
|
|
22
|
+
height: ${(p) => p.$h}px;
|
|
23
|
+
flex: none;
|
|
24
|
+
svg { display: block; }
|
|
25
|
+
`;
|
|
26
|
+
const Flat = styled.span `
|
|
27
|
+
color: ${v.faint};
|
|
28
|
+
font-size: 10px;
|
|
29
|
+
font-family: ${v.mono};
|
|
30
|
+
`;
|
|
31
|
+
/**
|
|
32
|
+
* Sparkline: the shape of one series, drawn to fit a cell.
|
|
33
|
+
*
|
|
34
|
+
* The y scale is per-sparkline rather than shared down the column: each row
|
|
35
|
+
* shows its own shape instead of being flattened by the busiest row on the
|
|
36
|
+
* screen. These answer "is it trending", not "how does it compare" — a column
|
|
37
|
+
* that needs the second question wants a `Meter` or a number.
|
|
38
|
+
*/
|
|
39
|
+
export function Sparkline({ points, colour = v.brand, width = 90, height = 22, zeroBased = true, area = true, markAt, empty = "—", label, }) {
|
|
40
|
+
const geometry = useMemo(() => {
|
|
41
|
+
const finite = points.filter((p) => Number.isFinite(p[0]) && Number.isFinite(p[1])).sort((a, b) => a[0] - b[0]);
|
|
42
|
+
if (finite.length < 2)
|
|
43
|
+
return null;
|
|
44
|
+
const xs = finite.map((p) => p[0]);
|
|
45
|
+
const ys = finite.map((p) => p[1]);
|
|
46
|
+
const minX = Math.min(...xs);
|
|
47
|
+
const maxX = Math.max(...xs);
|
|
48
|
+
const minY = zeroBased ? Math.min(0, ...ys) : Math.min(...ys);
|
|
49
|
+
const maxY = Math.max(...ys, minY);
|
|
50
|
+
const spanX = Math.max(1, maxX - minX);
|
|
51
|
+
// A flat series renders as a flat line halfway up rather than dividing by
|
|
52
|
+
// zero; a series at a constant 400ms is a real answer, not missing data.
|
|
53
|
+
const spanY = maxY - minY || 1;
|
|
54
|
+
const px = (x) => ((x - minX) / spanX) * width;
|
|
55
|
+
const py = (y) => height - 1 - ((y - minY) / spanY) * (height - 2);
|
|
56
|
+
const line = finite.map((p, i) => `${i === 0 ? "M" : "L"}${px(p[0]).toFixed(1)},${py(p[1]).toFixed(1)}`).join(" ");
|
|
57
|
+
const under = `${line} L${px(maxX).toFixed(1)},${height} L${px(minX).toFixed(1)},${height} Z`;
|
|
58
|
+
const mark = markAt !== undefined && markAt >= minX && markAt <= maxX ? px(markAt) : null;
|
|
59
|
+
return { line, under, mark };
|
|
60
|
+
}, [points, width, height, zeroBased, markAt]);
|
|
61
|
+
if (!geometry) {
|
|
62
|
+
return (_jsx(Wrap, { "$w": width, "$h": height, children: _jsx(Flat, { children: empty }) }));
|
|
63
|
+
}
|
|
64
|
+
return (_jsx(Wrap, { "$w": width, "$h": height, children: _jsxs("svg", { width: width, height: height, viewBox: `0 0 ${width} ${height}`, ...(label ? { role: "img", "aria-label": label } : { "aria-hidden": true }), children: [area ? _jsx("path", { d: geometry.under, fill: colour, opacity: 0.14 }) : null, _jsx("path", { d: geometry.line, fill: "none", stroke: colour, strokeWidth: 1.2 }), geometry.mark !== null ? (_jsx("line", { x1: geometry.mark, x2: geometry.mark, y1: 0, y2: height, stroke: v.warning, strokeWidth: 1, strokeDasharray: "2 2" })) : null] }) }));
|
|
65
|
+
}
|
|
66
|
+
const RowWrap = styled.span `
|
|
67
|
+
display: flex;
|
|
68
|
+
align-items: center;
|
|
69
|
+
gap: 8px;
|
|
70
|
+
min-width: 0;
|
|
71
|
+
font-size: 10px;
|
|
72
|
+
font-family: ${v.mono};
|
|
73
|
+
> .name { flex: 1 1 auto; min-width: 0; color: ${v.faint}; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
|
74
|
+
> .value { flex: none; min-width: 56px; text-align: right; color: ${v.text}; font-variant-numeric: tabular-nums; }
|
|
75
|
+
`;
|
|
76
|
+
const StackWrap = styled.span `
|
|
77
|
+
display: flex;
|
|
78
|
+
flex-direction: column;
|
|
79
|
+
gap: 2px;
|
|
80
|
+
min-width: 0;
|
|
81
|
+
font-size: 10px;
|
|
82
|
+
font-family: ${v.mono};
|
|
83
|
+
> .head { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
|
|
84
|
+
> .head > .name { flex: 1 1 auto; min-width: 0; color: ${v.faint}; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
|
85
|
+
> .head > .value { flex: none; color: ${v.text}; font-weight: 600; font-variant-numeric: tabular-nums; }
|
|
86
|
+
`;
|
|
87
|
+
/**
|
|
88
|
+
* SparkRow: a named sparkline with its latest value.
|
|
89
|
+
*
|
|
90
|
+
* Two shapes, because two things want this and they are not the same box:
|
|
91
|
+
*
|
|
92
|
+
* - `inline` (the default) is a line in a list — "name ·····/··· 128 MB" —
|
|
93
|
+
* where the names are a column the eye runs down.
|
|
94
|
+
* - `stacked` is a tile: the name and the value share the first line and the
|
|
95
|
+
* chart gets the whole width under them. In a card narrow enough to be one
|
|
96
|
+
* of twenty on a grid, an inline row spends every pixel on the chart and
|
|
97
|
+
* ellipsises the metric name down to nothing — which loses the only thing
|
|
98
|
+
* that says what you are looking at.
|
|
99
|
+
*
|
|
100
|
+
* The caller formats the value, because only it knows whether 134217728 is
|
|
101
|
+
* "128 MB", "134M" or "2m 14s".
|
|
102
|
+
*/
|
|
103
|
+
export function SparkRow({ name, value, layout = "inline", ...spark }) {
|
|
104
|
+
if (layout === "stacked") {
|
|
105
|
+
return (_jsxs(StackWrap, { children: [_jsxs("span", { className: "head", children: [_jsx("span", { className: "name", title: name, children: name }), value !== undefined ? _jsx("span", { className: "value", children: value }) : null] }), _jsx(Sparkline, { ...spark })] }));
|
|
106
|
+
}
|
|
107
|
+
return (_jsxs(RowWrap, { children: [_jsx("span", { className: "name", title: name, children: name }), _jsx(Sparkline, { ...spark }), value !== undefined ? _jsx("span", { className: "value", children: value }) : null] }));
|
|
108
|
+
}
|
|
109
|
+
//# sourceMappingURL=Sparkline.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Sparkline.js","sourceRoot":"","sources":["../../src/kit/Sparkline.tsx"],"names":[],"mappings":"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"}
|
package/dist/kit/Text.d.ts
CHANGED
|
@@ -1,4 +1,6 @@
|
|
|
1
1
|
import type { ReactNode } from "react";
|
|
2
|
+
declare const textTones: Record<"ok" | "warn" | "crit" | "info" | "mut" | "data", string>;
|
|
3
|
+
export type TextTone = keyof typeof textTones;
|
|
2
4
|
/** Mono: a technical string — id, ref, path, host. */
|
|
3
5
|
export declare const Mono: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Merged<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "style"> & {
|
|
4
6
|
style?: import("react").CSSProperties | import("styled-components/dist/types").CSSPropertiesWithVars | undefined;
|
|
@@ -7,6 +9,7 @@ export declare const Mono: import("styled-components/dist/types").IStyledCompone
|
|
|
7
9
|
$size?: number | undefined;
|
|
8
10
|
$truncate?: boolean | undefined;
|
|
9
11
|
$weight?: number | undefined;
|
|
12
|
+
$tone?: TextTone | undefined;
|
|
10
13
|
}>> & string;
|
|
11
14
|
/** Num: a tabular figure, right-aligned in tables. */
|
|
12
15
|
export declare const Num: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Merged<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "style"> & {
|
|
@@ -15,6 +18,7 @@ export declare const Num: import("styled-components/dist/types").IStyledComponen
|
|
|
15
18
|
$dim?: boolean | undefined;
|
|
16
19
|
$faint?: boolean | undefined;
|
|
17
20
|
$mono?: boolean | undefined;
|
|
21
|
+
$tone?: TextTone | undefined;
|
|
18
22
|
}>> & string;
|
|
19
23
|
/** Hint: secondary explanatory text under a control or a block. */
|
|
20
24
|
export declare const Hint: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Merged<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, "style"> & {
|
|
@@ -107,4 +111,5 @@ export declare function Ago({ at }: {
|
|
|
107
111
|
export declare function toDate(at: Date | bigint | number | string | undefined | null): Date | null;
|
|
108
112
|
/** relative renders the "3 days ago" string on its own, for a title or a cell. */
|
|
109
113
|
export declare function relative(d: Date): string;
|
|
114
|
+
export {};
|
|
110
115
|
//# sourceMappingURL=Text.d.ts.map
|
package/dist/kit/Text.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Text.d.ts","sourceRoot":"","sources":["../../src/kit/Text.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"Text.d.ts","sourceRoot":"","sources":["../../src/kit/Text.tsx"],"names":[],"mappings":"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"}
|
package/dist/kit/Text.js
CHANGED
|
@@ -2,6 +2,16 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
|
|
|
2
2
|
import styled, { css } from "styled-components";
|
|
3
3
|
import { Link } from "react-router-dom";
|
|
4
4
|
import { v } from "../theme/tokens.js";
|
|
5
|
+
// A verdict applied to running text or a figure, rather than to a pill. A
|
|
6
|
+
// table cell holding "2.4%" in an error-rate column is a verdict, but a pill
|
|
7
|
+
// there would be a row's worth of width for one number — so the number itself
|
|
8
|
+
// carries the tone. Only the tones that mean something as *text* are mapped:
|
|
9
|
+
// a figure tinted with the product brand reads as a link, and `run` has no
|
|
10
|
+
// meaning for a value that is already measured.
|
|
11
|
+
const textTones = {
|
|
12
|
+
ok: v.success, warn: v.warning, crit: v.danger, info: v.info, mut: v.muted, data: v.data,
|
|
13
|
+
};
|
|
14
|
+
const toneColour = (t, fallback) => (t ? textTones[t] : fallback);
|
|
5
15
|
// Text primitives every list and detail screen needs. These replace the
|
|
6
16
|
// MonoId / NameTxt / SubEnv / MutedNote / Num styled spans that each product
|
|
7
17
|
// screen had grown its own copy of.
|
|
@@ -10,14 +20,14 @@ export const Mono = styled.span `
|
|
|
10
20
|
font-family: ${v.mono};
|
|
11
21
|
font-size: ${(p) => p.$size ?? 12}px;
|
|
12
22
|
font-weight: ${(p) => p.$weight ?? "inherit"};
|
|
13
|
-
color: ${(p) => (p.$dim ? v.muted : v.text)};
|
|
23
|
+
color: ${(p) => toneColour(p.$tone, p.$dim ? v.muted : v.text)};
|
|
14
24
|
${(p) => p.$truncate && css `display: inline-block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom;`}
|
|
15
25
|
`;
|
|
16
26
|
/** Num: a tabular figure, right-aligned in tables. */
|
|
17
27
|
export const Num = styled.span `
|
|
18
28
|
font-variant-numeric: tabular-nums;
|
|
19
29
|
${(p) => p.$mono && css `font-family: ${v.mono}; font-size: 12px;`}
|
|
20
|
-
color: ${(p) => (p.$faint ? v.faint : p.$dim ? v.muted : v.text)};
|
|
30
|
+
color: ${(p) => toneColour(p.$tone, p.$faint ? v.faint : p.$dim ? v.muted : v.text)};
|
|
21
31
|
`;
|
|
22
32
|
/** Hint: secondary explanatory text under a control or a block. */
|
|
23
33
|
export const Hint = styled.p `
|
package/dist/kit/Text.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Text.js","sourceRoot":"","sources":["../../src/kit/Text.tsx"],"names":[],"mappings":";AAAA,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AACxC,OAAO,EAAE,CAAC,EAAE,MAAM,oBAAoB,CAAC;AAEvC,wEAAwE;AACxE,6EAA6E;AAC7E,oCAAoC;AAEpC,sDAAsD;AACtD,MAAM,CAAC,MAAM,IAAI,GAAG,MAAM,CAAC,IAAI,
|
|
1
|
+
{"version":3,"file":"Text.js","sourceRoot":"","sources":["../../src/kit/Text.tsx"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1,41 @@
|
|
|
1
|
+
import { type CSSProperties, type ReactNode } from "react";
|
|
2
|
+
type Side = "top" | "bottom";
|
|
3
|
+
export interface TooltipProps {
|
|
4
|
+
/** what the tooltip says — a string, or nodes for a two-line explanation */
|
|
5
|
+
label: ReactNode;
|
|
6
|
+
/** the element it explains; it is wrapped in an inline-flex span */
|
|
7
|
+
children: ReactNode;
|
|
8
|
+
/** which side to prefer; it flips when there is no room (default "top") */
|
|
9
|
+
side?: Side | undefined;
|
|
10
|
+
/** horizontal alignment against the anchor (default "center") */
|
|
11
|
+
align?: "center" | "start" | "end" | undefined;
|
|
12
|
+
/** max width in px — widen it for a sentence (default 260) */
|
|
13
|
+
width?: number | undefined;
|
|
14
|
+
/** ms before it opens; 0 for immediate (default 180) */
|
|
15
|
+
delay?: number | undefined;
|
|
16
|
+
/** suppress it without unwrapping the child (a label that is sometimes absent) */
|
|
17
|
+
disabled?: boolean | undefined;
|
|
18
|
+
/**
|
|
19
|
+
* Applied to the anchor — the inline-flex span this wraps the child in.
|
|
20
|
+
*
|
|
21
|
+
* Needed because wrapping an element in a tooltip inserts a box between it
|
|
22
|
+
* and its parent: a flex child that was `flex: 1 1 auto` stops growing the
|
|
23
|
+
* moment it gains an anchor, and in a tight row it collapses onto its
|
|
24
|
+
* neighbour. Pass the sizing through (`style={{ flex: "1 1 auto", minWidth: 200 }}`)
|
|
25
|
+
* and the anchor takes the place the child used to have.
|
|
26
|
+
*/
|
|
27
|
+
style?: CSSProperties | undefined;
|
|
28
|
+
className?: string | undefined;
|
|
29
|
+
}
|
|
30
|
+
/**
|
|
31
|
+
* Tooltip: hover or focus the child, get `label` in a themed bubble.
|
|
32
|
+
*
|
|
33
|
+
* Keyboard and assistive tech are first-class — the bubble opens on focus as
|
|
34
|
+
* well as hover, and the anchor is wired to it with `aria-describedby`, so the
|
|
35
|
+
* explanation is announced rather than being a thing only a mouse can find.
|
|
36
|
+
* Escape dismisses it, because a bubble pinned by focus otherwise covers
|
|
37
|
+
* whatever is under it while you read the field it describes.
|
|
38
|
+
*/
|
|
39
|
+
export declare function Tooltip({ label, children, side, align, width, delay, disabled, style, className }: TooltipProps): import("react").JSX.Element;
|
|
40
|
+
export {};
|
|
41
|
+
//# sourceMappingURL=Tooltip.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Tooltip.d.ts","sourceRoot":"","sources":["../../src/kit/Tooltip.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAyD,KAAK,aAAa,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAmDlH,KAAK,IAAI,GAAG,KAAK,GAAG,QAAQ,CAAC;AAoB7B,MAAM,WAAW,YAAY;IAC3B,4EAA4E;IAC5E,KAAK,EAAE,SAAS,CAAC;IACjB,oEAAoE;IACpE,QAAQ,EAAE,SAAS,CAAC;IACpB,2EAA2E;IAC3E,IAAI,CAAC,EAAE,IAAI,GAAG,SAAS,CAAC;IACxB,iEAAiE;IACjE,KAAK,CAAC,EAAE,QAAQ,GAAG,OAAO,GAAG,KAAK,GAAG,SAAS,CAAC;IAC/C,8DAA8D;IAC9D,KAAK,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAC3B,wDAAwD;IACxD,KAAK,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAC3B,kFAAkF;IAClF,QAAQ,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;IAC/B;;;;;;;;OAQG;IACH,KAAK,CAAC,EAAE,aAAa,GAAG,SAAS,CAAC;IAClC,SAAS,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;CAChC;AAED;;;;;;;;GAQG;AACH,wBAAgB,OAAO,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,IAAY,EAAE,KAAgB,EAAE,KAAK,EAAE,KAAW,EAAE,QAAQ,EAAE,KAAK,EAAE,SAAS,EAAE,EAAE,YAAY,+BAkFxI"}
|
|
@@ -0,0 +1,129 @@
|
|
|
1
|
+
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
import { useCallback, useId, useLayoutEffect, useRef, useState } from "react";
|
|
3
|
+
import { createPortal } from "react-dom";
|
|
4
|
+
import styled, { keyframes } from "styled-components";
|
|
5
|
+
import { v } from "../theme/tokens.js";
|
|
6
|
+
// Tooltip — the hover/focus explanation a dense ops screen cannot do without.
|
|
7
|
+
//
|
|
8
|
+
// The kit got this far on the native `title` attribute, which is right for a
|
|
9
|
+
// truncated value's full text and wrong for everything else: it cannot hold a
|
|
10
|
+
// sentence anyone will read, it is invisible to a keyboard, it never appears on
|
|
11
|
+
// a touch screen, and it is painted by the OS rather than by the design system.
|
|
12
|
+
// Screens that needed to explain a control — "root spans have no parent, one
|
|
13
|
+
// row per request", the filter syntax, why a threshold is approximate — were
|
|
14
|
+
// reaching for their own popup, which is the duplication this removes.
|
|
15
|
+
//
|
|
16
|
+
// What it is NOT: a popover with controls in it. Nothing inside a tooltip is
|
|
17
|
+
// clickable (it is `pointer-events: none` and it closes as the pointer leaves),
|
|
18
|
+
// because a thing you must hover a corridor to reach is a thing you cannot
|
|
19
|
+
// reach. Use `Popover` for a sheet with content, and `Menu` for actions.
|
|
20
|
+
const fadeIn = keyframes `from { opacity: 0; transform: translateY(2px); }`;
|
|
21
|
+
const Bubble = styled.div `
|
|
22
|
+
position: fixed;
|
|
23
|
+
z-index: ${v.zPop};
|
|
24
|
+
max-width: ${(p) => p.$wide ?? 260}px;
|
|
25
|
+
padding: 7px 9px;
|
|
26
|
+
border-radius: ${v.rCard};
|
|
27
|
+
background: ${v.surface2};
|
|
28
|
+
border: 1px solid ${v.line2};
|
|
29
|
+
box-shadow: ${v.elev};
|
|
30
|
+
color: ${v.text};
|
|
31
|
+
font-family: ${v.font};
|
|
32
|
+
font-size: 11.5px;
|
|
33
|
+
line-height: 1.5;
|
|
34
|
+
text-align: left;
|
|
35
|
+
pointer-events: none;
|
|
36
|
+
animation: ${fadeIn} 0.1s ease;
|
|
37
|
+
/* A tooltip explaining a mono value usually quotes it; let the quote wrap
|
|
38
|
+
rather than overflow the bubble. */
|
|
39
|
+
overflow-wrap: break-word;
|
|
40
|
+
code, .mono { font-family: ${v.mono}; font-size: 11px; }
|
|
41
|
+
`;
|
|
42
|
+
/** The hoverable span. `display: contents` would lose the hover target. */
|
|
43
|
+
const Anchor = styled.span `
|
|
44
|
+
display: inline-flex;
|
|
45
|
+
min-width: 0;
|
|
46
|
+
max-width: 100%;
|
|
47
|
+
`;
|
|
48
|
+
/** Where the bubble goes, given the anchor and the bubble's own measured box. */
|
|
49
|
+
function place(anchor, box, prefer, align) {
|
|
50
|
+
const gap = 6;
|
|
51
|
+
const above = anchor.top - box.height - gap;
|
|
52
|
+
const below = anchor.bottom + gap;
|
|
53
|
+
// Flip to whichever side has room; prefer the caller's choice when both do.
|
|
54
|
+
const fitsAbove = above >= 8;
|
|
55
|
+
const fitsBelow = below + box.height <= window.innerHeight - 8;
|
|
56
|
+
const top = prefer === "top" ? (fitsAbove || !fitsBelow ? above : below) : fitsBelow || !fitsAbove ? below : above;
|
|
57
|
+
const raw = align === "start" ? anchor.left
|
|
58
|
+
: align === "end" ? anchor.right - box.width
|
|
59
|
+
: anchor.left + anchor.width / 2 - box.width / 2;
|
|
60
|
+
const left = Math.max(8, Math.min(raw, window.innerWidth - box.width - 8));
|
|
61
|
+
return { top: Math.max(8, top), left };
|
|
62
|
+
}
|
|
63
|
+
/**
|
|
64
|
+
* Tooltip: hover or focus the child, get `label` in a themed bubble.
|
|
65
|
+
*
|
|
66
|
+
* Keyboard and assistive tech are first-class — the bubble opens on focus as
|
|
67
|
+
* well as hover, and the anchor is wired to it with `aria-describedby`, so the
|
|
68
|
+
* explanation is announced rather than being a thing only a mouse can find.
|
|
69
|
+
* Escape dismisses it, because a bubble pinned by focus otherwise covers
|
|
70
|
+
* whatever is under it while you read the field it describes.
|
|
71
|
+
*/
|
|
72
|
+
export function Tooltip({ label, children, side = "top", align = "center", width, delay = 180, disabled, style, className }) {
|
|
73
|
+
const id = useId();
|
|
74
|
+
const ref = useRef(null);
|
|
75
|
+
const bubble = useRef(null);
|
|
76
|
+
const timer = useRef(undefined);
|
|
77
|
+
const [anchor, setAnchor] = useState(null);
|
|
78
|
+
const [pos, setPos] = useState(null);
|
|
79
|
+
const close = useCallback(() => {
|
|
80
|
+
window.clearTimeout(timer.current);
|
|
81
|
+
setAnchor(null);
|
|
82
|
+
setPos(null);
|
|
83
|
+
}, []);
|
|
84
|
+
const open = useCallback(() => {
|
|
85
|
+
if (disabled)
|
|
86
|
+
return;
|
|
87
|
+
window.clearTimeout(timer.current);
|
|
88
|
+
const show = () => {
|
|
89
|
+
const rect = ref.current?.getBoundingClientRect();
|
|
90
|
+
if (rect)
|
|
91
|
+
setAnchor(rect);
|
|
92
|
+
};
|
|
93
|
+
if (delay > 0)
|
|
94
|
+
timer.current = window.setTimeout(show, delay);
|
|
95
|
+
else
|
|
96
|
+
show();
|
|
97
|
+
}, [delay, disabled]);
|
|
98
|
+
// Measured once it is in the tree, so a two-line bubble flips above a row at
|
|
99
|
+
// the bottom of the viewport instead of being clipped by it. Rendered at
|
|
100
|
+
// opacity 0 until placed — an unplaced bubble at 0,0 is a visible flicker in
|
|
101
|
+
// the corner of the screen.
|
|
102
|
+
useLayoutEffect(() => {
|
|
103
|
+
if (!anchor)
|
|
104
|
+
return;
|
|
105
|
+
const box = bubble.current?.getBoundingClientRect();
|
|
106
|
+
if (box)
|
|
107
|
+
setPos(place(anchor, box, side, align));
|
|
108
|
+
}, [anchor, side, align]);
|
|
109
|
+
useLayoutEffect(() => {
|
|
110
|
+
if (!anchor)
|
|
111
|
+
return;
|
|
112
|
+
const onKey = (e) => { if (e.key === "Escape")
|
|
113
|
+
close(); };
|
|
114
|
+
// Any scroll moves the anchor out from under the bubble; the cheapest
|
|
115
|
+
// correct answer is to dismiss rather than to track.
|
|
116
|
+
document.addEventListener("keydown", onKey);
|
|
117
|
+
window.addEventListener("scroll", close, true);
|
|
118
|
+
return () => {
|
|
119
|
+
document.removeEventListener("keydown", onKey);
|
|
120
|
+
window.removeEventListener("scroll", close, true);
|
|
121
|
+
};
|
|
122
|
+
}, [anchor, close]);
|
|
123
|
+
useLayoutEffect(() => () => window.clearTimeout(timer.current), []);
|
|
124
|
+
const shown = !disabled && anchor !== null;
|
|
125
|
+
return (_jsxs(_Fragment, { children: [_jsx(Anchor, { ref: ref, style: style, className: className, onMouseEnter: open, onMouseLeave: close, onFocus: open, onBlur: close, "aria-describedby": shown ? id : undefined, children: children }), shown && typeof document !== "undefined"
|
|
126
|
+
? createPortal(_jsx(Bubble, { ref: bubble, id: id, role: "tooltip", "$wide": width, style: pos ? { top: pos.top, left: pos.left } : { top: 0, left: 0, opacity: 0 }, children: label }), document.body)
|
|
127
|
+
: null] }));
|
|
128
|
+
}
|
|
129
|
+
//# sourceMappingURL=Tooltip.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Tooltip.js","sourceRoot":"","sources":["../../src/kit/Tooltip.tsx"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1,43 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* The concrete value of one token right now, or `fallback` when it cannot be
|
|
3
|
+
* read (no DOM, or a name the sheet does not define).
|
|
4
|
+
*
|
|
5
|
+
* Prefer {@link useTokenColours} in a component — it re-resolves on a theme
|
|
6
|
+
* change, which this cannot do.
|
|
7
|
+
*/
|
|
8
|
+
export declare function tokenValue(token: string, fallback?: string): string;
|
|
9
|
+
/**
|
|
10
|
+
* Resolve a named set of tokens to concrete colours, re-resolving whenever the
|
|
11
|
+
* resolved theme or the product brand changes.
|
|
12
|
+
*
|
|
13
|
+
* ```ts
|
|
14
|
+
* const paint = useTokenColours({ axis: v.faint, grid: v.line, series: v.cat1 });
|
|
15
|
+
* ctx.strokeStyle = paint.axis; // "#8a8298" in dark, "#6b7080" in light
|
|
16
|
+
* ```
|
|
17
|
+
*
|
|
18
|
+
* The keys are the caller's own vocabulary, so a chart reads `paint.axis`
|
|
19
|
+
* rather than `paint["--x-faint"]`, and swapping which token an axis uses is a
|
|
20
|
+
* one-line change at the top of the component.
|
|
21
|
+
*
|
|
22
|
+
* Values are read from the document, so the first render already has them —
|
|
23
|
+
* a canvas painted in a layout effect gets the right colours on its first
|
|
24
|
+
* frame rather than a black one it repaints a tick later.
|
|
25
|
+
*/
|
|
26
|
+
export declare function useTokenColours<T extends Record<string, string>>(tokens: T): {
|
|
27
|
+
[K in keyof T]: string;
|
|
28
|
+
};
|
|
29
|
+
/**
|
|
30
|
+
* The categorical series tokens in order, as `var()` strings — the palette for
|
|
31
|
+
* a chart whose series are a vocabulary rather than a verdict. Use
|
|
32
|
+
* {@link seriesToken} rather than indexing this directly, so a consumer with
|
|
33
|
+
* more than ten series wraps instead of reading `undefined`.
|
|
34
|
+
*/
|
|
35
|
+
export declare const SERIES_TOKENS: readonly string[];
|
|
36
|
+
/** The nth series' token, wrapping past the tenth. */
|
|
37
|
+
export declare function seriesToken(i: number): string;
|
|
38
|
+
/**
|
|
39
|
+
* The whole categorical palette, resolved — for a chart that assigns colours
|
|
40
|
+
* by index in JS (`stroke: palette[i % palette.length]`).
|
|
41
|
+
*/
|
|
42
|
+
export declare function useSeriesColours(): string[];
|
|
43
|
+
//# sourceMappingURL=paint.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"paint.d.ts","sourceRoot":"","sources":["../../src/theme/paint.ts"],"names":[],"mappings":"AA+BA;;;;;;GAMG;AACH,wBAAgB,UAAU,CAAC,KAAK,EAAE,MAAM,EAAE,QAAQ,SAAK,GAAG,MAAM,CAM/D;AAED;;;;;;;;;;;;;;;;GAgBG;AACH,wBAAgB,eAAe,CAAC,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,EAAE,MAAM,EAAE,CAAC,GAAG;KAAG,CAAC,IAAI,MAAM,CAAC,GAAG,MAAM;CAAE,CAwBvG;AAED;;;;;GAKG;AACH,eAAO,MAAM,aAAa,EAAE,SAAS,MAAM,EAE1C,CAAC;AAEF,sDAAsD;AACtD,wBAAgB,WAAW,CAAC,CAAC,EAAE,MAAM,GAAG,MAAM,CAG7C;AAED;;;GAGG;AACH,wBAAgB,gBAAgB,IAAI,MAAM,EAAE,CAO3C"}
|
|
@@ -0,0 +1,109 @@
|
|
|
1
|
+
import { useLayoutEffect, useMemo, useState } from "react";
|
|
2
|
+
import { useThemeMaybe } from "./ThemeProvider.js";
|
|
3
|
+
import { v } from "./tokens.js";
|
|
4
|
+
// Token values as CONCRETE colours, for the surfaces that cannot use `var()`.
|
|
5
|
+
//
|
|
6
|
+
// Everything the kit draws is CSS, so `${v.faint}` — a `var(--x-faint)` string
|
|
7
|
+
// — is all a styled component ever needs. A `<canvas>` is the exception: uPlot,
|
|
8
|
+
// Chart.js, xterm and anything painting through a 2D context take real colour
|
|
9
|
+
// strings, and handing one `var(--x-faint)` paints nothing at all. The same is
|
|
10
|
+
// true of a charting library configured through JS rather than CSS, and of an
|
|
11
|
+
// SVG attribute written by a library rather than by us.
|
|
12
|
+
//
|
|
13
|
+
// Consoles have been solving that by hardcoding hexes next to their charts,
|
|
14
|
+
// which is how a console ends up with a chart that is unreadable in one of the
|
|
15
|
+
// two themes — the one the author did not have open. This resolves the tokens
|
|
16
|
+
// instead, and re-resolves them when the theme or the product brand changes,
|
|
17
|
+
// so a canvas is as theme-correct as a stylesheet.
|
|
18
|
+
const hasDOM = typeof window !== "undefined" && typeof document !== "undefined";
|
|
19
|
+
/** `var(--x-faint)` | `--x-faint` | `faint` → `--x-faint`. */
|
|
20
|
+
function customProperty(token) {
|
|
21
|
+
const t = token.trim();
|
|
22
|
+
const wrapped = /^var\(\s*(--[a-zA-Z0-9-]+)/.exec(t);
|
|
23
|
+
if (wrapped)
|
|
24
|
+
return wrapped[1];
|
|
25
|
+
if (t.startsWith("--"))
|
|
26
|
+
return t;
|
|
27
|
+
if (/^[a-zA-Z0-9-]+$/.test(t))
|
|
28
|
+
return `--x-${t}`;
|
|
29
|
+
return null;
|
|
30
|
+
}
|
|
31
|
+
/**
|
|
32
|
+
* The concrete value of one token right now, or `fallback` when it cannot be
|
|
33
|
+
* read (no DOM, or a name the sheet does not define).
|
|
34
|
+
*
|
|
35
|
+
* Prefer {@link useTokenColours} in a component — it re-resolves on a theme
|
|
36
|
+
* change, which this cannot do.
|
|
37
|
+
*/
|
|
38
|
+
export function tokenValue(token, fallback = "") {
|
|
39
|
+
if (!hasDOM)
|
|
40
|
+
return fallback;
|
|
41
|
+
const prop = customProperty(token);
|
|
42
|
+
if (!prop)
|
|
43
|
+
return token;
|
|
44
|
+
const value = getComputedStyle(document.documentElement).getPropertyValue(prop).trim();
|
|
45
|
+
return value || fallback;
|
|
46
|
+
}
|
|
47
|
+
/**
|
|
48
|
+
* Resolve a named set of tokens to concrete colours, re-resolving whenever the
|
|
49
|
+
* resolved theme or the product brand changes.
|
|
50
|
+
*
|
|
51
|
+
* ```ts
|
|
52
|
+
* const paint = useTokenColours({ axis: v.faint, grid: v.line, series: v.cat1 });
|
|
53
|
+
* ctx.strokeStyle = paint.axis; // "#8a8298" in dark, "#6b7080" in light
|
|
54
|
+
* ```
|
|
55
|
+
*
|
|
56
|
+
* The keys are the caller's own vocabulary, so a chart reads `paint.axis`
|
|
57
|
+
* rather than `paint["--x-faint"]`, and swapping which token an axis uses is a
|
|
58
|
+
* one-line change at the top of the component.
|
|
59
|
+
*
|
|
60
|
+
* Values are read from the document, so the first render already has them —
|
|
61
|
+
* a canvas painted in a layout effect gets the right colours on its first
|
|
62
|
+
* frame rather than a black one it repaints a tick later.
|
|
63
|
+
*/
|
|
64
|
+
export function useTokenColours(tokens) {
|
|
65
|
+
const theme = useThemeMaybe();
|
|
66
|
+
// The resolved scheme and the brand are the only two things that move the
|
|
67
|
+
// sheet under us. `pref` is deliberately not a dependency: "system" resolves
|
|
68
|
+
// through `resolved` already.
|
|
69
|
+
const key = `${theme?.resolved ?? ""}|${theme?.brand ?? ""}`;
|
|
70
|
+
// Identity of the token map matters, not its reference: a caller writing the
|
|
71
|
+
// object inline (the normal case) must not re-resolve on every render.
|
|
72
|
+
const spec = useMemo(() => tokens, [JSON.stringify(tokens)]); // eslint-disable-line react-hooks/exhaustive-deps
|
|
73
|
+
const resolve = () => {
|
|
74
|
+
const out = {};
|
|
75
|
+
for (const k of Object.keys(spec))
|
|
76
|
+
out[k] = tokenValue(spec[k]);
|
|
77
|
+
return out;
|
|
78
|
+
};
|
|
79
|
+
const [values, setValues] = useState(resolve);
|
|
80
|
+
useLayoutEffect(() => {
|
|
81
|
+
setValues(resolve());
|
|
82
|
+
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
83
|
+
}, [key, spec]);
|
|
84
|
+
return values;
|
|
85
|
+
}
|
|
86
|
+
/**
|
|
87
|
+
* The categorical series tokens in order, as `var()` strings — the palette for
|
|
88
|
+
* a chart whose series are a vocabulary rather than a verdict. Use
|
|
89
|
+
* {@link seriesToken} rather than indexing this directly, so a consumer with
|
|
90
|
+
* more than ten series wraps instead of reading `undefined`.
|
|
91
|
+
*/
|
|
92
|
+
export const SERIES_TOKENS = [
|
|
93
|
+
v.cat1, v.cat2, v.cat3, v.cat4, v.cat5, v.cat6, v.cat7, v.cat8, v.cat9, v.cat10,
|
|
94
|
+
];
|
|
95
|
+
/** The nth series' token, wrapping past the tenth. */
|
|
96
|
+
export function seriesToken(i) {
|
|
97
|
+
const n = SERIES_TOKENS.length;
|
|
98
|
+
return SERIES_TOKENS[((i % n) + n) % n];
|
|
99
|
+
}
|
|
100
|
+
/**
|
|
101
|
+
* The whole categorical palette, resolved — for a chart that assigns colours
|
|
102
|
+
* by index in JS (`stroke: palette[i % palette.length]`).
|
|
103
|
+
*/
|
|
104
|
+
export function useSeriesColours() {
|
|
105
|
+
const spec = useMemo(() => Object.fromEntries(SERIES_TOKENS.map((t, i) => [`c${i}`, t])), []);
|
|
106
|
+
const resolved = useTokenColours(spec);
|
|
107
|
+
return useMemo(() => SERIES_TOKENS.map((_, i) => resolved[`c${i}`] ?? ""), [resolved]);
|
|
108
|
+
}
|
|
109
|
+
//# sourceMappingURL=paint.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"paint.js","sourceRoot":"","sources":["../../src/theme/paint.ts"],"names":[],"mappings":"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"}
|
package/dist/theme/tokens.d.ts
CHANGED
|
@@ -52,6 +52,16 @@ export declare const v: {
|
|
|
52
52
|
runningBg: string;
|
|
53
53
|
data: string;
|
|
54
54
|
dataBg: string;
|
|
55
|
+
cat1: string;
|
|
56
|
+
cat2: string;
|
|
57
|
+
cat3: string;
|
|
58
|
+
cat4: string;
|
|
59
|
+
cat5: string;
|
|
60
|
+
cat6: string;
|
|
61
|
+
cat7: string;
|
|
62
|
+
cat8: string;
|
|
63
|
+
cat9: string;
|
|
64
|
+
cat10: string;
|
|
55
65
|
logBg: string;
|
|
56
66
|
logText: string;
|
|
57
67
|
logDim: string;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"tokens.d.ts","sourceRoot":"","sources":["../../src/theme/tokens.ts"],"names":[],"mappings":"AAUA,eAAO,MAAM,KAAK;;;;;;CAMjB,CAAC;AAEF,eAAO,MAAM,IAAI,QAAwF,CAAC;AAC1G,eAAO,MAAM,OAAO,QAAuF,CAAC;AAG5G,wBAAgB,YAAY,IAAI,MAAM,
|
|
1
|
+
{"version":3,"file":"tokens.d.ts","sourceRoot":"","sources":["../../src/theme/tokens.ts"],"names":[],"mappings":"AAUA,eAAO,MAAM,KAAK;;;;;;CAMjB,CAAC;AAEF,eAAO,MAAM,IAAI,QAAwF,CAAC;AAC1G,eAAO,MAAM,OAAO,QAAuF,CAAC;AAG5G,wBAAgB,YAAY,IAAI,MAAM,CAiMrC;AA4BD,eAAO,MAAM,CAAC,EAAkB;IAC9B,KAAK,EAAE,MAAM,CAAC;IAAC,IAAI,EAAE,MAAM,CAAC;IAAC,MAAM,EAAE,MAAM,CAAC;IAAC,OAAO,EAAE,MAAM,CAAC;IAC7D,OAAO,EAAE,MAAM,CAAC;IAAC,OAAO,EAAE,MAAM,CAAC;IAAC,OAAO,EAAE,MAAM,CAAC;IAAC,OAAO,EAAE,MAAM,CAAC;IAAC,OAAO,EAAE,MAAM,CAAC;IACpF,IAAI,EAAE,MAAM,CAAC;IAAC,IAAI,EAAE,MAAM,CAAC;IAAC,IAAI,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,CAAC;IAAC,MAAM,EAAE,MAAM,CAAC;IAAC,MAAM,EAAE,MAAM,CAAC;IAAC,IAAI,EAAE,MAAM,CAAC;IACtG,MAAM,EAAE,MAAM,CAAC;IAAC,EAAE,EAAE,MAAM,CAAC;IAAC,OAAO,EAAE,MAAM,CAAC;IAAC,OAAO,EAAE,MAAM,CAAC;IAAC,QAAQ,EAAE,MAAM,CAAC;IAC/E,IAAI,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,CAAC;IAAC,IAAI,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,CAAC;IACxE,KAAK,EAAE,MAAM,CAAC;IAAC,SAAS,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,CAAC;IAAC,IAAI,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,CAAC;IAC7E,MAAM,EAAE,MAAM,CAAC;IAAC,QAAQ,EAAE,MAAM,CAAC;IAAC,OAAO,EAAE,MAAM,CAAC;IAAC,SAAS,EAAE,MAAM,CAAC;IACrE,OAAO,EAAE,MAAM,CAAC;IAAC,SAAS,EAAE,MAAM,CAAC;IAAC,IAAI,EAAE,MAAM,CAAC;IAAC,MAAM,EAAE,MAAM,CAAC;IACjE,OAAO,EAAE,MAAM,CAAC;IAAC,SAAS,EAAE,MAAM,CAAC;IACnC,IAAI,EAAE,MAAM,CAAC;IAAC,MAAM,EAAE,MAAM,CAAC;IAC7B,IAAI,EAAE,MAAM,CAAC;IAAC,IAAI,EAAE,MAAM,CAAC;IAAC,IAAI,EAAE,MAAM,CAAC;IAAC,IAAI,EAAE,MAAM,CAAC;IAAC,IAAI,EAAE,MAAM,CAAC;IACrE,IAAI,EAAE,MAAM,CAAC;IAAC,IAAI,EAAE,MAAM,CAAC;IAAC,IAAI,EAAE,MAAM,CAAC;IAAC,IAAI,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,CAAC;IACtE,KAAK,EAAE,MAAM,CAAC;IAAC,OAAO,EAAE,MAAM,CAAC;IAAC,MAAM,EAAE,MAAM,CAAC;IAAC,MAAM,EAAE,MAAM,CAAC;IAC/D,IAAI,EAAE,MAAM,CAAC;IAAC,IAAI,EAAE,MAAM,CAAC;IAAC,MAAM,EAAE,MAAM,CAAC;IAAC,MAAM,EAAE,MAAM,CAAC;IAAC,QAAQ,EAAE,MAAM,CAAC;IAAC,MAAM,EAAE,MAAM,CAAC;CAC9F,CAAC;AAQF,wBAAgB,SAAS,IAAI,MAAM,CAwClC"}
|
package/dist/theme/tokens.js
CHANGED
|
@@ -84,6 +84,28 @@ export function cssVariables() {
|
|
|
84
84
|
brand violet nor a verdict. */
|
|
85
85
|
--x-data: #7cc2ff;
|
|
86
86
|
--x-data-bg: rgba(124, 194, 255, 0.14);
|
|
87
|
+
/* Categorical series palette: ten hues for charts whose series are a
|
|
88
|
+
*vocabulary* rather than a verdict — one line per service version, one
|
|
89
|
+
bar per severity band, one colour per span-emitting service. The status
|
|
90
|
+
tones cannot do this job (there are four of them and three mean
|
|
91
|
+
"something is wrong"), and the brand family cannot either, because every
|
|
92
|
+
series would then be the chrome's own colour. Beyond ten a legend stops
|
|
93
|
+
helping and the chart wants a group-by with smaller cardinality, so a
|
|
94
|
+
consumer wraps rather than extending this list.
|
|
95
|
+
|
|
96
|
+
Dark gets light, low-chroma hues; light gets dark, high-chroma ones. Both
|
|
97
|
+
sets are ordered so the first few stay distinguishable to the most common
|
|
98
|
+
forms of colour blindness (blue → pink → green → amber → violet). */
|
|
99
|
+
--x-cat-1: #7cc2ff;
|
|
100
|
+
--x-cat-2: #f59ec8;
|
|
101
|
+
--x-cat-3: #5fd69a;
|
|
102
|
+
--x-cat-4: #ffc46b;
|
|
103
|
+
--x-cat-5: #b89cff;
|
|
104
|
+
--x-cat-6: #ff9f6b;
|
|
105
|
+
--x-cat-7: #5fd2d6;
|
|
106
|
+
--x-cat-8: #e49bf0;
|
|
107
|
+
--x-cat-9: #b5dc6b;
|
|
108
|
+
--x-cat-10: #ff8f8f;
|
|
87
109
|
--x-log-bg: #100d17;
|
|
88
110
|
--x-log-text: #c6bad8;
|
|
89
111
|
--x-log-dim: #6f6585;
|
|
@@ -123,6 +145,16 @@ export function cssVariables() {
|
|
|
123
145
|
--x-running-bg: rgba(155, 62, 228, 0.10);
|
|
124
146
|
--x-data: #1d6bb8;
|
|
125
147
|
--x-data-bg: rgba(29, 107, 184, 0.10);
|
|
148
|
+
--x-cat-1: #1d6bb8;
|
|
149
|
+
--x-cat-2: #b5327c;
|
|
150
|
+
--x-cat-3: #1f8a5c;
|
|
151
|
+
--x-cat-4: #a6690a;
|
|
152
|
+
--x-cat-5: #6b3fd4;
|
|
153
|
+
--x-cat-6: #c25410;
|
|
154
|
+
--x-cat-7: #0f7f85;
|
|
155
|
+
--x-cat-8: #9b2fb0;
|
|
156
|
+
--x-cat-9: #5f7a16;
|
|
157
|
+
--x-cat-10: #c0362f;
|
|
126
158
|
--x-log-bg: #100d17;
|
|
127
159
|
--x-log-text: #c6bad8;
|
|
128
160
|
--x-log-dim: #6f6585;
|
|
@@ -162,6 +194,16 @@ export function cssVariables() {
|
|
|
162
194
|
--x-running-bg: rgba(155, 62, 228, 0.10);
|
|
163
195
|
--x-data: #1d6bb8;
|
|
164
196
|
--x-data-bg: rgba(29, 107, 184, 0.10);
|
|
197
|
+
--x-cat-1: #1d6bb8;
|
|
198
|
+
--x-cat-2: #b5327c;
|
|
199
|
+
--x-cat-3: #1f8a5c;
|
|
200
|
+
--x-cat-4: #a6690a;
|
|
201
|
+
--x-cat-5: #6b3fd4;
|
|
202
|
+
--x-cat-6: #c25410;
|
|
203
|
+
--x-cat-7: #0f7f85;
|
|
204
|
+
--x-cat-8: #9b2fb0;
|
|
205
|
+
--x-cat-9: #5f7a16;
|
|
206
|
+
--x-cat-10: #c0362f;
|
|
165
207
|
--x-log-bg: #100d17;
|
|
166
208
|
--x-log-text: #c6bad8;
|
|
167
209
|
--x-log-dim: #6f6585;
|
|
@@ -180,6 +222,7 @@ const names = [
|
|
|
180
222
|
"danger", "danger-bg", "success", "success-bg", "warning", "warning-bg", "info", "info-bg",
|
|
181
223
|
"running", "running-bg",
|
|
182
224
|
"data", "data-bg",
|
|
225
|
+
"cat-1", "cat-2", "cat-3", "cat-4", "cat-5", "cat-6", "cat-7", "cat-8", "cat-9", "cat-10",
|
|
183
226
|
"log-bg", "log-text", "log-dim", "term-bg",
|
|
184
227
|
"z-nav", "z-pop", "z-scrim", "z-modal", "z-palette", "z-toast",
|
|
185
228
|
];
|
package/dist/theme/tokens.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"tokens.js","sourceRoot":"","sources":["../../src/theme/tokens.ts"],"names":[],"mappings":"AAAA,8EAA8E;AAC9E,gFAAgF;AAChF,+EAA+E;AAC/E,iCAAiC;AACjC,EAAE;AACF,kFAAkF;AAClF,kFAAkF;AAClF,gFAAgF;AAChF,yCAAyC;AAEzC,MAAM,CAAC,MAAM,KAAK,GAAG;IACnB,OAAO,EAAE,SAAS;IAClB,EAAE,EAAE,SAAS;IACb,EAAE,EAAE,SAAS;IACb,EAAE,EAAE,SAAS;IACb,EAAE,EAAE,SAAS;CACd,CAAC;AAEF,MAAM,CAAC,MAAM,IAAI,GAAG,2BAA2B,KAAK,CAAC,EAAE,KAAK,KAAK,CAAC,EAAE,SAAS,KAAK,CAAC,EAAE,SAAS,KAAK,CAAC,EAAE,GAAG,CAAC;AAC1G,MAAM,CAAC,MAAM,OAAO,GAAG,0BAA0B,KAAK,CAAC,EAAE,KAAK,KAAK,CAAC,EAAE,SAAS,KAAK,CAAC,EAAE,SAAS,KAAK,CAAC,EAAE,GAAG,CAAC;AAE5G,iEAAiE;AACjE,MAAM,UAAU,YAAY;IAC1B,OAAO;;eAEM,KAAK,CAAC,OAAO;YAChB,KAAK,CAAC,EAAE,aAAa,KAAK,CAAC,EAAE,aAAa,KAAK,CAAC,EAAE,aAAa,KAAK,CAAC,EAAE;cACrE,IAAI;iBACD,OAAO
|
|
1
|
+
{"version":3,"file":"tokens.js","sourceRoot":"","sources":["../../src/theme/tokens.ts"],"names":[],"mappings":"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"}
|
package/package.json
CHANGED