@multiplatform.one/table-primitives 7.34.3 → 7.35.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/index.cjs +33 -18
- package/dist/cjs/index.native.js +36 -19
- package/dist/cjs/index.native.js.map +1 -1
- package/dist/esm/index.mjs +34 -19
- package/dist/esm/index.mjs.map +1 -1
- package/dist/esm/index.native.js +37 -20
- package/dist/esm/index.native.js.map +1 -1
- package/dist/jsx/index.js +34 -19
- package/dist/jsx/index.js.map +1 -1
- package/dist/jsx/index.mjs +34 -19
- package/dist/jsx/index.mjs.map +1 -1
- package/dist/jsx/index.native.js +36 -19
- package/dist/jsx/index.native.js.map +1 -1
- package/package.json +4 -4
- package/src/index.tsx +62 -27
- package/src/table.spec.tsx +65 -51
- package/src/tableSize.spec.tsx +50 -0
- package/types/index.d.ts +27 -20
- package/types/index.d.ts.map +1 -1
package/src/table.spec.tsx
CHANGED
|
@@ -7,7 +7,13 @@
|
|
|
7
7
|
*/
|
|
8
8
|
|
|
9
9
|
import { renderWithProviders } from "@multiplatform.one/test-utils";
|
|
10
|
-
import {
|
|
10
|
+
import {
|
|
11
|
+
createThemesBuilder,
|
|
12
|
+
defaultBaseTheme,
|
|
13
|
+
defaultAccentTheme,
|
|
14
|
+
Preset,
|
|
15
|
+
Surface,
|
|
16
|
+
} from "@multiplatform.one/theme";
|
|
11
17
|
import { Theme } from "tamagui";
|
|
12
18
|
import { describe, expect, it } from "vitest";
|
|
13
19
|
import { Table, tablePressFill, tableZebraFill } from "./index";
|
|
@@ -319,24 +325,30 @@ describe("Table Primitives", () => {
|
|
|
319
325
|
expect(low.querySelector("td [data-text-accent]")).toBeNull();
|
|
320
326
|
});
|
|
321
327
|
|
|
322
|
-
function bodyTable(
|
|
328
|
+
function bodyTable(
|
|
329
|
+
overrides: Record<string, string>,
|
|
330
|
+
props: Record<string, unknown> = {},
|
|
331
|
+
size?: "$3" | "$4" | "$5",
|
|
332
|
+
) {
|
|
323
333
|
return renderWithProviders(
|
|
324
334
|
<Preset overrides={overrides as any}>
|
|
325
|
-
<
|
|
326
|
-
<Table
|
|
327
|
-
<Table.
|
|
328
|
-
<Table.
|
|
329
|
-
|
|
330
|
-
|
|
331
|
-
|
|
332
|
-
<Table.
|
|
333
|
-
<Table.
|
|
334
|
-
|
|
335
|
-
|
|
336
|
-
<Table.
|
|
337
|
-
|
|
338
|
-
|
|
339
|
-
|
|
335
|
+
<Surface size={size}>
|
|
336
|
+
<Table {...props}>
|
|
337
|
+
<Table.Head>
|
|
338
|
+
<Table.Row>
|
|
339
|
+
<Table.HeaderCell>Name</Table.HeaderCell>
|
|
340
|
+
</Table.Row>
|
|
341
|
+
</Table.Head>
|
|
342
|
+
<Table.Body>
|
|
343
|
+
<Table.Row>
|
|
344
|
+
<Table.Cell>Plain</Table.Cell>
|
|
345
|
+
</Table.Row>
|
|
346
|
+
<Table.Row onPress={() => {}}>
|
|
347
|
+
<Table.Cell>Pressable</Table.Cell>
|
|
348
|
+
</Table.Row>
|
|
349
|
+
</Table.Body>
|
|
350
|
+
</Table>
|
|
351
|
+
</Surface>
|
|
340
352
|
</Preset>,
|
|
341
353
|
).container;
|
|
342
354
|
}
|
|
@@ -346,9 +358,9 @@ describe("Table Primitives", () => {
|
|
|
346
358
|
const atomic = (el: Element | null | undefined, prefix: string) =>
|
|
347
359
|
Array.from(el?.classList ?? []).filter((name) => name.startsWith(`_${prefix}-`));
|
|
348
360
|
|
|
349
|
-
it("carries the size
|
|
350
|
-
const heights = (["
|
|
351
|
-
const cell = bodyTable({ size
|
|
361
|
+
it("carries the size token to the row in the table composition, where min-height is inert", () => {
|
|
362
|
+
const heights = (["$3", "$4", "$5"] as const).map((size) => {
|
|
363
|
+
const cell = bodyTable({}, {}, size).querySelector("tbody td");
|
|
352
364
|
const minHeight = atomic(cell, "mih");
|
|
353
365
|
expect(minHeight).toHaveLength(1);
|
|
354
366
|
expect(atomic(cell, "h")).toEqual([minHeight[0]?.replace("_mih-", "_h-")]);
|
|
@@ -357,8 +369,8 @@ describe("Table Primitives", () => {
|
|
|
357
369
|
expect(heights).toEqual(["_mih-t-size-3", "_mih-t-size-4", "_mih-t-size-5"]);
|
|
358
370
|
});
|
|
359
371
|
|
|
360
|
-
it("floors a pressable row at the 44px press target and leaves a plain row to the size
|
|
361
|
-
const rows = bodyTable({
|
|
372
|
+
it("floors a pressable row at the 44px press target and leaves a plain row to the size token", () => {
|
|
373
|
+
const rows = bodyTable({}, {}, "$3").querySelectorAll("tbody tr");
|
|
362
374
|
const [plain, pressable] = Array.from(rows).map((row) => getComputedStyle(row));
|
|
363
375
|
expect(pressable?.height).toBe("44px");
|
|
364
376
|
expect(pressable?.minHeight).toBe("44px");
|
|
@@ -366,7 +378,7 @@ describe("Table Primitives", () => {
|
|
|
366
378
|
});
|
|
367
379
|
|
|
368
380
|
it("gives the flex composition the same floors through min-height alone", () => {
|
|
369
|
-
const container = bodyTable({
|
|
381
|
+
const container = bodyTable({}, { displayMode: "flex" }, "$3");
|
|
370
382
|
const cell = container.querySelector("tbody td");
|
|
371
383
|
expect(atomic(cell, "mih")).toEqual(["_mih-t-size-3"]);
|
|
372
384
|
expect(atomic(cell, "h")).toEqual([]);
|
|
@@ -434,10 +446,10 @@ describe("Table Primitives", () => {
|
|
|
434
446
|
expect(fills(container)).toEqual([[], [], [], []]);
|
|
435
447
|
});
|
|
436
448
|
|
|
437
|
-
it("fills odd body rows with $
|
|
449
|
+
it("fills odd body rows with $color3 and leaves the head and foot rows alone", () => {
|
|
438
450
|
const container = zebraTable("on", plainRows);
|
|
439
451
|
expect(stripes(container)).toEqual(["even", "odd", "even", "odd"]);
|
|
440
|
-
expect(fills(container)).toEqual([[], ["_bg-
|
|
452
|
+
expect(fills(container)).toEqual([[], ["_bg-color3"], [], ["_bg-color3"]]);
|
|
441
453
|
expect(container.querySelector("thead tr")?.hasAttribute("data-table-zebra")).toBe(false);
|
|
442
454
|
expect(container.querySelector("tfoot tr")?.hasAttribute("data-table-zebra")).toBe(false);
|
|
443
455
|
});
|
|
@@ -484,7 +496,7 @@ describe("Table Primitives", () => {
|
|
|
484
496
|
[],
|
|
485
497
|
["_bg-color4"],
|
|
486
498
|
[],
|
|
487
|
-
["_bg-
|
|
499
|
+
["_bg-color3"],
|
|
488
500
|
]);
|
|
489
501
|
});
|
|
490
502
|
|
|
@@ -512,7 +524,7 @@ describe("Table Primitives", () => {
|
|
|
512
524
|
it("gives the flex composition the same stripes (native parity)", () => {
|
|
513
525
|
const container = zebraTable("on", plainRows, { displayMode: "flex" });
|
|
514
526
|
expect(stripes(container)).toEqual(["even", "odd", "even", "odd"]);
|
|
515
|
-
expect(fills(container)).toEqual([[], ["_bg-
|
|
527
|
+
expect(fills(container)).toEqual([[], ["_bg-color3"], [], ["_bg-color3"]]);
|
|
516
528
|
});
|
|
517
529
|
|
|
518
530
|
it("stripes odd cards in the card layout and leaves intent cards tinted", () => {
|
|
@@ -551,10 +563,10 @@ describe("Table Primitives", () => {
|
|
|
551
563
|
"odd",
|
|
552
564
|
]);
|
|
553
565
|
expect(atomic(on[0], "bg")).toEqual(atomic(off[0], "bg"));
|
|
554
|
-
expect(atomic(on[1], "bg")).toEqual(["_bg-
|
|
555
|
-
expect(atomic(on[3], "bg")).toEqual(["_bg-
|
|
566
|
+
expect(atomic(on[1], "bg")).toEqual(["_bg-color3"]);
|
|
567
|
+
expect(atomic(on[3], "bg")).toEqual(["_bg-color3"]);
|
|
556
568
|
expect(atomic(on[4], "bg")).toEqual(atomic(off[4], "bg"));
|
|
557
|
-
expect(atomic(on[5], "bg")).toEqual(["_bg-
|
|
569
|
+
expect(atomic(on[5], "bg")).toEqual(["_bg-color3"]);
|
|
558
570
|
});
|
|
559
571
|
|
|
560
572
|
describe("the stripe steps one up the ramp from the surface it sits on (MPO-401)", () => {
|
|
@@ -585,26 +597,18 @@ describe("Table Primitives", () => {
|
|
|
585
597
|
expect(odd).not.toEqual(even);
|
|
586
598
|
});
|
|
587
599
|
|
|
588
|
-
|
|
589
|
-
|
|
590
|
-
|
|
591
|
-
|
|
592
|
-
|
|
593
|
-
|
|
594
|
-
|
|
595
|
-
|
|
596
|
-
|
|
597
|
-
|
|
598
|
-
});
|
|
599
|
-
|
|
600
|
-
it("leaves light unchanged: cards rest on $background and stripe $color2", () => {
|
|
601
|
-
expect(cardFills("light", "large").slice(0, 2)).toEqual([
|
|
602
|
-
["_bg-background"],
|
|
603
|
-
["_bg-color2"],
|
|
604
|
-
]);
|
|
605
|
-
});
|
|
600
|
+
for (const scheme of ["light", "dark"] as const) {
|
|
601
|
+
it(`${scheme} cards keep the template fill and stripe at every elevation`, () => {
|
|
602
|
+
for (const elevation of ["none", "small", "medium", "large"] as const) {
|
|
603
|
+
expect(cardFills(scheme, elevation).slice(0, 2)).toEqual([
|
|
604
|
+
["_bg-background"],
|
|
605
|
+
["_bg-color3"],
|
|
606
|
+
]);
|
|
607
|
+
}
|
|
608
|
+
});
|
|
609
|
+
}
|
|
606
610
|
|
|
607
|
-
it("keeps rows on $
|
|
611
|
+
it("keeps rows on $color3 in dark, one step up from the frame", () => {
|
|
608
612
|
const { container } = renderWithProviders(
|
|
609
613
|
<Theme name="dark">
|
|
610
614
|
<Preset overrides={{ tableZebra: "on" }}>
|
|
@@ -614,7 +618,17 @@ describe("Table Primitives", () => {
|
|
|
614
618
|
</Preset>
|
|
615
619
|
</Theme>,
|
|
616
620
|
);
|
|
617
|
-
expect(fills(container)).toEqual([[], ["_bg-
|
|
621
|
+
expect(fills(container)).toEqual([[], ["_bg-color3"], [], ["_bg-color3"]]);
|
|
622
|
+
});
|
|
623
|
+
|
|
624
|
+
it("the stripe resolves to a different paint from the v5 page in both schemes", () => {
|
|
625
|
+
const themes = createThemesBuilder(defaultBaseTheme, defaultAccentTheme).themes();
|
|
626
|
+
for (const scheme of ["light", "dark"] as const) {
|
|
627
|
+
const theme = themes[scheme];
|
|
628
|
+
const stripe = tableZebraFill("$background").slice(1) as keyof typeof theme;
|
|
629
|
+
expect(theme.background).toBe(theme.color2);
|
|
630
|
+
expect(theme[stripe]).not.toBe(theme.background);
|
|
631
|
+
}
|
|
618
632
|
});
|
|
619
633
|
|
|
620
634
|
it("tableZebraFill names the step above a host fill", () => {
|
|
@@ -628,7 +642,7 @@ describe("Table Primitives", () => {
|
|
|
628
642
|
"transparent",
|
|
629
643
|
undefined,
|
|
630
644
|
].map(tableZebraFill),
|
|
631
|
-
).toEqual(["$
|
|
645
|
+
).toEqual(["$color3", "$color2", "$color3", "$color5", "$color12", "$color2", "$color2"]);
|
|
632
646
|
});
|
|
633
647
|
});
|
|
634
648
|
});
|
|
@@ -0,0 +1,50 @@
|
|
|
1
|
+
import { renderWithProviders } from "@multiplatform.one/test-utils";
|
|
2
|
+
import { sizeRecipeForToken, useResolvedKnobs } from "@multiplatform.one/theme";
|
|
3
|
+
import { describe, expect, it } from "vitest";
|
|
4
|
+
import { Table } from "./index";
|
|
5
|
+
|
|
6
|
+
/** A cell control: reads the knobs inside the cell's Surface. */
|
|
7
|
+
function Probe({ id }: { id: string }) {
|
|
8
|
+
const { knobProps } = useResolvedKnobs();
|
|
9
|
+
return (
|
|
10
|
+
<span
|
|
11
|
+
data-testid={id}
|
|
12
|
+
data-size-token={knobProps.sizeToken}
|
|
13
|
+
data-height={String(knobProps.control.height)}
|
|
14
|
+
/>
|
|
15
|
+
);
|
|
16
|
+
}
|
|
17
|
+
|
|
18
|
+
function renderTable(size?: "$2" | "$3" | "$5") {
|
|
19
|
+
return renderWithProviders(
|
|
20
|
+
<Table size={size}>
|
|
21
|
+
<Table.Body>
|
|
22
|
+
<Table.Row>
|
|
23
|
+
<Table.Cell>
|
|
24
|
+
<Probe id="cell" />
|
|
25
|
+
</Table.Cell>
|
|
26
|
+
</Table.Row>
|
|
27
|
+
</Table.Body>
|
|
28
|
+
</Table>,
|
|
29
|
+
);
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
describe("Table size forwarding (WP-c2)", () => {
|
|
33
|
+
it('size="$3": a cell part measures the $3 recipe', () => {
|
|
34
|
+
const { getByTestId } = renderTable("$3");
|
|
35
|
+
expect(getByTestId("cell").getAttribute("data-size-token")).toBe("$3");
|
|
36
|
+
expect(getByTestId("cell").getAttribute("data-height")).toBe(
|
|
37
|
+
String(sizeRecipeForToken("$3").height),
|
|
38
|
+
);
|
|
39
|
+
});
|
|
40
|
+
|
|
41
|
+
it("a smaller table forwards its own key to the cells", () => {
|
|
42
|
+
const { getByTestId } = renderTable("$2");
|
|
43
|
+
expect(getByTestId("cell").getAttribute("data-size-token")).toBe("$2");
|
|
44
|
+
});
|
|
45
|
+
|
|
46
|
+
it("no size keeps the cells at $3", () => {
|
|
47
|
+
const { getByTestId } = renderTable();
|
|
48
|
+
expect(getByTestId("cell").getAttribute("data-size-token")).toBe("$3");
|
|
49
|
+
});
|
|
50
|
+
});
|
package/types/index.d.ts
CHANGED
|
@@ -27,8 +27,8 @@ type AlignCells = {
|
|
|
27
27
|
declare const Row: import("tamagui").TamaguiComponent<import("@tamagui/web").TamaDefer, import("tamagui").TamaguiElement, import("@tamagui/core").RNTamaguiViewNonStyleProps, import("@tamagui/web").StackStyleBase, {
|
|
28
28
|
elevation?: number | SizeTokens | undefined;
|
|
29
29
|
transparent?: boolean | undefined;
|
|
30
|
-
circular?: boolean | undefined;
|
|
31
30
|
fullscreen?: boolean | undefined;
|
|
31
|
+
circular?: boolean | undefined;
|
|
32
32
|
elevate?: boolean | undefined;
|
|
33
33
|
bordered?: boolean | undefined;
|
|
34
34
|
chromeless?: boolean | "all" | undefined;
|
|
@@ -38,13 +38,13 @@ declare const Row: import("tamagui").TamaguiComponent<import("@tamagui/web").Tam
|
|
|
38
38
|
declare const Cell: import("tamagui").TamaguiComponent<import("@tamagui/web").TamaDefer, import("tamagui").TamaguiElement, import("@tamagui/core").RNTamaguiViewNonStyleProps, import("@tamagui/web").StackStyleBase, {
|
|
39
39
|
elevation?: number | SizeTokens | undefined;
|
|
40
40
|
transparent?: boolean | undefined;
|
|
41
|
-
circular?: boolean | undefined;
|
|
42
|
-
cellWidth?: number | "auto" | SizeTokens | undefined;
|
|
43
|
-
cellHeight?: SizeTokens | undefined;
|
|
44
41
|
fullscreen?: boolean | undefined;
|
|
42
|
+
circular?: boolean | undefined;
|
|
45
43
|
elevate?: boolean | undefined;
|
|
46
44
|
bordered?: boolean | undefined;
|
|
47
45
|
chromeless?: boolean | "all" | undefined;
|
|
46
|
+
cellWidth?: number | "auto" | SizeTokens | undefined;
|
|
47
|
+
cellHeight?: SizeTokens | undefined;
|
|
48
48
|
displayMode?: "table" | "flex" | undefined;
|
|
49
49
|
alignCells?: AlignCells | undefined;
|
|
50
50
|
cellLocation?: "middle" | "first" | "last" | undefined;
|
|
@@ -52,13 +52,13 @@ declare const Cell: import("tamagui").TamaguiComponent<import("@tamagui/web").Ta
|
|
|
52
52
|
declare const HeaderCell: import("tamagui").TamaguiComponent<import("@tamagui/web").TamaDefer, import("tamagui").TamaguiElement, import("@tamagui/core").RNTamaguiViewNonStyleProps, import("@tamagui/web").StackStyleBase, {
|
|
53
53
|
elevation?: number | SizeTokens | undefined;
|
|
54
54
|
transparent?: boolean | undefined;
|
|
55
|
-
circular?: boolean | undefined;
|
|
56
|
-
cellWidth?: number | "auto" | SizeTokens | undefined;
|
|
57
|
-
cellHeight?: SizeTokens | undefined;
|
|
58
55
|
fullscreen?: boolean | undefined;
|
|
56
|
+
circular?: boolean | undefined;
|
|
59
57
|
elevate?: boolean | undefined;
|
|
60
58
|
bordered?: boolean | undefined;
|
|
61
59
|
chromeless?: boolean | "all" | undefined;
|
|
60
|
+
cellWidth?: number | "auto" | SizeTokens | undefined;
|
|
61
|
+
cellHeight?: SizeTokens | undefined;
|
|
62
62
|
displayMode?: "table" | "flex" | undefined;
|
|
63
63
|
alignHeaderCells?: AlignCells | undefined;
|
|
64
64
|
cellLocation?: "middle" | "first" | "last" | undefined;
|
|
@@ -70,8 +70,8 @@ export declare function tablePressFill(restFill: unknown): `$color${number}`;
|
|
|
70
70
|
declare const TableBody: import("tamagui").TamaguiComponent<import("@tamagui/web").TamaDefer, import("tamagui").TamaguiElement, import("@tamagui/core").RNTamaguiViewNonStyleProps, import("@tamagui/web").StackStyleBase, {
|
|
71
71
|
elevation?: number | SizeTokens | undefined;
|
|
72
72
|
transparent?: boolean | undefined;
|
|
73
|
-
circular?: boolean | undefined;
|
|
74
73
|
fullscreen?: boolean | undefined;
|
|
74
|
+
circular?: boolean | undefined;
|
|
75
75
|
elevate?: boolean | undefined;
|
|
76
76
|
bordered?: boolean | undefined;
|
|
77
77
|
chromeless?: boolean | "all" | undefined;
|
|
@@ -80,8 +80,8 @@ declare const TableBody: import("tamagui").TamaguiComponent<import("@tamagui/web
|
|
|
80
80
|
declare const TableHead: import("tamagui").TamaguiComponent<import("@tamagui/web").TamaDefer, import("tamagui").TamaguiElement, import("@tamagui/core").RNTamaguiViewNonStyleProps, import("@tamagui/web").StackStyleBase, {
|
|
81
81
|
elevation?: number | SizeTokens | undefined;
|
|
82
82
|
transparent?: boolean | undefined;
|
|
83
|
-
circular?: boolean | undefined;
|
|
84
83
|
fullscreen?: boolean | undefined;
|
|
84
|
+
circular?: boolean | undefined;
|
|
85
85
|
elevate?: boolean | undefined;
|
|
86
86
|
bordered?: boolean | undefined;
|
|
87
87
|
chromeless?: boolean | "all" | undefined;
|
|
@@ -90,8 +90,8 @@ declare const TableHead: import("tamagui").TamaguiComponent<import("@tamagui/web
|
|
|
90
90
|
declare const TableFoot: import("tamagui").TamaguiComponent<import("@tamagui/web").TamaDefer, import("tamagui").TamaguiElement, import("@tamagui/core").RNTamaguiViewNonStyleProps, import("@tamagui/web").StackStyleBase, {
|
|
91
91
|
elevation?: number | SizeTokens | undefined;
|
|
92
92
|
transparent?: boolean | undefined;
|
|
93
|
-
circular?: boolean | undefined;
|
|
94
93
|
fullscreen?: boolean | undefined;
|
|
94
|
+
circular?: boolean | undefined;
|
|
95
95
|
elevate?: boolean | undefined;
|
|
96
96
|
bordered?: boolean | undefined;
|
|
97
97
|
chromeless?: boolean | "all" | undefined;
|
|
@@ -109,13 +109,13 @@ declare const TableCaption: import("tamagui").TamaguiComponent<import("@tamagui/
|
|
|
109
109
|
declare const TableComp: import("tamagui").TamaguiComponent<import("@tamagui/web").TamaDefer, import("tamagui").TamaguiElement, import("@tamagui/core").RNTamaguiViewNonStyleProps, import("@tamagui/web").StackStyleBase, {
|
|
110
110
|
elevation?: number | SizeTokens | undefined;
|
|
111
111
|
transparent?: boolean | undefined;
|
|
112
|
-
circular?: boolean | undefined;
|
|
113
|
-
cellWidth?: SizeTokens | undefined;
|
|
114
|
-
cellHeight?: SizeTokens | undefined;
|
|
115
112
|
fullscreen?: boolean | undefined;
|
|
113
|
+
circular?: boolean | undefined;
|
|
116
114
|
elevate?: boolean | undefined;
|
|
117
115
|
bordered?: boolean | undefined;
|
|
118
116
|
chromeless?: boolean | "all" | undefined;
|
|
117
|
+
cellWidth?: SizeTokens | undefined;
|
|
118
|
+
cellHeight?: SizeTokens | undefined;
|
|
119
119
|
displayMode?: "table" | "flex" | undefined;
|
|
120
120
|
alignHeaderCells?: any;
|
|
121
121
|
alignCells?: any;
|
|
@@ -127,11 +127,11 @@ export interface ThemedRowProps extends React.ComponentProps<typeof Row> {
|
|
|
127
127
|
success?: boolean;
|
|
128
128
|
}
|
|
129
129
|
/**
|
|
130
|
-
* SP-EDGE row
|
|
131
|
-
*
|
|
132
|
-
*
|
|
130
|
+
* SP-EDGE row padding at a size token's stop (`sizeTokenStop`): a smaller row
|
|
131
|
+
* token pads tighter, and no stop adds an outer row inset (SP-EDGE). `medium`
|
|
132
|
+
* is `$true`, the default row.
|
|
133
133
|
*/
|
|
134
|
-
export declare function getTableCellPadding(
|
|
134
|
+
export declare function getTableCellPadding(stop: string): {
|
|
135
135
|
paddingHorizontal: string;
|
|
136
136
|
paddingVertical: string;
|
|
137
137
|
};
|
|
@@ -143,11 +143,18 @@ export declare function getTableCellPadding(space: string): {
|
|
|
143
143
|
* - `auto`: table on `$sm` and up, cards below (W11 compact class)
|
|
144
144
|
*/
|
|
145
145
|
export type TableLayout = "table" | "cards" | "auto";
|
|
146
|
-
export interface ThemedTableProps extends React.ComponentProps<typeof TableComp> {
|
|
146
|
+
export interface ThemedTableProps extends Omit<React.ComponentProps<typeof TableComp>, "size"> {
|
|
147
147
|
/** Responsive layout — see {@link TableLayout}. Default `table`. */
|
|
148
148
|
layout?: TableLayout;
|
|
149
|
+
/**
|
|
150
|
+
* Control size of the table: row height and every cell's Surface (text and
|
|
151
|
+
* cell controls). Default: the page's size for rows, `$3` for cells.
|
|
152
|
+
*/
|
|
153
|
+
size?: SizeTokens;
|
|
154
|
+
/** Size key every cell's Surface forwards to its content. Default `size`, else `$3`. */
|
|
155
|
+
cellSize?: SizeTokens;
|
|
149
156
|
}
|
|
150
|
-
declare function ThemedTableComp({
|
|
157
|
+
declare function ThemedTableComp({ size, cellSize, ...props }: ThemedTableProps): import("react/jsx-runtime").JSX.Element;
|
|
151
158
|
declare function ThemedTableBody({ children, ...props }: React.ComponentProps<typeof TableBody>): import("react/jsx-runtime").JSX.Element;
|
|
152
159
|
declare function ThemedTableHead(props: React.ComponentProps<typeof TableHead>): import("react/jsx-runtime").JSX.Element;
|
|
153
160
|
declare function ThemedRow({ accent, error, warning, success, ...props }: ThemedRowProps): import("react/jsx-runtime").JSX.Element;
|
|
@@ -162,8 +169,8 @@ export declare const Table: typeof ThemedTableComp & {
|
|
|
162
169
|
Foot: import("tamagui").TamaguiComponent<import("@tamagui/web").TamaDefer, import("tamagui").TamaguiElement, import("@tamagui/core").RNTamaguiViewNonStyleProps, import("@tamagui/web").StackStyleBase, {
|
|
163
170
|
elevation?: number | SizeTokens | undefined;
|
|
164
171
|
transparent?: boolean | undefined;
|
|
165
|
-
circular?: boolean | undefined;
|
|
166
172
|
fullscreen?: boolean | undefined;
|
|
173
|
+
circular?: boolean | undefined;
|
|
167
174
|
elevate?: boolean | undefined;
|
|
168
175
|
bordered?: boolean | undefined;
|
|
169
176
|
chromeless?: boolean | "all" | undefined;
|
package/types/index.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.tsx"],"names":[],"mappings":"AAAA;;;;;GAKG;
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.tsx"],"names":[],"mappings":"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"}
|