@oods/components-react 0.3.3 → 0.4.1
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 +1 -1
- package/dist/chunk-2VEQWKGK.js +1 -0
- package/dist/{chunk-BPEHI36W.js → chunk-NLWXBLPA.js} +227 -8
- package/dist/{chunk-XAWAMZUQ.js → chunk-XEX22E24.js} +3 -2
- package/dist/index.cjs +642 -472
- package/dist/index.d.cts +27 -6
- package/dist/index.d.ts +27 -6
- package/dist/index.js +366 -89
- package/dist/ported.cjs +232 -344
- package/dist/ported.js +2 -2
- package/dist/status.cjs +22 -342
- package/dist/status.d.cts +1 -35
- package/dist/status.d.ts +1 -35
- package/dist/status.js +1 -1
- package/dist/table.cjs +5 -303
- package/dist/table.js +2 -2
- package/dist/types.d.cts +111 -3
- package/dist/types.d.ts +111 -3
- package/evidence/react-readiness.v1.json +293 -1
- package/package.json +3 -3
- package/dist/chunk-G74PKSW3.js +0 -338
package/dist/table.cjs
CHANGED
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
3
|
var React = require('react');
|
|
4
|
+
var componentContracts = require('@oods/component-contracts');
|
|
4
5
|
var jsxRuntime = require('react/jsx-runtime');
|
|
5
6
|
|
|
6
7
|
function _interopNamespace(e) {
|
|
@@ -24,306 +25,6 @@ function _interopNamespace(e) {
|
|
|
24
25
|
var React__namespace = /*#__PURE__*/_interopNamespace(React);
|
|
25
26
|
|
|
26
27
|
// src/table.tsx
|
|
27
|
-
|
|
28
|
-
// src/status-map.json
|
|
29
|
-
var status_map_default = {
|
|
30
|
-
domains: {
|
|
31
|
-
subscription: {
|
|
32
|
-
future: {
|
|
33
|
-
description: "Subscription is scheduled but not yet active.",
|
|
34
|
-
chip: {
|
|
35
|
-
foreground: "color.text.info",
|
|
36
|
-
background: "color.background.info.subtle",
|
|
37
|
-
border: "color.border.info",
|
|
38
|
-
icon: "icon.status.scheduled"
|
|
39
|
-
},
|
|
40
|
-
banner: {
|
|
41
|
-
foreground: "color.text.info",
|
|
42
|
-
background: "color.background.surface.default",
|
|
43
|
-
border: "color.border.info",
|
|
44
|
-
icon: "icon.status.scheduled"
|
|
45
|
-
}
|
|
46
|
-
},
|
|
47
|
-
trialing: {
|
|
48
|
-
description: "Subscription is in a trial period before billing begins.",
|
|
49
|
-
chip: {
|
|
50
|
-
foreground: "color.text.accent",
|
|
51
|
-
background: "color.background.accent.subtle",
|
|
52
|
-
border: "color.border.accent",
|
|
53
|
-
icon: "icon.status.trial"
|
|
54
|
-
},
|
|
55
|
-
banner: {
|
|
56
|
-
foreground: "color.text.accent",
|
|
57
|
-
background: "color.background.surface.default",
|
|
58
|
-
border: "color.border.accent",
|
|
59
|
-
icon: "icon.status.trial"
|
|
60
|
-
}
|
|
61
|
-
},
|
|
62
|
-
active: {
|
|
63
|
-
description: "Subscription is paid and service is provisioned.",
|
|
64
|
-
chip: {
|
|
65
|
-
foreground: "color.text.positive",
|
|
66
|
-
background: "color.background.positive.subtle",
|
|
67
|
-
border: "color.border.positive",
|
|
68
|
-
icon: "icon.status.success"
|
|
69
|
-
},
|
|
70
|
-
banner: {
|
|
71
|
-
foreground: "color.text.positive",
|
|
72
|
-
background: "color.background.surface.default",
|
|
73
|
-
border: "color.border.positive",
|
|
74
|
-
icon: "icon.status.success"
|
|
75
|
-
}
|
|
76
|
-
},
|
|
77
|
-
paused: {
|
|
78
|
-
description: "Billing paused temporarily by finance or customer request.",
|
|
79
|
-
chip: {
|
|
80
|
-
foreground: "color.text.neutral",
|
|
81
|
-
background: "color.background.neutral.subtle",
|
|
82
|
-
border: "color.border.neutral",
|
|
83
|
-
icon: "icon.status.paused"
|
|
84
|
-
},
|
|
85
|
-
banner: {
|
|
86
|
-
foreground: "color.text.neutral",
|
|
87
|
-
background: "color.background.surface.muted",
|
|
88
|
-
border: "color.border.neutral",
|
|
89
|
-
icon: "icon.status.paused"
|
|
90
|
-
}
|
|
91
|
-
},
|
|
92
|
-
pending_cancellation: {
|
|
93
|
-
description: "Subscription will cancel at period end but remains active now.",
|
|
94
|
-
chip: {
|
|
95
|
-
foreground: "color.text.info",
|
|
96
|
-
background: "color.background.info.subtle",
|
|
97
|
-
border: "color.border.info",
|
|
98
|
-
icon: "icon.status.pending"
|
|
99
|
-
},
|
|
100
|
-
banner: {
|
|
101
|
-
foreground: "color.text.info",
|
|
102
|
-
background: "color.background.surface.default",
|
|
103
|
-
border: "color.border.info",
|
|
104
|
-
icon: "icon.status.pending"
|
|
105
|
-
}
|
|
106
|
-
},
|
|
107
|
-
past_due: {
|
|
108
|
-
description: "Renewal payment failed; smart retries ongoing and access retained during the grace window.",
|
|
109
|
-
chip: {
|
|
110
|
-
foreground: "color.text.danger",
|
|
111
|
-
background: "color.background.danger.subtle",
|
|
112
|
-
border: "color.border.danger",
|
|
113
|
-
icon: "icon.status.warning"
|
|
114
|
-
},
|
|
115
|
-
banner: {
|
|
116
|
-
foreground: "color.text.onbold",
|
|
117
|
-
background: "color.background.danger.bold",
|
|
118
|
-
border: "color.border.danger",
|
|
119
|
-
icon: "icon.status.warning"
|
|
120
|
-
}
|
|
121
|
-
},
|
|
122
|
-
unpaid: {
|
|
123
|
-
description: "Payment retries exhausted; service access revoked.",
|
|
124
|
-
chip: {
|
|
125
|
-
foreground: "color.text.danger",
|
|
126
|
-
background: "color.background.danger.subtle",
|
|
127
|
-
border: "color.border.danger",
|
|
128
|
-
icon: "icon.status.error"
|
|
129
|
-
},
|
|
130
|
-
banner: {
|
|
131
|
-
foreground: "color.text.onbold",
|
|
132
|
-
background: "color.background.danger.bold",
|
|
133
|
-
border: "color.border.danger",
|
|
134
|
-
icon: "icon.status.error"
|
|
135
|
-
}
|
|
136
|
-
},
|
|
137
|
-
terminated: {
|
|
138
|
-
description: "Subscription ended; service access revoked and billing stopped.",
|
|
139
|
-
chip: {
|
|
140
|
-
foreground: "color.text.disabled",
|
|
141
|
-
background: "color.background.disabled",
|
|
142
|
-
border: "color.border.disabled",
|
|
143
|
-
icon: "icon.status.canceled"
|
|
144
|
-
},
|
|
145
|
-
banner: {
|
|
146
|
-
foreground: "color.text.neutral",
|
|
147
|
-
background: "color.background.neutral.subtle",
|
|
148
|
-
border: "color.border.neutral",
|
|
149
|
-
icon: "icon.status.canceled"
|
|
150
|
-
}
|
|
151
|
-
}
|
|
152
|
-
},
|
|
153
|
-
invoice: {
|
|
154
|
-
draft: {
|
|
155
|
-
description: "Invoice is editable and not yet finalized.",
|
|
156
|
-
chip: {
|
|
157
|
-
foreground: "color.text.neutral",
|
|
158
|
-
background: "color.background.neutral.subtle",
|
|
159
|
-
border: "color.border.neutral",
|
|
160
|
-
icon: "icon.status.draft"
|
|
161
|
-
},
|
|
162
|
-
banner: {
|
|
163
|
-
foreground: "color.text.neutral",
|
|
164
|
-
background: "color.background.surface.muted",
|
|
165
|
-
border: "color.border.neutral",
|
|
166
|
-
icon: "icon.status.draft"
|
|
167
|
-
}
|
|
168
|
-
},
|
|
169
|
-
posted: {
|
|
170
|
-
description: "Invoice finalized with terms before collection.",
|
|
171
|
-
chip: {
|
|
172
|
-
foreground: "color.text.info",
|
|
173
|
-
background: "color.background.info.subtle",
|
|
174
|
-
border: "color.border.info",
|
|
175
|
-
icon: "icon.status.pending"
|
|
176
|
-
},
|
|
177
|
-
banner: {
|
|
178
|
-
foreground: "color.text.info",
|
|
179
|
-
background: "color.background.surface.default",
|
|
180
|
-
border: "color.border.info",
|
|
181
|
-
icon: "icon.status.pending"
|
|
182
|
-
}
|
|
183
|
-
},
|
|
184
|
-
paid: {
|
|
185
|
-
description: "Invoice collected successfully in full.",
|
|
186
|
-
chip: {
|
|
187
|
-
foreground: "color.text.positive",
|
|
188
|
-
background: "color.background.positive.subtle",
|
|
189
|
-
border: "color.border.positive",
|
|
190
|
-
icon: "icon.status.success"
|
|
191
|
-
},
|
|
192
|
-
banner: {
|
|
193
|
-
foreground: "color.text.positive",
|
|
194
|
-
background: "color.background.surface.default",
|
|
195
|
-
border: "color.border.positive",
|
|
196
|
-
icon: "icon.status.success"
|
|
197
|
-
}
|
|
198
|
-
},
|
|
199
|
-
past_due: {
|
|
200
|
-
description: "Invoice is unpaid past its due date.",
|
|
201
|
-
chip: {
|
|
202
|
-
foreground: "color.text.danger",
|
|
203
|
-
background: "color.background.danger.subtle",
|
|
204
|
-
border: "color.border.danger",
|
|
205
|
-
icon: "icon.status.error"
|
|
206
|
-
},
|
|
207
|
-
banner: {
|
|
208
|
-
foreground: "color.text.onbold",
|
|
209
|
-
background: "color.background.danger.bold",
|
|
210
|
-
border: "color.border.danger",
|
|
211
|
-
icon: "icon.status.error"
|
|
212
|
-
}
|
|
213
|
-
},
|
|
214
|
-
void: {
|
|
215
|
-
description: "Invoice canceled and no longer payable.",
|
|
216
|
-
chip: {
|
|
217
|
-
foreground: "color.text.disabled",
|
|
218
|
-
background: "color.background.disabled",
|
|
219
|
-
border: "color.border.disabled",
|
|
220
|
-
icon: "icon.status.void"
|
|
221
|
-
},
|
|
222
|
-
banner: {
|
|
223
|
-
foreground: "color.text.neutral",
|
|
224
|
-
background: "color.background.neutral.subtle",
|
|
225
|
-
border: "color.border.neutral",
|
|
226
|
-
icon: "icon.status.void"
|
|
227
|
-
}
|
|
228
|
-
}
|
|
229
|
-
}
|
|
230
|
-
}
|
|
231
|
-
};
|
|
232
|
-
|
|
233
|
-
// src/status.ts
|
|
234
|
-
var TONE_ALIASES = {
|
|
235
|
-
info: "info",
|
|
236
|
-
informational: "info",
|
|
237
|
-
accent: "accent",
|
|
238
|
-
highlight: "accent",
|
|
239
|
-
positive: "success",
|
|
240
|
-
success: "success",
|
|
241
|
-
ok: "success",
|
|
242
|
-
warning: "warning",
|
|
243
|
-
caution: "warning",
|
|
244
|
-
danger: "critical",
|
|
245
|
-
critical: "critical",
|
|
246
|
-
error: "critical",
|
|
247
|
-
negative: "critical",
|
|
248
|
-
neutral: "neutral",
|
|
249
|
-
pending: "info"
|
|
250
|
-
};
|
|
251
|
-
var toLabel = (status) => status.split(/[_-]/).filter(Boolean).map((segment) => segment.charAt(0).toUpperCase() + segment.slice(1)).join(" ");
|
|
252
|
-
var inferTone = (entry) => {
|
|
253
|
-
if (!entry) return "neutral";
|
|
254
|
-
for (const reference of [entry.foreground, entry.background, entry.border]) {
|
|
255
|
-
const segments = reference.replace(/^\{|\}$/g, "").split(/[\s./_-]+/).reverse();
|
|
256
|
-
for (const segment of segments) {
|
|
257
|
-
const tone = TONE_ALIASES[segment.toLowerCase()];
|
|
258
|
-
if (tone) return tone;
|
|
259
|
-
}
|
|
260
|
-
}
|
|
261
|
-
return "neutral";
|
|
262
|
-
};
|
|
263
|
-
var componentTokenSet = (tone) => {
|
|
264
|
-
const normalized = tone === "positive" ? "success" : tone === "danger" ? "critical" : tone;
|
|
265
|
-
return {
|
|
266
|
-
background: `var(--sys-status-${normalized}-surface)`,
|
|
267
|
-
border: `var(--sys-status-${normalized}-border)`,
|
|
268
|
-
foreground: `var(--sys-status-${normalized}-text)`
|
|
269
|
-
};
|
|
270
|
-
};
|
|
271
|
-
var rawTokenSet = (entry) => {
|
|
272
|
-
const tone = inferTone(entry);
|
|
273
|
-
return componentTokenSet(tone);
|
|
274
|
-
};
|
|
275
|
-
var bannerFallback = (tone) => tone === "neutral" ? {
|
|
276
|
-
background: "var(--cmp-banner-background)",
|
|
277
|
-
border: "var(--cmp-banner-border)",
|
|
278
|
-
foreground: "var(--cmp-banner-text)"
|
|
279
|
-
} : componentTokenSet(tone);
|
|
280
|
-
var fallback = (domain, status, tone = "neutral") => ({
|
|
281
|
-
domain,
|
|
282
|
-
status,
|
|
283
|
-
label: toLabel(status || "Unknown"),
|
|
284
|
-
description: "Status not found in registry; falling back to the requested token set.",
|
|
285
|
-
tone,
|
|
286
|
-
badge: { subtle: componentTokenSet(tone), solid: componentTokenSet(tone) },
|
|
287
|
-
banner: { subtle: bannerFallback(tone), solid: componentTokenSet(tone) }
|
|
288
|
-
});
|
|
289
|
-
var registry = /* @__PURE__ */ new Map();
|
|
290
|
-
for (const [domain, entries] of Object.entries(status_map_default.domains)) {
|
|
291
|
-
const domainEntries = /* @__PURE__ */ new Map();
|
|
292
|
-
for (const [status, entry] of Object.entries(entries)) {
|
|
293
|
-
const tone = inferTone(entry.chip);
|
|
294
|
-
domainEntries.set(status.toLowerCase(), {
|
|
295
|
-
domain,
|
|
296
|
-
status,
|
|
297
|
-
label: toLabel(status),
|
|
298
|
-
description: entry.description,
|
|
299
|
-
tone,
|
|
300
|
-
iconName: entry.chip.icon ?? entry.banner?.icon,
|
|
301
|
-
badge: { subtle: rawTokenSet(entry.chip), solid: componentTokenSet(tone) },
|
|
302
|
-
banner: {
|
|
303
|
-
subtle: entry.banner ? rawTokenSet(entry.banner) : bannerFallback(tone),
|
|
304
|
-
solid: componentTokenSet(tone)
|
|
305
|
-
}
|
|
306
|
-
});
|
|
307
|
-
}
|
|
308
|
-
registry.set(domain, domainEntries);
|
|
309
|
-
}
|
|
310
|
-
var LEGACY_STATUS_ALIASES = {
|
|
311
|
-
subscription: { delinquent: "unpaid" }
|
|
312
|
-
};
|
|
313
|
-
Object.freeze([...registry.keys()]);
|
|
314
|
-
function getStatusPresentation(domain, status) {
|
|
315
|
-
const entries = registry.get(domain);
|
|
316
|
-
if (!entries) return fallback(domain, status);
|
|
317
|
-
const normalized = status.toLowerCase();
|
|
318
|
-
const direct = entries.get(normalized);
|
|
319
|
-
if (direct) return direct;
|
|
320
|
-
const alias = LEGACY_STATUS_ALIASES[domain]?.[normalized];
|
|
321
|
-
const aliased = alias ? entries.get(alias) : void 0;
|
|
322
|
-
return aliased ? { ...aliased, status, label: toLabel(status) } : fallback(domain, status);
|
|
323
|
-
}
|
|
324
|
-
function getToneTokenSet(tone) {
|
|
325
|
-
return componentTokenSet(tone);
|
|
326
|
-
}
|
|
327
28
|
var classes = (...values) => values.filter(Boolean).join(" ");
|
|
328
29
|
var TableHead = React__namespace.forwardRef(
|
|
329
30
|
({ className, ...rest }, ref) => /* @__PURE__ */ jsxRuntime.jsx("thead", { ref, className: classes("oods-table__header", className), ...rest })
|
|
@@ -406,9 +107,9 @@ var TableCell = React__namespace.forwardRef(
|
|
|
406
107
|
title,
|
|
407
108
|
...rest
|
|
408
109
|
}, ref) => {
|
|
409
|
-
const presentation = status ? getStatusPresentation(statusDomain, status) : void 0;
|
|
110
|
+
const presentation = status ? componentContracts.getStatusPresentation(statusDomain, status) : void 0;
|
|
410
111
|
const tone = toneOverride ?? presentation?.tone;
|
|
411
|
-
const tokens = tone ? getToneTokenSet(tone) : void 0;
|
|
112
|
+
const tokens = tone ? componentContracts.getToneTokenSet(tone) : void 0;
|
|
412
113
|
const statusStyle = tokens ? statusEmphasis === "text" ? { "--table-cell-status-foreground": tokens.foreground } : {
|
|
413
114
|
"--table-cell-status-background": tokens.background,
|
|
414
115
|
"--table-cell-status-border": tokens.border,
|
|
@@ -442,6 +143,7 @@ TableCell.displayName = "OODS.Table.Cell";
|
|
|
442
143
|
var TableRoot = React__namespace.forwardRef(
|
|
443
144
|
({
|
|
444
145
|
caption,
|
|
146
|
+
showCaption = true,
|
|
445
147
|
columns,
|
|
446
148
|
rows,
|
|
447
149
|
density = "comfortable",
|
|
@@ -467,7 +169,7 @@ var TableRoot = React__namespace.forwardRef(
|
|
|
467
169
|
"data-density": density,
|
|
468
170
|
...rest,
|
|
469
171
|
children: children ?? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
|
|
470
|
-
caption ? /* @__PURE__ */ jsxRuntime.jsx(TableCaption, { children: caption }) : null,
|
|
172
|
+
caption ? /* @__PURE__ */ jsxRuntime.jsx(TableCaption, { "data-visually-hidden": showCaption ? void 0 : "true", children: caption }) : null,
|
|
471
173
|
/* @__PURE__ */ jsxRuntime.jsx(TableHead, { children: /* @__PURE__ */ jsxRuntime.jsx("tr", { className: "oods-table__row", children: columns?.map((column) => /* @__PURE__ */ jsxRuntime.jsx(TableHeaderCell, { numeric: column.numeric, children: column.label }, column.key)) }) }),
|
|
472
174
|
/* @__PURE__ */ jsxRuntime.jsx(TableBody, { children: (rows?.length ?? 0) === 0 ? /* @__PURE__ */ jsxRuntime.jsx("tr", { className: "oods-table__row", children: /* @__PURE__ */ jsxRuntime.jsx(TableCell, { colSpan: Math.max(columns?.length ?? 0, 1), children: "No rows available." }) }) : rows?.map((row) => /* @__PURE__ */ jsxRuntime.jsx(
|
|
473
175
|
"tr",
|
package/dist/table.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
export { Table, TableBody, TableCaption, TableCell, TableHead, TableHeaderCell, TableRow } from './chunk-
|
|
2
|
-
import './chunk-
|
|
1
|
+
export { Table, TableBody, TableCaption, TableCell, TableHead, TableHeaderCell, TableRow } from './chunk-XEX22E24.js';
|
|
2
|
+
import './chunk-2VEQWKGK.js';
|
package/dist/types.d.cts
CHANGED
|
@@ -3,6 +3,8 @@ import * as React from 'react';
|
|
|
3
3
|
type ComponentTone = 'neutral' | 'info' | 'accent' | 'positive' | 'success' | 'warning' | 'critical' | 'danger';
|
|
4
4
|
type ComponentEmphasis = 'subtle' | 'solid';
|
|
5
5
|
type ComponentSize = 'sm' | 'md' | 'lg';
|
|
6
|
+
type ButtonSize = 'xs' | ComponentSize;
|
|
7
|
+
type ButtonIntent = 'neutral' | 'primary' | 'secondary' | 'outline' | 'ghost' | 'link' | 'destructive' | 'success' | 'warning' | 'danger';
|
|
6
8
|
type FieldDensity = 'compact' | 'comfortable';
|
|
7
9
|
type FieldValidation = {
|
|
8
10
|
readonly state: 'error' | 'warning' | 'success' | 'info';
|
|
@@ -39,10 +41,29 @@ interface ButtonProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>
|
|
|
39
41
|
readonly content?: React.ReactNode;
|
|
40
42
|
readonly children?: React.ReactNode;
|
|
41
43
|
readonly asChild?: boolean;
|
|
42
|
-
readonly intent?:
|
|
43
|
-
readonly size?:
|
|
44
|
+
readonly intent?: ButtonIntent;
|
|
45
|
+
readonly size?: ButtonSize;
|
|
44
46
|
readonly onActivate?: React.MouseEventHandler<HTMLElement>;
|
|
45
47
|
}
|
|
48
|
+
type NativeDialogProps = Omit<React.DialogHTMLAttributes<HTMLDialogElement>, 'open' | 'title' | 'children' | 'className' | 'style' | 'onClose' | 'onCancel'>;
|
|
49
|
+
/**
|
|
50
|
+
* s222-m02 (#2502 ruling 11): a native dialog whose consumer owns open. onClose reports the close control, Escape or a
|
|
51
|
+
* browser close request; modal (default true) opens it with showModal(), and modal false shows it in place.
|
|
52
|
+
*/
|
|
53
|
+
interface DialogProps extends NativeDialogProps {
|
|
54
|
+
readonly id?: string;
|
|
55
|
+
readonly open?: boolean;
|
|
56
|
+
readonly modal?: boolean;
|
|
57
|
+
readonly title: React.ReactNode;
|
|
58
|
+
readonly description?: React.ReactNode;
|
|
59
|
+
readonly dismissLabel?: string;
|
|
60
|
+
readonly size?: 'sm' | 'md' | 'lg';
|
|
61
|
+
readonly actions?: React.ReactNode;
|
|
62
|
+
readonly children?: React.ReactNode;
|
|
63
|
+
readonly className?: string;
|
|
64
|
+
readonly style?: React.CSSProperties;
|
|
65
|
+
readonly onClose?: () => void;
|
|
66
|
+
}
|
|
46
67
|
type SafeContainerElement = 'div' | 'section' | 'article' | 'aside' | 'main';
|
|
47
68
|
interface CardProps extends React.HTMLAttributes<HTMLElement> {
|
|
48
69
|
readonly elevated?: boolean;
|
|
@@ -98,6 +119,17 @@ interface VizAreaPreviewProps extends React.HTMLAttributes<HTMLElement> {
|
|
|
98
119
|
readonly svgNarrow?: string;
|
|
99
120
|
/** The same chart rendered at the wide size; the figure shows it instead of svg when its own inline size is at least 900px. */
|
|
100
121
|
readonly svgWide?: string;
|
|
122
|
+
/**
|
|
123
|
+
* s222-m02 (F7): the same chart rendered in the dark and high-contrast themes, at the design, narrow and wide sizes. With
|
|
124
|
+
* any of them, svg, svgNarrow and svgWide are the light renders, and the figure shows the renders of the theme the
|
|
125
|
+
* nearest [data-theme] names.
|
|
126
|
+
*/
|
|
127
|
+
readonly svgDark?: string;
|
|
128
|
+
readonly svgDarkNarrow?: string;
|
|
129
|
+
readonly svgDarkWide?: string;
|
|
130
|
+
readonly svgHc?: string;
|
|
131
|
+
readonly svgHcNarrow?: string;
|
|
132
|
+
readonly svgHcWide?: string;
|
|
101
133
|
readonly description?: string;
|
|
102
134
|
readonly width?: number;
|
|
103
135
|
readonly height?: number;
|
|
@@ -342,6 +374,43 @@ interface CheckboxProps extends NativeCheckboxProps, CommonFieldProps {
|
|
|
342
374
|
readonly onCheckedChange?: (checked: boolean) => void;
|
|
343
375
|
readonly onUpdate?: (checked: boolean) => void;
|
|
344
376
|
}
|
|
377
|
+
type NativeSwitchProps = Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'id' | 'type' | 'role' | 'value' | 'children' | 'className' | 'style' | 'onChange'>;
|
|
378
|
+
/** s222-m02 (#2502 ruling 11): Checkbox's field API on a button with role switch; native button props reach the button. */
|
|
379
|
+
interface SwitchProps extends NativeSwitchProps {
|
|
380
|
+
readonly id: string;
|
|
381
|
+
readonly label: React.ReactNode;
|
|
382
|
+
readonly checked?: boolean;
|
|
383
|
+
readonly defaultChecked?: boolean;
|
|
384
|
+
readonly required?: boolean;
|
|
385
|
+
readonly help?: React.ReactNode;
|
|
386
|
+
readonly validation?: FieldValidation;
|
|
387
|
+
readonly size?: 'sm' | 'md';
|
|
388
|
+
readonly className?: string;
|
|
389
|
+
readonly style?: React.CSSProperties;
|
|
390
|
+
readonly onCheckedChange?: (checked: boolean) => void;
|
|
391
|
+
readonly onUpdate?: (checked: boolean) => void;
|
|
392
|
+
}
|
|
393
|
+
type NativeSegmentedControlProps = Omit<React.HTMLAttributes<HTMLDivElement>, 'id' | 'role' | 'children' | 'className' | 'style' | 'defaultValue' | 'onChange'>;
|
|
394
|
+
/**
|
|
395
|
+
* s223-m02 (#2527 ruling 10): one choice from two to five options, shown as joined segments. Select's value API on native
|
|
396
|
+
* radios: value (controlled) or defaultValue, onChange with the radio's change event, then onValueChange and onUpdate with
|
|
397
|
+
* the chosen value. Native div props reach the radiogroup.
|
|
398
|
+
*/
|
|
399
|
+
interface SegmentedControlProps extends NativeSegmentedControlProps {
|
|
400
|
+
readonly id: string;
|
|
401
|
+
readonly label: React.ReactNode;
|
|
402
|
+
readonly options: readonly SelectOption[];
|
|
403
|
+
readonly value?: string;
|
|
404
|
+
readonly defaultValue?: string;
|
|
405
|
+
readonly name?: string;
|
|
406
|
+
readonly size?: 'xs' | 'sm' | 'md' | 'lg';
|
|
407
|
+
readonly disabled?: boolean;
|
|
408
|
+
readonly className?: string;
|
|
409
|
+
readonly style?: React.CSSProperties;
|
|
410
|
+
readonly onChange?: React.ChangeEventHandler<HTMLInputElement>;
|
|
411
|
+
readonly onValueChange?: (value: string) => void;
|
|
412
|
+
readonly onUpdate?: (value: string) => void;
|
|
413
|
+
}
|
|
345
414
|
type SelectOption = {
|
|
346
415
|
readonly value: string;
|
|
347
416
|
readonly label: React.ReactNode;
|
|
@@ -356,6 +425,38 @@ interface SelectProps extends NativeSelectProps, CommonFieldProps {
|
|
|
356
425
|
readonly onValueChange?: (value: string) => void;
|
|
357
426
|
readonly onUpdate?: (value: string) => void;
|
|
358
427
|
}
|
|
428
|
+
/** s223-m02 (#2527 ruling 11): a combobox option. Its label is text, because typing filters the list on it. */
|
|
429
|
+
type ComboboxOption = {
|
|
430
|
+
readonly value: string;
|
|
431
|
+
readonly label: string;
|
|
432
|
+
readonly disabled?: boolean;
|
|
433
|
+
};
|
|
434
|
+
type NativeComboboxProps = Omit<React.InputHTMLAttributes<HTMLInputElement>, 'id' | 'type' | 'role' | 'value' | 'defaultValue' | 'size' | 'name' | 'placeholder' | 'required' | 'disabled' | 'children' | 'className' | 'style' | 'onChange'>;
|
|
435
|
+
/**
|
|
436
|
+
* s223-m02 (#2527 ruling 11): pick one value from a list by typing to filter it. Select's field API on an input with role
|
|
437
|
+
* combobox: value (controlled) or defaultValue (uncontrolled) names the chosen option, and picking one calls
|
|
438
|
+
* onValueChange and onUpdate with its value. The input's own text is the filter, so its native onChange is not offered;
|
|
439
|
+
* other native input props reach the input.
|
|
440
|
+
*/
|
|
441
|
+
interface ComboboxProps extends NativeComboboxProps {
|
|
442
|
+
readonly id: string;
|
|
443
|
+
readonly label: React.ReactNode;
|
|
444
|
+
readonly options?: readonly ComboboxOption[];
|
|
445
|
+
readonly value?: string;
|
|
446
|
+
readonly defaultValue?: string;
|
|
447
|
+
readonly placeholder?: string;
|
|
448
|
+
readonly name?: string;
|
|
449
|
+
readonly required?: boolean;
|
|
450
|
+
readonly disabled?: boolean;
|
|
451
|
+
readonly help?: React.ReactNode;
|
|
452
|
+
readonly validation?: FieldValidation;
|
|
453
|
+
/** The control height, as Button, Input and Select: xs 24, sm 28, md 32 (default) or lg 40. */
|
|
454
|
+
readonly size?: 'xs' | 'sm' | 'md' | 'lg';
|
|
455
|
+
readonly className?: string;
|
|
456
|
+
readonly style?: React.CSSProperties;
|
|
457
|
+
readonly onValueChange?: (value: string) => void;
|
|
458
|
+
readonly onUpdate?: (value: string) => void;
|
|
459
|
+
}
|
|
359
460
|
type NativeTextareaProps = Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>, 'id' | 'children' | 'className' | 'style'>;
|
|
360
461
|
interface TextareaProps extends NativeTextareaProps, CommonFieldProps {
|
|
361
462
|
readonly textareaClassName?: string;
|
|
@@ -390,6 +491,7 @@ type TableColumn<Row extends TableRowData = TableRowData> = {
|
|
|
390
491
|
};
|
|
391
492
|
interface TableProps<Row extends TableRowData = TableRowData> extends Omit<React.TableHTMLAttributes<HTMLTableElement>, 'children'> {
|
|
392
493
|
readonly caption?: React.ReactNode;
|
|
494
|
+
readonly showCaption?: boolean;
|
|
393
495
|
readonly columns?: readonly TableColumn<Row>[];
|
|
394
496
|
readonly rows?: readonly Row[];
|
|
395
497
|
readonly density?: FieldDensity;
|
|
@@ -523,6 +625,8 @@ interface OwnershipMetaProps extends Omit<React.HTMLAttributes<HTMLDivElement>,
|
|
|
523
625
|
readonly owner_type?: string;
|
|
524
626
|
readonly role?: string;
|
|
525
627
|
readonly ownershipRole?: string;
|
|
628
|
+
/** s223-m01: the owner's display name; with it the meta reads as one phrase, "Owned by <name> · <type>". */
|
|
629
|
+
readonly ownerLabel?: string;
|
|
526
630
|
}
|
|
527
631
|
interface TagSummaryProps extends React.HTMLAttributes<HTMLElement> {
|
|
528
632
|
readonly label?: string;
|
|
@@ -552,11 +656,15 @@ interface ArchiveSummaryProps extends React.HTMLAttributes<HTMLElement> {
|
|
|
552
656
|
interface ArchivePillProps extends Omit<ClassificationBadgeProps, 'category' | 'mode' | 'value'> {
|
|
553
657
|
readonly isArchived?: boolean | string;
|
|
554
658
|
readonly value?: boolean | string;
|
|
659
|
+
/** s223-m01: render nothing while the record is not archived, so a card shows only a state worth stating. */
|
|
660
|
+
readonly hideWhenFalse?: boolean;
|
|
555
661
|
}
|
|
556
662
|
interface CancellationBadgeProps extends Omit<ClassificationBadgeProps, 'category' | 'mode' | 'value'> {
|
|
557
663
|
readonly cancelAtPeriodEnd?: boolean | string;
|
|
558
664
|
readonly isCancelled?: boolean | string;
|
|
559
665
|
readonly value?: boolean | string;
|
|
666
|
+
/** s223-m01: render nothing while no cancellation is scheduled. */
|
|
667
|
+
readonly hideWhenFalse?: boolean;
|
|
560
668
|
}
|
|
561
669
|
interface CancellationFormProps extends Omit<React.FormHTMLAttributes<HTMLFormElement>, 'title' | 'name'>, FormShellProps {
|
|
562
670
|
readonly embedded?: boolean;
|
|
@@ -577,4 +685,4 @@ interface PriceCardMetaProps extends React.HTMLAttributes<HTMLDivElement> {
|
|
|
577
685
|
readonly billingInterval?: string;
|
|
578
686
|
}
|
|
579
687
|
|
|
580
|
-
export type { AddressCollectionPanelProps, AddressEditorProps, AddressEditorValue, AddressSummaryBadgeProps, AddressValidationTimelineProps, ArchivePillProps, ArchiveSummaryProps, AuditEventProps, BadgeProps, BannerProps, ButtonProps, CancellationBadgeProps, CancellationFormProps, CardHeaderProps, CardProps, CheckboxProps, ClassificationBadgeProps, ClassificationEditorProps, ClassificationPanelProps, ColorSwatchProps, ColorizedBadgeProps, CommonFieldProps, ComponentEmphasis, ComponentSize, ComponentTone, DatePickerProps, DetailHeaderProps, FieldDensity, FieldValidation, FilterDescriptor, FilterPanelProps, FormLabelGroupProps, GridProps, HeaderElement, HeaderLevel, InlineLabelProps, InputProps, LabelCellProps, LayoutGap, MembershipAuditTimelineProps, MembershipPanelProps, MessageEventTimelineProps, MessageStatusBadgeProps, OwnerBadgeProps, OwnershipMetaProps, OwnershipSummaryProps, PanelSectionProps, PreferenceEditorProps, PreferencePanelProps, PreferenceSummaryBadgeProps, PreferenceTimelineProps, PriceCardMetaProps, PriceSummaryProps, RoleAssignmentFormProps, RoleBadgeListProps, SafeContainerElement, SafeTextElement, SelectOption, SelectProps, StackProps, StatusSelectorProps, TabItem, TableBodyProps, TableCaptionProps, TableCellProps, TableColumn, TableCompound, TableHeadProps, TableHeaderCellProps, TableProps, TableRowData, TableRowProps, TabsProps, TagInputProps, TagManagerProps, TagPillsProps, TagSummaryProps, TemplatePickerProps, TextProps, TextareaProps, VizAreaPreviewProps };
|
|
688
|
+
export type { AddressCollectionPanelProps, AddressEditorProps, AddressEditorValue, AddressSummaryBadgeProps, AddressValidationTimelineProps, ArchivePillProps, ArchiveSummaryProps, AuditEventProps, BadgeProps, BannerProps, ButtonIntent, ButtonProps, ButtonSize, CancellationBadgeProps, CancellationFormProps, CardHeaderProps, CardProps, CheckboxProps, ClassificationBadgeProps, ClassificationEditorProps, ClassificationPanelProps, ColorSwatchProps, ColorizedBadgeProps, ComboboxOption, ComboboxProps, CommonFieldProps, ComponentEmphasis, ComponentSize, ComponentTone, DatePickerProps, DetailHeaderProps, DialogProps, FieldDensity, FieldValidation, FilterDescriptor, FilterPanelProps, FormLabelGroupProps, GridProps, HeaderElement, HeaderLevel, InlineLabelProps, InputProps, LabelCellProps, LayoutGap, MembershipAuditTimelineProps, MembershipPanelProps, MessageEventTimelineProps, MessageStatusBadgeProps, OwnerBadgeProps, OwnershipMetaProps, OwnershipSummaryProps, PanelSectionProps, PreferenceEditorProps, PreferencePanelProps, PreferenceSummaryBadgeProps, PreferenceTimelineProps, PriceCardMetaProps, PriceSummaryProps, RoleAssignmentFormProps, RoleBadgeListProps, SafeContainerElement, SafeTextElement, SegmentedControlProps, SelectOption, SelectProps, StackProps, StatusSelectorProps, SwitchProps, TabItem, TableBodyProps, TableCaptionProps, TableCellProps, TableColumn, TableCompound, TableHeadProps, TableHeaderCellProps, TableProps, TableRowData, TableRowProps, TabsProps, TagInputProps, TagManagerProps, TagPillsProps, TagSummaryProps, TemplatePickerProps, TextProps, TextareaProps, VizAreaPreviewProps };
|