@crisp-ui-kit/crisp 0.23.3 → 0.23.4
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/cjs/product/recordstable/recordstable.js +7 -1
- package/dist/cjs/product/recordstable/recordstable.recipe.js +4 -1
- package/dist/esm/product/recordstable/recordstable.js +7 -1
- package/dist/esm/product/recordstable/recordstable.recipe.js +4 -1
- package/dist/recordstable.css +4 -1
- package/dist/styles.css +4 -1
- package/package.json +1 -1
|
@@ -1045,7 +1045,13 @@ function RecordsTable({ labels, columns: columnsProp = exports.defaultColumns, r
|
|
|
1045
1045
|
const canEdit = canEditCol(col);
|
|
1046
1046
|
const isPicker = isPickerCol(col);
|
|
1047
1047
|
const isEditing = editing?.id === row.id && editing?.key === col.key;
|
|
1048
|
-
|
|
1048
|
+
// The first column is the record's NAME — it is what the row
|
|
1049
|
+
// is, not a value the row has. As a `<th scope="row">` a
|
|
1050
|
+
// screen reader reads "Google, Employees, 182,000" across the
|
|
1051
|
+
// row instead of a bare "182,000", and the same header is
|
|
1052
|
+
// repeated in every cell's context (#231).
|
|
1053
|
+
const Cell = (i === 0 ? "th" : "td");
|
|
1054
|
+
return ((0, jsx_runtime_1.jsxs)(Cell, { scope: i === 0 ? "row" : undefined, className: `recordstable-td${i === 0 ? " recordstable-col-entity" : ""}${canEdit ? " recordstable-td--editable" : ""}${isPicker ? " recordstable-td--picker" : ""}`, "data-enriched": col.enriched ? "" : undefined, "data-selected": selCell?.id === row.id && selCell?.key === col.key
|
|
1049
1055
|
? ""
|
|
1050
1056
|
: undefined, onClick: () => {
|
|
1051
1057
|
if (isPicker)
|
|
@@ -56,7 +56,10 @@ ${(0, tabletoolbar_chrome_1.toolbarChromeBody)("recordstable")}
|
|
|
56
56
|
& .recordstable-addcol button:hover { background: ${tokens_1.contract.bgRaised}; color: ${tokens_1.contract.fgPrimary}; }
|
|
57
57
|
|
|
58
58
|
/* cells */
|
|
59
|
-
|
|
59
|
+
/* font-weight is explicit because the first cell of each row is a
|
|
60
|
+
th[scope=row] — the record's name is what the row IS — and a th
|
|
61
|
+
defaults to bold. Measured before the change and unchanged after: 400. */
|
|
62
|
+
& .recordstable-td { font-size: ${tokens_1.contract.text.lg}; font-weight: ${tokens_1.contract.weight.regular}; color: ${tokens_1.contract.fgPrimary}; background: ${tokens_1.contract.bgSurface}; cursor: default; }
|
|
60
63
|
& .recordstable-td--editable { cursor: text; }
|
|
61
64
|
/* keyboard/click cell selection (spreadsheet-style) */
|
|
62
65
|
& .recordstable-td[data-selected] { outline: 2px solid ${tokens_1.contract.bgBrandSolid}; outline-offset: -2px; border-radius: ${tokens_1.contract.radius.sm}; z-index: 3; }
|
|
@@ -1005,7 +1005,13 @@ export function RecordsTable({ labels, columns: columnsProp = defaultColumns, ro
|
|
|
1005
1005
|
const canEdit = canEditCol(col);
|
|
1006
1006
|
const isPicker = isPickerCol(col);
|
|
1007
1007
|
const isEditing = editing?.id === row.id && editing?.key === col.key;
|
|
1008
|
-
|
|
1008
|
+
// The first column is the record's NAME — it is what the row
|
|
1009
|
+
// is, not a value the row has. As a `<th scope="row">` a
|
|
1010
|
+
// screen reader reads "Google, Employees, 182,000" across the
|
|
1011
|
+
// row instead of a bare "182,000", and the same header is
|
|
1012
|
+
// repeated in every cell's context (#231).
|
|
1013
|
+
const Cell = (i === 0 ? "th" : "td");
|
|
1014
|
+
return (_jsxs(Cell, { scope: i === 0 ? "row" : undefined, className: `recordstable-td${i === 0 ? " recordstable-col-entity" : ""}${canEdit ? " recordstable-td--editable" : ""}${isPicker ? " recordstable-td--picker" : ""}`, "data-enriched": col.enriched ? "" : undefined, "data-selected": selCell?.id === row.id && selCell?.key === col.key
|
|
1009
1015
|
? ""
|
|
1010
1016
|
: undefined, onClick: () => {
|
|
1011
1017
|
if (isPicker)
|
|
@@ -53,7 +53,10 @@ ${toolbarChromeBody("recordstable")}
|
|
|
53
53
|
& .recordstable-addcol button:hover { background: ${c.bgRaised}; color: ${c.fgPrimary}; }
|
|
54
54
|
|
|
55
55
|
/* cells */
|
|
56
|
-
|
|
56
|
+
/* font-weight is explicit because the first cell of each row is a
|
|
57
|
+
th[scope=row] — the record's name is what the row IS — and a th
|
|
58
|
+
defaults to bold. Measured before the change and unchanged after: 400. */
|
|
59
|
+
& .recordstable-td { font-size: ${c.text.lg}; font-weight: ${c.weight.regular}; color: ${c.fgPrimary}; background: ${c.bgSurface}; cursor: default; }
|
|
57
60
|
& .recordstable-td--editable { cursor: text; }
|
|
58
61
|
/* keyboard/click cell selection (spreadsheet-style) */
|
|
59
62
|
& .recordstable-td[data-selected] { outline: 2px solid ${c.bgBrandSolid}; outline-offset: -2px; border-radius: ${c.radius.sm}; z-index: 3; }
|
package/dist/recordstable.css
CHANGED
|
@@ -101,7 +101,10 @@
|
|
|
101
101
|
& .recordstable-addcol button:hover { background: var(--bg-raised); color: var(--fg-primary); }
|
|
102
102
|
|
|
103
103
|
/* cells */
|
|
104
|
-
|
|
104
|
+
/* font-weight is explicit because the first cell of each row is a
|
|
105
|
+
th[scope=row] — the record's name is what the row IS — and a th
|
|
106
|
+
defaults to bold. Measured before the change and unchanged after: 400. */
|
|
107
|
+
& .recordstable-td { font-size: var(--text-lg); font-weight: var(--weight-regular); color: var(--fg-primary); background: var(--bg-surface); cursor: default; }
|
|
105
108
|
& .recordstable-td--editable { cursor: text; }
|
|
106
109
|
/* keyboard/click cell selection (spreadsheet-style) */
|
|
107
110
|
& .recordstable-td[data-selected] { outline: 2px solid var(--bg-brand-solid); outline-offset: -2px; border-radius: var(--radius-sm); z-index: 3; }
|
package/dist/styles.css
CHANGED
|
@@ -2499,7 +2499,10 @@
|
|
|
2499
2499
|
& .recordstable-addcol button:hover { background: var(--bg-raised); color: var(--fg-primary); }
|
|
2500
2500
|
|
|
2501
2501
|
/* cells */
|
|
2502
|
-
|
|
2502
|
+
/* font-weight is explicit because the first cell of each row is a
|
|
2503
|
+
th[scope=row] — the record's name is what the row IS — and a th
|
|
2504
|
+
defaults to bold. Measured before the change and unchanged after: 400. */
|
|
2505
|
+
& .recordstable-td { font-size: var(--text-lg); font-weight: var(--weight-regular); color: var(--fg-primary); background: var(--bg-surface); cursor: default; }
|
|
2503
2506
|
& .recordstable-td--editable { cursor: text; }
|
|
2504
2507
|
/* keyboard/click cell selection (spreadsheet-style) */
|
|
2505
2508
|
& .recordstable-td[data-selected] { outline: 2px solid var(--bg-brand-solid); outline-offset: -2px; border-radius: var(--radius-sm); z-index: 3; }
|