@charcuterie/ui 4.18.3 → 4.20.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +2 -0
- package/dist/DataTable/DataTable.d.ts +6 -1
- package/dist/DataTable/DataTable.d.ts.map +1 -1
- package/dist/DataTable/DataTable.js +104 -8
- package/dist/DataTable/DataTable.js.map +1 -1
- package/dist/MetricCard/MetricCard.d.ts +14 -0
- package/dist/MetricCard/MetricCard.d.ts.map +1 -0
- package/dist/MetricCard/MetricCard.js +10 -0
- package/dist/MetricCard/MetricCard.js.map +1 -0
- package/dist/SortableTableHeader/SortableTableHeader.js +1 -1
- package/dist/SortableTableHeader/SortableTableHeader.js.map +1 -1
- package/dist/htmlEditor/HtmlEditor.d.ts +25 -0
- package/dist/htmlEditor/HtmlEditor.d.ts.map +1 -0
- package/dist/htmlEditor/HtmlEditor.js +231 -0
- package/dist/htmlEditor/HtmlEditor.js.map +1 -0
- package/dist/htmlEditor/HtmlView.d.ts +10 -0
- package/dist/htmlEditor/HtmlView.d.ts.map +1 -0
- package/dist/htmlEditor/HtmlView.js +28 -0
- package/dist/htmlEditor/HtmlView.js.map +1 -0
- package/dist/htmlEditor/htmlContentStyles.d.ts +3 -0
- package/dist/htmlEditor/htmlContentStyles.d.ts.map +1 -0
- package/dist/htmlEditor/htmlContentStyles.js +3 -0
- package/dist/htmlEditor/htmlContentStyles.js.map +1 -0
- package/dist/htmlEditor/index.d.ts +8 -0
- package/dist/htmlEditor/index.d.ts.map +1 -0
- package/dist/htmlEditor/index.js +4 -0
- package/dist/htmlEditor/index.js.map +1 -0
- package/dist/htmlEditor/safeHtml.d.ts +12 -0
- package/dist/htmlEditor/safeHtml.d.ts.map +1 -0
- package/dist/htmlEditor/safeHtml.js +137 -0
- package/dist/htmlEditor/safeHtml.js.map +1 -0
- package/dist/htmlEditor/view.d.ts +6 -0
- package/dist/htmlEditor/view.d.ts.map +1 -0
- package/dist/htmlEditor/view.js +3 -0
- package/dist/htmlEditor/view.js.map +1 -0
- package/dist/index.d.ts +3 -1
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +1 -0
- package/dist/index.js.map +1 -1
- package/dist/styles.css +46 -0
- package/package.json +52 -2
- package/src/DataTable/DataTable.mdx +9 -2
- package/src/DataTable/DataTable.stories.tsx +50 -0
- package/src/DataTable/DataTable.test.tsx +82 -0
- package/src/DataTable/DataTable.tsx +194 -17
- package/src/MetricCard/MetricCard.mdx +26 -0
- package/src/MetricCard/MetricCard.stories.tsx +104 -0
- package/src/MetricCard/MetricCard.test.tsx +64 -0
- package/src/MetricCard/MetricCard.tsx +51 -0
- package/src/SortableTableHeader/SortableTableHeader.tsx +1 -1
- package/src/htmlEditor/HtmlEditor.mdx +61 -0
- package/src/htmlEditor/HtmlEditor.stories.tsx +192 -0
- package/src/htmlEditor/HtmlEditor.test.tsx +296 -0
- package/src/htmlEditor/HtmlEditor.tsx +420 -0
- package/src/htmlEditor/HtmlView.mdx +37 -0
- package/src/htmlEditor/HtmlView.stories.tsx +119 -0
- package/src/htmlEditor/HtmlView.test.tsx +88 -0
- package/src/htmlEditor/HtmlView.tsx +71 -0
- package/src/htmlEditor/htmlContentStyles.ts +3 -0
- package/src/htmlEditor/htmlDocument.storyHelpers.ts +7 -0
- package/src/htmlEditor/index.ts +7 -0
- package/src/htmlEditor/safeHtml.test.ts +123 -0
- package/src/htmlEditor/safeHtml.ts +187 -0
- package/src/htmlEditor/view.ts +5 -0
- package/src/index.ts +3 -0
- package/src/markdownEditorCodeMirror/MarkdownView.test.tsx +8 -4
- package/src/sourceRules.test.ts +24 -1
- package/src/styles.css +46 -0
package/README.md
CHANGED
|
@@ -329,3 +329,5 @@ rename breaks only the rendered page).
|
|
|
329
329
|
source and fails on this, so the component M4 adds joins the rule automatically.
|
|
330
330
|
|
|
331
331
|
**`Chart`** provides responsive bar and line plots, negative values, gaps for missing data, and an optional semantic values table. TanStack provides hover/touch tooltips, keyboard navigation, and transitions with reduced-motion support. Set `renderer="portable"` for the lightweight fallback. The `@charcuterie/logic/charts`, `/charts/preact`, and `/charts/react` subpaths expose static and framework-specific surfaces; `/core` remains dependency-free. Apps supply their own series, labels, and semantic colors.
|
|
332
|
+
|
|
333
|
+
**HTML notes** use optional `@charcuterie/ui/html-view` and `/html-editor` entries: `HtmlView` renders a safe document projection and `HtmlEditor` preserves original HTML until a real edit. The existing markdown editors keep their markdown-only storage contracts.
|
|
@@ -46,7 +46,12 @@ export type DataTableSelection<Row> = {
|
|
|
46
46
|
selectAllLabel?: string;
|
|
47
47
|
selectedRowKeys: readonly string[];
|
|
48
48
|
};
|
|
49
|
+
export type DataTableReflowAt = "md" | "lg" | "xl";
|
|
49
50
|
export type DataTableProps<Row> = {
|
|
51
|
+
/** Auto uses the container width; stacked keeps the labelled list at every width. */
|
|
52
|
+
layout?: "auto" | "stacked";
|
|
53
|
+
/** Dense tables can reflow earlier: md=32rem, lg=48rem, xl=64rem. */
|
|
54
|
+
reflowAt?: DataTableReflowAt;
|
|
50
55
|
className?: string;
|
|
51
56
|
columns: readonly DataTableColumn<Row>[];
|
|
52
57
|
/**
|
|
@@ -155,5 +160,5 @@ export type DataTableProps<Row> = {
|
|
|
155
160
|
* Every row is in the DOM, which is what keeps the accessibility
|
|
156
161
|
* tree honest and the auto column layout possible.
|
|
157
162
|
*/
|
|
158
|
-
export declare const DataTable: <Row>({ className, columns, emptyState, getRowKey, isLabelVisible, label, onSortChange, rows, selection, sort, }: DataTableProps<Row>) => ReactNode;
|
|
163
|
+
export declare const DataTable: <Row>({ className, columns, emptyState, getRowKey, isLabelVisible, label, layout, reflowAt, onSortChange, rows, selection, sort, }: DataTableProps<Row>) => ReactNode;
|
|
159
164
|
//# sourceMappingURL=DataTable.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DataTable.d.ts","sourceRoot":"","sources":["../../src/DataTable/DataTable.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAItC,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,gDAAgD,CAAA;AAKnF,MAAM,MAAM,eAAe,CAAC,GAAG,IAAI;IACjC;;;;;OAKG;IACH,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB;;;;;;;OAOG;IACH,MAAM,EAAE,SAAS,CAAA;IACjB;;;;;OAKG;IACH,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,sEAAsE;IACtE,GAAG,EAAE,MAAM,CAAA;IACX,UAAU,EAAE,CAAC,GAAG,EAAE,GAAG,KAAK,SAAS,CAAA;CACpC,CAAA;AAED,MAAM,MAAM,aAAa,GAAG;IAC1B,SAAS,EAAE,MAAM,CAAA;IACjB,SAAS,EAAE,aAAa,CAAA;CACzB,CAAA;AAED,MAAM,MAAM,kBAAkB,CAAC,GAAG,IAAI;IACpC;;;;;;OAMG;IACH,WAAW,EAAE,CAAC,GAAG,EAAE,GAAG,KAAK,MAAM,CAAA;IACjC,yCAAyC;IACzC,iBAAiB,EAAE,CAAC,eAAe,EAAE,MAAM,EAAE,KAAK,IAAI,CAAA;IACtD,cAAc,CAAC,EAAE,MAAM,CAAA;IACvB,eAAe,EAAE,SAAS,MAAM,EAAE,CAAA;CACnC,CAAA;AAED,MAAM,MAAM,cAAc,CAAC,GAAG,IAAI;IAChC,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,OAAO,EAAE,SAAS,eAAe,CAAC,GAAG,CAAC,EAAE,CAAA;IACxC;;;;;;OAMG;IACH,UAAU,CAAC,EAAE,SAAS,CAAA;IACtB,SAAS,EAAE,CAAC,GAAG,EAAE,GAAG,KAAK,MAAM,CAAA;IAC/B;;;;OAIG;IACH,cAAc,CAAC,EAAE,OAAO,CAAA;IACxB;;;;OAIG;IACH,KAAK,EAAE,MAAM,CAAA;IACb,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,aAAa,KAAK,IAAI,CAAA;IAC5C,IAAI,EAAE,SAAS,GAAG,EAAE,CAAA;IACpB,SAAS,CAAC,EAAE,kBAAkB,CAAC,GAAG,CAAC,CAAA;IACnC;;;;OAIG;IACH,IAAI,CAAC,EAAE,aAAa,CAAA;CACrB,CAAA;
|
|
1
|
+
{"version":3,"file":"DataTable.d.ts","sourceRoot":"","sources":["../../src/DataTable/DataTable.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAItC,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,gDAAgD,CAAA;AAKnF,MAAM,MAAM,eAAe,CAAC,GAAG,IAAI;IACjC;;;;;OAKG;IACH,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB;;;;;;;OAOG;IACH,MAAM,EAAE,SAAS,CAAA;IACjB;;;;;OAKG;IACH,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,sEAAsE;IACtE,GAAG,EAAE,MAAM,CAAA;IACX,UAAU,EAAE,CAAC,GAAG,EAAE,GAAG,KAAK,SAAS,CAAA;CACpC,CAAA;AAED,MAAM,MAAM,aAAa,GAAG;IAC1B,SAAS,EAAE,MAAM,CAAA;IACjB,SAAS,EAAE,aAAa,CAAA;CACzB,CAAA;AAED,MAAM,MAAM,kBAAkB,CAAC,GAAG,IAAI;IACpC;;;;;;OAMG;IACH,WAAW,EAAE,CAAC,GAAG,EAAE,GAAG,KAAK,MAAM,CAAA;IACjC,yCAAyC;IACzC,iBAAiB,EAAE,CAAC,eAAe,EAAE,MAAM,EAAE,KAAK,IAAI,CAAA;IACtD,cAAc,CAAC,EAAE,MAAM,CAAA;IACvB,eAAe,EAAE,SAAS,MAAM,EAAE,CAAA;CACnC,CAAA;AAED,MAAM,MAAM,iBAAiB,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAA;AAElD,MAAM,MAAM,cAAc,CAAC,GAAG,IAAI;IAChC,qFAAqF;IACrF,MAAM,CAAC,EAAE,MAAM,GAAG,SAAS,CAAA;IAC3B,qEAAqE;IACrE,QAAQ,CAAC,EAAE,iBAAiB,CAAA;IAC5B,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,OAAO,EAAE,SAAS,eAAe,CAAC,GAAG,CAAC,EAAE,CAAA;IACxC;;;;;;OAMG;IACH,UAAU,CAAC,EAAE,SAAS,CAAA;IACtB,SAAS,EAAE,CAAC,GAAG,EAAE,GAAG,KAAK,MAAM,CAAA;IAC/B;;;;OAIG;IACH,cAAc,CAAC,EAAE,OAAO,CAAA;IACxB;;;;OAIG;IACH,KAAK,EAAE,MAAM,CAAA;IACb,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,aAAa,KAAK,IAAI,CAAA;IAC5C,IAAI,EAAE,SAAS,GAAG,EAAE,CAAA;IACpB,SAAS,CAAC,EAAE,kBAAkB,CAAC,GAAG,CAAC,CAAA;IACnC;;;;OAIG;IACH,IAAI,CAAC,EAAE,aAAa,CAAA;CACrB,CAAA;AA8HD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA0EG;AACH,eAAO,MAAM,SAAS,GAAI,GAAG,EAAG,8HAa7B,cAAc,CAAC,GAAG,CAAC,KAAG,SAwWxB,CAAA"}
|
|
@@ -11,6 +11,99 @@ import { VisuallyHidden } from "../VisuallyHidden/VisuallyHidden.js";
|
|
|
11
11
|
* empty-state cell.
|
|
12
12
|
*/
|
|
13
13
|
const CELL_PADDING_CLASS = "px-3 py-2";
|
|
14
|
+
/** Complete literals keep Tailwind generation and consumer builds identical. */
|
|
15
|
+
const WIDE_LAYOUT_CLASS = {
|
|
16
|
+
"cq-md:align-middle": {
|
|
17
|
+
md: "cq-md:align-middle",
|
|
18
|
+
lg: "cq-lg:align-middle",
|
|
19
|
+
xl: "cq-xl:align-middle",
|
|
20
|
+
},
|
|
21
|
+
"cq-md:bg-transparent": {
|
|
22
|
+
md: "cq-md:bg-transparent",
|
|
23
|
+
lg: "cq-lg:bg-transparent",
|
|
24
|
+
xl: "cq-xl:bg-transparent",
|
|
25
|
+
},
|
|
26
|
+
"cq-md:border-0": {
|
|
27
|
+
md: "cq-md:border-0",
|
|
28
|
+
lg: "cq-lg:border-0",
|
|
29
|
+
xl: "cq-xl:border-0",
|
|
30
|
+
},
|
|
31
|
+
"cq-md:border-b": {
|
|
32
|
+
md: "cq-md:border-b",
|
|
33
|
+
lg: "cq-lg:border-b",
|
|
34
|
+
xl: "cq-xl:border-b",
|
|
35
|
+
},
|
|
36
|
+
"cq-md:border-b-0": {
|
|
37
|
+
md: "cq-md:border-b-0",
|
|
38
|
+
lg: "cq-lg:border-b-0",
|
|
39
|
+
xl: "cq-xl:border-b-0",
|
|
40
|
+
},
|
|
41
|
+
"cq-md:border-border-subtle": {
|
|
42
|
+
md: "cq-md:border-border-subtle",
|
|
43
|
+
lg: "cq-lg:border-border-subtle",
|
|
44
|
+
xl: "cq-xl:border-border-subtle",
|
|
45
|
+
},
|
|
46
|
+
"cq-md:gap-0": {
|
|
47
|
+
md: "cq-md:gap-0",
|
|
48
|
+
lg: "cq-lg:gap-0",
|
|
49
|
+
xl: "cq-xl:gap-0",
|
|
50
|
+
},
|
|
51
|
+
"cq-md:hidden": {
|
|
52
|
+
md: "cq-md:hidden",
|
|
53
|
+
lg: "cq-lg:hidden",
|
|
54
|
+
xl: "cq-xl:hidden",
|
|
55
|
+
},
|
|
56
|
+
"cq-md:p-0": {
|
|
57
|
+
md: "cq-md:p-0",
|
|
58
|
+
lg: "cq-lg:p-0",
|
|
59
|
+
xl: "cq-xl:p-0",
|
|
60
|
+
},
|
|
61
|
+
"cq-md:pt-0": {
|
|
62
|
+
md: "cq-md:pt-0",
|
|
63
|
+
lg: "cq-lg:pt-0",
|
|
64
|
+
xl: "cq-xl:pt-0",
|
|
65
|
+
},
|
|
66
|
+
"cq-md:py-2": {
|
|
67
|
+
md: "cq-md:py-2",
|
|
68
|
+
lg: "cq-lg:py-2",
|
|
69
|
+
xl: "cq-xl:py-2",
|
|
70
|
+
},
|
|
71
|
+
"cq-md:rounded-none": {
|
|
72
|
+
md: "cq-md:rounded-none",
|
|
73
|
+
lg: "cq-lg:rounded-none",
|
|
74
|
+
xl: "cq-xl:rounded-none",
|
|
75
|
+
},
|
|
76
|
+
"cq-md:table": {
|
|
77
|
+
md: "cq-md:table",
|
|
78
|
+
lg: "cq-lg:table",
|
|
79
|
+
xl: "cq-xl:table",
|
|
80
|
+
},
|
|
81
|
+
"cq-md:table-cell": {
|
|
82
|
+
md: "cq-md:table-cell",
|
|
83
|
+
lg: "cq-lg:table-cell",
|
|
84
|
+
xl: "cq-xl:table-cell",
|
|
85
|
+
},
|
|
86
|
+
"cq-md:table-header-group": {
|
|
87
|
+
md: "cq-md:table-header-group",
|
|
88
|
+
lg: "cq-lg:table-header-group",
|
|
89
|
+
xl: "cq-xl:table-header-group",
|
|
90
|
+
},
|
|
91
|
+
"cq-md:table-row": {
|
|
92
|
+
md: "cq-md:table-row",
|
|
93
|
+
lg: "cq-lg:table-row",
|
|
94
|
+
xl: "cq-xl:table-row",
|
|
95
|
+
},
|
|
96
|
+
"cq-md:table-row-group": {
|
|
97
|
+
md: "cq-md:table-row-group",
|
|
98
|
+
lg: "cq-lg:table-row-group",
|
|
99
|
+
xl: "cq-xl:table-row-group",
|
|
100
|
+
},
|
|
101
|
+
"cq-md:wrap-normal": {
|
|
102
|
+
md: "cq-md:wrap-normal",
|
|
103
|
+
lg: "cq-lg:wrap-normal",
|
|
104
|
+
xl: "cq-xl:wrap-normal",
|
|
105
|
+
},
|
|
106
|
+
};
|
|
14
107
|
/**
|
|
15
108
|
* `role` on every part, and it is not belt-and-braces.
|
|
16
109
|
*
|
|
@@ -108,7 +201,10 @@ const ROW_GROUP_ROLE = "rowgroup";
|
|
|
108
201
|
* Every row is in the DOM, which is what keeps the accessibility
|
|
109
202
|
* tree honest and the auto column layout possible.
|
|
110
203
|
*/
|
|
111
|
-
export const DataTable = ({ className, columns, emptyState, getRowKey, isLabelVisible = false, label, onSortChange, rows, selection, sort, }) => {
|
|
204
|
+
export const DataTable = ({ className, columns, emptyState, getRowKey, isLabelVisible = false, label, layout = "auto", reflowAt = "md", onSortChange, rows, selection, sort, }) => {
|
|
205
|
+
const wideClass = (key) => layout === "stacked"
|
|
206
|
+
? undefined
|
|
207
|
+
: WIDE_LAYOUT_CLASS[key][reflowAt];
|
|
112
208
|
const tableRef = useRef(null);
|
|
113
209
|
const selectedRowKeys = selection?.selectedRowKeys;
|
|
114
210
|
/**
|
|
@@ -152,9 +248,9 @@ export const DataTable = ({ className, columns, emptyState, getRowKey, isLabelVi
|
|
|
152
248
|
});
|
|
153
249
|
const selectedKeys = new Set(selectedRowKeys ?? []);
|
|
154
250
|
const columnCount = columns.length + (selection ? 1 : 0);
|
|
155
|
-
return (_jsx("div", { className: toClassName("@container", className), children: _jsxs("table", { className: "block w-full border-collapse text-start text-content-primary text-md cq-md:table", ref: tableRef, role: "table", children: [_jsx("caption", { className: toClassName("text-start", isLabelVisible
|
|
251
|
+
return (_jsx("div", { className: toClassName("@container charcuterie-data-table", className), "data-layout": layout, "data-reflow-at": reflowAt, children: _jsxs("table", { className: toClassName("block w-full border-collapse text-start text-content-primary text-md", wideClass("cq-md:table")), ref: tableRef, role: "table", children: [_jsx("caption", { className: toClassName("text-start", isLabelVisible
|
|
156
252
|
? "pb-2 font-medium text-content-secondary text-sm"
|
|
157
|
-
: "sr-only"), children: label }), _jsx("thead", { className: "block cq-md:table-header-group", role: ROW_GROUP_ROLE, children: _jsxs("tr", { className: "flex flex-wrap items-center gap-x-1 border-border-subtle border-b cq-md:table-row cq-md:border-b-0", role: "row", children: [selection ? (_jsx("th", { className: toClassName("border-border-subtle p-2 text-start cq-md:table-cell cq-md:border-b"), role: "columnheader", scope: "col", children: _jsx(Checkbox, { label: _jsx(VisuallyHidden, { children: selection.selectAllLabel ??
|
|
253
|
+
: "sr-only"), children: label }), _jsx("thead", { className: toClassName("block", wideClass("cq-md:table-header-group")), role: ROW_GROUP_ROLE, children: _jsxs("tr", { className: toClassName("flex flex-wrap items-center gap-x-1 border-border-subtle border-b", wideClass("cq-md:table-row"), wideClass("cq-md:border-b-0")), role: "row", children: [selection ? (_jsx("th", { className: toClassName(toClassName("border-border-subtle p-2 text-start", wideClass("cq-md:table-cell"), wideClass("cq-md:border-b"))), role: "columnheader", scope: "col", children: _jsx(Checkbox, { label: _jsx(VisuallyHidden, { children: selection.selectAllLabel ??
|
|
158
254
|
"Select all rows" }), onChange: (isChecked) => {
|
|
159
255
|
selection.onSelectionChange(isChecked ? rows.map(getRowKey) : []);
|
|
160
256
|
} }) })) : null, columns.map((column) => column.isSortable ? (_jsx(SortableTableHeader
|
|
@@ -167,14 +263,14 @@ export const DataTable = ({ className, columns, emptyState, getRowKey, isLabelVi
|
|
|
167
263
|
// wide layout and loses it in the strip, where
|
|
168
264
|
// one underline per chip reads as five separate
|
|
169
265
|
// rules rather than one header edge.
|
|
170
|
-
className: toClassName("border-b-0 cq-md:border-b", column.className), direction: sort?.columnKey === column.key
|
|
266
|
+
className: toClassName(toClassName("border-b-0", wideClass("cq-md:border-b")), column.className), direction: sort?.columnKey === column.key
|
|
171
267
|
? sort.direction
|
|
172
268
|
: undefined, onSort: (direction) => {
|
|
173
269
|
onSortChange?.({
|
|
174
270
|
columnKey: column.key,
|
|
175
271
|
direction,
|
|
176
272
|
});
|
|
177
|
-
}, children: column.header }, column.key)) : (_jsx("th", { className: toClassName("border-border-subtle text-start font-medium text-content-secondary text-sm uppercase tracking-wide cq-md:table-cell cq-md:border-b", CELL_PADDING_CLASS, column.className), role: "columnheader", scope: "col", children: column.header }, column.key)))] }) }), _jsx("tbody", { className: "flex flex-col gap-2 pt-2 cq-md:table-row-group cq-md:gap-0 cq-md:pt-0", role: ROW_GROUP_ROLE, children: rows.length === 0 ? (_jsx("tr", { className: "block cq-md:table-row", role: "row", children: _jsx("td", { className: "block p-0 cq-md:table-cell", colSpan: columnCount, role: "cell", children: emptyState }) })) : (rows.map((row) => {
|
|
273
|
+
}, children: column.header }, column.key)) : (_jsx("th", { className: toClassName(toClassName("border-border-subtle text-start wrap-normal font-medium text-content-secondary text-sm uppercase tracking-wide", wideClass("cq-md:table-cell"), wideClass("cq-md:border-b")), CELL_PADDING_CLASS, column.className), role: "columnheader", scope: "col", children: column.header }, column.key)))] }) }), _jsx("tbody", { className: toClassName("flex flex-col gap-2 pt-2", wideClass("cq-md:table-row-group"), wideClass("cq-md:gap-0"), wideClass("cq-md:pt-0")), role: ROW_GROUP_ROLE, children: rows.length === 0 ? (_jsx("tr", { className: toClassName("block", wideClass("cq-md:table-row")), role: "row", children: _jsx("td", { className: toClassName("block p-0", wideClass("cq-md:table-cell")), colSpan: columnCount, role: "cell", children: emptyState }) })) : (rows.map((row) => {
|
|
178
274
|
const rowKey = getRowKey(row);
|
|
179
275
|
const isSelected = selectedKeys.has(rowKey);
|
|
180
276
|
return (_jsxs("tr", { className: toClassName(
|
|
@@ -182,16 +278,16 @@ export const DataTable = ({ className, columns, emptyState, getRowKey, isLabelVi
|
|
|
182
278
|
// under it. Both states are written here rather
|
|
183
279
|
// than in a stylesheet so a reader can see the
|
|
184
280
|
// whole of a row's shape in one place.
|
|
185
|
-
"flex flex-col gap-1 rounded-lg border border-border-subtle p-3 transition-colors duration-(--duration-fast) ease-standard", "cq-md:table-row cq-md:gap-0 cq-md:rounded-none cq-md:border-0 cq-md:border-border-subtle cq-md:border-b cq-md:p-0", isSelected
|
|
281
|
+
"flex flex-col gap-1 rounded-lg border border-border-subtle p-3 transition-colors duration-(--duration-fast) ease-standard", toClassName(wideClass("cq-md:table-row"), wideClass("cq-md:gap-0"), wideClass("cq-md:rounded-none"), wideClass("cq-md:border-0"), wideClass("cq-md:border-border-subtle"), wideClass("cq-md:border-b"), wideClass("cq-md:p-0")), isSelected
|
|
186
282
|
? "bg-intent-accent-surface"
|
|
187
|
-
: "bg-surface-raised hover:bg-intent-neutral-surface cq-md:bg-transparent"), "data-is-selected": isSelected, role: "row", children: [selection ? (_jsx("td", { className: "block p-2 cq-md:table-cell cq-md:align-middle", role: "cell", children: _jsx(Checkbox, { isChecked: isSelected, label: _jsx(VisuallyHidden, { children: selection.getRowLabel(row) }), onChange: (isChecked) => {
|
|
283
|
+
: toClassName("bg-surface-raised hover:bg-intent-neutral-surface", wideClass("cq-md:bg-transparent"))), "data-is-selected": isSelected, role: "row", children: [selection ? (_jsx("td", { className: toClassName("block p-2", wideClass("cq-md:table-cell"), wideClass("cq-md:align-middle")), role: "cell", children: _jsx(Checkbox, { isChecked: isSelected, label: _jsx(VisuallyHidden, { children: selection.getRowLabel(row) }), onChange: (isChecked) => {
|
|
188
284
|
selection.onSelectionChange(isChecked
|
|
189
285
|
? [
|
|
190
286
|
...selection.selectedRowKeys,
|
|
191
287
|
rowKey,
|
|
192
288
|
]
|
|
193
289
|
: selection.selectedRowKeys.filter((one) => one !== rowKey));
|
|
194
|
-
}, value: rowKey }) })) : null, columns.map((column) => (_jsxs("td", { className: toClassName("flex items-baseline gap-3 py-0.5 cq-md:table-cell cq-md:align-middle", CELL_PADDING_CLASS, "cq-md:py-2", column.className), role: "cell", children: [_jsx("span", { "aria-hidden": "true", className: "w-20 shrink-0 wrap-anywhere cq-xs:w-28 text-content-secondary text-xs uppercase tracking-wide cq-md:hidden", children: column.header }), _jsx("span", { className: "min-w-0 flex-1 wrap-anywhere cq-md:wrap-normal", children: column.renderCell(row) })] }, column.key)))] }, rowKey));
|
|
290
|
+
}, value: rowKey }) })) : null, columns.map((column) => (_jsxs("td", { className: toClassName(toClassName("flex items-baseline gap-3 py-0.5", wideClass("cq-md:table-cell"), wideClass("cq-md:align-middle")), CELL_PADDING_CLASS, toClassName(wideClass("cq-md:py-2")), column.className), role: "cell", children: [_jsx("span", { "aria-hidden": "true", className: toClassName("w-20 shrink-0 wrap-anywhere cq-xs:w-28 text-content-secondary text-xs uppercase tracking-wide", wideClass("cq-md:hidden")), children: column.header }), _jsx("span", { className: toClassName("min-w-0 flex-1 wrap-anywhere", wideClass("cq-md:wrap-normal")), children: column.renderCell(row) })] }, column.key)))] }, rowKey));
|
|
195
291
|
})) })] }) }));
|
|
196
292
|
};
|
|
197
293
|
//# sourceMappingURL=DataTable.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DataTable.js","sourceRoot":"","sources":["../../src/DataTable/DataTable.tsx"],"names":[],"mappings":";AAGA,OAAO,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,OAAO,CAAA;AAEzC,OAAO,EAAE,QAAQ,EAAE,MAAM,yBAA0B,CAAA;AAEnD,OAAO,EAAE,mBAAmB,EAAE,MAAM,+CAAgD,CAAA;AACpF,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAA;AAC/C,OAAO,EAAE,cAAc,EAAE,MAAM,qCAAsC,CAAA;
|
|
1
|
+
{"version":3,"file":"DataTable.js","sourceRoot":"","sources":["../../src/DataTable/DataTable.tsx"],"names":[],"mappings":";AAGA,OAAO,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,OAAO,CAAA;AAEzC,OAAO,EAAE,QAAQ,EAAE,MAAM,yBAA0B,CAAA;AAEnD,OAAO,EAAE,mBAAmB,EAAE,MAAM,+CAAgD,CAAA;AACpF,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAA;AAC/C,OAAO,EAAE,cAAc,EAAE,MAAM,qCAAsC,CAAA;AA4FrE;;;;;GAKG;AACH,MAAM,kBAAkB,GAAG,WAAW,CAAA;AACtC,gFAAgF;AAChF,MAAM,iBAAiB,GAAG;IACxB,oBAAoB,EAAE;QACpB,EAAE,EAAE,oBAAoB;QACxB,EAAE,EAAE,oBAAoB;QACxB,EAAE,EAAE,oBAAoB;KACzB;IACD,sBAAsB,EAAE;QACtB,EAAE,EAAE,sBAAsB;QAC1B,EAAE,EAAE,sBAAsB;QAC1B,EAAE,EAAE,sBAAsB;KAC3B;IACD,gBAAgB,EAAE;QAChB,EAAE,EAAE,gBAAgB;QACpB,EAAE,EAAE,gBAAgB;QACpB,EAAE,EAAE,gBAAgB;KACrB;IACD,gBAAgB,EAAE;QAChB,EAAE,EAAE,gBAAgB;QACpB,EAAE,EAAE,gBAAgB;QACpB,EAAE,EAAE,gBAAgB;KACrB;IACD,kBAAkB,EAAE;QAClB,EAAE,EAAE,kBAAkB;QACtB,EAAE,EAAE,kBAAkB;QACtB,EAAE,EAAE,kBAAkB;KACvB;IACD,4BAA4B,EAAE;QAC5B,EAAE,EAAE,4BAA4B;QAChC,EAAE,EAAE,4BAA4B;QAChC,EAAE,EAAE,4BAA4B;KACjC;IACD,aAAa,EAAE;QACb,EAAE,EAAE,aAAa;QACjB,EAAE,EAAE,aAAa;QACjB,EAAE,EAAE,aAAa;KAClB;IACD,cAAc,EAAE;QACd,EAAE,EAAE,cAAc;QAClB,EAAE,EAAE,cAAc;QAClB,EAAE,EAAE,cAAc;KACnB;IACD,WAAW,EAAE;QACX,EAAE,EAAE,WAAW;QACf,EAAE,EAAE,WAAW;QACf,EAAE,EAAE,WAAW;KAChB;IACD,YAAY,EAAE;QACZ,EAAE,EAAE,YAAY;QAChB,EAAE,EAAE,YAAY;QAChB,EAAE,EAAE,YAAY;KACjB;IACD,YAAY,EAAE;QACZ,EAAE,EAAE,YAAY;QAChB,EAAE,EAAE,YAAY;QAChB,EAAE,EAAE,YAAY;KACjB;IACD,oBAAoB,EAAE;QACpB,EAAE,EAAE,oBAAoB;QACxB,EAAE,EAAE,oBAAoB;QACxB,EAAE,EAAE,oBAAoB;KACzB;IACD,aAAa,EAAE;QACb,EAAE,EAAE,aAAa;QACjB,EAAE,EAAE,aAAa;QACjB,EAAE,EAAE,aAAa;KAClB;IACD,kBAAkB,EAAE;QAClB,EAAE,EAAE,kBAAkB;QACtB,EAAE,EAAE,kBAAkB;QACtB,EAAE,EAAE,kBAAkB;KACvB;IACD,0BAA0B,EAAE;QAC1B,EAAE,EAAE,0BAA0B;QAC9B,EAAE,EAAE,0BAA0B;QAC9B,EAAE,EAAE,0BAA0B;KAC/B;IACD,iBAAiB,EAAE;QACjB,EAAE,EAAE,iBAAiB;QACrB,EAAE,EAAE,iBAAiB;QACrB,EAAE,EAAE,iBAAiB;KACtB;IACD,uBAAuB,EAAE;QACvB,EAAE,EAAE,uBAAuB;QAC3B,EAAE,EAAE,uBAAuB;QAC3B,EAAE,EAAE,uBAAuB;KAC5B;IACD,mBAAmB,EAAE;QACnB,EAAE,EAAE,mBAAmB;QACvB,EAAE,EAAE,mBAAmB;QACvB,EAAE,EAAE,mBAAmB;KACxB;CACO,CAAA;AAEV;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,MAAM,cAAc,GAAG,UAAU,CAAA;AAEjC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA0EG;AACH,MAAM,CAAC,MAAM,SAAS,GAAG,CAAO,EAC9B,SAAS,EACT,OAAO,EACP,UAAU,EACV,SAAS,EACT,cAAc,GAAG,KAAK,EACtB,KAAK,EACL,MAAM,GAAG,MAAM,EACf,QAAQ,GAAG,IAAI,EACf,YAAY,EACZ,IAAI,EACJ,SAAS,EACT,IAAI,GACgB,EAAa,EAAE;IACnC,MAAM,SAAS,GAAG,CAChB,GAAmC,EACnC,EAAE,CACF,MAAM,KAAK,SAAS;QAClB,CAAC,CAAC,SAAS;QACX,CAAC,CAAC,iBAAiB,CAAC,GAAG,CAAC,CAAC,QAAQ,CAAC,CAAA;IACtC,MAAM,QAAQ,GAAG,MAAM,CAAmB,IAAI,CAAC,CAAA;IAE/C,MAAM,eAAe,GAAG,SAAS,EAAE,eAAe,CAAA;IAElD;;;;;;;;;;;;;;;;;;;OAmBG;IACH,SAAS,CAAC,GAAG,EAAE;QACb,MAAM,KAAK,GAAG,QAAQ,CAAC,OAAO,CAAA;QAE9B,IAAI,CAAC,KAAK,IAAI,CAAC,eAAe,EAAE,CAAC;YAC/B,OAAM;QACR,CAAC;QAED,MAAM,YAAY,GAAG,IAAI,GAAG,CAAC,eAAe,CAAC,CAAA;QAE7C,KAAK,MAAM,KAAK,IAAI,KAAK,CAAC,gBAAgB,CACxC,8BAA8B,CAC/B,EAAE,CAAC;YACF,KAAK,CAAC,OAAO,GAAG,YAAY,CAAC,GAAG,CAAC,KAAK,CAAC,KAAK,CAAC,CAAA;QAC/C,CAAC;QAED,MAAM,cAAc,GAClB,KAAK,CAAC,aAAa,CACjB,8BAA8B,CAC/B,CAAA;QAEH,IAAI,cAAc,EAAE,CAAC;YACnB,MAAM,gBAAgB,GAAG,IAAI,CAAC,MAAM,CAAC,CAAC,GAAG,EAAE,EAAE,CAC3C,YAAY,CAAC,GAAG,CAAC,SAAS,CAAC,GAAG,CAAC,CAAC,CACjC,CAAC,MAAM,CAAA;YAER,cAAc,CAAC,OAAO;gBACpB,IAAI,CAAC,MAAM,GAAG,CAAC,IAAI,gBAAgB,KAAK,IAAI,CAAC,MAAM,CAAA;YAErD,cAAc,CAAC,aAAa;gBAC1B,gBAAgB,GAAG,CAAC;oBACpB,gBAAgB,GAAG,IAAI,CAAC,MAAM,CAAA;QAClC,CAAC;IACH,CAAC,CAAC,CAAA;IAEF,MAAM,YAAY,GAAG,IAAI,GAAG,CAAC,eAAe,IAAI,EAAE,CAAC,CAAA;IAEnD,MAAM,WAAW,GAAG,OAAO,CAAC,MAAM,GAAG,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAA;IAExD,OAAO,CAKL,cACE,SAAS,EAAE,WAAW,CACpB,mCAAmC,EACnC,SAAS,CACV,iBACY,MAAM,oBACH,QAAQ,YAExB,iBACE,SAAS,EAAE,WAAW,CACpB,sEAAsE,EACtE,SAAS,CAAC,aAAa,CAAC,CACzB,EACD,GAAG,EAAE,QAAQ,EACb,IAAI,EAAC,OAAO,aAEZ,kBACE,SAAS,EAAE,WAAW,CACpB,YAAY,EACZ,cAAc;wBACZ,CAAC,CAAC,iDAAiD;wBACnD,CAAC,CAAC,SAAS,CACd,YAEA,KAAK,GACE,EAEV,gBACE,SAAS,EAAE,WAAW,CACpB,OAAO,EACP,SAAS,CAAC,0BAA0B,CAAC,CACtC,EACD,IAAI,EAAE,cAAc,YAKpB,cACE,SAAS,EAAE,WAAW,CACpB,mEAAmE,EACnE,SAAS,CAAC,iBAAiB,CAAC,EAC5B,SAAS,CAAC,kBAAkB,CAAC,CAC9B,EACD,IAAI,EAAC,KAAK,aAET,SAAS,CAAC,CAAC,CAAC,CACX,aACE,SAAS,EAAE,WAAW,CACpB,WAAW,CACT,qCAAqC,EACrC,SAAS,CAAC,kBAAkB,CAAC,EAC7B,SAAS,CAAC,gBAAgB,CAAC,CAC5B,CACF,EACD,IAAI,EAAC,cAAc,EACnB,KAAK,EAAC,KAAK,YAEX,KAAC,QAAQ,IACP,KAAK,EACH,KAAC,cAAc,cACZ,SAAS,CAAC,cAAc;4CACvB,iBAAiB,GACJ,EAEnB,QAAQ,EAAE,CAAC,SAAS,EAAE,EAAE;wCACtB,SAAS,CAAC,iBAAiB,CACzB,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,EAAE,CACrC,CAAA;oCACH,CAAC,GACD,GACC,CACN,CAAC,CAAC,CAAC,IAAI,EAEP,OAAO,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,EAAE,CACtB,MAAM,CAAC,UAAU,CAAC,CAAC,CAAC,CAClB,KAAC,mBAAmB;4BAClB,8CAA8C;4BAC9C,+CAA+C;4BAC/C,gDAAgD;4BAChD,qCAAqC;;gCAHrC,8CAA8C;gCAC9C,+CAA+C;gCAC/C,gDAAgD;gCAChD,qCAAqC;gCACrC,SAAS,EAAE,WAAW,CACpB,WAAW,CACT,YAAY,EACZ,SAAS,CAAC,gBAAgB,CAAC,CAC5B,EACD,MAAM,CAAC,SAAS,CACjB,EACD,SAAS,EACP,IAAI,EAAE,SAAS,KAAK,MAAM,CAAC,GAAG;oCAC5B,CAAC,CAAC,IAAI,CAAC,SAAS;oCAChB,CAAC,CAAC,SAAS,EAGf,MAAM,EAAE,CAAC,SAAS,EAAE,EAAE;oCACpB,YAAY,EAAE,CAAC;wCACb,SAAS,EAAE,MAAM,CAAC,GAAG;wCACrB,SAAS;qCACV,CAAC,CAAA;gCACJ,CAAC,YAEA,MAAM,CAAC,MAAM,IART,MAAM,CAAC,GAAG,CASK,CACvB,CAAC,CAAC,CAAC,CACF,aACE,SAAS,EAAE,WAAW,CACpB,WAAW,CACT,gHAAgH,EAChH,SAAS,CAAC,kBAAkB,CAAC,EAC7B,SAAS,CAAC,gBAAgB,CAAC,CAC5B,EACD,kBAAkB,EAClB,MAAM,CAAC,SAAS,CACjB,EAED,IAAI,EAAC,cAAc,EACnB,KAAK,EAAC,KAAK,YAEV,MAAM,CAAC,MAAM,IAJT,MAAM,CAAC,GAAG,CAKZ,CACN,CACF,IACE,GACC,EAER,gBACE,SAAS,EAAE,WAAW,CACpB,0BAA0B,EAC1B,SAAS,CAAC,uBAAuB,CAAC,EAClC,SAAS,CAAC,aAAa,CAAC,EACxB,SAAS,CAAC,YAAY,CAAC,CACxB,EACD,IAAI,EAAE,cAAc,YAEnB,IAAI,CAAC,MAAM,KAAK,CAAC,CAAC,CAAC,CAAC,CACnB,aACE,SAAS,EAAE,WAAW,CACpB,OAAO,EACP,SAAS,CAAC,iBAAiB,CAAC,CAC7B,EACD,IAAI,EAAC,KAAK,YAEV,aACE,SAAS,EAAE,WAAW,CACpB,WAAW,EACX,SAAS,CAAC,kBAAkB,CAAC,CAC9B,EACD,OAAO,EAAE,WAAW,EACpB,IAAI,EAAC,MAAM,YAEV,UAAU,GACR,GACF,CACN,CAAC,CAAC,CAAC,CACF,IAAI,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,EAAE;wBACf,MAAM,MAAM,GAAG,SAAS,CAAC,GAAG,CAAC,CAAA;wBAE7B,MAAM,UAAU,GAAG,YAAY,CAAC,GAAG,CAAC,MAAM,CAAC,CAAA;wBAE3C,OAAO,CACL,cACE,SAAS,EAAE,WAAW;4BACpB,8CAA8C;4BAC9C,gDAAgD;4BAChD,+CAA+C;4BAC/C,uCAAuC;4BACvC,2HAA2H,EAC3H,WAAW,CACT,SAAS,CAAC,iBAAiB,CAAC,EAC5B,SAAS,CAAC,aAAa,CAAC,EACxB,SAAS,CAAC,oBAAoB,CAAC,EAC/B,SAAS,CAAC,gBAAgB,CAAC,EAC3B,SAAS,CACP,4BAA4B,CAC7B,EACD,SAAS,CAAC,gBAAgB,CAAC,EAC3B,SAAS,CAAC,WAAW,CAAC,CACvB,EACD,UAAU;gCACR,CAAC,CAAC,0BAA0B;gCAC5B,CAAC,CAAC,WAAW,CACT,mDAAmD,EACnD,SAAS,CAAC,sBAAsB,CAAC,CAClC,CACN,sBAMiB,UAAU,EAE5B,IAAI,EAAC,KAAK,aAET,SAAS,CAAC,CAAC,CAAC,CACX,aACE,SAAS,EAAE,WAAW,CACpB,WAAW,EACX,SAAS,CAAC,kBAAkB,CAAC,EAC7B,SAAS,CAAC,oBAAoB,CAAC,CAChC,EACD,IAAI,EAAC,MAAM,YAEX,KAAC,QAAQ,IACP,SAAS,EAAE,UAAU,EACrB,KAAK,EACH,KAAC,cAAc,cACZ,SAAS,CAAC,WAAW,CAAC,GAAG,CAAC,GACZ,EAEnB,QAAQ,EAAE,CAAC,SAAS,EAAE,EAAE;4CACtB,SAAS,CAAC,iBAAiB,CACzB,SAAS;gDACP,CAAC,CAAC;oDACE,GAAG,SAAS,CAAC,eAAe;oDAC5B,MAAM;iDACP;gDACH,CAAC,CAAC,SAAS,CAAC,eAAe,CAAC,MAAM,CAC9B,CAAC,GAAG,EAAE,EAAE,CAAC,GAAG,KAAK,MAAM,CACxB,CACN,CAAA;wCACH,CAAC,EACD,KAAK,EAAE,MAAM,GACb,GACC,CACN,CAAC,CAAC,CAAC,IAAI,EAEP,OAAO,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,EAAE,CAAC,CACvB,cACE,SAAS,EAAE,WAAW,CACpB,WAAW,CACT,kCAAkC,EAClC,SAAS,CAAC,kBAAkB,CAAC,EAC7B,SAAS,CAAC,oBAAoB,CAAC,CAChC,EACD,kBAAkB,EAClB,WAAW,CACT,SAAS,CAAC,YAAY,CAAC,CACxB,EACD,MAAM,CAAC,SAAS,CACjB,EAED,IAAI,EAAC,MAAM,aAQX,8BACc,MAAM,EAClB,SAAS,EAAE,WAAW,CACpB,+FAA+F,EAC/F,SAAS,CAAC,cAAc,CAAC,CAC1B,YAEA,MAAM,CAAC,MAAM,GACT,EAWP,eACE,SAAS,EAAE,WAAW,CACpB,8BAA8B,EAC9B,SAAS,CAAC,mBAAmB,CAAC,CAC/B,YAEA,MAAM,CAAC,UAAU,CAAC,GAAG,CAAC,GAClB,KAnCF,MAAM,CAAC,GAAG,CAoCZ,CACN,CAAC,KAvFG,MAAM,CAwFR,CACN,CAAA;oBACH,CAAC,CAAC,CACH,GACK,IACF,GACJ,CACP,CAAA;AACH,CAAC,CAAA"}
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
import type { CategoricalIndex } from "@charcuterie/tokens";
|
|
2
|
+
import type { ReactNode } from "react";
|
|
3
|
+
import { type CardProps } from "../Card/Card.tsx";
|
|
4
|
+
export type MetricCardProps = Omit<CardProps, "actions"> & {
|
|
5
|
+
/** A stable category colour, independent of success/failure intent. */
|
|
6
|
+
categorical?: CategoricalIndex;
|
|
7
|
+
/** App-supplied decoration; the visible heading names the metric. */
|
|
8
|
+
icon?: ReactNode;
|
|
9
|
+
/** Already formatted by the app, including the unit when needed. */
|
|
10
|
+
value: ReactNode;
|
|
11
|
+
};
|
|
12
|
+
/** One prominent measure, a coloured icon and edge, and app-owned supporting content. */
|
|
13
|
+
export declare const MetricCard: ({ categorical, children, icon, value, ...cardProps }: MetricCardProps) => ReactNode;
|
|
14
|
+
//# sourceMappingURL=MetricCard.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"MetricCard.d.ts","sourceRoot":"","sources":["../../src/MetricCard/MetricCard.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAA;AAC3D,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AACtC,OAAO,EAAQ,KAAK,SAAS,EAAE,MAAM,kBAAkB,CAAA;AAIvD,MAAM,MAAM,eAAe,GAAG,IAAI,CAAC,SAAS,EAAE,SAAS,CAAC,GAAG;IACzD,uEAAuE;IACvE,WAAW,CAAC,EAAE,gBAAgB,CAAA;IAC9B,qEAAqE;IACrE,IAAI,CAAC,EAAE,SAAS,CAAA;IAChB,oEAAoE;IACpE,KAAK,EAAE,SAAS,CAAA;CACjB,CAAA;AAED,yFAAyF;AACzF,eAAO,MAAM,UAAU,GAAI,sDAMxB,eAAe,KAAG,SA4BpB,CAAA"}
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
import { Card } from "../Card/Card.js";
|
|
3
|
+
import { CATEGORICAL_CONTENT_CLASS } from "../categoricalStyles.js";
|
|
4
|
+
import { toClassName } from "../toClassName.js";
|
|
5
|
+
/** One prominent measure, a coloured icon and edge, and app-owned supporting content. */
|
|
6
|
+
export const MetricCard = ({ categorical, children, icon, value, ...cardProps }) => (_jsxs(Card, { ...cardProps, accentEdge: cardProps.accentEdge ??
|
|
7
|
+
(categorical ? { categorical } : undefined), actions: icon ? (_jsx("span", { "aria-hidden": "true", className: toClassName("inline-flex size-7 items-center justify-center", categorical
|
|
8
|
+
? CATEGORICAL_CONTENT_CLASS[categorical]
|
|
9
|
+
: undefined), children: icon })) : undefined, children: [_jsx("p", { className: "min-w-0 wrap-anywhere font-semibold text-2xl tabular-nums", children: value }), children] }));
|
|
10
|
+
//# sourceMappingURL=MetricCard.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"MetricCard.js","sourceRoot":"","sources":["../../src/MetricCard/MetricCard.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,IAAI,EAAkB,MAAM,iBAAkB,CAAA;AACvD,OAAO,EAAE,yBAAyB,EAAE,MAAM,yBAAyB,CAAA;AACnE,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAA;AAW/C,yFAAyF;AACzF,MAAM,CAAC,MAAM,UAAU,GAAG,CAAC,EACzB,WAAW,EACX,QAAQ,EACR,IAAI,EACJ,KAAK,EACL,GAAG,SAAS,EACI,EAAa,EAAE,CAAC,CAChC,MAAC,IAAI,OACC,SAAS,EACb,UAAU,EACR,SAAS,CAAC,UAAU;QACpB,CAAC,WAAW,CAAC,CAAC,CAAC,EAAE,WAAW,EAAE,CAAC,CAAC,CAAC,SAAS,CAAC,EAE7C,OAAO,EACL,IAAI,CAAC,CAAC,CAAC,CACL,8BACc,MAAM,EAClB,SAAS,EAAE,WAAW,CACpB,gDAAgD,EAChD,WAAW;YACT,CAAC,CAAC,yBAAyB,CAAC,WAAW,CAAC;YACxC,CAAC,CAAC,SAAS,CACd,YAEA,IAAI,GACA,CACR,CAAC,CAAC,CAAC,SAAS,aAGf,YAAG,SAAS,EAAC,2DAA2D,YACrE,KAAK,GACJ,EACH,QAAQ,IACJ,CACR,CAAA"}
|
|
@@ -54,7 +54,7 @@ export const SortableTableHeader = ({ children, className, direction, onSort, })
|
|
|
54
54
|
// uppercased and letterspaced, which strips the word shapes
|
|
55
55
|
// readers use at small sizes. A column header is the label
|
|
56
56
|
// for everything under it, so it is content.
|
|
57
|
-
"flex w-full cursor-pointer items-center gap-1.5 bg-transparent px-3 py-2 text-start font-medium text-content-secondary text-sm uppercase tracking-wide transition-colors duration-(--duration-fast) ease-standard", "hover:text-content-primary", FOCUS_RING_CLASS), onClick: () => {
|
|
57
|
+
"flex w-full cursor-pointer items-center gap-1.5 bg-transparent px-3 py-2 text-start wrap-normal font-medium text-content-secondary text-sm uppercase tracking-wide transition-colors duration-(--duration-fast) ease-standard", "hover:text-content-primary", FOCUS_RING_CLASS), onClick: () => {
|
|
58
58
|
onSort(direction === undefined
|
|
59
59
|
? "ascending"
|
|
60
60
|
: NEXT_DIRECTION[direction]);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SortableTableHeader.js","sourceRoot":"","sources":["../../src/SortableTableHeader/SortableTableHeader.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAA;AACrD,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAA;AAmB/C,MAAM,cAAc,GAClB;IACE,SAAS,EAAE,YAAY;IACvB,UAAU,EAAE,WAAW;CACxB,CAAA;AAEH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA0CG;AACH,MAAM,CAAC,MAAM,mBAAmB,GAAG,CAAC,EAClC,QAAQ,EACR,SAAS,EACT,SAAS,EACT,MAAM,GACmB,EAAa,EAAE,CAAC,CACzC,0BAMa,SAAS,IAAI,MAAM,EAC9B,SAAS,EAAE,WAAW,CACpB,8CAA8C,EAC9C,SAAS,CACV,EACD,KAAK,EAAC,KAAK,YAEX,kBACE,SAAS,EAAE,WAAW;QACpB,uDAAuD;QACvD,yDAAyD;QACzD,4DAA4D;QAC5D,2DAA2D;QAC3D,6CAA6C;QAC7C,
|
|
1
|
+
{"version":3,"file":"SortableTableHeader.js","sourceRoot":"","sources":["../../src/SortableTableHeader/SortableTableHeader.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAA;AACrD,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAA;AAmB/C,MAAM,cAAc,GAClB;IACE,SAAS,EAAE,YAAY;IACvB,UAAU,EAAE,WAAW;CACxB,CAAA;AAEH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA0CG;AACH,MAAM,CAAC,MAAM,mBAAmB,GAAG,CAAC,EAClC,QAAQ,EACR,SAAS,EACT,SAAS,EACT,MAAM,GACmB,EAAa,EAAE,CAAC,CACzC,0BAMa,SAAS,IAAI,MAAM,EAC9B,SAAS,EAAE,WAAW,CACpB,8CAA8C,EAC9C,SAAS,CACV,EACD,KAAK,EAAC,KAAK,YAEX,kBACE,SAAS,EAAE,WAAW;QACpB,uDAAuD;QACvD,yDAAyD;QACzD,4DAA4D;QAC5D,2DAA2D;QAC3D,6CAA6C;QAC7C,+NAA+N,EAC/N,4BAA4B,EAC5B,gBAAgB,CACjB,EACD,OAAO,EAAE,GAAG,EAAE;YACZ,MAAM,CACJ,SAAS,KAAK,SAAS;gBACrB,CAAC,CAAC,WAAW;gBACb,CAAC,CAAC,cAAc,CAAC,SAAS,CAAC,CAC9B,CAAA;QACH,CAAC,EACD,IAAI,EAAC,QAAQ,aAEZ,QAAQ,EAET,6BAIc,MAAM,EAClB,SAAS,EAAE,WAAW,CACpB,2FAA2F,EAC3F,SAAS,KAAK,SAAS,IAAI,WAAW,EACtC,SAAS,KAAK,YAAY,IAAI,YAAY,CAC3C,EACD,IAAI,EAAC,MAAM,EACX,SAAS,EAAE,KAAK,EAChB,MAAM,EAAC,cAAc,EACrB,aAAa,EAAC,OAAO,EACrB,cAAc,EAAC,OAAO,EACtB,WAAW,EAAE,CAAC,EACd,OAAO,EAAC,WAAW,EACnB,KAAK,EAAC,4BAA4B,YAElC,eAAM,CAAC,EAAC,eAAe,GAAG,GACtB,IACC,GACN,CACN,CAAA"}
|
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
import type { ReactNode } from "react";
|
|
2
|
+
import type { SlotProps } from "../slotProps.ts";
|
|
3
|
+
export type HtmlEditorProps = SlotProps & {
|
|
4
|
+
className?: string;
|
|
5
|
+
/** Initial only. Remount with a key to switch documents. */
|
|
6
|
+
defaultValue?: string;
|
|
7
|
+
icons?: Readonly<Record<string, ReactNode>>;
|
|
8
|
+
isDisabled?: boolean;
|
|
9
|
+
isReadOnly?: boolean;
|
|
10
|
+
/** Omit inside a Field, which supplies the real label. */
|
|
11
|
+
label?: string;
|
|
12
|
+
/** Hidden form control; its original bytes survive until an edit. */
|
|
13
|
+
name?: string;
|
|
14
|
+
onChange?: (value: string) => void;
|
|
15
|
+
toolbarLabel?: string;
|
|
16
|
+
};
|
|
17
|
+
/**
|
|
18
|
+
* A rich editor for records already stored as HTML. Sanitization is
|
|
19
|
+
* a projection for display and editing, not a migration: mounting,
|
|
20
|
+
* selecting, focusing and submitting an untouched form never emit
|
|
21
|
+
* normalized HTML. ProseMirror owns document edits and their undo
|
|
22
|
+
* history; external defaults never replace that document.
|
|
23
|
+
*/
|
|
24
|
+
export declare const HtmlEditor: ({ className, defaultValue, icons, isDisabled, isReadOnly, label, name, onChange, toolbarLabel, ...slotProps }: HtmlEditorProps) => ReactNode;
|
|
25
|
+
//# sourceMappingURL=HtmlEditor.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"HtmlEditor.d.ts","sourceRoot":"","sources":["../../src/htmlEditor/HtmlEditor.tsx"],"names":[],"mappings":"AASA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAWtC,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAA;AAOhD,MAAM,MAAM,eAAe,GAAG,SAAS,GAAG;IACxC,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,4DAA4D;IAC5D,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,KAAK,CAAC,EAAE,QAAQ,CAAC,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,CAAC,CAAA;IAC3C,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,0DAA0D;IAC1D,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,qEAAqE;IACrE,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IAClC,YAAY,CAAC,EAAE,MAAM,CAAA;CACtB,CAAA;AAaD;;;;;;GAMG;AACH,eAAO,MAAM,UAAU,GAAI,+GAWxB,eAAe,KAAG,SA4VpB,CAAA"}
|
|
@@ -0,0 +1,231 @@
|
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
import { useUniqueId } from "@charcuterie/logic";
|
|
3
|
+
import Image from "@tiptap/extension-image";
|
|
4
|
+
import TextAlign from "@tiptap/extension-text-align";
|
|
5
|
+
import { Color, TextStyle, } from "@tiptap/extension-text-style";
|
|
6
|
+
import { EditorContent, useEditor } from "@tiptap/react";
|
|
7
|
+
import StarterKit from "@tiptap/starter-kit";
|
|
8
|
+
import { useEffect, useRef, useState } from "react";
|
|
9
|
+
import { Button } from "../Button/Button.js";
|
|
10
|
+
import { Dialog } from "../Dialog/Dialog.js";
|
|
11
|
+
import { Field } from "../Field/Field.js";
|
|
12
|
+
import { FOCUS_RING_CLASS } from "../intentStyles.js";
|
|
13
|
+
import { toSafeImageUrl, toSafeLinkUrl, } from "../safeUrls.js";
|
|
14
|
+
import { Toolbar } from "../Toolbar/Toolbar.js";
|
|
15
|
+
import { toClassName } from "../toClassName.js";
|
|
16
|
+
import { HTML_CONTENT_CLASS } from "./htmlContentStyles.js";
|
|
17
|
+
import { toSafeHtml, toSafeHtmlColour } from "./safeHtml.js";
|
|
18
|
+
const EDITOR_CLASS = toClassName(HTML_CONTENT_CLASS, "min-h-40 rounded-md border border-border-default bg-surface-sunken px-3 py-2", FOCUS_RING_CLASS);
|
|
19
|
+
const INPUT_CLASS = toClassName("w-full min-w-0 rounded-md border border-border-default bg-surface-sunken p-2 text-content-primary", FOCUS_RING_CLASS);
|
|
20
|
+
/**
|
|
21
|
+
* A rich editor for records already stored as HTML. Sanitization is
|
|
22
|
+
* a projection for display and editing, not a migration: mounting,
|
|
23
|
+
* selecting, focusing and submitting an untouched form never emit
|
|
24
|
+
* normalized HTML. ProseMirror owns document edits and their undo
|
|
25
|
+
* history; external defaults never replace that document.
|
|
26
|
+
*/
|
|
27
|
+
export const HtmlEditor = ({ className, defaultValue = "", icons, isDisabled = false, isReadOnly = false, label, name, onChange, toolbarLabel = "HTML formatting", ...slotProps }) => {
|
|
28
|
+
const generatedId = useUniqueId("html-editor");
|
|
29
|
+
const dialogInputRef = useRef(null);
|
|
30
|
+
const id = slotProps.id ?? generatedId;
|
|
31
|
+
const [initialValue] = useState(defaultValue);
|
|
32
|
+
const [formValue, setFormValue] = useState(initialValue);
|
|
33
|
+
const [dialog, setDialog] = useState(null);
|
|
34
|
+
const [error, setError] = useState();
|
|
35
|
+
const editor = useEditor({
|
|
36
|
+
content: toSafeHtml(initialValue),
|
|
37
|
+
editable: !isDisabled && !isReadOnly,
|
|
38
|
+
immediatelyRender: false,
|
|
39
|
+
shouldRerenderOnTransaction: true,
|
|
40
|
+
extensions: [
|
|
41
|
+
StarterKit.configure({
|
|
42
|
+
link: {
|
|
43
|
+
openOnClick: false,
|
|
44
|
+
autolink: false,
|
|
45
|
+
isAllowedUri: (url) => toSafeLinkUrl(url) !== undefined,
|
|
46
|
+
},
|
|
47
|
+
}),
|
|
48
|
+
Image.configure({ allowBase64: true }),
|
|
49
|
+
TextStyle,
|
|
50
|
+
Color,
|
|
51
|
+
TextAlign.configure({
|
|
52
|
+
types: ["heading", "paragraph"],
|
|
53
|
+
alignments: [
|
|
54
|
+
"start",
|
|
55
|
+
"end",
|
|
56
|
+
"left",
|
|
57
|
+
"right",
|
|
58
|
+
"center",
|
|
59
|
+
"justify",
|
|
60
|
+
],
|
|
61
|
+
}),
|
|
62
|
+
],
|
|
63
|
+
editorProps: {
|
|
64
|
+
attributes: {
|
|
65
|
+
id,
|
|
66
|
+
role: "textbox",
|
|
67
|
+
"aria-multiline": "true",
|
|
68
|
+
"aria-label": label ?? "",
|
|
69
|
+
"aria-labelledby": label === undefined && slotProps.id
|
|
70
|
+
? `${slotProps.id}-label`
|
|
71
|
+
: "",
|
|
72
|
+
"aria-describedby": slotProps["aria-describedby"] ?? "",
|
|
73
|
+
"aria-invalid": String(slotProps["aria-invalid"] ?? false),
|
|
74
|
+
"aria-required": String(slotProps["aria-required"] ??
|
|
75
|
+
slotProps.required ??
|
|
76
|
+
false),
|
|
77
|
+
"aria-disabled": String(isDisabled),
|
|
78
|
+
"aria-readonly": String(isReadOnly),
|
|
79
|
+
tabindex: String(isDisabled ? -1 : 0),
|
|
80
|
+
class: EDITOR_CLASS,
|
|
81
|
+
},
|
|
82
|
+
transformPastedHTML: toSafeHtml,
|
|
83
|
+
},
|
|
84
|
+
onUpdate: ({ editor: changedEditor, transaction, }) => {
|
|
85
|
+
if (!transaction.docChanged)
|
|
86
|
+
return;
|
|
87
|
+
const next = toSafeHtml(changedEditor.getHTML());
|
|
88
|
+
setFormValue(next);
|
|
89
|
+
onChange?.(next);
|
|
90
|
+
},
|
|
91
|
+
}, []);
|
|
92
|
+
useEffect(() => {
|
|
93
|
+
editor?.setEditable(!isDisabled && !isReadOnly, false);
|
|
94
|
+
}, [editor, isDisabled, isReadOnly]);
|
|
95
|
+
const hasDisabledActions = isDisabled || isReadOnly || !editor;
|
|
96
|
+
const openDialog = (next) => {
|
|
97
|
+
setError(undefined);
|
|
98
|
+
setDialog(next);
|
|
99
|
+
};
|
|
100
|
+
const toggle = (key, title, onSelect, isPressed) => ({
|
|
101
|
+
key,
|
|
102
|
+
type: "control",
|
|
103
|
+
element: (_jsx(Button, { appearance: "ghost", "aria-pressed": isPressed, iconStart: icons?.[key], isDisabled: hasDisabledActions, onClick: onSelect, children: title })),
|
|
104
|
+
});
|
|
105
|
+
const action = (key, title, onSelect) => ({
|
|
106
|
+
key,
|
|
107
|
+
label: title,
|
|
108
|
+
icon: icons?.[key],
|
|
109
|
+
isDisabled: hasDisabledActions,
|
|
110
|
+
onSelect,
|
|
111
|
+
});
|
|
112
|
+
const closeDialog = () => setDialog(null);
|
|
113
|
+
return (_jsxs("div", { className: toClassName("min-w-0 space-y-2", className), children: [_jsx(Toolbar, { label: toolbarLabel, overflow: "panel", overflowIcon: icons?.overflow, items: [
|
|
114
|
+
toggle("bold", "Bold", () => {
|
|
115
|
+
editor?.chain().focus().toggleBold().run();
|
|
116
|
+
}, editor?.isActive("bold") ?? false),
|
|
117
|
+
toggle("italic", "Italic", () => {
|
|
118
|
+
editor?.chain().focus().toggleItalic().run();
|
|
119
|
+
}, editor?.isActive("italic") ?? false),
|
|
120
|
+
toggle("underline", "Underline", () => {
|
|
121
|
+
editor
|
|
122
|
+
?.chain()
|
|
123
|
+
.focus()
|
|
124
|
+
.toggleUnderline()
|
|
125
|
+
.run();
|
|
126
|
+
}, editor?.isActive("underline") ?? false),
|
|
127
|
+
toggle("bulletList", "Bullet list", () => {
|
|
128
|
+
editor
|
|
129
|
+
?.chain()
|
|
130
|
+
.focus()
|
|
131
|
+
.toggleBulletList()
|
|
132
|
+
.run();
|
|
133
|
+
}, editor?.isActive("bulletList") ?? false),
|
|
134
|
+
toggle("orderedList", "Numbered list", () => {
|
|
135
|
+
editor
|
|
136
|
+
?.chain()
|
|
137
|
+
.focus()
|
|
138
|
+
.toggleOrderedList()
|
|
139
|
+
.run();
|
|
140
|
+
}, editor?.isActive("orderedList") ?? false),
|
|
141
|
+
action("alignStart", "Align start", () => {
|
|
142
|
+
editor
|
|
143
|
+
?.chain()
|
|
144
|
+
.focus()
|
|
145
|
+
.setTextAlign("start")
|
|
146
|
+
.run();
|
|
147
|
+
}),
|
|
148
|
+
action("alignCenter", "Align centre", () => {
|
|
149
|
+
editor
|
|
150
|
+
?.chain()
|
|
151
|
+
.focus()
|
|
152
|
+
.setTextAlign("center")
|
|
153
|
+
.run();
|
|
154
|
+
}),
|
|
155
|
+
action("alignEnd", "Align end", () => {
|
|
156
|
+
editor
|
|
157
|
+
?.chain()
|
|
158
|
+
.focus()
|
|
159
|
+
.setTextAlign("end")
|
|
160
|
+
.run();
|
|
161
|
+
}),
|
|
162
|
+
action("link", "Edit link", () => openDialog("link")),
|
|
163
|
+
action("unlink", "Remove link", () => {
|
|
164
|
+
editor
|
|
165
|
+
?.chain()
|
|
166
|
+
.focus()
|
|
167
|
+
.extendMarkRange("link")
|
|
168
|
+
.unsetLink()
|
|
169
|
+
.run();
|
|
170
|
+
}),
|
|
171
|
+
action("colour", "Text colour", () => openDialog("colour")),
|
|
172
|
+
action("image", "Insert image", () => openDialog("image")),
|
|
173
|
+
action("undo", "Undo", () => {
|
|
174
|
+
editor?.chain().focus().undo().run();
|
|
175
|
+
}),
|
|
176
|
+
action("redo", "Redo", () => {
|
|
177
|
+
editor?.chain().focus().redo().run();
|
|
178
|
+
}),
|
|
179
|
+
] }), _jsx(EditorContent, { editor: editor }), name !== undefined && (_jsx("input", { disabled: isDisabled, name: name, type: "hidden", value: formValue })), _jsx(Dialog, { initialFocus: dialogInputRef, heading: dialog === "image"
|
|
180
|
+
? "Insert image"
|
|
181
|
+
: dialog === "colour"
|
|
182
|
+
? "Text colour"
|
|
183
|
+
: "Edit link", isVisible: dialog !== null, onClose: closeDialog, children: _jsxs("form", { className: "space-y-4", onSubmit: (event) => {
|
|
184
|
+
event.preventDefault();
|
|
185
|
+
if (!editor || hasDisabledActions)
|
|
186
|
+
return;
|
|
187
|
+
const data = new FormData(event.currentTarget);
|
|
188
|
+
const value = String(data.get("value") ?? "").trim();
|
|
189
|
+
if (dialog === "colour") {
|
|
190
|
+
const colour = toSafeHtmlColour(value);
|
|
191
|
+
if (!colour) {
|
|
192
|
+
setError("Enter a colour name, hex, RGB or HSL value.");
|
|
193
|
+
return;
|
|
194
|
+
}
|
|
195
|
+
editor.chain().focus().setColor(colour).run();
|
|
196
|
+
}
|
|
197
|
+
else if (dialog === "image") {
|
|
198
|
+
const src = toSafeImageUrl(value);
|
|
199
|
+
if (!src) {
|
|
200
|
+
setError("Enter a safe image URL.");
|
|
201
|
+
return;
|
|
202
|
+
}
|
|
203
|
+
editor
|
|
204
|
+
.chain()
|
|
205
|
+
.focus()
|
|
206
|
+
.setImage({
|
|
207
|
+
src,
|
|
208
|
+
alt: String(data.get("alt") ?? ""),
|
|
209
|
+
})
|
|
210
|
+
.run();
|
|
211
|
+
}
|
|
212
|
+
else {
|
|
213
|
+
const href = toSafeLinkUrl(value);
|
|
214
|
+
if (!href) {
|
|
215
|
+
setError("Enter a safe link URL.");
|
|
216
|
+
return;
|
|
217
|
+
}
|
|
218
|
+
editor
|
|
219
|
+
.chain()
|
|
220
|
+
.focus()
|
|
221
|
+
.extendMarkRange("link")
|
|
222
|
+
.setLink({ href })
|
|
223
|
+
.run();
|
|
224
|
+
}
|
|
225
|
+
closeDialog();
|
|
226
|
+
}, children: [_jsx(Field, { error: error, label: dialog === "colour" ? "Colour" : "URL", isRequired: true, children: _jsx("input", { className: INPUT_CLASS, defaultValue: dialog === "link"
|
|
227
|
+
? String(editor?.getAttributes("link").href ??
|
|
228
|
+
"")
|
|
229
|
+
: "", name: "value", ref: dialogInputRef, required: true }) }), dialog === "image" && (_jsx(Field, { label: "Image description", children: _jsx("input", { className: INPUT_CLASS, name: "alt" }) })), _jsxs("div", { className: "flex flex-wrap gap-2", children: [_jsx(Button, { isDisabled: hasDisabledActions, type: "submit", children: "Apply" }), _jsx(Button, { appearance: "outline", onClick: closeDialog, children: "Cancel" })] })] }, dialog) })] }));
|
|
230
|
+
};
|
|
231
|
+
//# sourceMappingURL=HtmlEditor.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"HtmlEditor.js","sourceRoot":"","sources":["../../src/htmlEditor/HtmlEditor.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,oBAAoB,CAAA;AAChD,OAAO,KAAK,MAAM,yBAAyB,CAAA;AAC3C,OAAO,SAAS,MAAM,8BAA8B,CAAA;AACpD,OAAO,EACL,KAAK,EACL,SAAS,GACV,MAAM,8BAA8B,CAAA;AACrC,OAAO,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,eAAe,CAAA;AACxD,OAAO,UAAU,MAAM,qBAAqB,CAAA;AAE5C,OAAO,EAAE,SAAS,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AAEnD,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAsB,CAAA;AAC7C,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAsB,CAAA;AAC7C,OAAO,EAAE,KAAK,EAAE,MAAM,mBAAoB,CAAA;AAC1C,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAA;AACrD,OAAO,EACL,cAAc,EACd,aAAa,GACd,MAAM,gBAAgB,CAAA;AAGvB,OAAO,EAAE,OAAO,EAAE,MAAM,uBAAwB,CAAA;AAChD,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAA;AAC/C,OAAO,EAAE,kBAAkB,EAAE,MAAM,wBAAwB,CAAA;AAC3D,OAAO,EAAE,UAAU,EAAE,gBAAgB,EAAE,MAAM,eAAe,CAAA;AAiB5D,MAAM,YAAY,GAAG,WAAW,CAC9B,kBAAkB,EAClB,8EAA8E,EAC9E,gBAAgB,CACjB,CAAA;AAED,MAAM,WAAW,GAAG,WAAW,CAC7B,mGAAmG,EACnG,gBAAgB,CACjB,CAAA;AAED;;;;;;GAMG;AACH,MAAM,CAAC,MAAM,UAAU,GAAG,CAAC,EACzB,SAAS,EACT,YAAY,GAAG,EAAE,EACjB,KAAK,EACL,UAAU,GAAG,KAAK,EAClB,UAAU,GAAG,KAAK,EAClB,KAAK,EACL,IAAI,EACJ,QAAQ,EACR,YAAY,GAAG,iBAAiB,EAChC,GAAG,SAAS,EACI,EAAa,EAAE;IAC/B,MAAM,WAAW,GAAG,WAAW,CAAC,aAAa,CAAC,CAAA;IAC9C,MAAM,cAAc,GAAG,MAAM,CAAmB,IAAI,CAAC,CAAA;IACrD,MAAM,EAAE,GAAG,SAAS,CAAC,EAAE,IAAI,WAAW,CAAA;IACtC,MAAM,CAAC,YAAY,CAAC,GAAG,QAAQ,CAAC,YAAY,CAAC,CAAA;IAC7C,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,QAAQ,CAAC,YAAY,CAAC,CAAA;IACxD,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,QAAQ,CAElC,IAAI,CAAC,CAAA;IACP,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,EAAsB,CAAA;IACxD,MAAM,MAAM,GAAG,SAAS,CACtB;QACE,OAAO,EAAE,UAAU,CAAC,YAAY,CAAC;QACjC,QAAQ,EAAE,CAAC,UAAU,IAAI,CAAC,UAAU;QACpC,iBAAiB,EAAE,KAAK;QACxB,2BAA2B,EAAE,IAAI;QACjC,UAAU,EAAE;YACV,UAAU,CAAC,SAAS,CAAC;gBACnB,IAAI,EAAE;oBACJ,WAAW,EAAE,KAAK;oBAClB,QAAQ,EAAE,KAAK;oBACf,YAAY,EAAE,CAAC,GAAG,EAAE,EAAE,CACpB,aAAa,CAAC,GAAG,CAAC,KAAK,SAAS;iBACnC;aACF,CAAC;YACF,KAAK,CAAC,SAAS,CAAC,EAAE,WAAW,EAAE,IAAI,EAAE,CAAC;YACtC,SAAS;YACT,KAAK;YACL,SAAS,CAAC,SAAS,CAAC;gBAClB,KAAK,EAAE,CAAC,SAAS,EAAE,WAAW,CAAC;gBAC/B,UAAU,EAAE;oBACV,OAAO;oBACP,KAAK;oBACL,MAAM;oBACN,OAAO;oBACP,QAAQ;oBACR,SAAS;iBACV;aACF,CAAC;SACH;QACD,WAAW,EAAE;YACX,UAAU,EAAE;gBACV,EAAE;gBACF,IAAI,EAAE,SAAS;gBACf,gBAAgB,EAAE,MAAM;gBACxB,YAAY,EAAE,KAAK,IAAI,EAAE;gBACzB,iBAAiB,EACf,KAAK,KAAK,SAAS,IAAI,SAAS,CAAC,EAAE;oBACjC,CAAC,CAAC,GAAG,SAAS,CAAC,EAAE,QAAQ;oBACzB,CAAC,CAAC,EAAE;gBACR,kBAAkB,EAChB,SAAS,CAAC,kBAAkB,CAAC,IAAI,EAAE;gBACrC,cAAc,EAAE,MAAM,CACpB,SAAS,CAAC,cAAc,CAAC,IAAI,KAAK,CACnC;gBACD,eAAe,EAAE,MAAM,CACrB,SAAS,CAAC,eAAe,CAAC;oBACxB,SAAS,CAAC,QAAQ;oBAClB,KAAK,CACR;gBACD,eAAe,EAAE,MAAM,CAAC,UAAU,CAAC;gBACnC,eAAe,EAAE,MAAM,CAAC,UAAU,CAAC;gBACnC,QAAQ,EAAE,MAAM,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;gBACrC,KAAK,EAAE,YAAY;aACpB;YACD,mBAAmB,EAAE,UAAU;SAChC;QACD,QAAQ,EAAE,CAAC,EACT,MAAM,EAAE,aAAa,EACrB,WAAW,GACZ,EAAE,EAAE;YACH,IAAI,CAAC,WAAW,CAAC,UAAU;gBAAE,OAAM;YACnC,MAAM,IAAI,GAAG,UAAU,CAAC,aAAa,CAAC,OAAO,EAAE,CAAC,CAAA;YAChD,YAAY,CAAC,IAAI,CAAC,CAAA;YAClB,QAAQ,EAAE,CAAC,IAAI,CAAC,CAAA;QAClB,CAAC;KACF,EACD,EAAE,CACH,CAAA;IAED,SAAS,CAAC,GAAG,EAAE;QACb,MAAM,EAAE,WAAW,CAAC,CAAC,UAAU,IAAI,CAAC,UAAU,EAAE,KAAK,CAAC,CAAA;IACxD,CAAC,EAAE,CAAC,MAAM,EAAE,UAAU,EAAE,UAAU,CAAC,CAAC,CAAA;IAEpC,MAAM,kBAAkB,GACtB,UAAU,IAAI,UAAU,IAAI,CAAC,MAAM,CAAA;IACrC,MAAM,UAAU,GAAG,CACjB,IAAiC,EACjC,EAAE;QACF,QAAQ,CAAC,SAAS,CAAC,CAAA;QACnB,SAAS,CAAC,IAAI,CAAC,CAAA;IACjB,CAAC,CAAA;IACD,MAAM,MAAM,GAAG,CACb,GAAW,EACX,KAAa,EACb,QAAoB,EACpB,SAAkB,EACL,EAAE,CAAC,CAAC;QACjB,GAAG;QACH,IAAI,EAAE,SAAS;QACf,OAAO,EAAE,CACP,KAAC,MAAM,IACL,UAAU,EAAC,OAAO,kBACJ,SAAS,EACvB,SAAS,EAAE,KAAK,EAAE,CAAC,GAAG,CAAC,EACvB,UAAU,EAAE,kBAAkB,EAC9B,OAAO,EAAE,QAAQ,YAEhB,KAAK,GACC,CACV;KACF,CAAC,CAAA;IACF,MAAM,MAAM,GAAG,CACb,GAAW,EACX,KAAa,EACb,QAAoB,EACP,EAAE,CAAC,CAAC;QACjB,GAAG;QACH,KAAK,EAAE,KAAK;QACZ,IAAI,EAAE,KAAK,EAAE,CAAC,GAAG,CAAC;QAClB,UAAU,EAAE,kBAAkB;QAC9B,QAAQ;KACT,CAAC,CAAA;IACF,MAAM,WAAW,GAAG,GAAG,EAAE,CAAC,SAAS,CAAC,IAAI,CAAC,CAAA;IAEzC,OAAO,CACL,eACE,SAAS,EAAE,WAAW,CACpB,mBAAmB,EACnB,SAAS,CACV,aAED,KAAC,OAAO,IACN,KAAK,EAAE,YAAY,EACnB,QAAQ,EAAC,OAAO,EAChB,YAAY,EAAE,KAAK,EAAE,QAAQ,EAC7B,KAAK,EAAE;oBACL,MAAM,CACJ,MAAM,EACN,MAAM,EACN,GAAG,EAAE;wBACH,MAAM,EAAE,KAAK,EAAE,CAAC,KAAK,EAAE,CAAC,UAAU,EAAE,CAAC,GAAG,EAAE,CAAA;oBAC5C,CAAC,EACD,MAAM,EAAE,QAAQ,CAAC,MAAM,CAAC,IAAI,KAAK,CAClC;oBACD,MAAM,CACJ,QAAQ,EACR,QAAQ,EACR,GAAG,EAAE;wBACH,MAAM,EAAE,KAAK,EAAE,CAAC,KAAK,EAAE,CAAC,YAAY,EAAE,CAAC,GAAG,EAAE,CAAA;oBAC9C,CAAC,EACD,MAAM,EAAE,QAAQ,CAAC,QAAQ,CAAC,IAAI,KAAK,CACpC;oBACD,MAAM,CACJ,WAAW,EACX,WAAW,EACX,GAAG,EAAE;wBACH,MAAM;4BACJ,EAAE,KAAK,EAAE;6BACR,KAAK,EAAE;6BACP,eAAe,EAAE;6BACjB,GAAG,EAAE,CAAA;oBACV,CAAC,EACD,MAAM,EAAE,QAAQ,CAAC,WAAW,CAAC,IAAI,KAAK,CACvC;oBACD,MAAM,CACJ,YAAY,EACZ,aAAa,EACb,GAAG,EAAE;wBACH,MAAM;4BACJ,EAAE,KAAK,EAAE;6BACR,KAAK,EAAE;6BACP,gBAAgB,EAAE;6BAClB,GAAG,EAAE,CAAA;oBACV,CAAC,EACD,MAAM,EAAE,QAAQ,CAAC,YAAY,CAAC,IAAI,KAAK,CACxC;oBACD,MAAM,CACJ,aAAa,EACb,eAAe,EACf,GAAG,EAAE;wBACH,MAAM;4BACJ,EAAE,KAAK,EAAE;6BACR,KAAK,EAAE;6BACP,iBAAiB,EAAE;6BACnB,GAAG,EAAE,CAAA;oBACV,CAAC,EACD,MAAM,EAAE,QAAQ,CAAC,aAAa,CAAC,IAAI,KAAK,CACzC;oBACD,MAAM,CAAC,YAAY,EAAE,aAAa,EAAE,GAAG,EAAE;wBACvC,MAAM;4BACJ,EAAE,KAAK,EAAE;6BACR,KAAK,EAAE;6BACP,YAAY,CAAC,OAAO,CAAC;6BACrB,GAAG,EAAE,CAAA;oBACV,CAAC,CAAC;oBACF,MAAM,CAAC,aAAa,EAAE,cAAc,EAAE,GAAG,EAAE;wBACzC,MAAM;4BACJ,EAAE,KAAK,EAAE;6BACR,KAAK,EAAE;6BACP,YAAY,CAAC,QAAQ,CAAC;6BACtB,GAAG,EAAE,CAAA;oBACV,CAAC,CAAC;oBACF,MAAM,CAAC,UAAU,EAAE,WAAW,EAAE,GAAG,EAAE;wBACnC,MAAM;4BACJ,EAAE,KAAK,EAAE;6BACR,KAAK,EAAE;6BACP,YAAY,CAAC,KAAK,CAAC;6BACnB,GAAG,EAAE,CAAA;oBACV,CAAC,CAAC;oBACF,MAAM,CAAC,MAAM,EAAE,WAAW,EAAE,GAAG,EAAE,CAC/B,UAAU,CAAC,MAAM,CAAC,CACnB;oBACD,MAAM,CAAC,QAAQ,EAAE,aAAa,EAAE,GAAG,EAAE;wBACnC,MAAM;4BACJ,EAAE,KAAK,EAAE;6BACR,KAAK,EAAE;6BACP,eAAe,CAAC,MAAM,CAAC;6BACvB,SAAS,EAAE;6BACX,GAAG,EAAE,CAAA;oBACV,CAAC,CAAC;oBACF,MAAM,CAAC,QAAQ,EAAE,aAAa,EAAE,GAAG,EAAE,CACnC,UAAU,CAAC,QAAQ,CAAC,CACrB;oBACD,MAAM,CAAC,OAAO,EAAE,cAAc,EAAE,GAAG,EAAE,CACnC,UAAU,CAAC,OAAO,CAAC,CACpB;oBACD,MAAM,CAAC,MAAM,EAAE,MAAM,EAAE,GAAG,EAAE;wBAC1B,MAAM,EAAE,KAAK,EAAE,CAAC,KAAK,EAAE,CAAC,IAAI,EAAE,CAAC,GAAG,EAAE,CAAA;oBACtC,CAAC,CAAC;oBACF,MAAM,CAAC,MAAM,EAAE,MAAM,EAAE,GAAG,EAAE;wBAC1B,MAAM,EAAE,KAAK,EAAE,CAAC,KAAK,EAAE,CAAC,IAAI,EAAE,CAAC,GAAG,EAAE,CAAA;oBACtC,CAAC,CAAC;iBACH,GACD,EACF,KAAC,aAAa,IAAC,MAAM,EAAE,MAAM,GAAI,EAChC,IAAI,KAAK,SAAS,IAAI,CACrB,gBACE,QAAQ,EAAE,UAAU,EACpB,IAAI,EAAE,IAAI,EACV,IAAI,EAAC,QAAQ,EACb,KAAK,EAAE,SAAS,GAChB,CACH,EACD,KAAC,MAAM,IACL,YAAY,EAAE,cAAc,EAC5B,OAAO,EACL,MAAM,KAAK,OAAO;oBAChB,CAAC,CAAC,cAAc;oBAChB,CAAC,CAAC,MAAM,KAAK,QAAQ;wBACnB,CAAC,CAAC,aAAa;wBACf,CAAC,CAAC,WAAW,EAEnB,SAAS,EAAE,MAAM,KAAK,IAAI,EAC1B,OAAO,EAAE,WAAW,YAEpB,gBAEE,SAAS,EAAC,WAAW,EACrB,QAAQ,EAAE,CAAC,KAAK,EAAE,EAAE;wBAClB,KAAK,CAAC,cAAc,EAAE,CAAA;wBACtB,IAAI,CAAC,MAAM,IAAI,kBAAkB;4BAAE,OAAM;wBACzC,MAAM,IAAI,GAAG,IAAI,QAAQ,CAAC,KAAK,CAAC,aAAa,CAAC,CAAA;wBAC9C,MAAM,KAAK,GAAG,MAAM,CAClB,IAAI,CAAC,GAAG,CAAC,OAAO,CAAC,IAAI,EAAE,CACxB,CAAC,IAAI,EAAE,CAAA;wBACR,IAAI,MAAM,KAAK,QAAQ,EAAE,CAAC;4BACxB,MAAM,MAAM,GAAG,gBAAgB,CAAC,KAAK,CAAC,CAAA;4BACtC,IAAI,CAAC,MAAM,EAAE,CAAC;gCACZ,QAAQ,CACN,6CAA6C,CAC9C,CAAA;gCACD,OAAM;4BACR,CAAC;4BACD,MAAM,CAAC,KAAK,EAAE,CAAC,KAAK,EAAE,CAAC,QAAQ,CAAC,MAAM,CAAC,CAAC,GAAG,EAAE,CAAA;wBAC/C,CAAC;6BAAM,IAAI,MAAM,KAAK,OAAO,EAAE,CAAC;4BAC9B,MAAM,GAAG,GAAG,cAAc,CAAC,KAAK,CAAC,CAAA;4BACjC,IAAI,CAAC,GAAG,EAAE,CAAC;gCACT,QAAQ,CAAC,yBAAyB,CAAC,CAAA;gCACnC,OAAM;4BACR,CAAC;4BACD,MAAM;iCACH,KAAK,EAAE;iCACP,KAAK,EAAE;iCACP,QAAQ,CAAC;gCACR,GAAG;gCACH,GAAG,EAAE,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC,KAAK,CAAC,IAAI,EAAE,CAAC;6BACnC,CAAC;iCACD,GAAG,EAAE,CAAA;wBACV,CAAC;6BAAM,CAAC;4BACN,MAAM,IAAI,GAAG,aAAa,CAAC,KAAK,CAAC,CAAA;4BACjC,IAAI,CAAC,IAAI,EAAE,CAAC;gCACV,QAAQ,CAAC,wBAAwB,CAAC,CAAA;gCAClC,OAAM;4BACR,CAAC;4BACD,MAAM;iCACH,KAAK,EAAE;iCACP,KAAK,EAAE;iCACP,eAAe,CAAC,MAAM,CAAC;iCACvB,OAAO,CAAC,EAAE,IAAI,EAAE,CAAC;iCACjB,GAAG,EAAE,CAAA;wBACV,CAAC;wBACD,WAAW,EAAE,CAAA;oBACf,CAAC,aAED,KAAC,KAAK,IACJ,KAAK,EAAE,KAAK,EACZ,KAAK,EAAE,MAAM,KAAK,QAAQ,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,KAAK,EAC7C,UAAU,kBAEV,gBACE,SAAS,EAAE,WAAW,EACtB,YAAY,EACV,MAAM,KAAK,MAAM;oCACf,CAAC,CAAC,MAAM,CACJ,MAAM,EAAE,aAAa,CAAC,MAAM,CAAC,CAAC,IAAI;wCAChC,EAAE,CACL;oCACH,CAAC,CAAC,EAAE,EAER,IAAI,EAAC,OAAO,EACZ,GAAG,EAAE,cAAc,EACnB,QAAQ,SACR,GACI,EACP,MAAM,KAAK,OAAO,IAAI,CACrB,KAAC,KAAK,IAAC,KAAK,EAAC,mBAAmB,YAC9B,gBAAO,SAAS,EAAE,WAAW,EAAE,IAAI,EAAC,KAAK,GAAG,GACtC,CACT,EACD,eAAK,SAAS,EAAC,sBAAsB,aACnC,KAAC,MAAM,IACL,UAAU,EAAE,kBAAkB,EAC9B,IAAI,EAAC,QAAQ,sBAGN,EACT,KAAC,MAAM,IACL,UAAU,EAAC,SAAS,EACpB,OAAO,EAAE,WAAW,uBAGb,IACL,KAtFD,MAAM,CAuFN,GACA,IACL,CACP,CAAA;AACH,CAAC,CAAA"}
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import type { ReactNode } from "react";
|
|
2
|
+
export type HtmlViewProps = {
|
|
3
|
+
className?: string;
|
|
4
|
+
/** The readable document's accessible name. */
|
|
5
|
+
label: string;
|
|
6
|
+
value: string;
|
|
7
|
+
};
|
|
8
|
+
/** HTML is a distinct stored format. No editor and no innerHTML. */
|
|
9
|
+
export declare const HtmlView: ({ className, label, value, }: HtmlViewProps) => ReactNode;
|
|
10
|
+
//# sourceMappingURL=HtmlView.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"HtmlView.d.ts","sourceRoot":"","sources":["../../src/htmlEditor/HtmlView.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAiB,SAAS,EAAE,MAAM,OAAO,CAAA;AASrD,MAAM,MAAM,aAAa,GAAG;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,+CAA+C;IAC/C,KAAK,EAAE,MAAM,CAAA;IACb,KAAK,EAAE,MAAM,CAAA;CACd,CAAA;AA2CD,oEAAoE;AACpE,eAAO,MAAM,QAAQ,GAAI,8BAItB,aAAa,KAAG,SAQlB,CAAA"}
|
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
+
import { createElement } from "react";
|
|
3
|
+
import { TextLink } from "../TextLink/TextLink.js";
|
|
4
|
+
import { toClassName } from "../toClassName.js";
|
|
5
|
+
import { HTML_CONTENT_CLASS } from "./htmlContentStyles.js";
|
|
6
|
+
import { toHtmlContent } from "./safeHtml.js";
|
|
7
|
+
const toStyle = (value) => Object.fromEntries((value ?? "")
|
|
8
|
+
.split(";")
|
|
9
|
+
.filter(Boolean)
|
|
10
|
+
.map((declaration) => {
|
|
11
|
+
const [name, content] = declaration.split(":");
|
|
12
|
+
return [
|
|
13
|
+
name === "text-align" ? "textAlign" : name,
|
|
14
|
+
content,
|
|
15
|
+
];
|
|
16
|
+
}));
|
|
17
|
+
const renderNode = (node, key) => {
|
|
18
|
+
if ("text" in node)
|
|
19
|
+
return node.text;
|
|
20
|
+
const { style, ...attributes } = node.attributes;
|
|
21
|
+
const children = node.children.map(renderNode);
|
|
22
|
+
if (node.tag === "a" && attributes.href !== undefined)
|
|
23
|
+
return (_jsx(TextLink, { href: attributes.href, style: toStyle(style), title: attributes.title, children: children }, key));
|
|
24
|
+
return createElement(node.tag, { ...attributes, key, style: toStyle(style) }, children.length ? children : undefined);
|
|
25
|
+
};
|
|
26
|
+
/** HTML is a distinct stored format. No editor and no innerHTML. */
|
|
27
|
+
export const HtmlView = ({ className, label, value, }) => (_jsx("div", { "aria-label": label, className: toClassName(HTML_CONTENT_CLASS, className), role: "document", children: toHtmlContent(value).map(renderNode) }));
|
|
28
|
+
//# sourceMappingURL=HtmlView.js.map
|