diff --git a/example/ComparisonExample.js b/example/ComparisonExample.js
new file mode 100644
index 0000000..cc2599c
--- /dev/null
+++ b/example/ComparisonExample.js
@@ -0,0 +1,2152 @@
+import React from 'react';
+import { StyleSheet, Text, View, Platform } from 'react-native';
+import RenderHTML from '@native-html/render';
+import table from '@native-html/table-plugin';
+import heuristicTableRenderers, {
+ colgroupModel
+} from '@native-html/heuristic-table-plugin';
+import WebView from 'react-native-webview';
+
+const WRAPPER_OPEN = '';
+const WRAPPER_CLOSE = '
';
+const SPACER = '';
+
+const wrap = (content) =>
+ `${WRAPPER_OPEN}\n ${content}\n ${SPACER}\n${WRAPPER_CLOSE}`;
+
+// Fictional sample data shared across the budget layout variants.
+const departmentBudgetSpaced = `
+
+
+
+
+
+
+
+
+
+
+
+ Department
+ |
+ Planned (USD) |
+ Actual (USD) |
+ Change (%) |
+
+
+ Customer Support
|
+
+ $80,0002
+ |
+
+ $84,0002
+ |
+ 5.0 |
+
+
+ Product Development
|
+
+ $120,0003
+ |
+
+ $132,0003
+ |
+ 10.0 |
+
+
+ Marketing and Events
|
+
+ $60,0004
+ |
+
+ $63,0004
+ |
+ 5.0 |
+
+
+ Business Operations
|
+
+ $100,0005
+ |
+
+ $108,0005
+ |
+ 8.0 |
+
+
+
+
+
+
+
+
+
+
+
+
+ Department
+ |
+ Planned (USD) |
+ Actual (USD) |
+ Change (%) |
+
+
+ Customer Support
|
+
+ $80,0002
+ |
+
+ $84,0002
+ |
+ 5.0 |
+
+
+ Product Development
|
+
+ $120,0003
+ |
+
+ $132,0003
+ |
+ 10.0 |
+
+
+ Marketing and Events
|
+
+ $60,0004
+ |
+
+ $63,0004
+ |
+ 5.0 |
+
+
+ Business Operations
|
+
+ $100,0005
+ |
+
+ $108,0005
+ |
+ 8.0 |
+
+
+
`;
+
+const planningComparison = `
+
+
+
+
+
+
+
+ | Individual Planning |
+
+ Team Planning |
+
+
+
+ | One person sets priorities |
+
+ Shared goals and responsibilities |
+
+
+
+ | Personal notes and checklists |
+
+ Shared calendar and task board |
+
+
+
+ | Updates happen as needed |
+
+ Regular progress check-ins |
+
+
+
+ | Suited to small projects |
+
+ Suited to larger projects |
+
+
+
+ | Flexible personal schedule |
+
+ Coordinated team schedule |
+
+
+
+ | Informal progress tracking |
+
+ Shared summaries at each milestone |
+
+
+
`;
+
+const valuePropChecklist = `
+
+
+ ✓
|
+
+ Quick Setup – Start a new project with a name, a description, and a few simple steps.
|
+
+
+
+ ✓
|
+
+ Detailed monthly invoice – See completed tasks, upcoming milestones, and recent updates in one place.
|
+
+
+
+ ✓
|
+
+
+ Easy Collaboration – Share notes, assign tasks, and keep everyone informed as the project moves forward.
+ |
+
+
+
`;
+
+const departmentBudgetFractionalCols = `
+
+
+
+
+
+
+
+
+
+ | Department |
+
+ Planned (USD) |
+
+ Actual (USD) |
+
+ Change (%) |
+
+
+
+ | Customer Support |
+
+
+ $80,0002
+ |
+
+
+ $84,0002
+ |
+
+ 5.0 |
+
+
+
+ | Product Development |
+
+
+ $120,0003
+ |
+
+
+ $132,0003
+ |
+
+ 10.0 |
+
+
+
+ | Marketing and Events |
+
+
+ $60,0004
+ |
+
+
+ $63,0004
+ |
+
+ 5.0 |
+
+
+
+ | Business Operations |
+
+
+ $100,0005
+ |
+
+
+ $108,0005
+ |
+
+ 8.0 |
+
+
+
`;
+
+const projectMilestones = `
+
+
+
+
+
+
+ | Project Milestone |
+ Expected Outcome |
+
+
+ | Kickoff |
+ Agree on goals, roles, and the overall timeline |
+
+
+ | First Draft |
+ Prepare an initial version for team feedback |
+
+
+ | Review |
+ Collect comments and agree on revisions |
+
+
+ | Launch |
+ Publish the final version and share a summary |
+
+
+
`;
+
+const servicePlanComparison = `
+
+
+
+
+
+
+
+
+ | Feature |
+
+ Basic Plan |
+
+ Plus Plan |
+
+
+
+ | Support |
+
+ Email support during business hours |
+
+ Priority support with live chat and callbacks |
+
+
+
+ | Availability |
+
+ Weekday appointments only |
+
+ Weekday and weekend appointments |
+
+
+
+ | Flexibility |
+
+ Fixed monthly package |
+
+ Adjustable package with optional extras |
+
+
+
+ | Customisation |
+
+ Standard options only |
+
+ Personalised options for each project |
+
+
+
+ | Billing |
+
+ Monthly invoice with a summary |
+
+ Detailed monthly invoice |
+
+
+
`;
+
+const courseComparison = `
+
+
+
+
+
+
+
+
+ | Feature |
+
+ Self-paced Course |
+
+ Guided Course |
+
+
+
+ | Customisation |
+
+ Choose your own topics |
+
+ Follow a structured programme with optional topics |
+
+
+
+ | Support |
+
+ Community discussion board |
+
+ Instructor feedback, group sessions, and office hours |
+
+
+
+ | Learning Goals |
+
+ Set your own goals |
+
+ Weekly objectives, practical exercises, and a final project |
+
+
+
+ | Progress Tracking |
+
+ Personal notes |
+
+ Lesson checklist, feedback, and progress summaries |
+
+
+
+ | Check-ins |
+
+ Review at your own pace |
+
+ Weekly sessions and reminders |
+
+
+
+ | Learning Materials |
+
+ Public articles |
+
+ Recorded lessons and downloadable worksheets |
+
+
+
+ | Topics Covered |
+
+ General introductions |
+
+ Writing, design, research, teamwork, and presentations |
+
+
+
`;
+
+const departmentBudgetPlain = `
+
+
+
+
+
+
+
+
+
+ | Department |
+
+ Planned (USD) |
+
+ Actual (USD) |
+
+ Change (%) |
+
+
+
+ | Customer Support |
+
+
+ $80,0002
+ |
+
+
+ $84,0002
+ |
+
+ 5.0 |
+
+
+
+ | Product Development |
+
+
+ $120,0003
+ |
+
+
+ $132,0003
+ |
+
+ 10.0 |
+
+
+
+ | Marketing and Events |
+
+
+ $60,0004
+ |
+
+
+ $63,0004
+ |
+
+ 5.0 |
+
+
+
+ | Business Operations |
+
+
+ $100,0005
+ |
+
+
+ $108,0005
+ |
+
+ 8.0 |
+
+
+
`;
+
+const departmentBudgetSpacedRepeat = `
+
+
+
+
+
+
+
+
+
+
+ Department
+ |
+
+ Planned (USD) |
+
+ Actual (USD) |
+
+ Change (%) |
+
+
+
+ Customer Support
|
+
+
+ $80,0002
+ |
+
+
+ $84,0002
+ |
+
+ 5.0 |
+
+
+
+ Product Development
|
+
+
+ $120,0003
+ |
+
+
+ $132,0003
+ |
+
+ 10.0 |
+
+
+
+ Marketing and Events
|
+
+
+ $60,0004
+ |
+
+
+ $63,0004
+ |
+
+ 5.0 |
+
+
+
+ Business Operations
|
+
+
+ $100,0005
+ |
+
+
+ $108,0005
+ |
+
+ 8.0 |
+
+
+
`;
+
+const deliveryMethods = `
+
+
+
+
+
+
+
+
+
+
+ | Method |
+
+ Cost |
+
+ Time |
+
+ Tracking |
+
+ Availability |
+
+
+
+ | Standard Delivery |
+
+ Low |
+
+ Next day |
+
+ Basic |
+
+ Weekdays |
+
+
+
+ | Express Delivery |
+
+ Medium |
+
+ Same day |
+
+ Detailed |
+
+ Every day |
+
+
+
+ | Scheduled Delivery |
+
+ Medium-High |
+
+ Chosen slot |
+
+ Detailed |
+
+ By appointment |
+
+
+
`;
+
+// ---------------------------------------------------------------------------
+// Edge cases — tables that stress the layout heuristics rather than model real
+// content. Each one isolates a single hostile trait so a regression is easy to
+// attribute.
+// ---------------------------------------------------------------------------
+
+const colspanHeader = `
+
+
+
+
+
+
+
+
+ | Quarterly Revenue — All Regions |
+
+
+ | North America |
+ EMEA |
+
+
+ | Q1 |
+ Q2 |
+ Q1 |
+ Q2 |
+
+
+ | $1.2M |
+ $1.9M |
+ $0.8M |
+ $1.1M |
+
+
+ | Subtotal (three columns merged) |
+ $5.0M |
+
+
+
`;
+
+const rowspanCategories = `
+
+
+
+
+
+
+
+ | Workshops |
+ Introduction to Design |
+ $180/session |
+
+
+ | Creative Writing |
+ $95/session |
+
+
+ | Team Communication |
+ $320/session |
+
+
+ | Consultations |
+ One-to-one session |
+ $120/hour |
+
+
+ | Group session |
+ $70/hour |
+
+
+
`;
+
+const spanMatrix = `
+
+
+ | 2×2 corner block |
+ C1 |
+ D1 |
+
+
+ | C2 + D2 merged |
+
+
+ | A3 |
+ B3 spans down |
+ C3 |
+ D3 spans down too |
+
+
+ | A4 |
+ C4 |
+
+
+
`;
+
+const theadFootCaption = `
+ Table 7. Sample schedule by activity.
+
+
+
+
+
+
+
+ | Activity |
+ Duration |
+ Format |
+
+
+
+
+ | Welcome session |
+ 30 minutes |
+ Presentation |
+
+
+ | Hands-on workshop |
+ 90 minutes |
+ Small groups |
+
+
+ | Closing discussion |
+ 20 minutes |
+ Open forum |
+
+
+
+
+ | Times are illustrative; adjust the schedule to suit your group. |
+
+
+
`;
+
+const nestedTable = `
+
+
+
+
+
+
+ | Plan |
+ Breakdown |
+
+
+ | Starter |
+
+
+
+
+ | Base |
+ $49 |
+
+
+ | Per participant |
+ $0.35 |
+
+
+
+ |
+
+
+ | Enterprise |
+
+
+
+
+ | Base |
+ Negotiated |
+
+
+
+ | third level |
+ | of nesting |
+
+
+ |
+
+
+
+ |
+
+
+
`;
+
+const singleCell = `
+
+
+ | One cell, one row, one column — the degenerate case. |
+
+
+
`;
+
+const wideTwelveColumns = `
+
+
+ | Jan |
+ Feb |
+ Mar |
+ Apr |
+ May |
+ Jun |
+ Jul |
+ Aug |
+ Sep |
+ Oct |
+ Nov |
+ Dec |
+
+
+ | 112 |
+ 98 |
+ 140 |
+ 131 |
+ 156 |
+ 149 |
+ 163 |
+ 171 |
+ 158 |
+ 144 |
+ 139 |
+ 187 |
+
+
+ | +4% |
+ -12% |
+ +43% |
+ -6% |
+ +19% |
+ -4% |
+ +9% |
+ +5% |
+ -8% |
+ -9% |
+ -3% |
+ +34% |
+
+
+
`;
+
+const emptyCells = `
+
+
+
+
+
+
+
+
+ | Filled |
+ |
+ |
+ Filled |
+
+
+ |
+ |
+ |
+ |
+
+
+ | |
+
|
+ value |
+ |
+
+
+
`;
+
+const unbreakableContent = `
+
+
+
+
+
+
+ | Kind |
+ Value |
+
+
+ | Long URL |
+ https://projects.example.com/api/v2/workspaces/8f2c4d1e-5b7a-4c93-a0f1-2d6e8b4c9a37/activity-feed?includeCompleted=true&expand=participants |
+
+
+ | Hash |
+ e3b0c44298fc1c149afbf4c8996fb92427ae41e4649b934ca495991b7852b855 |
+
+
+ | German |
+ Veranstaltungsplanungsdienstleistungsvertragsbedingungen |
+
+
+ | Path |
+ /usr/local/example/projects/website-redesign/resources/illustrations/homepage/banner-000241.settings.json |
+
+
+
`;
+
+const pixelColgroupOverflow = `
+
+
+
+
+
+
+
+
+ | Venue |
+ Address |
+ Capacity |
+ Utilisation |
+
+
+ | Riverside Hall |
+ 12 Example Avenue, Sample City |
+ 240 seats |
+ 87% |
+
+
+ | Garden Studio |
+ 34 Sample Street, Example Town |
+ 80 seats |
+ 61% |
+
+
+
`;
+
+const colgroupSpanAttr = `
+
+
+
+
+
+
+
+ | A |
+ B |
+ C |
+ D |
+ E |
+
+
+ | Two columns declared by a bare colgroup span |
+ second |
+ Two more declared by a col span |
+ fourth |
+ The remainder |
+
+
+
`;
+
+const legacyAttributes = `
+
+
+ | SKU |
+ Description |
+ Unit |
+
+
+ | NB-1200 |
+ Lined notebook with a soft cover |
+ $2.40 |
+
+
+ | PN-3000 |
+ Refillable ballpoint pen with a comfortable grip |
+ $4.15 |
+
+
+ | PAD-99 |
+ Colourful sticky notes, pack of 12 |
+ $18.00 |
+
+
+
`;
+
+const listsInCells = `
+
+
+
+
+
+
+ | Phase |
+ Deliverables |
+
+
+ | Onboarding |
+
+
+ - Project overview
+ - Account setup
+ - Team introductions
+
+ |
+
+
+ | Planning |
+
+
+ - Choose milestone dates
+ -
+ Assign tasks by team
+
+
+ - Review the project checklist
+
+ |
+
+
+
`;
+
+const alignmentMatrix = `
+
+
+
+
+
+
+
+ | top / left |
+ top / center |
+ top / right |
+
+
+ | middle / left |
+ middle / center |
+ middle / right |
+
+
+ | bottom / justify — a longer run of text so justification has something to spread across the available width |
+ bottom / center |
+ bottom / right |
+
+
+
`;
+
+const inlineFormattingStew = `
+
+
+
+
+
+
+ | Notation |
+ Rendered |
+
+
+ | Nested emphasis |
+ bold and italic and underlined and struck |
+
+
+ | Scripts |
+ H2O, E = mc2, xnk |
+
+
+ | Size shifts |
+ big small tiny big again |
+
+
+ | Mixed weights |
+ 100 400 700 900 |
+
+
+ | Marks & code |
+ highlighted inline_code() FAQ |
+
+
+
`;
+
+const preformattedCode = `
+
+
+
+
+
+
+ | Endpoint |
+ Payload |
+
+
+ | POST /events |
+ {
+ "venue": "MAIN-HALL",
+ "attendees": 128,
+ "window": ["2026-10-02T08:00", "2026-10-02T12:00"]
+} |
+
+
+ | GET /events |
+ curl -H "Authorization: Bearer $TOKEN" \\
+ https://api.example.com/events?from=2026-01-01 |
+
+
+
`;
+
+const internationalText = `
+
+
+
+
+
+
+
+ | Locale |
+ Sample |
+ Status |
+
+
+ | ja-JP |
+ 毎週さまざまなイベントやワークショップを開催しています。 |
+ ✅ 対応済 |
+
+
+ | ar-SA |
+ نقدم ورش عمل وأنشطة متنوعة لجميع المشاركين. |
+ ⏳ قيد المراجعة |
+
+
+ | he-IL |
+ מגוון סדנאות ופעילויות לכל המשתתפים. |
+ ❌ |
+
+
+ | emoji |
+ 🎨🌍🎵🚲🌻🍎 👨👩👧👦 🇵🇱🇯🇵 |
+ 🆗 |
+
+
+
`;
+
+const conflictingWidths = `
+
+
+
+
+
+
+
+ | colgroup says 10%, style says 70% |
+ colgroup says 10%, style says 240px |
+ colgroup says 80%, attribute says 50 |
+
+
+ | short |
+ short |
+ A genuinely long cell that would prefer most of the table width if the heuristics were free to choose. |
+
+
+
`;
+
+const separateBorders = `
+
+
+
+
+
+
+ | border-spacing 8px / 12px |
+ mixed border styles |
+
+
+ | Thick solid |
+ Asymmetric borders, none on the right |
+
+
+ | Rounded corners |
+ No border at all |
+
+
+
`;
+
+const headerOnlyGrid = `
+
+
+
+
+
+
+
+
+
+ | Mon |
+ Tue |
+ Wed |
+ Thu |
+ Fri |
+
+
+ | Route A |
+ Route B |
+ Route C |
+ Route D |
+ Route E |
+
+
+
`;
+
+const tallTwentyRows = `
+
+
+
+
+
+
+
+ | Task |
+ Description |
+ Due date |
+
+
+
+ ${Array.from({ length: 20 }, (_, i) => {
+ const n = String(i + 1).padStart(4, '0');
+ return `
+ | TSK-${n} |
+ ${
+ i % 3 === 0
+ ? 'Review the project brief, gather feedback from the team, and prepare a summary'
+ : i % 3 === 1
+ ? 'Update meeting notes'
+ : 'Send invitations'
+ } |
+ 20${30 + (i % 9)}-0${(i % 9) + 1}-15 |
+
`;
+ }).join('\n ')}
+
+
`;
+
+const blockContentInCells = `
+
+
+
+
+
+
+
+ Heading inside a cell
+ A paragraph with its own bottom margin.
+ A second paragraph, to see whether margins collapse.
+ |
+
+ A block quote nested in a table cell, which the WebView renderer indents and the native one may not.
+
+ A div with its own background and padding.
+ |
+
+
+ |
+ flex leftflex right
+ |
+
+ Trailing content after a row of block children.
+ |
+
+
+
`;
+
+const zeroAndTinyColumns = `
+
+
+
+
+
+
+
+
+ | 0% |
+ 1% |
+ 4% |
+ 95% — the column that gets everything |
+
+
+ | Nevertheless this cell has a good deal of text in it |
+ x |
+ 1,234,567 |
+ short |
+
+
+
`;
+
+const overflowingPercents = `
+
+
+
+
+
+
+
+ | 60% |
+ 60% |
+ 60% |
+
+
+ | The declared widths sum to 180%. |
+ Both renderers have to normalise something. |
+ Do they agree on what? |
+
+
+
`;
+
+const imagesInCells = `
+
+
+
+
+
+
+  |
+ Intrinsically sized image, 120×60, declared via attributes. |
+
+
+  |
+ An 800px-wide image with no declared size in a column that is far narrower. |
+
+
+  |
+ A source that will never load — does the row still reserve its height? |
+
+
+
`;
+
+const whitespaceSensitive = `| Leading and trailing spaces in the source |
+ A cell whose text is split
+ across several source lines
+ with generous indentation
+ |
| white-space: pre
+ keeps these
+ line breaks | white-space: nowrap on a sentence that is comfortably longer than its column |
`;
+
+export const tables = [
+ {
+ title: 'Department budget',
+ subtitle:
+ '4 columns, percent colgroup, explicit row heights, cells padded with
.',
+ html: departmentBudgetSpaced
+ },
+ {
+ title: 'Department budget (bare)',
+ subtitle:
+ 'The same sample budget without the padded, red-bordered wrapper div.',
+ html: departmentBudgetSpacedBare
+ },
+ {
+ title: 'Individual vs team planning',
+ subtitle: '2 equal columns, explicit row heights, short cells.',
+ html: planningComparison
+ },
+ {
+ title: 'Project features checklist',
+ subtitle:
+ 'Borderless, no colgroup, a fixed 40px icon column next to a free-flowing one.',
+ html: valuePropChecklist
+ },
+ {
+ title: 'Department budget (fractional colgroup)',
+ subtitle:
+ 'Same data, but the colgroup uses fractional percentages that do not sum to 100.',
+ html: departmentBudgetFractionalCols
+ },
+ {
+ title: 'Project milestones',
+ subtitle:
+ '2 equal columns, border declared on the table element rather than per cell.',
+ html: projectMilestones
+ },
+ {
+ title: 'Basic vs plus plan',
+ subtitle:
+ '3 equal columns, no height hints, cells wrap onto several lines.',
+ html: servicePlanComparison
+ },
+ {
+ title: 'Self-paced vs guided course',
+ subtitle:
+ '3 equal columns with long wrapping cells and row heights that understate them.',
+ html: courseComparison
+ },
+ {
+ title: 'Department budget (no row heights)',
+ subtitle: 'Percent colgroup with no height hints and no
padding.',
+ html: departmentBudgetPlain
+ },
+ {
+ title: 'Department budget (repeat)',
+ subtitle:
+ 'Repeated sample budget with explicit heights and line-break padding.',
+ html: departmentBudgetSpacedRepeat
+ },
+ {
+ title: 'Delivery options',
+ subtitle:
+ '5 columns, the widest table of the set — the hardest case for both renderers.',
+ html: deliveryMethods
+ },
+ {
+ title: 'Colspan header bands',
+ subtitle:
+ 'Every row merges a different number of columns, including a full-width banner row.',
+ html: colspanHeader
+ },
+ {
+ title: 'Rowspan category column',
+ subtitle:
+ 'The first column spans three then two rows, so the grid is no longer rectangular.',
+ html: rowspanCategories
+ },
+ {
+ title: 'Colspan + rowspan matrix',
+ subtitle:
+ 'A 2x2 corner block plus two vertical spans — cells arrive out of grid order.',
+ html: spanMatrix
+ },
+ {
+ title: 'caption + thead + tfoot',
+ subtitle:
+ 'Sectioning elements and a caption, with a full-width footer row.',
+ html: theadFootCaption
+ },
+ {
+ title: 'Nested tables, three deep',
+ subtitle:
+ 'A table inside a cell inside a cell — width has to be re-derived at each level.',
+ html: nestedTable
+ },
+ {
+ title: 'Single cell',
+ subtitle: 'One row, one column: the degenerate case.',
+ html: singleCell
+ },
+ {
+ title: 'Twelve narrow columns',
+ subtitle:
+ 'No colgroup, twelve columns of short numbers on a phone-width viewport.',
+ html: wideTwelveColumns
+ },
+ {
+ title: 'Empty and whitespace-only cells',
+ subtitle:
+ 'Truly empty cells, -only cells, and a row with nothing in it at all.',
+ html: emptyCells
+ },
+ {
+ title: 'Unbreakable content',
+ subtitle:
+ 'Long URLs, a SHA-256 digest and a German compound that cannot wrap.',
+ html: unbreakableContent
+ },
+ {
+ title: 'Pixel colgroup wider than the viewport',
+ subtitle:
+ 'A 1400px table with px column widths, rendered into a much narrower container.',
+ html: pixelColgroupOverflow
+ },
+ {
+ title: 'colgroup span / col span',
+ subtitle: 'Columns declared by span attributes rather than one each.',
+ html: colgroupSpanAttr
+ },
+ {
+ title: 'Legacy presentational attributes',
+ subtitle:
+ 'width, align, bgcolor, cellpadding, cellspacing and nowrap instead of CSS.',
+ html: legacyAttributes
+ },
+ {
+ title: 'Lists inside cells',
+ subtitle: 'Bulleted, numbered and nested lists as cell content.',
+ html: listsInCells
+ },
+ {
+ title: 'Alignment matrix',
+ subtitle:
+ 'Every combination of text-align and vertical-align against fixed row heights.',
+ html: alignmentMatrix
+ },
+ {
+ title: 'Inline formatting stew',
+ subtitle:
+ 'Nested emphasis, sub/sup, wild font-size shifts and the full weight scale in one column.',
+ html: inlineFormattingStew
+ },
+ {
+ title: 'Preformatted blocks in cells',
+ subtitle:
+ ' content whose intrinsic width is set by the longest source line.',
+ html: preformattedCode
+ },
+ {
+ title: 'CJK, RTL and emoji',
+ subtitle:
+ 'Scripts that wrap by different rules, plus multi-codepoint emoji sequences.',
+ html: internationalText
+ },
+ {
+ title: 'Conflicting width declarations',
+ subtitle:
+ 'colgroup, inline style and the width attribute disagree on every column.',
+ html: conflictingWidths
+ },
+ {
+ title: 'Separate borders and spacing',
+ subtitle:
+ 'border-collapse: separate with border-spacing, mixed border styles and radii.',
+ html: separateBorders
+ },
+ {
+ title: 'Header-only grid',
+ subtitle: 'A thead with no tbody — every cell is a .',
+ html: headerOnlyGrid
+ },
+ {
+ title: 'Twenty rows',
+ subtitle:
+ 'A long body with alternating cell lengths, to check row-height drift.',
+ html: tallTwentyRows
+ },
+ {
+ title: 'Block content in cells',
+ subtitle:
+ 'Headings, paragraphs with margins, a blockquote, an
and a flex row.',
+ html: blockContentInCells
+ },
+ {
+ title: 'Zero and near-zero columns',
+ subtitle: 'Columns declared at 0%, 1% and 4% next to one claiming 95%.',
+ html: zeroAndTinyColumns
+ },
+ {
+ title: 'Percentages summing to 180%',
+ subtitle: 'Three columns each asking for 60% of the table.',
+ html: overflowingPercents
+ },
+ {
+ title: 'Images in cells',
+ subtitle:
+ 'An intrinsically sized image, an oversized one with no dimensions, and a broken source.',
+ html: imagesInCells
+ },
+ {
+ title: 'Whitespace-sensitive cells',
+ subtitle:
+ 'Source indentation, white-space: pre and white-space: nowrap inside cells.',
+ html: whitespaceSensitive
+ }
+];
+
+export const realTable = wrap(
+ tables.map(({ html }) => html).join(`\n ${SPACER}\n `)
+);
+
+const sharedTagsStyles = {
+ a: {
+ color: '#419edc',
+ textDecorationColor: '#419edc'
+ }
+};
+
+const webViewConfig = {
+ renderers: { table },
+ WebView,
+ renderersProps: {
+ table: {
+ animationType: 'animated',
+ tableStyleSpecs: {
+ outerBorderWidthPx: 1,
+ rowsBorderWidthPx: 1,
+ columnsBorderWidthPx: 1
+ }
+ }
+ },
+ tagsStyles: {
+ ...sharedTagsStyles,
+ table: {
+ flex: 1
+ }
+ },
+ defaultWebViewProps: {}
+};
+
+const heuristicConfig = {
+ renderers: heuristicTableRenderers,
+ customHTMLElementModels: {
+ colgroup: colgroupModel
+ },
+ renderersProps: {
+ table: {
+ forceStretch: false,
+ baseFontCoeff: 0.55,
+ // Treat an explicit `height` on the table or any cell as a minimum, so
+ // every case here grows to fit content taller than the markup asked for.
+ growBeyondHeight: true,
+ // Real bold faces run a few percent wider than regular, not a third
+ // wider, which is what the library defaults assume.
+ fontWeightCoeffs: {
+ 100: 0.7,
+ 200: 0.8,
+ 300: 0.9,
+ 400: 1,
+ 500: 1.1,
+ 600: 1.2,
+ 700: 1.3,
+ 800: 1.4,
+ 900: 1.5,
+ bold: 1.3
+ },
+ getStyleForCell(cell) {
+ return cell.tnode.tagName === 'td'
+ ? {
+ backgroundColor:
+ cell.y % 2 > 0
+ ? 'rgba(65, 91, 118, .02)'
+ : 'rgba(65, 91, 118, .10)'
+ }
+ : null;
+ }
+ }
+ },
+ tagsStyles: {
+ ...sharedTagsStyles,
+ table: {
+ borderColor: '#dfdfdf',
+ borderWidth: 0.5,
+ marginVertical: 10
+ },
+ th: {
+ textAlign: 'center',
+ backgroundColor: '#243445',
+ color: '#fefefe',
+ // padding: 5,
+ borderColor: '#2f455b',
+ borderWidth: 0.5
+ },
+ td: {
+ textAlign: 'center',
+ // padding: 2,
+ borderColor: '#dfdfdf',
+ borderWidth: 0.5
+ }
+ }
+};
+
+function Renderer({ label, config, html, availableWidth, onLinkPress, uid }) {
+ return (
+
+ {label}
+
+
+ );
+}
+
+function TableComparison({
+ index,
+ title,
+ subtitle,
+ html,
+ instance,
+ availableWidth,
+ onLinkPress
+}) {
+ const source = wrap(html);
+ return (
+
+
+ {index}. {title}
+
+ {subtitle}
+
+
+
+ );
+}
+
+export default function ComparisonExample({
+ instance,
+ onLinkPress,
+ availableWidth
+}) {
+ return (
+
+ {tables.map(({ title, subtitle, html }, i) => (
+
+ ))}
+
+ );
+}
+
+const styles = StyleSheet.create({
+ comparison: {
+ marginBottom: 40
+ },
+ comparisonTitle: {
+ fontSize: 17,
+ fontWeight: 'bold',
+ marginBottom: 4
+ },
+ comparisonSubtitle: {
+ marginBottom: 10,
+ color: '#555'
+ },
+ renderer: {
+ marginTop: 10
+ },
+ rendererLabel: {
+ fontFamily: Platform.select({ default: 'monospace', ios: 'Menlo' }),
+ fontSize: 12,
+ color: '#243445',
+ marginBottom: 4
+ }
+});
diff --git a/example/HeuristicTableExample.js b/example/HeuristicTableExample.js
index 0d420fc..55616bc 100644
--- a/example/HeuristicTableExample.js
+++ b/example/HeuristicTableExample.js
@@ -1,6 +1,9 @@
import React from 'react';
import RenderHTML from '@native-html/render';
-import tableRenderers from '@native-html/heuristic-table-plugin';
+import tableRenderers, {
+ colgroupModel
+} from '@native-html/heuristic-table-plugin';
+import { realTable } from './ComparisonExample';
const table1 = `
@@ -338,9 +341,11 @@ const wideTable = `
`;
-
const htmlConfig = {
renderers: tableRenderers,
+ customHTMLElementModels: {
+ colgroup: colgroupModel
+ },
renderersProps: {
table: {
forceStretch: false,
@@ -383,7 +388,7 @@ const htmlConfig = {
}
};
-const html = `${table1}${wideTable}${tableSpan}`;
+const html = `${table1}${wideTable}${tableSpan}${realTable}`;
export default function HeuristicTable({
instance,
diff --git a/example/tsconfig.json b/example/tsconfig.json
new file mode 100644
index 0000000..0e6371f
--- /dev/null
+++ b/example/tsconfig.json
@@ -0,0 +1,4 @@
+{
+ "compilerOptions": {},
+ "extends": "expo/tsconfig.base"
+}
diff --git a/packages/heuristic-table-plugin/README.md b/packages/heuristic-table-plugin/README.md
index ee0513e..cfc60e3 100644
--- a/packages/heuristic-table-plugin/README.md
+++ b/packages/heuristic-table-plugin/README.md
@@ -58,7 +58,7 @@ yarn add @native-html/heuristic-table-plugin
import React from 'react';
import { ScrollView } from 'react-native';
import HTML from '@native-html/render';
-import tableRenderers from '@native-html/heuristic-table-plugin';
+import tableRenderers, {colgroupModel} from '@native-html/heuristic-table-plugin';
const html = `
@@ -74,10 +74,13 @@ const html = `
`;
const htmlProps = {
- WebView,
renderers: {
...tableRenderers
},
+ customHTMLElementModels: {
+ // Required for widths declared by and .
+ colgroup: colgroupModel
+ },
renderersProps: {
table: {
// Put the table config here
@@ -98,6 +101,48 @@ to the `renderersProps.table` prop of `RenderHTML` component.
See the documentation for this object here: [`HeuristicTablePluginConfig`](docs/heuristic-table-plugin.heuristictablepluginconfig.md)
+| Option | Default | What it does |
+| --- | --- | --- |
+| `forceStretch` | `true` | Whether an auto-width table fills its containing block, or shrinks to fit its content. |
+| `growBeyondHeight` | `false` | Whether a declared table `height` is a minimum the table may grow past, or a fixed viewport that scrolls. |
+| `borderCollapse` | from the markup | Overrides the table's border model. When omitted, an inline `border-collapse` (or a `rules` attribute) decides. |
+| `baseFontCoeff` | `0.65` | The average character width, as a fraction of the font size. Text is estimated, never measured — raise it if tables come out too narrow, lower it if cells claim more width than their content needs. |
+| `fontWeightCoeffs` | see below | How much wider text renders per font weight, keyed by the stringified `fontWeight`. Merged over the defaults, so `{ bold: 1.05 }` retunes bold alone. |
+| `getStyleForCell` | — | Returns extra styles per cell. Called once per cell per layout, against provisional widths. |
+
+Pass `fontWeightCoeffs` and `getStyleForCell` as referentially stable values: a
+fresh literal on every render relays out every table using it.
+
+### Cell padding
+
+As in HTML, where the user-agent stylesheet declares `td, th { padding: 1px }`,
+cells are padded by one pixel on every side they declare no padding for. It is
+a user-agent declaration, so any author padding outranks it, side by side: a
+cell with `padding-left: 8px` keeps the default pixel on the three sides it
+left alone, and `padding: 0` removes it altogether. A padding from
+`getStyleForCell`, shorthand included, replaces it too.
+
+Callback padding overrides the source padding on the sides it covers, including
+resolved user-agent styles and inline CSS. For example, `{ padding: 8 }` sets
+every side to 8 even if the cell declares `padding-left: 4px`; a callback's own
+`paddingLeft` still takes precedence over its `padding` shorthand.
+
+`getStyleForCell` padding and borders participate in layout. The plugin first
+calculates provisional cell widths from source styles, calls the callback once
+per cell, then calculates final widths using its returned styles. Those same
+styles are reused when rendering, including when borders collapse.
+
+The callback's `cell.width` and constraints are **provisional**: they do not yet
+include its returned styles. Width-dependent callbacks are not repeatedly
+evaluated, so a callback that switches padding at a width threshold cannot
+create a layout loop. Keep the callback referentially stable; changing it
+recalculates the layout.
+
+In collapsed mode, shared borders are resolved against adjacent cells. If a
+spanning cell meets several differently styled borders along one side, the
+strongest border is used for that whole side. Native Views also have one border
+style for all sides, so the strongest winning style is used for the View.
+
## Custom Renderers
### Customizing Root renderer
@@ -109,9 +154,11 @@ import React from 'react';
import tableRenderers, {useHtmlTableProps, HTMLTable} from '@native-html/heuristic-table-plugin';
function TableRenderer(props) {
- const tableProps = useHtmlTableProps(props, /* config */);
+ const tableProps = useHtmlTableProps(props);
+ // Table options come from `renderersProps.table`, not from this hook.
+ // Its optional second argument is `{ overrideContentWidth }` alone.
// Do customize the props here; wrap with your own container...
- return ;
+ return ;
};
const renderers = {
@@ -124,8 +171,8 @@ const renderers = {
### Customizing Th and Td renderers
-You can customize cell rendering via `useHtmlTableCellProps`, `thModel` and
-`tdModel` exports. This renderer will receive a special `propsFromParent` of
+You can customize cell rendering via the `useHtmlTableCellProps` hook. Such a
+renderer receives a special `propsFromParent` of
type
[`TableCellPropsFromParent`](docs/heuristic-table-plugin.tablecellpropsfromparent.md).
You can take advantage of this information to customize depending on the
@@ -136,8 +183,7 @@ import React from 'react';
import {
TableRenderer,
ThRenderer,
- useHtmlTableCellProps,
- tdModel
+ useHtmlTableCellProps
} from '@native-html/heuristic-table-plugin';
function TdRenderer(props) {
@@ -145,12 +191,12 @@ function TdRenderer(props) {
// The cell parent prop contains information about this cell,
// especially its position (x, y) and lengths (lenX, lenY).
// In this example, we customize the background depending on the
- // y coordinate (row index).
+ // x coordinate (column index).
const { cell } = cellProps.propsFromParent;
const style = [
cellProps.style,
- backgroundColor: cell.x % 2 === 0 ? 'lightgray' : 'white'
- ]
+ { backgroundColor: cell.x % 2 === 0 ? 'lightgray' : 'white' }
+ ];
return React.createElement(cellProps.TDefaultRenderer, { ...cellProps, style });
}
@@ -173,13 +219,35 @@ problem](https://dl.acm.org/doi/abs/10.1145/304893.304937).
To resolve this problem, this library uses a dumb and cheap algorithm, which
won't find the *best* solution but instead a visually acceptable layout.
+### 0. Available width resolution
+
+`contentWidth` is published once, at the root of the render tree, and is never
+narrowed as the engine descends. Before anything else, the table walks up its
+ancestors and subtracts the horizontal spacing each one imposes — padding,
+border and margin — along with any explicit width they declare. Its own
+margins come off next, and its own padding and border after that, since a
+React Native `width` is a border box. What is left is the width its columns
+may occupy.
+
+A table inside `` therefore lays out against
+`contentWidth - 40` and stays inside its parent, rather than overflowing it
+into a horizontal scroller.
+
### 1. Cell constraints extraction
-In the first step, each cell of the table is parsed to extract two metrics:
-`minWidth` and `contentDensity`. `minWidth` is an estimation of the width taken
-by the longest word in the cell, or the explicit width or min-width of any
-block in the cell, or the greatest of the two. `contentDensity` is the width
-taken by all the text displayed in one line.
+In the first step, each cell of the table is parsed to extract three metrics:
+
+- `minWidth`, an estimate of the cell's min-content width: its longest
+ unbreakable text run or the greatest width imposed by one of its blocks,
+ plus horizontal spacing — the cell's borders and padding, the
+ [default cell padding](#cell-padding) included. Margins take no part: the
+ cell renderer zeroes them, so column width reserved for one would only
+ leave a gap nothing paints;
+- `maxWidth`, the width beyond which the cell would gain nothing, bounded by
+ the cell's own `max-width` but never below `minWidth`;
+- `contentDensity`, the sum of the estimated widths of all text; forced
+ line breaks do not reduce this density. `maxWidth` instead uses the widest
+ forced line, keeping text on separate lines from widening the column.
### 2. Column constraints reduction
@@ -187,14 +255,49 @@ In the second step, cell constraints are reduced per column. Three metrics come
- `minWidth`, the maximum of each cell `minWidth`;
- `contentDensity`, the sum of each cell `contentDensity`;
-- `spread`, the maximum of each cell `contentDensity`.
-
-### 3. Column widths calculation
+- `spread`, the maximum of each cell `maxWidth`, never below the column's
+ `minWidth`.
-Let `minTableWidth` be the sum of all column `minWidth`. If `minTableWidth >
-contentWidth`, assign to each column a width corresponding to its `minWidth`
-constraint.
+Widths and bounds declared by ` ` and `` are then folded into
+these constraints. Percentage widths from cells, columns, and column groups remain preferences
+until distribution. Cell percentages are combined by maximum across rows;
+a spanning cell shares its percentage across the columns it covers.
-Otherwise, let `spaceToAllocate = contentWidth - minTableWidth`. Allocate to each column a width equal to its `minWidth` constraint + `spaceToAllocate * gamma`, with `gamma = (normalContentDensity) / sum(normalContentDensities)`. The `normalContentDensity` is `contentDensity - min(contentDensities)`.
+### 3. Column widths calculation
-Finally, clamp the assign width to the `spread` constraint for this column, unless `forceStretch` parameter is set to `true`.
+If the sum of the column minimums exceeds the assignable width, every column
+keeps its `minWidth` and the table scrolls horizontally. Otherwise, the
+algorithm grows columns in passes:
+
+1. Percentage columns move from their minimums toward their declared shares.
+2. Auto and absolute-width columns move toward their max-content `spread`.
+3. When the table must stretch, any remaining width is distributed among
+ columns that have room below their declared caps.
+
+Each intermediate pass is interpolated to keep the result within the
+assignable table width. Space that no column can accept is left unassigned.
+
+`forceStretch` defaults to `true`, so a table fills the width its containing
+block leaves it. Set it to `false` in `renderersProps.table` to let an
+auto-width table shrink to fit its content instead. A table with an explicit
+width always distributes that width over its columns, whatever `forceStretch`
+is set to.
+
+### Table and cell heights
+
+Per [CSS 2.1 §17.5.3](https://www.w3.org/TR/CSS21/tables.html#height-layout),
+`height` on a `table`, `tr`, `th` or `td` box is only a *minimum*: the box
+always grows to fit its content. React Native has no table layout algorithm to
+shrink a row back down, so this plugin enforces a declared `height` as written
+by default, and taller content overflows it.
+
+Set `growBeyondHeight` to `true` in `renderersProps.table` to get the CSS
+behavior instead: an explicit `height` on the table or on any of its cells is
+folded into `minHeight`, and the box grows past it to fit its content.
+
+```tsx
+
+```
diff --git a/packages/heuristic-table-plugin/docs/heuristic-table-plugin.colgroupmodel.md b/packages/heuristic-table-plugin/docs/heuristic-table-plugin.colgroupmodel.md
new file mode 100644
index 0000000..164c033
--- /dev/null
+++ b/packages/heuristic-table-plugin/docs/heuristic-table-plugin.colgroupmodel.md
@@ -0,0 +1,13 @@
+
+
+[Home](./index.md) > [@native-html/heuristic-table-plugin](./heuristic-table-plugin.md) > [colgroupModel](./heuristic-table-plugin.colgroupmodel.md)
+
+## colgroupModel variable
+
+Element model required for colgroup children to be available to the table layout engine. Col elements remain non-rendering empty nodes.
+
+**Signature:**
+
+```typescript
+colgroupModel: HTMLElementModel<'colgroup', HTMLContentModel.block>
+```
diff --git a/packages/heuristic-table-plugin/docs/heuristic-table-plugin.default_font_weight_coeffs.md b/packages/heuristic-table-plugin/docs/heuristic-table-plugin.default_font_weight_coeffs.md
new file mode 100644
index 0000000..6741a2e
--- /dev/null
+++ b/packages/heuristic-table-plugin/docs/heuristic-table-plugin.default_font_weight_coeffs.md
@@ -0,0 +1,18 @@
+
+
+[Home](./index.md) > [@native-html/heuristic-table-plugin](./heuristic-table-plugin.md) > [DEFAULT\_FONT\_WEIGHT\_COEFFS](./heuristic-table-plugin.default_font_weight_coeffs.md)
+
+## DEFAULT\_FONT\_WEIGHT\_COEFFS variable
+
+The coefficients used when the config supplies none.
+
+**Signature:**
+
+```typescript
+DEFAULT_FONT_WEIGHT_COEFFS: FontWeightCoefficients
+```
+
+## Remarks
+
+A user-supplied map is merged over these rather than replacing them, so a config may retune `bold` alone without restating all nine numeric weights.
+
diff --git a/packages/heuristic-table-plugin/docs/heuristic-table-plugin.fontweightcoefficients.md b/packages/heuristic-table-plugin/docs/heuristic-table-plugin.fontweightcoefficients.md
new file mode 100644
index 0000000..a6c619b
--- /dev/null
+++ b/packages/heuristic-table-plugin/docs/heuristic-table-plugin.fontweightcoefficients.md
@@ -0,0 +1,18 @@
+
+
+[Home](./index.md) > [@native-html/heuristic-table-plugin](./heuristic-table-plugin.md) > [FontWeightCoefficients](./heuristic-table-plugin.fontweightcoefficients.md)
+
+## FontWeightCoefficients type
+
+How much wider text renders at a given font weight than at a regular one.
+
+**Signature:**
+
+```typescript
+export type FontWeightCoefficients = Record;
+```
+
+## Remarks
+
+Keys are matched against the resolved `fontWeight` stringified, so both the numeric weights React Native accepts and the `normal`/`bold` keywords are looked up here. A weight with no entry falls back to a coefficient of 1.
+
diff --git a/packages/heuristic-table-plugin/docs/heuristic-table-plugin.heuristictablepluginconfig.basefontcoeff.md b/packages/heuristic-table-plugin/docs/heuristic-table-plugin.heuristictablepluginconfig.basefontcoeff.md
new file mode 100644
index 0000000..5c35357
--- /dev/null
+++ b/packages/heuristic-table-plugin/docs/heuristic-table-plugin.heuristictablepluginconfig.basefontcoeff.md
@@ -0,0 +1,18 @@
+
+
+[Home](./index.md) > [@native-html/heuristic-table-plugin](./heuristic-table-plugin.md) > [HeuristicTablePluginConfig](./heuristic-table-plugin.heuristictablepluginconfig.md) > [baseFontCoeff](./heuristic-table-plugin.heuristictablepluginconfig.basefontcoeff.md)
+
+## HeuristicTablePluginConfig.baseFontCoeff property
+
+The average advance width of one character, as a fraction of the font size, used to estimate how wide a cell's text is.
+
+**Signature:**
+
+```typescript
+baseFontCoeff?: number;
+```
+
+## Remarks
+
+Text is never measured, only estimated: a cell's bounds are its character count times this coefficient times the font size. Raise it when tables come out too narrow and their text wraps more than it should, lower it when cells claim more width than their content occupies.
+
diff --git a/packages/heuristic-table-plugin/docs/heuristic-table-plugin.heuristictablepluginconfig.bordercollapse.md b/packages/heuristic-table-plugin/docs/heuristic-table-plugin.heuristictablepluginconfig.bordercollapse.md
new file mode 100644
index 0000000..51db12a
--- /dev/null
+++ b/packages/heuristic-table-plugin/docs/heuristic-table-plugin.heuristictablepluginconfig.bordercollapse.md
@@ -0,0 +1,13 @@
+
+
+[Home](./index.md) > [@native-html/heuristic-table-plugin](./heuristic-table-plugin.md) > [HeuristicTablePluginConfig](./heuristic-table-plugin.heuristictablepluginconfig.md) > [borderCollapse](./heuristic-table-plugin.heuristictablepluginconfig.bordercollapse.md)
+
+## HeuristicTablePluginConfig.borderCollapse property
+
+Override the table's border model. When omitted, an inline `border-collapse` declaration from the table is used.
+
+**Signature:**
+
+```typescript
+borderCollapse?: 'collapse' | 'separate';
+```
diff --git a/packages/heuristic-table-plugin/docs/heuristic-table-plugin.heuristictablepluginconfig.fontweightcoeffs.md b/packages/heuristic-table-plugin/docs/heuristic-table-plugin.heuristictablepluginconfig.fontweightcoeffs.md
new file mode 100644
index 0000000..c58a04b
--- /dev/null
+++ b/packages/heuristic-table-plugin/docs/heuristic-table-plugin.heuristictablepluginconfig.fontweightcoeffs.md
@@ -0,0 +1,18 @@
+
+
+[Home](./index.md) > [@native-html/heuristic-table-plugin](./heuristic-table-plugin.md) > [HeuristicTablePluginConfig](./heuristic-table-plugin.heuristictablepluginconfig.md) > [fontWeightCoeffs](./heuristic-table-plugin.heuristictablepluginconfig.fontweightcoeffs.md)
+
+## HeuristicTablePluginConfig.fontWeightCoeffs property
+
+How much wider text renders at a given font weight than at a regular one, keyed by the stringified `fontWeight`.
+
+**Signature:**
+
+```typescript
+fontWeightCoeffs?: FontWeightCoefficients;
+```
+
+## Remarks
+
+Merged over the defaults rather than replacing them, so `{ bold: 1.05 }` retunes bold text alone and leaves the numeric weights as they were. A weight with no entry, before or after merging, costs nothing. Pass a referentially stable object — a fresh literal on every render relays out every table using it.
+
diff --git a/packages/heuristic-table-plugin/docs/heuristic-table-plugin.heuristictablepluginconfig.forcestretch.md b/packages/heuristic-table-plugin/docs/heuristic-table-plugin.heuristictablepluginconfig.forcestretch.md
index f5d7ad8..fbd739f 100644
--- a/packages/heuristic-table-plugin/docs/heuristic-table-plugin.heuristictablepluginconfig.forcestretch.md
+++ b/packages/heuristic-table-plugin/docs/heuristic-table-plugin.heuristictablepluginconfig.forcestretch.md
@@ -4,7 +4,7 @@
## HeuristicTablePluginConfig.forceStretch property
-When true, force the table to stretch to the available width.
+When true, the table stretches to fill the width its containing block offers — `contentWidth`, less the horizontal spacing of every ancestor. When false, a table with an auto width shrinks to fit its content.
**Signature:**
diff --git a/packages/heuristic-table-plugin/docs/heuristic-table-plugin.heuristictablepluginconfig.getstyleforcell.md b/packages/heuristic-table-plugin/docs/heuristic-table-plugin.heuristictablepluginconfig.getstyleforcell.md
index 580cec5..f3f5572 100644
--- a/packages/heuristic-table-plugin/docs/heuristic-table-plugin.heuristictablepluginconfig.getstyleforcell.md
+++ b/packages/heuristic-table-plugin/docs/heuristic-table-plugin.heuristictablepluginconfig.getstyleforcell.md
@@ -6,6 +6,8 @@
Customize cells appearance with this function.
+Called once per cell per layout, with provisional widths measured from source styles. Returned styles are saved, included in the final layout, and reused for rendering. Width-dependent callbacks are not iterated. Keep this function referentially stable to avoid unnecessary layouts.
+
**Signature:**
```typescript
@@ -42,7 +44,7 @@ cell
-The cell for which styles should be provided.
+The cell with its provisional width and constraints.
|
diff --git a/packages/heuristic-table-plugin/docs/heuristic-table-plugin.heuristictablepluginconfig.growbeyondheight.md b/packages/heuristic-table-plugin/docs/heuristic-table-plugin.heuristictablepluginconfig.growbeyondheight.md
new file mode 100644
index 0000000..8c5b3e7
--- /dev/null
+++ b/packages/heuristic-table-plugin/docs/heuristic-table-plugin.heuristictablepluginconfig.growbeyondheight.md
@@ -0,0 +1,18 @@
+
+
+[Home](./index.md) > [@native-html/heuristic-table-plugin](./heuristic-table-plugin.md) > [HeuristicTablePluginConfig](./heuristic-table-plugin.heuristictablepluginconfig.md) > [growBeyondHeight](./heuristic-table-plugin.heuristictablepluginconfig.growbeyondheight.md)
+
+## HeuristicTablePluginConfig.growBeyondHeight property
+
+When true, an explicit table `height` is treated as a minimum and the table grows to fit taller content. When false, the table keeps that height and scrolls vertically. Rows and cells always grow to fit their content; their declared heights are minimums in either mode.
+
+**Signature:**
+
+```typescript
+growBeyondHeight?: boolean;
+```
+
+## Remarks
+
+Per [CSS 2.1 §17.5.3](https://www.w3.org/TR/CSS21/tables.html#height-layout), `height` on a `table`, `tr`, `th` or `td` box is only a minimum, so `true` is the faithful reading of the HTML. It is off by default to preserve the requested table viewport size while keeping all content accessible by scrolling.
+
diff --git a/packages/heuristic-table-plugin/docs/heuristic-table-plugin.heuristictablepluginconfig.md b/packages/heuristic-table-plugin/docs/heuristic-table-plugin.heuristictablepluginconfig.md
index e9ae0f7..59e4443 100644
--- a/packages/heuristic-table-plugin/docs/heuristic-table-plugin.heuristictablepluginconfig.md
+++ b/packages/heuristic-table-plugin/docs/heuristic-table-plugin.heuristictablepluginconfig.md
@@ -37,6 +37,63 @@ Description
|
+[baseFontCoeff?](./heuristic-table-plugin.heuristictablepluginconfig.basefontcoeff.md)
+
+
+ |
+
+
+ |
+
+number
+
+
+ |
+
+_(Optional)_ The average advance width of one character, as a fraction of the font size, used to estimate how wide a cell's text is.
+
+
+ |
+|
+
+[borderCollapse?](./heuristic-table-plugin.heuristictablepluginconfig.bordercollapse.md)
+
+
+ |
+
+
+ |
+
+'collapse' \| 'separate'
+
+
+ |
+
+_(Optional)_ Override the table's border model. When omitted, an inline `border-collapse` declaration from the table is used.
+
+
+ |
+|
+
+[fontWeightCoeffs?](./heuristic-table-plugin.heuristictablepluginconfig.fontweightcoeffs.md)
+
+
+ |
+
+
+ |
+
+[FontWeightCoefficients](./heuristic-table-plugin.fontweightcoefficients.md)
+
+
+ |
+
+_(Optional)_ How much wider text renders at a given font weight than at a regular one, keyed by the stringified `fontWeight`.
+
+
+ |
+|
+
[forceStretch?](./heuristic-table-plugin.heuristictablepluginconfig.forcestretch.md)
@@ -50,7 +107,26 @@ boolean
|
-_(Optional)_ When true, force the table to stretch to the available width.
+_(Optional)_ When true, the table stretches to fill the width its containing block offers — `contentWidth`, less the horizontal spacing of every ancestor. When false, a table with an auto width shrinks to fit its content.
+
+
+ |
+|
+
+[growBeyondHeight?](./heuristic-table-plugin.heuristictablepluginconfig.growbeyondheight.md)
+
+
+ |
+
+
+ |
+
+boolean
+
+
+ |
+
+_(Optional)_ When true, an explicit table `height` is treated as a minimum and the table grows to fit taller content. When false, the table keeps that height and scrolls vertically. Rows and cells always grow to fit their content; their declared heights are minimums in either mode.
|
@@ -78,6 +154,8 @@ Description
_(Optional)_ Customize cells appearance with this function.
+Called once per cell per layout, with provisional widths measured from source styles. Returned styles are saved, included in the final layout, and reused for rendering. Width-dependent callbacks are not iterated. Keep this function referentially stable to avoid unnecessary layouts.
+
diff --git a/packages/heuristic-table-plugin/docs/heuristic-table-plugin.htmltable.md b/packages/heuristic-table-plugin/docs/heuristic-table-plugin.htmltable.md
index d5bb208..7248557 100644
--- a/packages/heuristic-table-plugin/docs/heuristic-table-plugin.htmltable.md
+++ b/packages/heuristic-table-plugin/docs/heuristic-table-plugin.htmltable.md
@@ -2,12 +2,69 @@
[Home](./index.md) > [@native-html/heuristic-table-plugin](./heuristic-table-plugin.md) > [HTMLTable](./heuristic-table-plugin.htmltable.md)
-## HTMLTable variable
+## HTMLTable() function
A component to render tables.
**Signature:**
```typescript
-HTMLTable: React.NamedExoticComponent
+declare function HTMLTable(input: HTMLTableProps): React.JSX.Element;
```
+
+## Parameters
+
+|
+
+Parameter
+
+
+ |
+
+Type
+
+
+ |
+
+Description
+
+
+ |
|---|
+|
+
+{ layout, TDefaultRenderer, config, ...props }
+
+
+ |
+
+(not declared)
+
+
+ |
+
+
+ |
+|
+
+input
+
+
+ |
+
+[HTMLTableProps](./heuristic-table-plugin.htmltableprops.md)
+
+
+ |
+
+
+ |
+
+
+**Returns:**
+
+React.JSX.Element
+
+## Remarks
+
+Deliberately not wrapped in `memo`. The render engine rebuilds `style`, `propsForChildren` and the container props on every render, so a shallow prop comparison can never hold and the wrapper only ever costs a compare. The expensive half — building the table layout — is memoized inside [useHtmlTableProps()](./heuristic-table-plugin.usehtmltableprops.md) instead, where the inputs are stable.
+
diff --git a/packages/heuristic-table-plugin/docs/heuristic-table-plugin.htmltableprops.md b/packages/heuristic-table-plugin/docs/heuristic-table-plugin.htmltableprops.md
index e9a1cfe..9b4c10b 100644
--- a/packages/heuristic-table-plugin/docs/heuristic-table-plugin.htmltableprops.md
+++ b/packages/heuristic-table-plugin/docs/heuristic-table-plugin.htmltableprops.md
@@ -4,7 +4,7 @@
## HTMLTableProps interface
-Props for the [HTMLTable](./heuristic-table-plugin.htmltable.md) component.
+Props for the [HTMLTable()](./heuristic-table-plugin.htmltable.md) component.
**Signature:**
@@ -69,23 +69,6 @@ TableLayout
- |
-|
-
-[settings](./heuristic-table-plugin.htmltableprops.settings.md)
-
-
- |
-
-
- |
-
-Settings
-
-
- |
-
-
|
diff --git a/packages/heuristic-table-plugin/docs/heuristic-table-plugin.htmltableprops.settings.md b/packages/heuristic-table-plugin/docs/heuristic-table-plugin.htmltableprops.settings.md
deleted file mode 100644
index ff9e20d..0000000
--- a/packages/heuristic-table-plugin/docs/heuristic-table-plugin.htmltableprops.settings.md
+++ /dev/null
@@ -1,11 +0,0 @@
-
-
-[Home](./index.md) > [@native-html/heuristic-table-plugin](./heuristic-table-plugin.md) > [HTMLTableProps](./heuristic-table-plugin.htmltableprops.md) > [settings](./heuristic-table-plugin.htmltableprops.settings.md)
-
-## HTMLTableProps.settings property
-
-**Signature:**
-
-```typescript
-settings: Settings;
-```
diff --git a/packages/heuristic-table-plugin/docs/heuristic-table-plugin.md b/packages/heuristic-table-plugin/docs/heuristic-table-plugin.md
index 0da7fff..7cc1e90 100644
--- a/packages/heuristic-table-plugin/docs/heuristic-table-plugin.md
+++ b/packages/heuristic-table-plugin/docs/heuristic-table-plugin.md
@@ -19,6 +19,17 @@ Description
|
|
+[HTMLTable({ layout, TDefaultRenderer, config, ...props }, input)](./heuristic-table-plugin.htmltable.md)
+
+
+ |
+
+A component to render tables.
+
+
+ |
+|
+
[useHtmlTableCellProps({ propsFromParent, ...props }, input)](./heuristic-table-plugin.usehtmltablecellprops.md)
@@ -102,7 +113,18 @@ Options to customize this plugin renderers.
|
-Props for the [HTMLTable](./heuristic-table-plugin.htmltable.md) component.
+Props for the [HTMLTable()](./heuristic-table-plugin.htmltable.md) component.
+
+
+ |
+|
+
+[Settings](./heuristic-table-plugin.settings.md)
+
+
+ |
+
+Everything the table layout engine needs to lay a table out: the author configuration, plus the width the document offers it.
|
@@ -179,12 +201,23 @@ Description
|
-[HTMLTable](./heuristic-table-plugin.htmltable.md)
+[colgroupModel](./heuristic-table-plugin.colgroupmodel.md)
|
-A component to render tables.
+Element model required for colgroup children to be available to the table layout engine. Col elements remain non-rendering empty nodes.
+
+
+ |
+|
+
+[DEFAULT\_FONT\_WEIGHT\_COEFFS](./heuristic-table-plugin.default_font_weight_coeffs.md)
+
+
+ |
+
+The coefficients used when the config supplies none.
|
@@ -234,3 +267,29 @@ The renderer component for `th` tag.
+## Type Aliases
+
+|
+
+Type Alias
+
+
+ |
+
+Description
+
+
+ |
|---|
+|
+
+[FontWeightCoefficients](./heuristic-table-plugin.fontweightcoefficients.md)
+
+
+ |
+
+How much wider text renders at a given font weight than at a regular one.
+
+
+ |
+
+
diff --git a/packages/heuristic-table-plugin/docs/heuristic-table-plugin.settings.contentwidth.md b/packages/heuristic-table-plugin/docs/heuristic-table-plugin.settings.contentwidth.md
new file mode 100644
index 0000000..8958b60
--- /dev/null
+++ b/packages/heuristic-table-plugin/docs/heuristic-table-plugin.settings.contentwidth.md
@@ -0,0 +1,18 @@
+
+
+[Home](./index.md) > [@native-html/heuristic-table-plugin](./heuristic-table-plugin.md) > [Settings](./heuristic-table-plugin.settings.md) > [contentWidth](./heuristic-table-plugin.settings.contentwidth.md)
+
+## Settings.contentWidth property
+
+Available width at the root of the render tree, prior to scrolling.
+
+**Signature:**
+
+```typescript
+contentWidth: number;
+```
+
+## Remarks
+
+This is the width offered to the document as a whole. The horizontal spacing of the table's ancestors, and of the table itself, is subtracted from it by the table layout engine.
+
diff --git a/packages/heuristic-table-plugin/docs/heuristic-table-plugin.settings.md b/packages/heuristic-table-plugin/docs/heuristic-table-plugin.settings.md
new file mode 100644
index 0000000..0d46d25
--- /dev/null
+++ b/packages/heuristic-table-plugin/docs/heuristic-table-plugin.settings.md
@@ -0,0 +1,65 @@
+
+
+[Home](./index.md) > [@native-html/heuristic-table-plugin](./heuristic-table-plugin.md) > [Settings](./heuristic-table-plugin.settings.md)
+
+## Settings interface
+
+Everything the table layout engine needs to lay a table out: the author configuration, plus the width the document offers it.
+
+**Signature:**
+
+```typescript
+export interface Settings extends Omit
+```
+**Extends:** Omit<[HeuristicTablePluginConfig](./heuristic-table-plugin.heuristictablepluginconfig.md), 'growBeyondHeight'>
+
+## Remarks
+
+This is resolved by [useHtmlTableProps()](./heuristic-table-plugin.usehtmltableprops.md) and handed to [HTMLTable()](./heuristic-table-plugin.htmltable.md); it is not the shape a consumer writes. Author configuration goes to `renderersProps.table` as a [HeuristicTablePluginConfig](./heuristic-table-plugin.heuristictablepluginconfig.md), which carries no [Settings.contentWidth](./heuristic-table-plugin.settings.contentwidth.md).
+
+[HeuristicTablePluginConfig.growBeyondHeight](./heuristic-table-plugin.heuristictablepluginconfig.growbeyondheight.md) is deliberately absent: it decides whether a declared table `height` becomes a viewport or a minimum, which is a rendering choice [HTMLTable()](./heuristic-table-plugin.htmltable.md) reads from the config directly. Excluding it here keeps `useHtmlTableProps` from having to copy a field no layout pass reads — and makes that a compile error rather than a silent omission if it ever does.
+
+## Properties
+
+|
+
+Property
+
+
+ |
+
+Modifiers
+
+
+ |
+
+Type
+
+
+ |
+
+Description
+
+
+ |
|---|
+|
+
+[contentWidth](./heuristic-table-plugin.settings.contentwidth.md)
+
+
+ |
+
+
+ |
+
+number
+
+
+ |
+
+Available width at the root of the render tree, prior to scrolling.
+
+
+ |
+
+
diff --git a/packages/heuristic-table-plugin/docs/heuristic-table-plugin.tdrenderer.md b/packages/heuristic-table-plugin/docs/heuristic-table-plugin.tdrenderer.md
index 7673398..bedb974 100644
--- a/packages/heuristic-table-plugin/docs/heuristic-table-plugin.tdrenderer.md
+++ b/packages/heuristic-table-plugin/docs/heuristic-table-plugin.tdrenderer.md
@@ -9,5 +9,5 @@ The renderer component for `td` tag.
**Signature:**
```typescript
-TdRenderer: CustomBlockRenderer
+TdRenderer: import("@native-html/render").CustomBlockRenderer
```
diff --git a/packages/heuristic-table-plugin/docs/heuristic-table-plugin.threnderer.md b/packages/heuristic-table-plugin/docs/heuristic-table-plugin.threnderer.md
index cb90e67..10b37b3 100644
--- a/packages/heuristic-table-plugin/docs/heuristic-table-plugin.threnderer.md
+++ b/packages/heuristic-table-plugin/docs/heuristic-table-plugin.threnderer.md
@@ -9,5 +9,5 @@ The renderer component for `th` tag.
**Signature:**
```typescript
-ThRenderer: CustomBlockRenderer
+ThRenderer: import("@native-html/render").CustomBlockRenderer
```
diff --git a/packages/heuristic-table-plugin/docs/heuristic-table-plugin.usehtmltableprops.md b/packages/heuristic-table-plugin/docs/heuristic-table-plugin.usehtmltableprops.md
index 9a557ad..acdd6f4 100644
--- a/packages/heuristic-table-plugin/docs/heuristic-table-plugin.usehtmltableprops.md
+++ b/packages/heuristic-table-plugin/docs/heuristic-table-plugin.usehtmltableprops.md
@@ -82,5 +82,5 @@ _(Optional)_ Customize this hook behavior.
[HTMLTableProps](./heuristic-table-plugin.htmltableprops.md)
-props for the [HTMLTable](./heuristic-table-plugin.htmltable.md) component.
+props for the [HTMLTable()](./heuristic-table-plugin.htmltable.md) component.
diff --git a/packages/heuristic-table-plugin/etc/heuristic-table-plugin.api.md b/packages/heuristic-table-plugin/etc/heuristic-table-plugin.api.md
index 5a3eef2..b4697f5 100644
--- a/packages/heuristic-table-plugin/etc/heuristic-table-plugin.api.md
+++ b/packages/heuristic-table-plugin/etc/heuristic-table-plugin.api.md
@@ -6,6 +6,8 @@
import { CustomBlockRenderer } from '@native-html/render';
import { CustomRendererProps } from '@native-html/render';
+import { HTMLContentModel } from '@native-html/render';
+import { HTMLElementModel } from '@native-html/render';
import { PropsFromParent } from '@native-html/render';
import { default as React_2 } from 'react';
import { TBlock } from '@native-html/render';
@@ -24,6 +26,9 @@ export interface CellProperties extends Coordinates {
lenY: number;
}
+// @public
+export const colgroupModel: HTMLElementModel<'colgroup', HTMLContentModel.block>;
+
// @public (undocumented)
export interface Coordinates {
// (undocumented)
@@ -32,20 +37,30 @@ export interface Coordinates {
y: number;
}
+// @public
+export const DEFAULT_FONT_WEIGHT_COEFFS: FontWeightCoefficients;
+
// @public (undocumented)
export interface DisplayCell extends CellProperties {
// (undocumented)
tnode: TNode;
}
+// @public
+export type FontWeightCoefficients = Record;
+
// @public
export interface HeuristicTablePluginConfig {
+ baseFontCoeff?: number;
+ borderCollapse?: 'collapse' | 'separate';
+ fontWeightCoeffs?: FontWeightCoefficients;
forceStretch?: boolean;
getStyleForCell?(cell: TableCell): ViewStyle | null;
+ growBeyondHeight?: boolean;
}
// @public
-export const HTMLTable: React_2.NamedExoticComponent;
+export function HTMLTable(input: HTMLTableProps): React_2.JSX.Element;
// @public
export interface HTMLTableProps extends CustomRendererProps {
@@ -55,16 +70,17 @@ export interface HTMLTableProps extends CustomRendererProps {
//
// (undocumented)
layout: TableLayout;
- // Warning: (ae-forgotten-export) The symbol "Settings" needs to be exported by the entry point index.d.ts
- //
- // (undocumented)
- settings: Settings;
}
// @public
const renderers: Record<'th' | 'td' | 'table', CustomBlockRenderer>;
export default renderers;
+// @public
+export interface Settings extends Omit {
+ contentWidth: number;
+}
+
// @public
export interface TableCell extends DisplayCell {
// (undocumented)
diff --git a/packages/heuristic-table-plugin/jest.config.js b/packages/heuristic-table-plugin/jest.config.js
index cf5824c..2b3dc18 100644
--- a/packages/heuristic-table-plugin/jest.config.js
+++ b/packages/heuristic-table-plugin/jest.config.js
@@ -4,6 +4,6 @@ module.exports = {
testRegex: 'src/.*\\.test\\.tsx?$',
coveragePathIgnorePatterns: ['/node_modules/', '__tests__'],
transformIgnorePatterns: [
- 'node_modules/(?!(@react-native|react-native|ramda|@native-html|stringify-entities|character-entities-html4|character-entities-legacy)/)'
+ 'node_modules/(?!(@react-native|react-native|@native-html|stringify-entities|character-entities-html4|character-entities-legacy)/)'
]
};
diff --git a/packages/heuristic-table-plugin/package.json b/packages/heuristic-table-plugin/package.json
index 0f88d12..61ece4b 100644
--- a/packages/heuristic-table-plugin/package.json
+++ b/packages/heuristic-table-plugin/package.json
@@ -15,7 +15,7 @@
"scripts": {
"test": "yarn test:ts && yarn test:lint && yarn test:jest",
"test:jest": "jest src/",
- "test:ts": "tsc --noEmit",
+ "test:ts": "tsc --noEmit && tsc -p tsconfig.test.json",
"test:lint": "eslint src/",
"build": "yarn build:source && yarn build:defs && yarn build:doc",
"build:source": "bob build",
@@ -31,38 +31,30 @@
"plugins"
],
"devDependencies": {
- "@babel/cli": "^7.28.6",
"@babel/core": "^7.29.0",
+ "@babel/plugin-transform-private-methods": "^7.28.6",
+ "@babel/plugin-transform-private-property-in-object": "^7.28.6",
"@babel/plugin-transform-react-jsx": "^7.28.6",
"@babel/preset-typescript": "^7.28.5",
"@babel/runtime": "^7.28.6",
"@microsoft/api-documenter": "^7.29.6",
"@microsoft/api-extractor": "7.57.6",
"@native-html/render": "1.0.0-alpha.0",
- "@testing-library/react": "16.3.2",
+ "@native-html/transient-render-engine": "12.0.0-alpha.0",
"@testing-library/react-native": "^13.3.3",
"@tsconfig/react-native": "^3.0.9",
- "@types/html-validator": "^5.0.6",
"@types/jest": "^30.0.0",
"@types/react": "^19.2.14",
- "@types/react-native": "^0.73.0",
"babel-jest": "^30.2.0",
- "babel-plugin-inline-import": "^3.0.0",
+ "babel-plugin-syntax-hermes-parser": "^0.32.0",
"eslint": "^10.0.2",
"jest": "^30.2.0",
"metro-react-native-babel-preset": "^0.77.0",
- "metro-react-native-babel-transformer": "^0.77.0",
"react": "19.2.0",
"react-native": "0.83.2",
"react-native-builder-bob": "^0.40.18",
"typescript": "~5.8.2"
},
- "dependencies": {
- "@types/prop-types": "^15.7.15",
- "@types/ramda": "^0.31.1",
- "prop-types": "^15.8.1",
- "ramda": "^0.32.0"
- },
"peerDependencies": {
"@native-html/render": ">=1.0.0-alpha.0",
"react": ">= 16.8.0",
diff --git a/packages/heuristic-table-plugin/src/CellContentWidthContext.ts b/packages/heuristic-table-plugin/src/CellContentWidthContext.ts
new file mode 100644
index 0000000..3723fd2
--- /dev/null
+++ b/packages/heuristic-table-plugin/src/CellContentWidthContext.ts
@@ -0,0 +1,10 @@
+import { createContext } from 'react';
+import { TNode } from '@native-html/render';
+
+/** The actual content box assigned to a rendered table cell. */
+export interface CellContentBox {
+ tnode: TNode;
+ contentWidth: number;
+}
+
+export default createContext(undefined);
diff --git a/packages/heuristic-table-plugin/src/ColgroupModel.ts b/packages/heuristic-table-plugin/src/ColgroupModel.ts
new file mode 100644
index 0000000..153a59a
--- /dev/null
+++ b/packages/heuristic-table-plugin/src/ColgroupModel.ts
@@ -0,0 +1,20 @@
+import {
+ defaultHTMLElementModels,
+ HTMLContentModel,
+ HTMLElementModel
+} from '@native-html/render';
+
+/**
+ * Element model required for colgroup children to be available to the table
+ * layout engine. Col elements remain non-rendering empty nodes.
+ *
+ * @public
+ */
+const colgroupModel: HTMLElementModel<
+ 'colgroup',
+ HTMLContentModel.block
+> = defaultHTMLElementModels.colgroup.extend({
+ contentModel: HTMLContentModel.block
+});
+
+export default colgroupModel;
diff --git a/packages/heuristic-table-plugin/src/HTMLTable.tsx b/packages/heuristic-table-plugin/src/HTMLTable.tsx
index 05a703f..525cd7c 100644
--- a/packages/heuristic-table-plugin/src/HTMLTable.tsx
+++ b/packages/heuristic-table-plugin/src/HTMLTable.tsx
@@ -1,29 +1,62 @@
-import React, { memo, PropsWithChildren } from 'react';
+import React, { PropsWithChildren, useMemo } from 'react';
import { ScrollView, View } from 'react-native';
import TreeRenderer from './TreeRenderer';
+import TableRenderContext, {
+ TableRenderContextValue
+} from './TableRenderContext';
import { HTMLTableProps } from './shared-types';
-import { getHorizontalSpacing } from './helpers/measure';
+import relaxHeightConstraint from './helpers/relaxHeightConstraint';
+
+export function shouldScrollTable(
+ tableWidth: number,
+ availableWidth: number
+): boolean {
+ // Browser/WebView scroll metrics are pixel-rounded. Avoid turning harmless
+ // subpixel overshoots from generated values such as width:100.055% into a
+ // dedicated native horizontal scroller.
+ return tableWidth - availableWidth > 1;
+}
function Container({
children,
tableWidth,
- availableWidth
+ availableWidth,
+ scrollVertically
}: PropsWithChildren<{
tableWidth: number;
availableWidth: number;
+ scrollVertically: boolean;
}>) {
- const scroll = tableWidth > availableWidth;
- return scroll
+ const scroll = shouldScrollTable(tableWidth, availableWidth);
+ // Carry the wrapper's spare height through to the rows, including when
+ // horizontal overflow requires a ScrollView. Keep the content's height floor.
+ const content = scroll
? React.createElement(
ScrollView,
{
contentContainerStyle: { width: tableWidth },
- style: { width: availableWidth },
+ style: { width: availableWidth, flexGrow: 1, flexShrink: 0 },
horizontal: true
},
children
)
- : React.createElement(View, { style: { width: tableWidth } }, children);
+ : React.createElement(
+ View,
+ { style: { width: tableWidth, flexGrow: 1, flexShrink: 0 } },
+ children
+ );
+ // Measure rows without the viewport's height constraint. Keep the vertical
+ // scroller outside the horizontal one so both axes can overflow independently.
+ return scrollVertically ? (
+
+ {content}
+
+ ) : (
+ content
+ );
}
/**
@@ -31,37 +64,84 @@ function Container({
*
* @param props - Props from {@link useHtmlTableProps} hook.
*
+ * @remarks
+ * Deliberately not wrapped in `memo`. The render engine rebuilds `style`,
+ * `propsForChildren` and the container props on every render, so a shallow
+ * prop comparison can never hold and the wrapper only ever costs a compare.
+ * The expensive half — building the table layout — is memoized inside
+ * {@link useHtmlTableProps} instead, where the inputs are stable.
+ *
* @public
*/
-const HTMLTable = memo(function HTMLTable({
+function HTMLTable({
layout,
TDefaultRenderer,
- settings,
config,
...props
}: HTMLTableProps) {
const tableWidth = layout.totalWidth;
- const containerWidth = settings.contentWidth;
+ // `layout` measures against the width the table's ancestors actually leave
+ // it, which is what `contentWidth` would be if it were narrowed on the way
+ // down the tree. Sizing the container off the document `contentWidth`
+ // instead would spill the table out of every padded ancestor it sits in.
+ const insets = layout.horizontalInsets;
+ const tableBorderStyle = layout.tableBorderStyle;
+ const renderContext = useMemo(
+ () => ({
+ borderSpacing: layout.borderSpacing,
+ cellStyles: layout.cellStyles,
+ borderCollapse: layout.borderCollapse,
+ tableBorderStyle,
+ maxX: layout.display.maxX,
+ maxY: layout.display.maxY,
+ config
+ }),
+ [layout, tableBorderStyle, config]
+ );
return (
-
- {React.createElement(TreeRenderer, {
- node: layout.renderTree,
- config,
- renderIndex: props.renderIndex,
- renderLength: props.renderLength
- })}
+ // A fixed height bounds the scroll viewport; rows keep their natural
+ // height. Growing tables instead use the declared height as a minimum.
+ ...(config.growBeyondHeight
+ ? relaxHeightConstraint(props.style)
+ : props.style),
+ // In collapsed mode, one resolved wrapper edge represents the table
+ // and all cells which meet it. Apply it after source/native styles so
+ // a weaker table border cannot replace a stronger cell border.
+ ...tableBorderStyle,
+ // `usedWidth` already accounts for both the room the ancestors leave
+ // and the table's own `width`/`max-width`, so the painted box stops at
+ // whichever of the two comes first and the overflow goes to the
+ // scroller inside. A table narrower than that keeps its own size,
+ // insets included.
+ width: Math.min(tableWidth + insets, layout.usedWidth),
+ // Layout already applied these bounds to the table content. Reapplying
+ // them in Yoga would override the capped viewport width above.
+ minWidth: undefined,
+ maxWidth: undefined
+ }}
+ >
+
+
+
+
);
-});
+}
export default HTMLTable;
diff --git a/packages/heuristic-table-plugin/src/TableLayout.ts b/packages/heuristic-table-plugin/src/TableLayout.ts
index 3506b9e..8f52400 100644
--- a/packages/heuristic-table-plugin/src/TableLayout.ts
+++ b/packages/heuristic-table-plugin/src/TableLayout.ts
@@ -1,24 +1,152 @@
-import { sum } from 'ramda';
+import sum from './helpers/sum';
+import { totalHorizontalSpacing } from './helpers/borderSpacingGeometry';
+import resolveBorderSpacing, {
+ BorderSpacing
+} from './helpers/resolveBorderSpacing';
+import type { CellContentBox } from './CellContentWidthContext';
+import { ViewStyle } from 'react-native';
import { TNode } from '@native-html/render';
-import computeColumnWidths from './helpers/computeColumnWidths';
-import createRenderTree from './helpers/createRenderTree';
-import fillTableDisplay, {
- createEmptyDisplay
-} from './helpers/fillTableDisplay';
+import createRenderTree, { makeTableCells } from './helpers/createRenderTree';
+import buildTableGrid from './helpers/buildTableGrid';
import TCellConstraintsComputer from './helpers/TCellConstraintsComputer';
-import { Display, Settings, TableRoot } from './shared-types';
+import indexCellNeighbours from './helpers/indexCellNeighbours';
+import { Settings, TableCell, TableGrid, TableRoot } from './shared-types';
+import extractColumnWidths from './helpers/extractColumnWidths';
+import { resolveBorderCollapse } from './helpers/borderModel';
+import { getSourceBlockStyle } from './helpers/cellPadding';
+import type { ResolvedCellStyle } from './helpers/resolveTableStyles';
+import measureTable from './helpers/measureTable';
+import resolveTableWidths from './helpers/resolveTableWidths';
+
+/** No cell style callback has run yet. */
+const NO_CONFIG_STYLES: ReadonlyMap = new Map();
+
+/**
+ * Ask the config for a style per cell, against provisional widths.
+ *
+ * @remarks
+ * Results are copied rather than stored by reference, so that a callback
+ * handing back a shared mutable object cannot have it changed underneath the
+ * second measurement pass.
+ */
+function collectConfigStyles(
+ cells: readonly TableCell[],
+ getStyleForCell: NonNullable
+): ReadonlyMap {
+ const configStyles = new Map();
+ for (const cell of cells) {
+ const configured = getStyleForCell(cell);
+ configStyles.set(cell.tnode, configured ? { ...configured } : null);
+ }
+ return configStyles;
+}
export default class TableLayout {
- public readonly display: Display;
+ public readonly display: TableGrid;
+ public readonly borderSpacing: BorderSpacing;
public readonly columnWidths: number[];
public readonly totalWidth: number;
+ public readonly borderCollapse: boolean;
+ public readonly tableBorderStyle: ViewStyle | null;
+ public readonly horizontalInsets: number;
+ /**
+ * The border-box width the table may occupy, after the horizontal spacing of
+ * every ancestor and the table's own margins have been subtracted from
+ * {@link Settings.contentWidth}.
+ */
+ public readonly availableWidth: number;
+ /**
+ * The visible width of the table's content box: the narrower of
+ * {@link TableLayout.availableWidth} and the table's own used width, less
+ * its padding and border, which sit inside its border box.
+ *
+ * @remarks
+ * A *viewport*, not an allowance. Columns are laid out against the width
+ * left once border-spacing is also taken out, which is smaller, and which
+ * for an overflowing table is smaller still than what the columns actually
+ * take. Content wider than this is reached through a horizontal scroller.
+ */
+ public readonly viewportWidth: number;
+ /**
+ * The border-box width the table paints: the narrower of
+ * {@link TableLayout.availableWidth} and the table's own used width.
+ *
+ * @remarks
+ * Unlike {@link TableLayout.viewportWidth} this still holds the table's
+ * padding and border, and it is a ceiling: a table whose insets alone
+ * exceed it keeps this width and clips them, rather than growing past what
+ * its ancestors and its own `max-width` allow.
+ */
+ public readonly usedWidth: number;
+ /** Resolved once and shared by layout and cell rendering. */
+ public readonly cellStyles: ReadonlyMap;
+ public readonly cells: TableCell[];
public readonly renderTree: TableRoot;
- constructor(tnode: TNode, config: Settings) {
- const computer = new TCellConstraintsComputer({});
- this.display = createEmptyDisplay(config);
- fillTableDisplay(tnode, this.display, computer);
- this.columnWidths = computeColumnWidths(this.display);
- this.totalWidth = sum(this.columnWidths);
- this.renderTree = createRenderTree(this.display, this.columnWidths);
+ constructor(tnode: TNode, config: Settings, cellContentBox?: CellContentBox) {
+ const style = getSourceBlockStyle(tnode);
+ this.borderCollapse = resolveBorderCollapse(tnode, config.borderCollapse);
+ this.borderSpacing = resolveBorderSpacing(tnode, this.borderCollapse);
+ const widths = resolveTableWidths(tnode, style, config, cellContentBox);
+ // Build the grid once: coordinates and spans do not depend on any width,
+ // and neighbours follow from coordinates alone.
+ const grid = buildTableGrid(tnode);
+ const neighbours = this.borderCollapse
+ ? indexCellNeighbours(grid.cells)
+ : undefined;
+ const spacingWidth = grid.cells.length
+ ? totalHorizontalSpacing(grid.maxX, this.borderSpacing.horizontal)
+ : 0;
+ // Built once and shared between passes: its cache of per-cell intrinsic
+ // constraints is what keeps the second pass from re-walking every text
+ // node, so constructing it per pass would silently undo that.
+ const computer = new TCellConstraintsComputer({
+ baseFontCoeff: config.baseFontCoeff,
+ fontWeightCoeffs: config.fontWeightCoeffs
+ });
+ const declaredColumnWidths = extractColumnWidths(tnode);
+ const pass = (configStyles: ReadonlyMap) =>
+ measureTable({
+ grid,
+ tableStyle: style,
+ borderCollapse: this.borderCollapse,
+ neighbours,
+ configStyles,
+ computer,
+ widths,
+ borderSpacing: this.borderSpacing,
+ spacingWidth,
+ declaredColumnWidths
+ });
+ let measured = pass(NO_CONFIG_STYLES);
+ if (config.getStyleForCell) {
+ // The callback needs cells, which need widths, which need the styles the
+ // callback returns. The cycle is broken by freezing its results against
+ // the widths of a first pass: re-evaluating after each resize could
+ // oscillate for a callback that branches on width.
+ measured = pass(
+ collectConfigStyles(
+ makeTableCells(grid, measured.columnWidths, this.borderSpacing.horizontal),
+ config.getStyleForCell
+ )
+ );
+ }
+ this.tableBorderStyle = measured.tableBorderStyle;
+ this.cellStyles = measured.cellStyles;
+ this.horizontalInsets = measured.insets;
+ this.availableWidth = widths.availableWidth;
+ this.usedWidth = Math.max(
+ 0,
+ Math.min(widths.usedTableWidth, widths.availableWidth)
+ );
+ this.viewportWidth = Math.max(0, this.usedWidth - measured.insets);
+ this.display = grid;
+ this.columnWidths = measured.columnWidths;
+ this.totalWidth = sum(this.columnWidths) + spacingWidth;
+ this.cells = makeTableCells(
+ grid,
+ this.columnWidths,
+ this.borderSpacing.horizontal
+ );
+ this.renderTree = createRenderTree(this.cells);
}
}
diff --git a/packages/heuristic-table-plugin/src/TableRenderContext.ts b/packages/heuristic-table-plugin/src/TableRenderContext.ts
new file mode 100644
index 0000000..0f09ef9
--- /dev/null
+++ b/packages/heuristic-table-plugin/src/TableRenderContext.ts
@@ -0,0 +1,31 @@
+import { createContext } from 'react';
+import { TNode } from '@native-html/render';
+import { BorderSpacing } from './helpers/resolveBorderSpacing';
+import { ResolvedCellStyle } from './helpers/resolveTableStyles';
+import { TableGeometry } from './shared-types';
+
+/**
+ * Everything the render tree needs which is the same for every node in one
+ * table.
+ *
+ * @remarks
+ * Carried in context rather than threaded through {@link TreeRenderer}: the
+ * tree recurses through row and column containers to reach a cell, and every
+ * level in between would otherwise have to accept and forward values it makes
+ * no use of.
+ */
+export interface TableRenderContextValue extends TableGeometry {
+ borderSpacing: BorderSpacing;
+ cellStyles: ReadonlyMap;
+}
+
+const DEFAULT_CONTEXT: TableRenderContextValue = {
+ borderSpacing: { horizontal: 0, vertical: 0 },
+ cellStyles: new Map(),
+ borderCollapse: false,
+ tableBorderStyle: null,
+ maxX: -1,
+ maxY: -1
+};
+
+export default createContext(DEFAULT_CONTEXT);
diff --git a/packages/heuristic-table-plugin/src/TableRenderer.ts b/packages/heuristic-table-plugin/src/TableRenderer.ts
index 3d94669..fedba31 100644
--- a/packages/heuristic-table-plugin/src/TableRenderer.ts
+++ b/packages/heuristic-table-plugin/src/TableRenderer.ts
@@ -1,15 +1,8 @@
import React from 'react';
import { CustomBlockRenderer } from '@native-html/render';
import HTMLTable from './HTMLTable';
-import { HeuristicTablePluginConfig } from './shared-types';
import useHtmlTableProps from './useHtmlTableProps';
-declare module '@native-html/render' {
- interface RenderersPropsBase {
- table?: HeuristicTablePluginConfig;
- }
-}
-
/**
* A 100% native renderer component for `table` tag.
*
diff --git a/packages/heuristic-table-plugin/src/TdRenderer.ts b/packages/heuristic-table-plugin/src/TdRenderer.ts
new file mode 100644
index 0000000..093b4bd
--- /dev/null
+++ b/packages/heuristic-table-plugin/src/TdRenderer.ts
@@ -0,0 +1,10 @@
+import createCellRenderer from './createCellRenderer';
+
+/**
+ * The renderer component for `td` tag.
+ *
+ * @public
+ */
+const TdRenderer = createCellRenderer('td');
+
+export default TdRenderer;
diff --git a/packages/heuristic-table-plugin/src/TdRenderer.tsx b/packages/heuristic-table-plugin/src/TdRenderer.tsx
deleted file mode 100644
index 9861e2c..0000000
--- a/packages/heuristic-table-plugin/src/TdRenderer.tsx
+++ /dev/null
@@ -1,18 +0,0 @@
-import React from 'react';
-import { CustomBlockRenderer } from '@native-html/render';
-import useHtmlTableCellProps from './useHtmlTableCellProps';
-
-/**
- * The renderer component for `td` tag.
- *
- * @param props - Component props.
- * @public
- */
-const TdRenderer: CustomBlockRenderer = function TdRenderer(props) {
- return React.createElement(
- props.TDefaultRenderer,
- useHtmlTableCellProps(props)
- );
-};
-
-export default TdRenderer;
diff --git a/packages/heuristic-table-plugin/src/ThRenderer.ts b/packages/heuristic-table-plugin/src/ThRenderer.ts
index e212aac..4e50b04 100644
--- a/packages/heuristic-table-plugin/src/ThRenderer.ts
+++ b/packages/heuristic-table-plugin/src/ThRenderer.ts
@@ -1,18 +1,10 @@
-import React from 'react';
-import { CustomBlockRenderer } from '@native-html/render';
-import useHtmlTableCellProps from './useHtmlTableCellProps';
+import createCellRenderer from './createCellRenderer';
/**
* The renderer component for `th` tag.
*
- * @param props - Component props.
* @public
*/
-const ThRenderer: CustomBlockRenderer = function ThRenderer(props) {
- return React.createElement(
- props.TDefaultRenderer,
- useHtmlTableCellProps(props)
- );
-};
+const ThRenderer = createCellRenderer('th');
export default ThRenderer;
diff --git a/packages/heuristic-table-plugin/src/TreeRenderer.tsx b/packages/heuristic-table-plugin/src/TreeRenderer.tsx
index 5a99548..1635369 100644
--- a/packages/heuristic-table-plugin/src/TreeRenderer.tsx
+++ b/packages/heuristic-table-plugin/src/TreeRenderer.tsx
@@ -1,64 +1,157 @@
-import React from 'react';
+import React, { useContext, useMemo } from 'react';
import { StyleSheet, View } from 'react-native';
import { TNodeRenderer } from '@native-html/render';
-import { HeuristicTablePluginConfig, TableRenderNode } from './shared-types';
+import {
+ InternalTableCellPropsFromParent,
+ TableRenderNode
+} from './shared-types';
+import CellContentWidthContext from './CellContentWidthContext';
+import TableRenderContext from './TableRenderContext';
+import type { ResolvedCellStyle } from './helpers/resolveTableStyles';
+import { getHorizontalInsets } from './helpers/measure';
+
+/** The horizontal padding and border a resolved cell style carries, if any. */
+function getCellInsets(resolved: ResolvedCellStyle | undefined): number {
+ return resolved ? getHorizontalInsets(resolved.style) : 0;
+}
const styles = StyleSheet.create({
colContainer: { flexDirection: 'column', flexGrow: 1 },
rowContainer: { flexDirection: 'row', flexGrow: 1 }
});
+export interface TreeRendererProps {
+ node: TableRenderNode;
+ renderIndex: number;
+ renderLength: number;
+}
+
+/**
+ * The height a row container owes to the `height` its source `tr` declared.
+ *
+ * @remarks
+ * The render tree replaces source rows with flex containers, so their height
+ * floor has to be recovered here; a row must still grow when its content is
+ * taller. A spanning cell does not impose its starting row's height on its
+ * whole synthetic row group.
+ */
+function getRowMinHeight(children: readonly TableRenderNode[]): number {
+ return children.reduce((height, child) => {
+ if (child.type !== 'cell' || child.lenY !== 1) return height;
+ const row = child.tnode.parent;
+ if (row?.tagName !== 'tr') return height;
+ const style = row.styles.nativeBlockRet;
+ return Math.max(
+ height,
+ typeof style.height === 'number' ? style.height : 0,
+ typeof style.minHeight === 'number' ? style.minHeight : 0
+ );
+ }, 0);
+}
+
export default function TreeRenderer({
node,
- config,
renderIndex,
renderLength
-}: {
- node: TableRenderNode;
- renderIndex: number;
- renderLength: number;
- config?: HeuristicTablePluginConfig;
-}) {
+}: TreeRendererProps) {
+ const {
+ borderSpacing,
+ cellStyles,
+ borderCollapse,
+ tableBorderStyle,
+ maxX,
+ maxY,
+ config
+ } = useContext(TableRenderContext);
+ const cellContentBox = useMemo(
+ () =>
+ node.type === 'cell'
+ ? {
+ tnode: node.tnode,
+ // A cell rendered without a resolved style has no insets to
+ // subtract — the same absent-layout case `resolvedCellStyle`
+ // below is typed for, rather than one to assert away here.
+ contentWidth: Math.max(
+ 0,
+ node.width - getCellInsets(cellStyles.get(node.tnode))
+ )
+ }
+ : undefined,
+ [node, cellStyles]
+ );
if (node.type === 'cell') {
+ const propsFromParent: InternalTableCellPropsFromParent = {
+ cell: node,
+ collapsedMarginTop: null,
+ config,
+ resolvedCellStyle: cellStyles.get(node.tnode),
+ borderCollapse,
+ tableBorderStyle,
+ maxX,
+ maxY
+ };
return (
-
-
+
+
+
+
);
}
if (node.type === 'root' || node.type === 'col-container') {
- const children = (node.children as TableRenderNode[]).map((v, i) =>
- React.createElement(TreeRenderer, {
- node: v,
- key: i,
- config,
- renderIndex: i,
- renderLength: node.children.length
- })
+ return (
+ 0 && {
+ paddingHorizontal: borderSpacing.horizontal,
+ paddingVertical: borderSpacing.vertical
+ }
+ ]}
+ >
+
+
);
- return {children};
}
if (node.type === 'row-container') {
+ const minHeight = getRowMinHeight(node.children);
return (
-
- {node.children.map((v, i) =>
- React.createElement(TreeRenderer, {
- node: v,
- key: i,
- config,
- renderIndex: i,
- renderLength: node.children.length
- })
- )}
+ 0 && { minHeight }]}>
+
);
}
return null;
}
+
+/** Render every child of a container, each told where it sits among them. */
+function TreeRendererChildren({
+ nodes
+}: {
+ nodes: readonly TableRenderNode[];
+}) {
+ return (
+ <>
+ {nodes.map((child, index) => (
+
+ ))}
+
+ );
+}
diff --git a/packages/heuristic-table-plugin/src/__tests__/HTMLTable.test.tsx b/packages/heuristic-table-plugin/src/__tests__/HTMLTable.test.tsx
new file mode 100644
index 0000000..6e9391b
--- /dev/null
+++ b/packages/heuristic-table-plugin/src/__tests__/HTMLTable.test.tsx
@@ -0,0 +1,186 @@
+import React, { PropsWithChildren } from 'react';
+import { render } from '@testing-library/react-native';
+import { ScrollView, StyleSheet, View, ViewStyle } from 'react-native';
+import HTMLTable from '../HTMLTable';
+import TableLayout from '../TableLayout';
+import { HeuristicTablePluginConfig, HTMLTableProps } from '../shared-types';
+import { createTableTNode } from './utils';
+
+// Inspect the real table wrapper and scroll container independently of cell rendering.
+jest.mock('../TreeRenderer', () => () => null);
+
+function DefaultRenderer({
+ children,
+ style
+}: PropsWithChildren<{ style: ViewStyle }>) {
+ return (
+
+ {children}
+
+ );
+}
+
+function renderTable(
+ html: string,
+ contentWidth: number,
+ config: Partial = {}
+) {
+ const tnode = createTableTNode(html);
+ const settings = { contentWidth, forceStretch: false };
+ const layout = new TableLayout(tnode, settings);
+ const props = {
+ tnode,
+ layout,
+ settings,
+ config: { ...settings, ...config },
+ style: tnode.styles.nativeBlockRet,
+ TDefaultRenderer: DefaultRenderer
+ } as unknown as HTMLTableProps;
+ return render();
+}
+
+describe('HTMLTable containers', () => {
+ it('enforces an explicit table height on the wrapper by default', () => {
+ const rendered = renderTable(
+ '',
+ 400
+ );
+ const wrapper = rendered.getByTestId('table-wrapper');
+ expect(wrapper).toHaveStyle({ height: 48 });
+ expect(StyleSheet.flatten(wrapper.props.style)).not.toHaveProperty(
+ 'minHeight'
+ );
+ expect(rendered.UNSAFE_getByType(ScrollView).props.horizontal).not.toBe(
+ true
+ );
+ });
+
+ it('passes an explicit table height as minHeight when growBeyondHeight is set', () => {
+ const rendered = renderTable(
+ '',
+ 400,
+ { growBeyondHeight: true }
+ );
+ const wrapper = rendered.getByTestId('table-wrapper');
+ expect(wrapper).toHaveStyle({ minHeight: 48 });
+ expect(StyleSheet.flatten(wrapper.props.style)).not.toHaveProperty(
+ 'height'
+ );
+ expect(rendered.UNSAFE_queryByType(ScrollView)).toBeNull();
+ });
+
+ it.each([100, 600])(
+ 'lets the inner container fill the table height with %spx content',
+ (width) => {
+ const rendered = renderTable(
+ ``,
+ 400,
+ { growBeyondHeight: true }
+ );
+ const wrapper = rendered.getByTestId('table-wrapper');
+ const scroll = rendered.UNSAFE_queryByType(ScrollView);
+ const container = scroll ?? wrapper.findAllByType(View)[0];
+ expect(StyleSheet.flatten(container.props.style)).toMatchObject({
+ flexGrow: 1,
+ flexShrink: 0
+ });
+ }
+ );
+
+ it.each([100, 600])(
+ 'keeps natural %spx-wide content inside a bounded vertical viewport',
+ (width) => {
+ const rendered = renderTable(
+ ``,
+ 400,
+ { growBeyondHeight: false }
+ );
+ const scrollers = rendered.UNSAFE_getAllByType(ScrollView);
+ const vertical = scrollers.find((view) => !view.props.horizontal)!;
+ expect(vertical.props.style).toMatchObject({ flexShrink: 1 });
+ expect(vertical.props.contentContainerStyle).toEqual({ flexGrow: 1 });
+ expect(scrollers.filter((view) => view.props.horizontal)).toHaveLength(
+ width > 400 ? 1 : 0
+ );
+ expect(rendered.getByTestId('table-wrapper')).toHaveStyle({ height: 48 });
+ }
+ );
+
+ it.each([
+ 'min-width:600px',
+ 'min-width:200%',
+ 'min-width:600px;max-width:200px'
+ ])(
+ 'keeps %s on the content without widening or narrowing the viewport',
+ (style) => {
+ const rendered = renderTable(
+ ``,
+ 300
+ );
+ const wrapperStyle = StyleSheet.flatten(
+ rendered.getByTestId('table-wrapper').props.style
+ );
+ expect(wrapperStyle.width).toBe(300);
+ expect(wrapperStyle.minWidth).toBeUndefined();
+ expect(wrapperStyle.maxWidth).toBeUndefined();
+ const scroll = rendered.UNSAFE_getByType(ScrollView);
+ expect(scroll.props.horizontal).toBe(true);
+ expect(scroll.props.style).toMatchObject({ width: 300 });
+ expect(scroll.props.contentContainerStyle).toEqual({ width: 600 });
+ }
+ );
+
+ it('uses the capped table width for the wrapper and overflow viewport', () => {
+ const rendered = renderTable(
+ '',
+ 600
+ );
+ expect(rendered.getByTestId('table-wrapper')).toHaveStyle({ width: 300 });
+ const scroll = rendered.UNSAFE_getByType(ScrollView);
+ expect(scroll.props.horizontal).toBe(true);
+ expect(scroll.props.style).toMatchObject({ width: 300 });
+ expect(scroll.props.contentContainerStyle).toEqual({ width: 600 });
+ });
+
+ it.each([
+ [
+ '',
+ 30
+ ],
+ [
+ '',
+ 10
+ ]
+ ] as const)(
+ 'caps the wrapper style width when its insets exceed its width: %s',
+ (html, width) => {
+ const rendered = renderTable(html, 400);
+ expect(rendered.getByTestId('table-wrapper')).toHaveStyle({ width });
+ expect(rendered.UNSAFE_getByType(ScrollView).props.style).toMatchObject({
+ width: 0
+ });
+ }
+ );
+
+ it('includes its own insets in the shrink-to-fit wrapper width', () => {
+ const rendered = renderTable(
+ '',
+ 400
+ );
+ expect(rendered.getByTestId('table-wrapper')).toHaveStyle({ width: 120 });
+ expect(rendered.UNSAFE_queryByType(ScrollView)).toBeNull();
+ });
+
+ it.each([100, 100.5, 101, 102])(
+ 'scrolls only when the %spx content exceeds the viewport by more than one pixel',
+ (width) => {
+ const rendered = renderTable(
+ ``,
+ 100
+ );
+ expect(rendered.UNSAFE_queryByType(ScrollView) !== null).toBe(
+ width > 101
+ );
+ }
+ );
+});
diff --git a/packages/heuristic-table-plugin/src/__tests__/TableLayout.test.ts b/packages/heuristic-table-plugin/src/__tests__/TableLayout.test.ts
new file mode 100644
index 0000000..f9adcbf
--- /dev/null
+++ b/packages/heuristic-table-plugin/src/__tests__/TableLayout.test.ts
@@ -0,0 +1,661 @@
+import TableLayout from '../TableLayout';
+import { shouldScrollTable } from '../HTMLTable';
+import { Settings } from '../shared-types';
+import reduceColumnConstraints from '../helpers/reduceColumnConstraints';
+import { createTableTNode } from './utils';
+
+function layoutFor(html: string, settings: Settings): TableLayout {
+ return new TableLayout(createTableTNode(html), settings);
+}
+
+describe('TableLayout', () => {
+ it('should honour an explicit cell width through the measurement pipeline', () => {
+ // The column was previously clamped against a maximum derived from text
+ // alone, which ignored the declared width and collapsed this column to the
+ // width of the word "Hi".
+ const { columnWidths } = layoutFor(
+ ``,
+ { contentWidth: 400, forceStretch: false }
+ );
+ expect(columnWidths[0]).toBeGreaterThanOrEqual(200);
+ });
+
+ it('should honour percentage widths declared by col elements', () => {
+ const { columnWidths } = layoutFor(
+ ``,
+ { contentWidth: 600, forceStretch: false }
+ );
+ expect(columnWidths[0]).toBeCloseTo(160);
+ expect(columnWidths[1]).toBeCloseTo(80);
+ expect(columnWidths[2]).toBeCloseTo(100);
+ expect(columnWidths[3]).toBeCloseTo(60);
+ });
+
+ it('should resolve column percentages against the declared table width', () => {
+ const { columnWidths, totalWidth } = layoutFor(
+ ``,
+ { contentWidth: 600, forceStretch: false }
+ );
+ expect(columnWidths).toEqual([150, 150]);
+ expect(totalWidth).toBe(300);
+ });
+
+ it('should expand col and colgroup span declarations', () => {
+ const { columnWidths } = layoutFor(
+ ``,
+ { contentWidth: 400, forceStretch: false }
+ );
+ expect(columnWidths).toEqual([100, 100, 200]);
+ });
+
+ it('should expand a colgroup span when it has no col children', () => {
+ const { columnWidths } = layoutFor(
+ ``,
+ { contentWidth: 400, forceStretch: false }
+ );
+ expect(columnWidths).toEqual([100, 100, 200]);
+ });
+
+ it('should prefer a CSS col width over its HTML width attribute', () => {
+ const { columnWidths } = layoutFor(
+ ``,
+ { contentWidth: 300, forceStretch: false }
+ );
+ expect(columnWidths[0]).toBe(100);
+ });
+
+ it('should let CSS auto suppress a col HTML width attribute', () => {
+ const { columnWidths } = layoutFor(
+ ``,
+ { contentWidth: 300, forceStretch: false }
+ );
+ expect(columnWidths).toEqual([150, 150]);
+ });
+
+ it('should let cell content make a declared column wider', () => {
+ const { columnWidths } = layoutFor(
+ `
+
+ | averyveryverylongword | B |
+
`,
+ { contentWidth: 400, forceStretch: false }
+ );
+ expect(columnWidths[0]).toBeGreaterThan(20);
+ });
+
+ it('should reconcile percent columns with min-content inside the table width', () => {
+ const { columnWidths, totalWidth } = layoutFor(
+ ``,
+ // The character-width estimate is pinned so the premise of the test — a
+ // column whose min-content exceeds its 20% share of 300px — holds
+ // whatever the computer defaults to.
+ { contentWidth: 300, forceStretch: false, baseFontCoeff: 0.65 }
+ );
+ expect(columnWidths[1]).toBeGreaterThan(60);
+ expect(totalWidth).toBeCloseTo(300);
+ });
+
+ it('should cap accumulated intrinsic column percentages at 100%', () => {
+ const { columnWidths, totalWidth } = layoutFor(
+ ``,
+ { contentWidth: 300, forceStretch: false }
+ );
+ expect(columnWidths[0]).toBeCloseTo(180);
+ expect(columnWidths[1]).toBeCloseTo(120);
+ expect(totalWidth).toBeCloseTo(300);
+ });
+
+ it('should ignore col declarations beyond the last column of the grid', () => {
+ // A span of ten over two cells used to conjure eight columns nothing is
+ // rendered into, widening the table to 600px and handing it a scroller.
+ const { columnWidths, totalWidth } = layoutFor(
+ ``,
+ { contentWidth: 400, forceStretch: false }
+ );
+ expect(columnWidths).toHaveLength(2);
+ expect(totalWidth).toBeLessThanOrEqual(400);
+ });
+
+ it('should let a col width override the width of its colgroup', () => {
+ // A `col` overrides its group rather than competing with it: taking the
+ // greater of the two widened the very column that asked to be narrower.
+ const { columnWidths } = layoutFor(
+ ``,
+ { contentWidth: 400, forceStretch: false }
+ );
+ expect(columnWidths[0]).toBeCloseTo(100);
+ expect(columnWidths[1]).toBeCloseTo(300);
+ });
+
+ it('should let an absolute col width override a percentage colgroup width', () => {
+ // The two sizing classes used to be merged independently, so the group
+ // percentage survived the absolute width the column declared instead of it.
+ const { columnWidths } = layoutFor(
+ ``,
+ { contentWidth: 400, forceStretch: false }
+ );
+ expect(columnWidths[0]).toBeCloseTo(100);
+ });
+
+ it('should let a percentage col width override an absolute colgroup width', () => {
+ const { columnWidths } = layoutFor(
+ ``,
+ { contentWidth: 400, forceStretch: false }
+ );
+ expect(columnWidths[0]).toBeCloseTo(100);
+ });
+
+ it('should keep a colgroup width when its col declares only a min-width', () => {
+ // A `min-width` is a bound, not a declaration: it used to be stored in the
+ // same field as a width and so discarded the width of the group entirely.
+ const { columnWidths } = layoutFor(
+ ``,
+ { contentWidth: 400, forceStretch: false }
+ );
+ expect(columnWidths[0]).toBeCloseTo(200);
+ });
+
+ it('should cap a column that declares only a max-width', () => {
+ // `max-width` on an auto-width column used to be dropped, letting the
+ // column take the whole surplus of a stretched table.
+ const { columnWidths, totalWidth } = layoutFor(
+ ``,
+ { contentWidth: 400, forceStretch: true }
+ );
+ expect(columnWidths[0]).toBeLessThanOrEqual(50);
+ expect(totalWidth).toBeCloseTo(400);
+ });
+
+ it('should pass a surplus no auto column can take to its neighbours', () => {
+ // Every auto column held at its own `max-width` used to drop the rest of
+ // the stretch surplus, leaving the table short of the width it was told to
+ // fill even though a neighbour had room to take it.
+ const { columnWidths, totalWidth } = layoutFor(
+ ``,
+ { contentWidth: 400, forceStretch: true }
+ );
+ expect(columnWidths[0]).toBeLessThanOrEqual(50);
+ expect(totalWidth).toBeCloseTo(400);
+ });
+
+ it('should pass a surplus no auto column can take to a percentage column', () => {
+ const { columnWidths, totalWidth } = layoutFor(
+ ``,
+ { contentWidth: 400, forceStretch: true }
+ );
+ expect(columnWidths[0]).toBeLessThanOrEqual(50);
+ expect(columnWidths[1]).toBeCloseTo(350);
+ expect(totalWidth).toBeCloseTo(400);
+ });
+
+ it('should stay narrower than its width when every column is capped', () => {
+ // Handing the surplus on stops at the last column that has room: none of
+ // these may grow, so the table ends up narrower than the width it was
+ // given rather than pushing a column past the ceiling it declared.
+ const { totalWidth } = layoutFor(
+ ``,
+ { contentWidth: 400, forceStretch: true }
+ );
+ expect(totalWidth).toBeCloseTo(100);
+ });
+
+ it('should cap a percentage column at its max-width in the min-width pass', () => {
+ // The declared widths were resolved against the first guess at the table
+ // width and reused verbatim once the `min-width` floor took over, so the
+ // max-width cap was rescaled against a width it never applied to.
+ const { columnWidths, totalWidth } = layoutFor(
+ ``,
+ { contentWidth: 600, forceStretch: false }
+ );
+ expect(totalWidth).toBeCloseTo(300);
+ expect(columnWidths[0]).toBeCloseTo(100);
+ });
+
+ it('should cap a percentage column at an absolute max-width', () => {
+ const { columnWidths } = layoutFor(
+ ``,
+ { contentWidth: 400, forceStretch: false }
+ );
+ expect(columnWidths[0]).toBeCloseTo(100);
+ });
+
+ it('should cap an absolute column width at a percentage max-width', () => {
+ // A percentage `max-width` was only ever compared with a percentage width,
+ // so it was silently dropped on a column sized in pixels — the two sizing
+ // classes disagreed on the very same declaration.
+ const { columnWidths } = layoutFor(
+ ``,
+ { contentWidth: 400, forceStretch: false }
+ );
+ expect(columnWidths[0]).toBeCloseTo(100);
+ });
+
+ it('should apply the stricter of a col and colgroup max-width', () => {
+ // A bound is not a declaration and does not override: the group box holds
+ // the column box, so both caps apply and the tighter one decides.
+ expect(
+ layoutFor(
+ ``,
+ { contentWidth: 400, forceStretch: true }
+ ).columnWidths[0]
+ ).toBeCloseTo(100);
+ });
+
+ it('should apply a colgroup max-width tighter than its col one', () => {
+ // The same pair the other way round, so that neither side can be the one
+ // silently kept.
+ expect(
+ layoutFor(
+ ``,
+ { contentWidth: 400, forceStretch: true }
+ ).columnWidths[0]
+ ).toBeCloseTo(100);
+ });
+
+ it.each([
+ ['50%', '100px', 100],
+ ['10%', '300px', 40]
+ ])(
+ 'should apply the stricter of a %s and a %s max-width on one column',
+ (groupCap, columnCap, expected) => {
+ // The two caps arrive in different units and are only comparable once
+ // the table width is known, so the percentage one travels unresolved.
+ expect(
+ layoutFor(
+ ``,
+ { contentWidth: 400, forceStretch: true }
+ ).columnWidths[0]
+ ).toBeCloseTo(expected);
+ }
+ );
+
+ it('should read a col declared outside any colgroup', () => {
+ // `col` is valid as a direct child of `table`, without a wrapping group.
+ const { columnWidths } = layoutFor(
+ ``,
+ { contentWidth: 400, forceStretch: false }
+ );
+ expect(columnWidths[0]).toBeCloseTo(300);
+ expect(columnWidths[1]).toBeCloseTo(100);
+ });
+
+ it('should share the width evenly between columns of no intrinsic width', () => {
+ // Every column weighs zero, so proportional distribution has nothing to
+ // go on. An even share keeps the surplus rather than dropping it.
+ const { columnWidths, totalWidth } = layoutFor(
+ ``,
+ { contentWidth: 400, forceStretch: true }
+ );
+ expect(columnWidths).toEqual([200, 200]);
+ expect(totalWidth).toBeCloseTo(400);
+ });
+
+ it('should keep a column holding only an image', () => {
+ // An image contributes no text, so a text-derived maximum of zero used to
+ // clamp this column away entirely.
+ const { columnWidths } = layoutFor(
+ `
+  | Hi |
+
`,
+ { contentWidth: 400, forceStretch: false }
+ );
+ expect(columnWidths[0]).toBeGreaterThanOrEqual(120);
+ });
+
+ it('should fill the container when forceStretch is set and columns match', () => {
+ const { totalWidth } = layoutFor(
+ ``,
+ { contentWidth: 400, forceStretch: true }
+ );
+ expect(totalWidth).toBeCloseTo(400);
+ });
+
+ it('should grow every column with room beyond its minimum', () => {
+ // The narrowest column used to be pinned at its minimum, because the
+ // weights were taken relative to the least dense column.
+ const { columnWidths, display, totalWidth } = layoutFor(
+ `
+
+ | 1 2 |
+ a somewhat longer cell of text |
+ an even longer cell of text than the one before it |
+
+
`,
+ { contentWidth: 600, forceStretch: false }
+ );
+ const constraints = reduceColumnConstraints(display.cells);
+ constraints.forEach(({ minWidth, spread }, index) => {
+ expect(spread).toBeGreaterThan(minWidth);
+ expect(columnWidths[index]).toBeGreaterThan(minWidth);
+ expect(columnWidths[index]).toBeLessThanOrEqual(spread);
+ });
+ expect(totalWidth).toBeCloseTo(600);
+ });
+
+ it('should never exceed the container width when it fits', () => {
+ const { totalWidth } = layoutFor(
+ `
+ | alpha | beta | gamma |
+ | delta | epsilon | zeta |
+
`,
+ { contentWidth: 500, forceStretch: false }
+ );
+ expect(totalWidth).toBeLessThanOrEqual(500);
+ });
+
+ it('should pass configured font coefficients through to column measurement', () => {
+ const { columnWidths } = layoutFor(
+ '',
+ {
+ contentWidth: 400,
+ forceStretch: false,
+ baseFontCoeff: 0.5,
+ fontWeightCoeffs: { bold: 2 }
+ }
+ );
+ expect(columnWidths).toEqual([40, 80]);
+ });
+
+ describe('containing block', () => {
+ const rows = '| alpha | beta |
';
+
+ it('should lay out against the width left by a padded ancestor', () => {
+ const { viewportWidth, availableWidth, totalWidth } = layoutFor(
+ ``,
+ { contentWidth: 400, forceStretch: true }
+ );
+ expect(availableWidth).toBe(340);
+ expect(viewportWidth).toBe(340);
+ expect(totalWidth).toBeCloseTo(340);
+ });
+
+ it('should resolve a percentage table width against the padded ancestor', () => {
+ const { totalWidth } = layoutFor(
+ ``,
+ { contentWidth: 400, forceStretch: false }
+ );
+ expect(totalWidth).toBeCloseTo(180);
+ });
+
+ it('should keep the columns inside the table own padding and border', () => {
+ // `width` is a border box in React Native, so padding and border eat into
+ // the space the columns may use rather than adding to the table width.
+ const { viewportWidth, availableWidth, totalWidth } = layoutFor(
+ ``,
+ { contentWidth: 400, forceStretch: true }
+ );
+ expect(availableWidth).toBe(400);
+ expect(viewportWidth).toBe(378);
+ expect(totalWidth).toBeCloseTo(378);
+ });
+
+ it('should resolve a percentage table width inside its own margins', () => {
+ // A percentage may not resolve against width the margins have already
+ // spent: `width:100%` would then hand the columns the whole containing
+ // block while the table box is allowed only what is left of it, and the
+ // difference would surface as a scroller the very same table without a
+ // declared width never gets.
+ const { totalWidth, viewportWidth } = layoutFor(
+ ``,
+ { contentWidth: 400, forceStretch: true }
+ );
+ expect(viewportWidth).toBe(380);
+ expect(totalWidth).toBeCloseTo(380);
+ expect(shouldScrollTable(totalWidth, viewportWidth)).toBe(false);
+ });
+
+ it('should still scroll an absolute width wider than the container', () => {
+ // Clamping the columns to the available width instead would silently
+ // drop the width the table asked for.
+ const { totalWidth, viewportWidth } = layoutFor(
+ ``,
+ { contentWidth: 400 }
+ );
+ expect(totalWidth).toBeCloseTo(800);
+ expect(shouldScrollTable(totalWidth, viewportWidth)).toBe(true);
+ });
+
+ it('should take the table own margins out of the width it may occupy', () => {
+ const { viewportWidth, availableWidth } = layoutFor(
+ ``,
+ { contentWidth: 400, forceStretch: true }
+ );
+ expect(availableWidth).toBe(350);
+ expect(viewportWidth).toBe(350);
+ });
+
+ it('should stretch to the available width by default', () => {
+ const { totalWidth } = layoutFor(``, {
+ contentWidth: 400
+ });
+ expect(totalWidth).toBeCloseTo(400);
+ });
+
+ it('should shrink to fit when forceStretch is disabled', () => {
+ const { totalWidth } = layoutFor(``, {
+ contentWidth: 400,
+ forceStretch: false
+ });
+ expect(totalWidth).toBeLessThan(400);
+ });
+
+ it('should stretch a table that only declares a min-width', () => {
+ // `min-width` is a floor, not a declared width: reading it as one made
+ // the table 200px wide inside a 600px container.
+ const { totalWidth } = layoutFor(
+ ``,
+ { contentWidth: 600 }
+ );
+ expect(totalWidth).toBeCloseTo(600);
+ });
+
+ it('should not stretch a table past its max-width', () => {
+ const { totalWidth } = layoutFor(
+ ``,
+ { contentWidth: 600 }
+ );
+ expect(totalWidth).toBeCloseTo(300);
+ });
+
+ it('should keep a shrink-to-fit table at its min-width', () => {
+ // Shrinking to fit still may not cross the floor the table asked for.
+ const { totalWidth } = layoutFor(
+ ``,
+ { contentWidth: 600, forceStretch: false }
+ );
+ expect(totalWidth).toBeCloseTo(300);
+ });
+
+ it.each([
+ [300, [240, 11.1]],
+ [580, [232, 20]]
+ ] as const)(
+ 'should keep or grow the measured width when min-width is %spx and column caps are relative',
+ (minWidth, expectedWidths) => {
+ // The percentage cap falls from 240px to 120px in the 300px pass.
+ // Its result (120 + 20) must not replace the wider initial layout.
+ // At 580px the retry grows to 232 + 20, so ignoring min-width fails too.
+ const body = `
+
+
+ | A | B |
`;
+ const settings = {
+ contentWidth: 600,
+ forceStretch: false,
+ baseFontCoeff: 0.65
+ };
+ const without = layoutFor(``, settings);
+ const raised = layoutFor(
+ ``,
+ settings
+ );
+ expect(without.columnWidths).toEqual([240, 11.1]);
+ raised.columnWidths.forEach((width, index) => {
+ expect(width).toBeCloseTo(expectedWidths[index]!);
+ });
+ expect(raised.columnWidths).toHaveLength(2);
+ expect(raised.totalWidth).toBeGreaterThanOrEqual(without.totalWidth);
+ }
+ );
+
+ it('should report the column overflow beyond the table max-width', () => {
+ // The cells demand 600px inside a table that paints only 300px, so the
+ // surplus belongs to a horizontal scroller rather than spilling out.
+ const { totalWidth, viewportWidth } = layoutFor(
+ ``,
+ { contentWidth: 600, forceStretch: false }
+ );
+ expect(viewportWidth).toBe(300);
+ expect(totalWidth).toBeGreaterThanOrEqual(600);
+ expect(shouldScrollTable(totalWidth, viewportWidth)).toBe(true);
+ });
+
+ it('should cap usedWidth at the containing width when padding overflows', () => {
+ // The insets were added back after the assignable width had been
+ // floored at zero, so a table whose padding alone overflows its
+ // container painted a box wider than the room it was given.
+ const { usedWidth, viewportWidth } = layoutFor(
+ ``,
+ { contentWidth: 400, forceStretch: true }
+ );
+ expect(viewportWidth).toBe(0);
+ expect(usedWidth).toBe(30);
+ });
+
+ it('should cap usedWidth at max-width when padding overflows', () => {
+ const { usedWidth } = layoutFor(
+ '',
+ { contentWidth: 400, forceStretch: true }
+ );
+ expect(usedWidth).toBe(10);
+ });
+
+ it('should shrink a table below its max-width when the content is narrow', () => {
+ const { totalWidth } = layoutFor(
+ ``,
+ { contentWidth: 600, forceStretch: false }
+ );
+ expect(totalWidth).toBeLessThan(300);
+ });
+
+ it('should still overflow when the minimum widths do not fit', () => {
+ const { totalWidth, viewportWidth } = layoutFor(
+ ``,
+ { contentWidth: 400, forceStretch: true }
+ );
+ expect(viewportWidth).toBe(300);
+ expect(totalWidth).toBeGreaterThanOrEqual(600);
+ });
+ });
+});
diff --git a/packages/heuristic-table-plugin/src/__tests__/borderSpacing.test.tsx b/packages/heuristic-table-plugin/src/__tests__/borderSpacing.test.tsx
new file mode 100644
index 0000000..45b1313
--- /dev/null
+++ b/packages/heuristic-table-plugin/src/__tests__/borderSpacing.test.tsx
@@ -0,0 +1,116 @@
+import React from 'react';
+import { render } from '@testing-library/react-native';
+import { StyleSheet, View } from 'react-native';
+import RenderHTML from '@native-html/render';
+import renderers from '../index';
+import TableLayout from '../TableLayout';
+import resolveBorderSpacing from '../helpers/resolveBorderSpacing';
+import { createTableTNode } from './utils';
+
+describe('border spacing', () => {
+ it.each([
+ ['border-spacing:8px 12px', 8, 12],
+ ['border-spacing:5px', 5, 5],
+ ['border-spacing:0', 0, 0],
+ ['border-spacing:-1px', 0, 0],
+ ['border-spacing:10%', 0, 0],
+ ['border-spacing:1px 2px 3px', 0, 0],
+ ['font-size:20px;border-spacing:0.5em 1em', 10, 20]
+ ])('resolves %s', (style, horizontal, vertical) => {
+ const table = createTableTNode(
+ ``
+ );
+ expect(resolveBorderSpacing(table, false)).toEqual({
+ horizontal,
+ vertical
+ });
+ expect(resolveBorderSpacing(table, true)).toEqual({
+ horizontal: 0,
+ vertical: 0
+ });
+ });
+
+ it('supports inherited spacing and the legacy cellspacing attribute', () => {
+ const inherited = createTableTNode(
+ ''
+ );
+ expect(resolveBorderSpacing(inherited, false)).toEqual({
+ horizontal: 8,
+ vertical: 12
+ });
+ const legacy = createTableTNode(
+ ''
+ );
+ expect(resolveBorderSpacing(legacy, false)).toEqual({
+ horizontal: 6,
+ vertical: 6
+ });
+ const override = createTableTNode(
+ ''
+ );
+ expect(resolveBorderSpacing(override, false)).toEqual({
+ horizontal: 0,
+ vertical: 0
+ });
+ });
+
+ it('reserves gaps inside the table width and includes internal gaps in colspan widths', () => {
+ const table = createTableTNode(
+ ''
+ );
+ const layout = new TableLayout(table, { contentWidth: 300 });
+ expect(layout.totalWidth).toBeCloseTo(300);
+ expect(layout.columnWidths.reduce((a, b) => a + b, 0)).toBeCloseTo(276);
+ expect(layout.cells[2].width).toBeCloseTo(284);
+ const collapsed = new TableLayout(table, {
+ contentWidth: 300,
+ borderCollapse: 'collapse'
+ });
+ expect(collapsed.cells[2].width).toBeCloseTo(300);
+ });
+
+ it('includes spacing when content overflows', () => {
+ const table = createTableTNode(
+ ''
+ );
+ const layout = new TableLayout(table, { contentWidth: 300 });
+ expect(layout.totalWidth).toBe(424);
+ expect(layout.viewportWidth).toBe(300);
+ });
+
+ it('paints gaps outside cells and only once around the grid', () => {
+ const rendered = render(
+ | A | B |
| C |
'
+ }}
+ />
+ );
+ const styles = rendered
+ .UNSAFE_getAllByType(View)
+ .map((view) => StyleSheet.flatten(view.props.style));
+ expect(
+ styles.filter(
+ (style) =>
+ style?.paddingHorizontal === 8 && style?.paddingVertical === 12
+ )
+ ).toHaveLength(1);
+ expect(
+ styles.filter(
+ (style) => style?.marginEnd === 8 && style?.marginBottom === 12
+ )
+ ).toHaveLength(1);
+ expect(
+ styles.filter(
+ (style) => style?.marginEnd === 0 && style?.marginBottom === 12
+ )
+ ).toHaveLength(1);
+ expect(
+ styles.filter(
+ (style) => style?.marginEnd === 0 && style?.marginBottom === 0
+ )
+ ).toHaveLength(1);
+ });
+});
diff --git a/packages/heuristic-table-plugin/src/__tests__/layoutStyles.test.ts b/packages/heuristic-table-plugin/src/__tests__/layoutStyles.test.ts
new file mode 100644
index 0000000..91024d6
--- /dev/null
+++ b/packages/heuristic-table-plugin/src/__tests__/layoutStyles.test.ts
@@ -0,0 +1,443 @@
+import { CustomRendererProps, TBlock } from '@native-html/render';
+import { ViewStyle } from 'react-native';
+import TableLayout from '../TableLayout';
+import useHtmlTableCellProps from '../useHtmlTableCellProps';
+import { shouldScrollTable } from '../HTMLTable';
+import { Settings } from '../shared-types';
+import { createTableTNode } from './utils';
+
+/**
+ * The settings a layout was built from, so that `renderedCellStyle` can hand
+ * the renderer the same config the measurement pass saw.
+ */
+const settingsByLayout = new WeakMap();
+
+function layoutFor(html: string, settings: Partial = {}) {
+ const resolvedSettings: Settings = {
+ contentWidth: 100,
+ forceStretch: false,
+ // Pinned: the 9.1/11.1/16.1 constants below are one character of 14px text
+ // at this coefficient, plus the user-agent cell padding. Leaving it to the
+ // computer's default would break every one of them on a retune.
+ baseFontCoeff: 0.65,
+ ...settings
+ };
+ const layout = new TableLayout(createTableTNode(html), resolvedSettings);
+ settingsByLayout.set(layout, resolvedSettings);
+ return layout;
+}
+
+// Inspect renderer props directly; native layout and drawing are not exercised.
+function renderedCellStyle(layout: TableLayout, index: number): ViewStyle {
+ const cell = layout.cells[index]!;
+ return useHtmlTableCellProps({
+ tnode: cell.tnode,
+ style: cell.tnode.styles.nativeBlockRet,
+ propsFromParent: {
+ cell,
+ // The renderer only falls back to `config.getStyleForCell` when the
+ // layout resolved no style for the cell. Passing the real settings keeps
+ // that fallback meaningful rather than silently yielding no style.
+ config: settingsByLayout.get(layout),
+ resolvedCellStyle: layout.cellStyles.get(cell.tnode)
+ }
+ } as unknown as CustomRendererProps).style as ViewStyle;
+}
+
+describe('layout and resolved renderer styles', () => {
+ it.each(['ltr', 'rtl'] as const)(
+ 'collapses logical borders in %s cell styles',
+ (direction) => {
+ const logicalSide = direction === 'ltr' ? 'Start' : 'End';
+ const layout = layoutFor('', {
+ borderCollapse: 'collapse',
+ getStyleForCell: (cell) =>
+ cell.x === 0
+ ? { borderRightWidth: 3, borderRightColor: 'blue' }
+ : {
+ direction,
+ [`border${logicalSide}Width`]: 5,
+ [`border${logicalSide}Color`]: 'red'
+ }
+ });
+ expect(renderedCellStyle(layout, 0)).toMatchObject({
+ borderRightWidth: 5,
+ borderRightColor: 'red'
+ });
+ expect(renderedCellStyle(layout, 1).borderLeftWidth).toBe(0);
+ expect(
+ renderedCellStyle(layout, 1)[`border${logicalSide}Width`]
+ ).toBeUndefined();
+ expect(
+ renderedCellStyle(layout, 1)[`border${logicalSide}Color`]
+ ).toBeUndefined();
+ expect(layout.totalWidth).toBeCloseTo(2 * 11.1 + 5);
+ }
+ );
+
+ it('moves logical outer cell borders to the table wrapper', () => {
+ const layout = layoutFor('', {
+ borderCollapse: 'collapse',
+ getStyleForCell: () => ({
+ borderStartWidth: 4,
+ borderEndWidth: 6,
+ borderStartColor: 'red',
+ borderEndColor: 'blue'
+ })
+ });
+ expect(layout.tableBorderStyle).toMatchObject({
+ borderLeftWidth: 4,
+ borderRightWidth: 6,
+ borderLeftColor: 'red',
+ borderRightColor: 'blue'
+ });
+ expect(layout.horizontalInsets).toBe(10);
+ expect(renderedCellStyle(layout, 0).borderStartWidth).toBeUndefined();
+ expect(renderedCellStyle(layout, 0).borderEndWidth).toBeUndefined();
+ expect(layout.totalWidth).toBeCloseTo(11.1);
+ });
+ it('assigns a neighbour-only left border to the preceding cell', () => {
+ const layout = layoutFor(``);
+ expect(renderedCellStyle(layout, 0)).toMatchObject({
+ borderRightWidth: 5,
+ borderRightColor: 'red'
+ });
+ expect(renderedCellStyle(layout, 1)).toMatchObject({ borderLeftWidth: 0 });
+ expect(layout.columnWidths).toEqual([16.1, 11.1]);
+ });
+
+ it('assigns a neighbour-only top border to the preceding row', () => {
+ const layout = layoutFor(``);
+ expect(renderedCellStyle(layout, 0)).toMatchObject({
+ borderBottomWidth: 5,
+ borderBottomColor: 'red'
+ });
+ expect(renderedCellStyle(layout, 1)).toMatchObject({ borderTopWidth: 0 });
+ });
+
+ it('does not copy a cell left border onto its unrelated right edge', () => {
+ const layout = layoutFor(``);
+ expect(renderedCellStyle(layout, 0).borderRightWidth).toBe(0);
+ expect(layout.tableBorderStyle?.borderLeftWidth).toBe(5);
+ });
+
+ it('compares all neighbours touching a rowspan, excluding unrelated rows', () => {
+ const layout = layoutFor(``);
+ expect(renderedCellStyle(layout, 0)).toMatchObject({
+ borderRightWidth: 5,
+ borderRightColor: 'blue'
+ });
+ });
+
+ it('compares neighbours below a colspan', () => {
+ const layout = layoutFor(``);
+ expect(renderedCellStyle(layout, 0)).toMatchObject({
+ borderBottomWidth: 5,
+ borderBottomColor: 'blue'
+ });
+ });
+
+ it.each(['dashed', 'dotted'] as const)(
+ 'preserves an exclusively %s frame',
+ (borderStyle) => {
+ const layout = layoutFor(``);
+ expect(layout.tableBorderStyle).toMatchObject({
+ borderStyle,
+ borderLeftWidth: 2
+ });
+ }
+ );
+
+ it('takes the style of a wider winner rather than a weaker solid table border', () => {
+ const layout =
+ layoutFor(``);
+ expect(layout.tableBorderStyle?.borderStyle).toBe('dashed');
+ });
+
+ it('takes the winning style and color of an interior neighbour', () => {
+ const layout = layoutFor(``);
+ expect(renderedCellStyle(layout, 0)).toMatchObject({
+ borderStyle: 'dashed',
+ borderRightWidth: 5,
+ borderRightColor: 'red'
+ });
+ });
+
+ // The stronger border is placed first and last in turn, so that traversal
+ // order cannot accidentally pick the winner. Both positions are separate
+ // cases rather than one loop, so a failure names the one that broke.
+ it.each([
+ ['solid', 'dashed', true],
+ ['solid', 'dashed', false],
+ ['solid', 'dotted', true],
+ ['solid', 'dotted', false],
+ ['dashed', 'dotted', true],
+ ['dashed', 'dotted', false]
+ ] as const)(
+ 'prefers an equal-width %s border over a %s one, stronger declared first: %s',
+ (stronger, weaker, strongerFirst) => {
+ const first = strongerFirst ? stronger : weaker;
+ const second = strongerFirst ? weaker : stronger;
+ const firstColor = strongerFirst ? 'red' : 'blue';
+ const secondColor = strongerFirst ? 'blue' : 'red';
+ const interior = layoutFor(``);
+ expect(renderedCellStyle(interior, 0)).toMatchObject({
+ borderStyle: stronger,
+ borderRightWidth: 2,
+ borderRightColor: 'red'
+ });
+ expect(renderedCellStyle(interior, 1).borderLeftWidth).toBe(0);
+ const outer =
+ layoutFor(``);
+ expect(outer.tableBorderStyle).toMatchObject({
+ borderStyle: stronger,
+ borderTopWidth: 2,
+ borderRightWidth: 2,
+ borderBottomWidth: 2,
+ borderLeftWidth: 2,
+ borderTopColor: 'red',
+ borderRightColor: 'red',
+ borderBottomColor: 'red',
+ borderLeftColor: 'red'
+ });
+ }
+ );
+
+ it('reserves collapsed outer borders only in the wrapper', () => {
+ const layout = layoutFor(
+ ``,
+ { contentWidth: 30 }
+ );
+ expect(layout.horizontalInsets).toBe(20);
+ expect(layout.totalWidth).toBeCloseTo(9.1);
+ expect(shouldScrollTable(layout.totalWidth, layout.viewportWidth)).toBe(
+ false
+ );
+ expect(renderedCellStyle(layout, 0)).toMatchObject({
+ borderLeftWidth: 0,
+ borderRightWidth: 0
+ });
+ });
+
+ it('still reserves both cell borders in separate mode', () => {
+ const layout = layoutFor(
+ ''
+ );
+ expect(layout.horizontalInsets).toBe(0);
+ expect(layout.totalWidth).toBeCloseTo(29.1);
+ });
+
+ it('gives identical collapsed cells identical content width', () => {
+ // Each cell draws its own trailing boundary while the wrapper draws the
+ // outer ones, so the cell in the last column carries one border fewer than
+ // its neighbours and its column is narrower by exactly that border. Never
+ // by more: the surplus is shared over content, so a bookkeeping difference
+ // in who paints a boundary cannot become a difference in content width.
+ const td = 'A | ';
+ const layout = layoutFor(
+ ``,
+ { contentWidth: 100, forceStretch: true }
+ );
+ const [first, second, third, last] = layout.columnWidths;
+ expect(layout.horizontalInsets).toBe(4);
+ expect(second).toBeCloseTo(first!);
+ expect(third).toBeCloseTo(first!);
+ expect(last).toBeCloseTo(first! - 2);
+ expect(layout.totalWidth).toBeCloseTo(96);
+ });
+
+ it.each([
+ [{ padding: 8 }, 16],
+ [{ paddingHorizontal: 8 }, 16],
+ [{ paddingInline: 8 }, 16],
+ // Vertical padding leaves the horizontal sides to the user-agent default.
+ [{ paddingBlock: 8 }, 2],
+ [{ paddingLeft: 8 }, 9],
+ [{ padding: 0 }, 0],
+ [{ paddingStart: 8 }, 8],
+ [{ padding: 8, paddingLeft: 2 }, 10],
+ [{ padding: 8, borderWidth: 3 }, 22]
+ ] as [ViewStyle, number][])(
+ 'measures callback style %j and reuses it in renderer props',
+ (style, insets) => {
+ const getStyleForCell = jest.fn(() => style);
+ const layout = layoutFor('', {
+ getStyleForCell
+ });
+ expect(layout.totalWidth).toBeCloseTo(9.1 + insets);
+ expect(renderedCellStyle(layout, 0)).toMatchObject(style);
+ expect(getStyleForCell).toHaveBeenCalledTimes(1);
+ }
+ );
+
+ it('lets callback shorthands override source longhands in measurement and renderer props', () => {
+ const layout = layoutFor(
+ '',
+ {
+ getStyleForCell: () => ({ padding: 8 })
+ }
+ );
+ expect(layout.totalWidth).toBeCloseTo(9.1 + 8 + 8);
+ expect(renderedCellStyle(layout, 0)).toMatchObject({
+ paddingLeft: 8,
+ padding: 8
+ });
+ });
+
+ it('lets a callback logical padding shorthand override source longhands', () => {
+ // Yoga resolves `paddingInline` after the per-side edges, so a source
+ // `padding-left` would otherwise hold that one side and leave the callback
+ // shorthand painting only the other three.
+ const layout = layoutFor(
+ '',
+ {
+ getStyleForCell: () => ({ paddingInline: 8 })
+ }
+ );
+ expect(layout.totalWidth).toBeCloseTo(9.1 + 8 + 8);
+ expect(renderedCellStyle(layout, 0)).toMatchObject({
+ paddingLeft: 8,
+ paddingRight: 8
+ });
+ });
+
+ it('uses callback borders for both outer and neighbouring collapsed edges', () => {
+ const getStyleForCell = jest.fn((cell) =>
+ cell.x === 1 ? { borderWidth: 5, borderColor: 'red' } : null
+ );
+ const layout = layoutFor(
+ '',
+ { getStyleForCell }
+ );
+ expect(layout.horizontalInsets).toBe(5);
+ expect(layout.totalWidth).toBeCloseTo(2 * 11.1 + 5);
+ expect(renderedCellStyle(layout, 0)).toMatchObject({
+ borderRightWidth: 5,
+ borderRightColor: 'red'
+ });
+ expect(renderedCellStyle(layout, 1)).toMatchObject({
+ borderLeftWidth: 0,
+ borderRightWidth: 0
+ });
+ expect(getStyleForCell).toHaveBeenCalledTimes(2);
+ });
+
+ it('allows a callback to remove source borders before resolving the wrapper', () => {
+ const layout = layoutFor(
+ '',
+ {
+ getStyleForCell: () => ({
+ borderLeftWidth: 0,
+ borderRightWidth: 0,
+ borderTopWidth: 0,
+ borderBottomWidth: 0
+ })
+ }
+ );
+ expect(layout.horizontalInsets).toBe(0);
+ expect(layout.totalWidth).toBeCloseTo(11.1);
+ });
+
+ it('freezes width-dependent callback results instead of oscillating', () => {
+ const getStyleForCell = jest.fn((cell) => ({
+ padding: cell.width < 20 ? 10 : 0
+ }));
+ const layout = layoutFor('', {
+ getStyleForCell
+ });
+ expect(getStyleForCell.mock.calls[0]![0].width).toBeCloseTo(11.1);
+ expect(layout.totalWidth).toBeCloseTo(29.1);
+ expect(renderedCellStyle(layout, 0).padding).toBe(10);
+ expect(getStyleForCell).toHaveBeenCalledTimes(1);
+ });
+
+ it('scrolls when callback padding makes content exceed available space', () => {
+ const layout = layoutFor('', {
+ contentWidth: 20,
+ getStyleForCell: () => ({ padding: 8 })
+ });
+ expect(shouldScrollTable(layout.totalWidth, layout.viewportWidth)).toBe(
+ true
+ );
+ });
+});
+
+describe('cell percentage distribution', () => {
+ it.each(['style="width:80%"', 'width="80%"'])(
+ 'reconciles %s like column percentages',
+ (declaration) => {
+ const cells = layoutFor(
+ ``
+ );
+ const columns = layoutFor(
+ ``
+ );
+ expect(cells.columnWidths).toEqual(columns.columnWidths);
+ expect(cells.totalWidth).toBeCloseTo(100);
+ }
+ );
+
+ it('keeps unbreakable content as a floor even when percentages cannot fit', () => {
+ const layout = layoutFor(
+ ''
+ );
+ expect(layout.columnWidths[0]).toBeCloseTo(12 * 9.1 + 2);
+ expect(shouldScrollTable(layout.totalWidth, layout.viewportWidth)).toBe(
+ true
+ );
+ });
+
+ it('merges percentages across rows with a maximum', () => {
+ const layout = layoutFor(
+ ''
+ );
+ expect(layout.columnWidths[0]).toBeCloseTo(80);
+ });
+
+ it('splits a colspan percentage across its columns', () => {
+ const layout = layoutFor(
+ ''
+ );
+ expect(layout.columnWidths).toEqual([40, 40, 11.1]);
+ });
+
+ it('retains absolute column floors when a cell contributes a percentage', () => {
+ const layout = layoutFor(
+ ''
+ );
+ expect(layout.columnWidths[0]).toBe(70);
+ });
+
+ it('honours CSS auto over a percentage attribute', () => {
+ const layout = layoutFor(
+ ''
+ );
+ expect(layout.totalWidth).toBeCloseTo(22.2);
+ });
+});
diff --git a/packages/heuristic-table-plugin/src/__tests__/strayCell.test.tsx b/packages/heuristic-table-plugin/src/__tests__/strayCell.test.tsx
new file mode 100644
index 0000000..42b7a8c
--- /dev/null
+++ b/packages/heuristic-table-plugin/src/__tests__/strayCell.test.tsx
@@ -0,0 +1,28 @@
+import React from 'react';
+import { render } from '@testing-library/react-native';
+import { RenderHTML } from '@native-html/render';
+import renderers from '../index';
+
+describe('cell renderers reached outside a plugin table', () => {
+ it('renders a stray td rather than throwing', () => {
+ const { getByText } = render(
+ Hello' }}
+ renderers={renderers as any}
+ />
+ );
+ expect(getByText('Hello')).toBeTruthy();
+ });
+
+ it('renders when a document registers td without the table renderer', () => {
+ const { getByText } = render(
+ | A |
' }}
+ renderers={{ td: renderers.td } as any}
+ />
+ );
+ expect(getByText('A')).toBeTruthy();
+ });
+});
diff --git a/packages/heuristic-table-plugin/src/__tests__/tableRendering.test.tsx b/packages/heuristic-table-plugin/src/__tests__/tableRendering.test.tsx
new file mode 100644
index 0000000..5e8dc5b
--- /dev/null
+++ b/packages/heuristic-table-plugin/src/__tests__/tableRendering.test.tsx
@@ -0,0 +1,305 @@
+import React from 'react';
+import { render } from '@testing-library/react-native';
+import { StyleSheet, View, ViewStyle } from 'react-native';
+import RenderHTML, { CustomBlockRenderer } from '@native-html/render';
+import renderers from '../index';
+import { TableCell } from '../shared-types';
+import HTMLTable from '../HTMLTable';
+import TableLayout from '../TableLayout';
+import { getHorizontalInsets } from '../helpers/measure';
+import { DEFAULT_FONT_WEIGHT_COEFFS } from '../helpers/TCellConstraintsComputer';
+import useHtmlTableProps from '../useHtmlTableProps';
+
+afterEach(() => jest.restoreAllMocks());
+
+describe.each([true, false])(
+ 'callback padding with user-agent styles %s',
+ (enableUserAgentStyles) => {
+ it.each([
+ [{ padding: 8 }, '', 8, 8],
+ [{ paddingHorizontal: 8 }, '', 8, 8],
+ [{ padding: 0 }, '', 0, 0],
+ [{ padding: 8, paddingLeft: 3 }, '', 3, 8],
+ [{ padding: 8 }, 'padding-left:4px', 8, 8],
+ [{ paddingVertical: 8 }, 'padding-left:3px;padding-right:5px', 3, 5]
+ ] as [ViewStyle, string, number, number][])(
+ 'measures and renders %j over source %s',
+ (padding, sourceStyle, left, right) => {
+ const getStyleForCell = jest.fn(() => padding);
+ const rendered = render(
+ | A |
`
+ }}
+ renderers={renderers}
+ renderersProps={{
+ table: {
+ forceStretch: false,
+ baseFontCoeff: 0.5,
+ getStyleForCell
+ }
+ }}
+ />
+ );
+ const cell = rendered.getByTestId('td');
+ const width = 10 + left + right;
+ expect(cell).toHaveStyle({
+ paddingLeft: left,
+ paddingRight: right,
+ width
+ });
+ if (padding.paddingVertical != null) {
+ expect(cell).toHaveStyle({ paddingTop: 8, paddingBottom: 8 });
+ }
+ let wrapper = cell.parent;
+ while (wrapper && typeof wrapper.type !== 'string')
+ wrapper = wrapper.parent;
+ expect(StyleSheet.flatten(wrapper!.props.style).width).toBe(width);
+ expect(getStyleForCell).toHaveBeenCalledTimes(1);
+ }
+ );
+ }
+);
+
+describe('user-agent cell styles', () => {
+ function cellStyles(html: string, enableUserAgentStyles?: boolean) {
+ const rendered = render(
+
+ );
+ const styleOf = (testID: string) =>
+ StyleSheet.flatten(rendered.getByTestId(testID).props.style);
+ return { td: styleOf('td'), th: styleOf('th') };
+ }
+
+ const HEADED = '';
+ // Four characters of the default 14px text at the pinned 0.5 coefficient.
+ const TEXT_WIDTH = 4 * 14 * 0.5;
+
+ // `th` is bold in the user-agent stylesheet, so every header cell of every
+ // default-configured table is measured through the font-weight coefficients
+ // — the one production path that reaches them without an author saying so.
+ it.each([undefined, true])(
+ 'measures a bold th wider than a td with enableUserAgentStyles %s',
+ (enableUserAgentStyles) => {
+ const { td, th } = cellStyles(HEADED, enableUserAgentStyles);
+ // The engine's user-agent sheet pads a cell by 2px on each side, which
+ // is what ships: the plugin's own 1px default only fills sides that
+ // sheet leaves bare, and here it leaves none.
+ expect(td).toMatchObject({ paddingLeft: 2, paddingRight: 2 });
+ expect(th).toMatchObject({ paddingLeft: 2, paddingRight: 2 });
+ expect(td.width).toBeCloseTo(TEXT_WIDTH + 4);
+ expect(th.width).toBeCloseTo(
+ TEXT_WIDTH * DEFAULT_FONT_WEIGHT_COEFFS.bold! + 4
+ );
+ expect(th.width).toBeGreaterThan(td.width);
+ }
+ );
+
+ it('measures th and td alike when user-agent styles are off', () => {
+ // Nothing declares a weight now, so the header loses its bold coefficient
+ // and both cells fall back to the plugin's own 1px of padding.
+ const { td, th } = cellStyles(HEADED, false);
+ expect(td).toMatchObject({ paddingLeft: 1, paddingRight: 1 });
+ expect(th).toMatchObject({ paddingLeft: 1, paddingRight: 1 });
+ expect(th.width).toBeCloseTo(TEXT_WIDTH + 2);
+ expect(th.width).toBe(td.width);
+ });
+});
+
+describe('nested tables', () => {
+ // `getStyleForCell` gives every cell 4px of padding and a 2px border on each
+ // side. The outer first cell is at x=0 of two columns, so collapsing hands
+ // its leading edge to the table wrapper and leaves the trailing one to it:
+ // 4 + 4 of padding, 0 of left border and 2 of right.
+ const CELL_HORIZONTAL_INSETS = 4 + 4 + 0 + 2;
+
+ it.each([0, 10])(
+ 'sizes nested tables inside their assigned cell and %spx wrapper padding',
+ (padding) => {
+ const source = {
+ html: ``
+ };
+ const layouts = new Map();
+ const TableRenderer: CustomBlockRenderer = (props) => {
+ const tableProps = useHtmlTableProps(props);
+ layouts.set(props.tnode.attributes.id!, tableProps.layout);
+ return ;
+ };
+ const testRenderers = { ...renderers, table: TableRenderer };
+ const getStyleForCell = () => ({ padding: 4, borderWidth: 2 });
+ const view = (contentWidth: number) => (
+
+ );
+ // RenderHTML warns in dev when its props change less than 60ms apart, and
+ // the deliberate rerender below is immediate. Pinning the clock and moving
+ // it on by a second per prop change keeps that warning out of the output.
+ const now = jest.spyOn(performance, 'now').mockReturnValue(1000);
+ const rendered = render(view(400));
+ const checkWidths = () => {
+ const outer = layouts.get('outer');
+ const inner = layouts.get('inner');
+ const parent = outer!.cells[0]!;
+ // The measurement pass and the cell renderer merge the source, config
+ // and collapsed styles in two separate places. Both are pinned to the
+ // same hand-computed insets: reading the expectation back out of the
+ // layout would let the two drift together undetected, and a nested
+ // table would then be sized against a box its cell does not have.
+ expect(
+ getHorizontalInsets(outer!.cellStyles.get(parent.tnode)!.style)
+ ).toBe(CELL_HORIZONTAL_INSETS);
+ expect(
+ getHorizontalInsets(
+ StyleSheet.flatten(rendered.getAllByTestId('td')[0]!.props.style)
+ )
+ ).toBe(CELL_HORIZONTAL_INSETS);
+ const expected = parent.width - CELL_HORIZONTAL_INSETS - 2 * padding;
+ expect(inner!.availableWidth).toBeCloseTo(expected);
+ expect(inner!.usedWidth).toBeCloseTo(expected);
+ return expected;
+ };
+ const initialWidth = checkWidths();
+ now.mockReturnValue(2000);
+ rendered.rerender(view(600));
+ expect(checkWidths()).toBeGreaterThan(initialWidth);
+ }
+ );
+});
+
+describe('measured styles across rerenders', () => {
+ it('reuses measured callback styles and relayouts when the callback changes', () => {
+ const source = {
+ html: ''
+ };
+ const first = jest.fn((cell: TableCell) => ({
+ paddingLeft: cell.x === 0 ? 8 : 4,
+ paddingRight: cell.x === 0 ? 8 : 4
+ }));
+ const second = jest.fn(() => ({ paddingLeft: 12, paddingRight: 12 }));
+ const view = (getStyleForCell: typeof first | typeof second) => (
+
+ );
+ // Advance RenderHTML's profiler clock between the intentional prop changes
+ // below, which would otherwise be warned about as accidental rerenders.
+ const now = jest.spyOn(performance, 'now');
+ now.mockReturnValue(1000);
+ const rendered = render(view(first));
+ const expectCellStyles = (paddings: number[], widths: number[]) => {
+ const cells = rendered.getAllByTestId('td');
+ expect(cells).toHaveLength(2);
+ cells.forEach((cell, index) => {
+ expect(cell).toHaveStyle({
+ paddingLeft: paddings[index],
+ paddingRight: paddings[index],
+ width: widths[index]
+ });
+ // Skip composite components to inspect TreeRenderer's surrounding native
+ // View as well as the cell itself. Both must receive the measured width.
+ let wrapper = cell.parent;
+ while (wrapper && typeof wrapper.type !== 'string')
+ wrapper = wrapper.parent;
+ expect(wrapper).not.toBeNull();
+ expect(StyleSheet.flatten(wrapper!.props.style).width).toBe(
+ widths[index]
+ );
+ });
+ };
+ // 20px text at the pinned 0.5 coefficient is 10px for the single
+ // character of each cell, plus the padding the callback declares.
+ expectCellStyles([8, 4], [10 + 8 + 8, 10 + 4 + 4]);
+ expect(rendered.queryByText('A')).not.toBeNull();
+ expect(rendered.queryByText('B')).not.toBeNull();
+ expect(first).toHaveBeenCalledTimes(2);
+ now.mockReturnValue(2000);
+ rendered.rerender(view(first));
+ expect(first).toHaveBeenCalledTimes(2);
+ expectCellStyles([8, 4], [10 + 8 + 8, 10 + 4 + 4]);
+ now.mockReturnValue(3000);
+ rendered.rerender(view(second));
+ now.mockRestore();
+ expectCellStyles([12, 12], [10 + 12 + 12, 10 + 12 + 12]);
+ expect(second).toHaveBeenCalledTimes(2);
+ expect(first).toHaveBeenCalledTimes(2);
+ });
+});
+
+describe('row height constraints', () => {
+ it.each([
+ ['height:90px', 90],
+ ['height:90px;min-height:120px', 120],
+ ['min-height:80px', 80]
+ ])('preserves %s on the native row', (rowStyle, minHeight) => {
+ const rendered = render(
+ | A | B |
`
+ }}
+ renderers={renderers}
+ />
+ );
+ const rows = rendered.UNSAFE_getAllByType(View).filter(
+ (view) => StyleSheet.flatten(view.props.style)?.flexDirection === 'row'
+ );
+ expect(rows).toHaveLength(1);
+ expect(StyleSheet.flatten(rows[0].props.style)).toMatchObject({
+ minHeight,
+ flexGrow: 1
+ });
+ expect(StyleSheet.flatten(rows[0].props.style).height).toBeUndefined();
+ });
+});
+
+it('renders an RTL divider on the shared edge instead of the table frame', () => {
+ const rendered = render(
+ ' +
+ '| A | ' +
+ 'B |
'
+ }}
+ renderers={renderers}
+ />
+ );
+ expect(rendered.getByTestId('table')).toHaveStyle({
+ direction: 'rtl',
+ borderLeftWidth: 0,
+ borderRightWidth: 0
+ });
+ const cells = rendered.getAllByTestId('td');
+ expect(cells[0]).toHaveStyle({
+ borderLeftWidth: 8,
+ borderLeftColor: 'red',
+ borderRightWidth: 0
+ });
+ expect(cells[1]).toHaveStyle({ borderLeftWidth: 0, borderRightWidth: 0 });
+});
diff --git a/packages/heuristic-table-plugin/src/__tests__/useHtmlTableCellProps.test.ts b/packages/heuristic-table-plugin/src/__tests__/useHtmlTableCellProps.test.ts
new file mode 100644
index 0000000..d8ad293
--- /dev/null
+++ b/packages/heuristic-table-plugin/src/__tests__/useHtmlTableCellProps.test.ts
@@ -0,0 +1,245 @@
+import { ViewStyle } from 'react-native';
+import { CustomRendererProps, TBlock } from '@native-html/render';
+import useHtmlTableCellProps from '../useHtmlTableCellProps';
+import { HeuristicTablePluginConfig, TableCell } from '../shared-types';
+import { createCellTNode } from './utils';
+
+/**
+ * Where the cell sits in the matrix, and how the table collapses its borders.
+ *
+ * @remarks
+ * Only a consumer writing its own `td` renderer reaches this shape:
+ * `TreeRenderer` always hands down a `resolvedCellStyle` it measured against,
+ * and the hook then reuses that instead of resolving anything here. The
+ * defaults keep the cell the sole one of a separate-border table.
+ */
+interface CellContext {
+ borderCollapse?: boolean;
+ x?: number;
+ y?: number;
+ maxX?: number;
+ maxY?: number;
+ tableBorderStyle?: ViewStyle | null;
+}
+
+/**
+ * The style the cell renderer hands to the default renderer for the first cell
+ * of `cellMarkup`.
+ *
+ * @remarks
+ * `useHtmlTableCellProps` calls no React hook, so it is exercised as the plain
+ * function it is. Everything the props carry beyond the fields it reads is
+ * irrelevant to the style it resolves.
+ */
+function cellStyleFor(
+ cellMarkup: string,
+ config: HeuristicTablePluginConfig = {},
+ {
+ borderCollapse = false,
+ x = 0,
+ y = 0,
+ maxX = 0,
+ maxY = 0,
+ tableBorderStyle = null
+ }: CellContext = {}
+): ViewStyle {
+ const tnode = createCellTNode(``);
+ const cell: TableCell = {
+ type: 'cell',
+ tnode,
+ x,
+ y,
+ lenX: 1,
+ lenY: 1,
+ width: 100,
+ constraints: { minWidth: 0, maxWidth: 100, contentDensity: 0 }
+ };
+ const props = {
+ tnode,
+ style: tnode.styles.nativeBlockRet,
+ propsFromParent: {
+ cell,
+ config,
+ borderCollapse,
+ maxX,
+ maxY,
+ tableBorderStyle
+ }
+ } as unknown as CustomRendererProps;
+ return useHtmlTableCellProps(props).style as ViewStyle;
+}
+
+describe('useHtmlTableCellProps', () => {
+ // A cell height is always a minimum, whatever `growBeyondHeight` says: that
+ // option governs the *table* box, which is why the hook never reads it. The
+ // two cases below used to pass it either way and assert the same thing.
+ it.each(['td', 'th'])('uses an explicit %s height as a minimum', (tag) => {
+ const style = cellStyleFor(`<${tag} style="height:48px">A`);
+ expect(style.minHeight).toBe(48);
+ expect(style).not.toHaveProperty('height');
+ });
+
+ it('allows content to outgrow a configured cell height', () => {
+ const style = cellStyleFor('Wrapping content | ', {
+ getStyleForCell: () => ({ height: 24 })
+ });
+ expect(style.minHeight).toBe(24);
+ expect(style).not.toHaveProperty('height');
+ });
+
+ it.each([
+ ['top', 'flex-start'],
+ ['baseline', 'flex-start'],
+ ['middle', 'center'],
+ ['bottom', 'flex-end']
+ ])('maps vertical-align:%s to justifyContent:%s', (alignment, expected) => {
+ expect(
+ cellStyleFor(`A | `)
+ .justifyContent
+ ).toBe(expected);
+ });
+
+ it('keeps explicit justify-content when vertical-align is absent', () => {
+ expect(
+ cellStyleFor('A | ').justifyContent
+ ).toBe('flex-end');
+ });
+
+ it('lets explicit vertical-align override justify-content', () => {
+ expect(
+ cellStyleFor(
+ 'A | '
+ ).justifyContent
+ ).toBe('flex-start');
+ });
+
+ describe('default padding', () => {
+ it('pads a bare cell by one pixel, as HTML does', () => {
+ expect(cellStyleFor('A | ')).toMatchObject({
+ paddingTop: 1,
+ paddingRight: 1,
+ paddingBottom: 1,
+ paddingLeft: 1
+ });
+ });
+
+ it('yields the sides the cell CSS declares', () => {
+ expect(cellStyleFor('A | ')).toMatchObject({
+ paddingTop: 8,
+ paddingRight: 8,
+ paddingBottom: 8,
+ paddingLeft: 8
+ });
+ });
+
+ it('keeps the default on the sides that CSS leaves out', () => {
+ expect(
+ cellStyleFor('A | ')
+ ).toMatchObject({
+ paddingTop: 1,
+ paddingRight: 1,
+ paddingBottom: 1,
+ paddingLeft: 8
+ });
+ });
+
+ it('honours a padding the config declares', () => {
+ const style = cellStyleFor('A | ', {
+ getStyleForCell: () => ({ padding: 8 })
+ });
+
+ expect(style).toMatchObject({
+ padding: 8,
+ paddingTop: 8,
+ paddingRight: 8,
+ paddingBottom: 8,
+ paddingLeft: 8
+ });
+ });
+
+ it('leaves a cell asking for no padding unpadded', () => {
+ expect(cellStyleFor('A | ')).toMatchObject({
+ paddingTop: 0,
+ paddingRight: 0,
+ paddingBottom: 0,
+ paddingLeft: 0
+ });
+ });
+ });
+
+ // The hook resolves the collapsing model itself only when no
+ // `resolvedCellStyle` reaches it, which `TreeRenderer` always supplies. This
+ // is therefore the path of a consumer rendering its own `td`, and the one
+ // branch of the hook the in-tree renderers never take.
+ describe('collapsing borders without a resolved style', () => {
+ const BORDERED = 'A | ';
+
+ it('leaves the borders of a separate-border cell alone', () => {
+ expect(cellStyleFor(BORDERED)).toMatchObject({
+ borderLeftWidth: 2,
+ borderTopWidth: 2,
+ borderRightWidth: 2,
+ borderBottomWidth: 2
+ });
+ });
+
+ it('drops the duplicated leading and top edges of an interior cell', () => {
+ expect(
+ cellStyleFor(
+ BORDERED,
+ {},
+ {
+ borderCollapse: true,
+ x: 1,
+ y: 1,
+ maxX: 2,
+ maxY: 2
+ }
+ )
+ ).toMatchObject({
+ borderLeftWidth: 0,
+ borderTopWidth: 0,
+ borderRightWidth: 2,
+ borderBottomWidth: 2
+ });
+ });
+
+ it('weighs a border the cell only gets from the config', () => {
+ // Resolving against the source CSS alone would find no border here and
+ // strip the one `getStyleForCell` declares, leaving nothing to paint it.
+ expect(
+ cellStyleFor(
+ 'A | ',
+ { getStyleForCell: () => ({ borderWidth: 3, borderColor: 'red' }) },
+ { borderCollapse: true, x: 0, y: 0, maxX: 1, maxY: 0 }
+ )
+ ).toMatchObject({
+ borderRightWidth: 3,
+ borderRightColor: 'red'
+ });
+ });
+
+ it('yields an outer edge to a table wrapper that paints it', () => {
+ expect(
+ cellStyleFor(
+ BORDERED,
+ {},
+ {
+ borderCollapse: true,
+ tableBorderStyle: {
+ borderTopWidth: 2,
+ borderRightWidth: 2,
+ borderBottomWidth: 2,
+ borderLeftWidth: 2
+ }
+ }
+ )
+ ).toMatchObject({
+ borderLeftWidth: 0,
+ borderTopWidth: 0,
+ borderRightWidth: 0,
+ borderBottomWidth: 0
+ });
+ });
+ });
+});
diff --git a/packages/heuristic-table-plugin/src/__tests__/useHtmlTableProps.test.tsx b/packages/heuristic-table-plugin/src/__tests__/useHtmlTableProps.test.tsx
new file mode 100644
index 0000000..5933423
--- /dev/null
+++ b/packages/heuristic-table-plugin/src/__tests__/useHtmlTableProps.test.tsx
@@ -0,0 +1,95 @@
+import React from 'react';
+import { render } from '@testing-library/react-native';
+import RenderHTML, { CustomBlockRenderer } from '@native-html/render';
+import renderers from '../index';
+import HTMLTable from '../HTMLTable';
+import TableLayout from '../TableLayout';
+import useHtmlTableProps from '../useHtmlTableProps';
+
+/**
+ * Render `html` with a table renderer that passes `overrideContentWidth` for
+ * the table of the given `id`, and return every layout by table id.
+ *
+ * @remarks
+ * The option is only reachable through a consumer's own table renderer, so it
+ * is exercised the way one would use it rather than by calling the hook bare.
+ */
+function layoutsFor(
+ html: string,
+ contentWidth: number,
+ override?: { id: string; width: number }
+) {
+ const layouts = new Map();
+ const configs: unknown[] = [];
+ const TableRenderer: CustomBlockRenderer = (props) => {
+ const id = props.tnode.attributes.id!;
+ const tableProps = useHtmlTableProps(
+ props,
+ override?.id === id ? { overrideContentWidth: override.width } : {}
+ );
+ layouts.set(id, tableProps.layout);
+ configs.push(tableProps.config);
+ return ;
+ };
+ render(
+
+ );
+ return { layouts, configs };
+}
+
+const SINGLE = '';
+// The inner table sits in a cell, so a `CellContentWidthContext` is in scope
+// for it and an override has something to take precedence over.
+const NESTED = ``;
+
+describe('useHtmlTableProps', () => {
+ it('yields an empty config when the renderer is given no table props', () => {
+ // `renderersProps.table` is optional, and `HTMLTable` reads `config`
+ // unconditionally: handing it `undefined` would throw on the first lookup.
+ const { configs } = layoutsFor(SINGLE, 400);
+ expect(configs).toHaveLength(1);
+ expect(configs[0]).toEqual({});
+ });
+
+ describe('overrideContentWidth', () => {
+ it('lays out against the shared content width when absent', () => {
+ const layout = layoutsFor(SINGLE, 400).layouts.get('only')!;
+ expect(layout.availableWidth).toBe(400);
+ expect(layout.totalWidth).toBeCloseTo(400);
+ });
+
+ it('replaces the shared content width when given', () => {
+ const layout = layoutsFor(SINGLE, 400, {
+ id: 'only',
+ width: 250
+ }).layouts.get('only')!;
+ expect(layout.availableWidth).toBe(250);
+ expect(layout.totalWidth).toBeCloseTo(250);
+ });
+
+ it('sizes a nested table from its cell when absent', () => {
+ const { layouts } = layoutsFor(NESTED, 400);
+ const cell = layouts.get('outer')!.cells[0]!;
+ expect(layouts.get('inner')!.availableWidth).toBeLessThan(cell.width);
+ });
+
+ it('overrides the containing cell of a nested table when given', () => {
+ // The option exists so a consumer may size a table against something
+ // other than the box it sits in, so the cell content width — which is
+ // narrower than the whole table — must not win over it here.
+ const { layouts } = layoutsFor(NESTED, 400, { id: 'inner', width: 320 });
+ expect(layouts.get('outer')!.cells[0]!.width).toBeLessThan(320);
+ // The override replaces the content width the table starts from, not the
+ // spacing its ancestors impose: the containing cell still charges the
+ // 2px of user-agent padding it spends on each side.
+ expect(layouts.get('inner')!.availableWidth).toBe(320 - 4);
+ expect(layouts.get('inner')!.totalWidth).toBeCloseTo(316);
+ });
+ });
+});
diff --git a/packages/heuristic-table-plugin/src/__tests__/utils.ts b/packages/heuristic-table-plugin/src/__tests__/utils.ts
new file mode 100644
index 0000000..78e93f2
--- /dev/null
+++ b/packages/heuristic-table-plugin/src/__tests__/utils.ts
@@ -0,0 +1,69 @@
+import { TRenderEngine } from '@native-html/transient-render-engine';
+import { TNode } from '@native-html/render';
+import colgroupModel from '../ColgroupModel';
+
+const engine = new TRenderEngine({
+ // Unit fixtures isolate plugin defaults. Public-renderer tests retain the
+ // RenderHTML defaults, including user-agent styles.
+ stylesConfig: { enableUserAgentStyles: false },
+ customizeHTMLModels(defaultModels) {
+ return {
+ ...defaultModels,
+ colgroup: colgroupModel
+ };
+ }
+});
+
+function collectTables(tnode: TNode, found: TNode[] = []): TNode[] {
+ if (tnode.tagName === 'table') {
+ found.push(tnode);
+ }
+ for (const child of tnode.children) {
+ collectTables(child, found);
+ }
+ return found;
+}
+
+/**
+ * Build a transient render tree from `html` and return one of its `table`
+ * nodes, however deeply nested. The tnode keeps its ancestors, so helpers
+ * which walk up the tree see the real containing blocks.
+ *
+ * @param nth - Which table to return, in document order. Defaults to the
+ * outermost one; pass `1` for the table nested inside it.
+ */
+export function createTableTNode(html: string, nth = 0) {
+ const table = collectTables(engine.buildTTree(html) as unknown as TNode)[nth];
+ expect(table?.tagName).toBe('table');
+ return table as TNode;
+}
+
+/**
+ * Every `td`/`th` of `tnode`, in document order.
+ *
+ * @remarks
+ * A cell is not descended into, so a table nested inside one contributes none
+ * of its own cells to the result.
+ */
+function collectCells(tnode: TNode, found: TNode[] = []): TNode[] {
+ if (tnode.tagName === 'td' || tnode.tagName === 'th') {
+ found.push(tnode);
+ } else {
+ for (const child of tnode.children) {
+ collectCells(child, found);
+ }
+ }
+ return found;
+}
+
+/**
+ * Build a transient render tree from `html` and return one of the cells of its
+ * outermost table.
+ *
+ * @param nth - Which cell to return, in document order. Defaults to the first.
+ */
+export function createCellTNode(html: string, nth = 0): TNode {
+ const cell = collectCells(createTableTNode(html))[nth];
+ expect(cell?.tagName).toMatch(/^t[dh]$/);
+ return cell as TNode;
+}
diff --git a/packages/heuristic-table-plugin/src/__tests__/writingDirection.test.ts b/packages/heuristic-table-plugin/src/__tests__/writingDirection.test.ts
new file mode 100644
index 0000000..ace65c5
--- /dev/null
+++ b/packages/heuristic-table-plugin/src/__tests__/writingDirection.test.ts
@@ -0,0 +1,144 @@
+import { createTableTNode } from './utils';
+import TableLayout from '../TableLayout';
+import { getSourceBlockStyle } from '../helpers/cellPadding';
+
+describe('authored writing direction', () => {
+ it('is recovered from the flow styles, where the processor files it', () => {
+ const table = createTableTNode(
+ ''
+ );
+ // `direction` is the sole block-flow property, so it never appears in the
+ // retained box styles every other pass reads.
+ expect(table.styles.nativeBlockRet).not.toHaveProperty('direction');
+ expect(getSourceBlockStyle(table)).toMatchObject({ direction: 'rtl' });
+ });
+
+ it('inherits to a cell that declares none of its own', () => {
+ const table = createTableTNode(
+ ''
+ );
+ const layout = new TableLayout(table, { contentWidth: 400 });
+ expect(getSourceBlockStyle(layout.cells[0]!.tnode)).toMatchObject({
+ direction: 'rtl'
+ });
+ });
+
+ it.each([
+ ['ltr', { borderLeftWidth: 7, borderRightWidth: 0 }],
+ ['rtl', { borderLeftWidth: 0, borderRightWidth: 7 }]
+ ] as const)(
+ 'resolves a configured logical border onto the physical side %s implies',
+ (direction, expected) => {
+ const layout = new TableLayout(
+ createTableTNode(
+ `'
+ ),
+ {
+ contentWidth: 400,
+ // Logical edges only reach a cell through the config callback: the
+ // CSS processor drops `border-inline-start` and friends entirely.
+ getStyleForCell: () => ({
+ borderStartWidth: 7,
+ borderStartColor: 'red'
+ })
+ }
+ );
+ expect(layout.tableBorderStyle).toMatchObject(expected);
+ }
+ );
+});
+
+describe('collapsed borders in multi-column tables', () => {
+ it.each(['ltr', 'rtl'] as const)(
+ 'keeps the internal divider inside a %s table',
+ (direction) => {
+ const end = direction === 'rtl' ? 'Left' : 'Right';
+ const start = direction === 'rtl' ? 'Right' : 'Left';
+ const layout = new TableLayout(
+ createTableTNode(
+ `'
+ ),
+ { contentWidth: 300 }
+ );
+ expect(layout.tableBorderStyle).toMatchObject({
+ borderLeftWidth: 0,
+ borderRightWidth: 0
+ });
+ expect(layout.cellStyles.get(layout.cells[0]!.tnode)!.borderStyle).toMatchObject({
+ [`border${end}Width`]: 8,
+ [`border${end}Color`]: 'red',
+ [`border${start}Width`]: 0
+ });
+ expect(layout.cellStyles.get(layout.cells[1]!.tnode)!.borderStyle).toMatchObject({
+ borderLeftWidth: 0,
+ borderRightWidth: 0
+ });
+ }
+ );
+
+ it('uses table direction for geometry and cell direction for logical borders', () => {
+ const layout = new TableLayout(
+ createTableTNode(
+ ''
+ ),
+ {
+ contentWidth: 300,
+ getStyleForCell: (cell) => ({
+ borderStartWidth: cell.x === 0 ? 8 : 4,
+ borderStartColor: 'red'
+ })
+ }
+ );
+ // Both logical starts face the shared boundary despite opposite text directions.
+ expect(layout.tableBorderStyle).toMatchObject({
+ borderLeftWidth: 0,
+ borderRightWidth: 0
+ });
+ expect(layout.cellStyles.get(layout.cells[0]!.tnode)!.borderStyle).toMatchObject({
+ borderLeftWidth: 8,
+ borderRightWidth: 0,
+ borderStartWidth: undefined
+ });
+ });
+
+ it('resolves RTL outer edges and every neighbour of a spanning cell', () => {
+ const layout = new TableLayout(
+ createTableTNode(
+ ''
+ ),
+ {
+ contentWidth: 300,
+ getStyleForCell: (cell) => cell.x === 0
+ ? { borderRightWidth: 7, borderLeftWidth: 2 }
+ : {
+ borderRightWidth: cell.y === 0 ? 4 : 9,
+ borderRightColor: cell.y === 0 ? 'blue' : 'red',
+ borderLeftWidth: 3,
+ borderBottomWidth: 5
+ }
+ }
+ );
+ expect(layout.tableBorderStyle).toMatchObject({
+ borderRightWidth: 7,
+ borderLeftWidth: 3,
+ borderBottomWidth: 5
+ });
+ expect(layout.cellStyles.get(layout.cells[0]!.tnode)!.borderStyle).toMatchObject({
+ borderLeftWidth: 9,
+ borderLeftColor: 'red',
+ borderRightWidth: 0
+ });
+ expect(layout.cellStyles.get(layout.cells[1]!.tnode)!.borderStyle).toMatchObject({
+ borderLeftWidth: 0,
+ borderRightWidth: 0,
+ borderBottomWidth: 5
+ });
+ });
+});
diff --git a/packages/heuristic-table-plugin/src/createCellRenderer.ts b/packages/heuristic-table-plugin/src/createCellRenderer.ts
new file mode 100644
index 0000000..1422d63
--- /dev/null
+++ b/packages/heuristic-table-plugin/src/createCellRenderer.ts
@@ -0,0 +1,27 @@
+import React from 'react';
+import { CustomBlockRenderer } from '@native-html/render';
+import useHtmlTableCellProps from './useHtmlTableCellProps';
+
+/**
+ * Build the renderer for a table cell tag.
+ *
+ * @remarks
+ * `td` and `th` render identically — the difference between them is carried by
+ * the user-agent styles the engine has already resolved, not by anything this
+ * plugin does. They are built from one implementation so the two cannot drift,
+ * and keep separate names so React devtools still tells them apart.
+ */
+export default function createCellRenderer(
+ tagName: 'td' | 'th'
+): CustomBlockRenderer {
+ const displayName = `${tagName === 'td' ? 'Td' : 'Th'}Renderer`;
+ const renderer: CustomBlockRenderer = function CellRenderer(props) {
+ return React.createElement(
+ props.TDefaultRenderer,
+ useHtmlTableCellProps(props)
+ );
+ };
+ Object.defineProperty(renderer, 'name', { value: displayName });
+ (renderer as { displayName?: string }).displayName = displayName;
+ return renderer;
+}
diff --git a/packages/heuristic-table-plugin/src/helpers/TCellConstraintsComputer.ts b/packages/heuristic-table-plugin/src/helpers/TCellConstraintsComputer.ts
index 4941ab4..d509be4 100644
--- a/packages/heuristic-table-plugin/src/helpers/TCellConstraintsComputer.ts
+++ b/packages/heuristic-table-plugin/src/helpers/TCellConstraintsComputer.ts
@@ -1,99 +1,133 @@
-import pipe from 'ramda/src/pipe';
-import sum from 'ramda/src/sum';
-import map from 'ramda/src/map';
-import max from 'ramda/src/max';
-import prop from 'ramda/src/prop';
-import reduce from 'ramda/src/reduce';
+import { ViewStyle } from 'react-native';
import { TNode } from '@native-html/render';
import { TCellConstraints } from '../shared-types';
-import { getHorizontalMargins, getHorizontalSpacing } from './measure';
+import { getHorizontalInsets, getHorizontalMargins } from './measure';
+import { getPaintedBlockStyle } from './cellPadding';
+import {
+ clampWidth,
+ resolveCssSize,
+ resolveImposedWidth,
+ resolvePercentage
+} from './resolveWidth';
interface TextChunkStats {
fontWeightCoeff: number;
fontFamilyCoeff: number;
fontSize: number;
- characters: number;
- maxWordLength: number;
+ text: string;
+}
+
+interface TCellStats {
+ /** Absolute widths imposed by descendants, including their margins. */
+ blockWidth: number;
+ textStats: TextChunkStats[][];
+}
+
+interface IntrinsicCellConstraints {
+ blockWidth: number;
+ minWidth: number;
+ maxWidth: number;
+ contentDensity: number;
}
/**
- * Distinction between two types of content generating constraints.
+ * Whitespace that forbids a line break rather than offering one.
*
- * - Blocks. When blocks such as images have an explicit width, this width is
- * used as minimum and prefered width for this tnode cell.
- * - TPhrasing. Phrasing content will provide minimum and prefered width up to approx 10 characters. Above that,
- * each new character will augment prefered width logarathmically, since text wraps nicely.
+ * @remarks
+ * `\s` cannot be used on its own to find break opportunities, because it also
+ * matches the spaces authors reach for precisely to keep two words together:
+ * U+00A0 NO-BREAK SPACE, U+202F NARROW NO-BREAK SPACE and U+2007 FIGURE SPACE
+ * are all glue in {@link https://www.unicode.org/reports/tr14/ | UAX #14}, and
+ * U+FEFF is a word joiner. `10 000 km` is one unbreakable run of ten
+ * characters, not three of two, three and two.
*/
-interface TCellStats {
- /**
- * Horizontal spacing for this cell
- */
- horizontalSpace: number;
- /**
- * The maximum of explicit widths or min-widths of block elements in this
- * cell, including margins.
- */
- blockWidth: number;
- /**
- * Text stats in this cell.
- */
- textStats: TextChunkStats[];
+const NON_BREAKING_SPACE_REGEX = /[\u00a0\u202f\u2007\ufeff]/u;
+
+const DIGIT_REGEX = /^\d$/u;
+
+function isBreakingSpace(character: string): boolean {
+ return /\s/u.test(character) && !NON_BREAKING_SPACE_REGEX.test(character);
}
-function getInitCellStatsForTnode(tnode: TNode): TCellStats {
- return {
- blockWidth: 0,
- horizontalSpace: getHorizontalSpacing(tnode.styles.nativeBlockRet),
- textStats: []
- };
+function isDigit(character: string | undefined): boolean {
+ return character !== undefined && DIGIT_REGEX.test(character);
}
-const getMaxWordSize = pipe(
- map(prop('length')),
- reduce(max, 0)
-);
+/**
+ * How much wider text renders at a given font weight than at a regular one.
+ *
+ * @remarks
+ * Keys are matched against the resolved `fontWeight` stringified, so both the
+ * numeric weights React Native accepts and the `normal`/`bold` keywords are
+ * looked up here. A weight with no entry falls back to a coefficient of 1.
+ *
+ * @public
+ */
+export type FontWeightCoefficients = Record;
+
+/**
+ * The coefficients used when the config supplies none.
+ *
+ * @remarks
+ * A user-supplied map is merged over these rather than replacing them, so a
+ * config may retune `bold` alone without restating all nine numeric weights.
+ *
+ * @public
+ */
+export const DEFAULT_FONT_WEIGHT_COEFFS: FontWeightCoefficients = {
+ '100': 0.8,
+ '200': 0.85,
+ '300': 0.9,
+ '400': 1,
+ '500': 1.1,
+ '600': 1.2,
+ '700': 1.3,
+ '800': 1.4,
+ '900': 1.5,
+ bold: 1.3,
+ normal: 1
+};
+
+/**
+ * Stands in for the containing width where percentages are deliberately not
+ * resolved, so that no caller has to invent one.
+ *
+ * @remarks
+ * `resolveWidthConstraints` reads its containing width only to turn a
+ * percentage into pixels. With `resolvePercentages: false` it never does, so
+ * this value is never read — naming it says so, where a bare `0` looked like a
+ * width that had been forgotten.
+ */
+const UNUSED_CONTAINING_WIDTH = 0;
export default class TCellConstraintsComputer {
+ // A computer belongs to one layout. Cell styles and available width can
+ // change between its passes; descendant content and font coefficients cannot.
+ private intrinsicConstraints = new WeakMap();
private baseFontCoeff: number;
private fallbackFontSize: number;
-
- private fontWeightCoeffs: Record = {
- '100': 0.8,
- '200': 0.85,
- '300': 0.9,
- '400': 1,
- '500': 1.1,
- '600': 1.2,
- '700': 1.3,
- '800': 1.4,
- '900': 1.5,
- bold: 1.3,
- normal: 1
- };
+ private fontWeightCoeffs: FontWeightCoefficients;
constructor({
baseFontCoeff,
- fallbackFontSize
+ fallbackFontSize,
+ fontWeightCoeffs
}: {
baseFontCoeff?: number;
fallbackFontSize?: number;
+ /**
+ * Per-weight width coefficients, merged over
+ * {@link DEFAULT_FONT_WEIGHT_COEFFS}.
+ */
+ fontWeightCoeffs?: FontWeightCoefficients;
}) {
this.baseFontCoeff = baseFontCoeff ?? 0.65;
this.fallbackFontSize = fallbackFontSize ?? 14;
+ this.fontWeightCoeffs = fontWeightCoeffs
+ ? { ...DEFAULT_FONT_WEIGHT_COEFFS, ...fontWeightCoeffs }
+ : DEFAULT_FONT_WEIGHT_COEFFS;
}
- private getContentDensity = pipe(
- map((ch) => ch.characters * this.getTextCoeff(ch)),
- sum
- );
-
- private geTextMinWidth = pipe(
- map(
- (ch) => ch.maxWordLength * this.getTextCoeff(ch)
- ),
- reduce(max, 0)
- );
-
private getTextCoeff(ch: TextChunkStats): number {
return (
ch.fontFamilyCoeff * ch.fontSize * this.baseFontCoeff * ch.fontWeightCoeff
@@ -102,54 +136,176 @@ export default class TCellConstraintsComputer {
private assembleCellStats(
tnode: TNode,
- stats: TCellStats = getInitCellStatsForTnode(tnode)
+ stats: TCellStats,
+ isCell = false
): TCellStats {
- if (tnode.type === 'text') {
+ if (tnode.tagName === 'br') {
+ stats.textStats.push([]);
+ } else if (tnode.type === 'text') {
const fontSize =
tnode.styles.nativeTextFlow.fontSize ?? this.fallbackFontSize;
const fontWeight = tnode.styles.nativeTextFlow.fontWeight ?? 'normal';
const fontWeightCoeff = this.fontWeightCoeffs[String(fontWeight)] ?? 1;
- stats.textStats.push({
- characters: tnode.data.length,
- maxWordLength: getMaxWordSize(tnode.data.split(/\s+/)),
+ stats.textStats[stats.textStats.length - 1]!.push({
+ text: tnode.data,
fontFamilyCoeff: 1,
fontSize,
fontWeightCoeff
});
} else {
- if (tnode.type === 'block') {
- const blockStyle = tnode.styles.nativeBlockRet;
- const width =
- typeof blockStyle.width === 'number'
- ? blockStyle.width
- : typeof blockStyle.minWidth === 'number'
- ? blockStyle.minWidth
- : 0;
- const margins = getHorizontalMargins(tnode.styles.nativeBlockRet);
- stats.blockWidth = Math.max(stats.blockWidth, width + margins);
+ // Inline wrappers do not introduce a word boundary. Blocks and explicit
+ // line breaks separate text on both sides of their contents.
+ const separatesText = tnode.type === 'block';
+ if (separatesText) {
+ stats.textStats.push([]);
+ }
+ if (tnode.type === 'block' && !isCell) {
+ const width = this.resolveBlockWidth(tnode);
+ if (width !== null) {
+ const margins = getHorizontalMargins(tnode.styles.nativeBlockRet);
+ stats.blockWidth = Math.max(stats.blockWidth, width + margins);
+ }
}
tnode.children.forEach((n) => this.assembleCellStats(n, stats));
+ if (separatesText) {
+ stats.textStats.push([]);
+ }
}
return stats;
}
- private computeTextConstraints(chunks: TextChunkStats[]): TCellConstraints {
- const minWidth = this.geTextMinWidth(chunks);
- const contentDensity = this.getContentDensity(chunks);
- return {
- minWidth,
- contentDensity
+ /**
+ * The width a block imposes on the cell holding it, or `null` when it
+ * imposes none.
+ *
+ * @remarks
+ * A specified `width` is a preference, but `min-width` and `max-width` clamp
+ * it in that order ({@link https://www.w3.org/TR/CSS21/visudet.html#min-max-widths | CSS 2.1 §10.4}),
+ * so a `min-width` larger than `max-width` wins — matching a browser. When no
+ * `width` is given, `min-width` alone still imposes a floor. The HTML
+ * presentational `width` attribute is consulted last, as befits a hint of the
+ * lowest priority.
+ */
+ private resolveBlockWidth(tnode: TNode, style?: ViewStyle): number | null {
+ return resolveImposedWidth(tnode, UNUSED_CONTAINING_WIDTH, {
+ // Cell percentages are preferences reconciled during column
+ // distribution; descendant percentages depend on the as-yet unknown cell
+ // content box. Neither is resolved here, which is why no containing
+ // width is needed.
+ resolvePercentages: false,
+ style
+ });
+ }
+
+ private computeTextConstraints(runs: TextChunkStats[][]) {
+ let minWidth = 0;
+ let contentDensity = 0;
+ let maxWidth = 0;
+ for (const chunks of runs) {
+ const characters = chunks.flatMap((chunk) =>
+ Array.from(chunk.text, (character) => ({
+ character,
+ width: character.length * this.getTextCoeff(chunk)
+ }))
+ );
+ let wordWidth = 0;
+ let lineWidth = 0;
+ for (let i = 0; i < characters.length; i++) {
+ const { character, width } = characters[i]!;
+ contentDensity += width;
+ lineWidth += width;
+ if (isBreakingSpace(character)) {
+ wordWidth = 0;
+ continue;
+ }
+ wordWidth += width;
+ minWidth = Math.max(minWidth, wordWidth);
+ // Keep numeric hyphens unbroken even when adjacent digits belong to
+ // different styled nodes. Other hyphens stay in the preceding word.
+ const isHyphen = character === '-' || character === '\u2010';
+ if (
+ isHyphen &&
+ !(
+ isDigit(characters[i - 1]?.character) &&
+ isDigit(characters[i + 1]?.character)
+ )
+ ) {
+ wordWidth = 0;
+ }
+ }
+ maxWidth = Math.max(maxWidth, lineWidth);
+ }
+ return { minWidth, maxWidth, contentDensity };
+ }
+
+ private measureIntrinsicConstraints(tnode: TNode): IntrinsicCellConstraints {
+ const cached = this.intrinsicConstraints.get(tnode);
+ if (cached) return cached;
+ const stats = this.assembleCellStats(
+ tnode,
+ { blockWidth: 0, textStats: [[]] },
+ true
+ );
+ const constraints = {
+ blockWidth: stats.blockWidth,
+ ...this.computeTextConstraints(stats.textStats)
};
+ this.intrinsicConstraints.set(tnode, constraints);
+ return constraints;
}
- computeCellConstraints(tnode: TNode): TCellConstraints {
- const stats = this.assembleCellStats(tnode);
- const blockWidth = stats.blockWidth;
- const textConstrains = this.computeTextConstraints(stats.textStats);
+ /**
+ * @param contentWidth - The width the table offers its columns, which the
+ * cell's own percentage and `max-width` resolve against. Required: it
+ * changes between measurement passes, so there is no sensible default.
+ */
+ computeCellConstraints(
+ tnode: TNode,
+ style: ViewStyle = getPaintedBlockStyle(tnode),
+ contentWidth = 0
+ ): TCellConstraints {
+ const intrinsic = this.measureIntrinsicConstraints(tnode);
+ const { blockWidth } = intrinsic;
+ const horizontalSpace = getHorizontalInsets(style);
+ // A `max-width` on the cell itself caps the whole cell box. A descendant's
+ // `max-width` must not, since it only bounds that descendant.
+ const cellMaxWidth = resolveCssSize(style.maxWidth, contentWidth);
+ // Per CSS 2.1 §17.5.2.2, "if the specified 'width' (W) of the cell is
+ // greater than MCW, W is the minimum cell width", and the maximum cell
+ // width is likewise raised by the column 'width'. So an explicit width
+ // lifts *both* bounds — never just one, or the cell would end up
+ // narrower than the width it asked for. Being a border-box width, it
+ // bounds the spaced total rather than joining the content it holds.
+ const cellBoxWidth =
+ tnode.type === 'block' ? (this.resolveBlockWidth(tnode, style) ?? 0) : 0;
+ const minWidth = Math.max(
+ Math.max(blockWidth, intrinsic.minWidth) + horizontalSpace,
+ cellBoxWidth
+ );
+ const maxWidth = Math.max(
+ Math.max(blockWidth, intrinsic.maxWidth) + horizontalSpace,
+ cellBoxWidth
+ );
+ const percentage = resolvePercentage(style.width ?? tnode.attributes.width);
+ const percentWidth =
+ percentage === null
+ ? null
+ : Math.min(
+ percentage,
+ resolvePercentage(style.maxWidth) ?? percentage,
+ cellMaxWidth === null || contentWidth === 0
+ ? percentage
+ : cellMaxWidth / contentWidth
+ );
return {
- minWidth:
- Math.max(blockWidth, textConstrains.minWidth) + stats.horizontalSpace,
- contentDensity: textConstrains.contentDensity
+ ...(percentWidth === null ? {} : { percentWidth }),
+ horizontalSpace,
+ minWidth,
+ // `max-width` caps the width the cell would *like*, but never takes it
+ // below the width it needs to hold its longest word: min-content is a
+ // floor no browser crosses.
+ maxWidth: clampWidth(maxWidth, minWidth, cellMaxWidth),
+ contentDensity: intrinsic.contentDensity
};
}
}
diff --git a/packages/heuristic-table-plugin/src/helpers/__tests__/TCellConstraintsComputer.test.ts b/packages/heuristic-table-plugin/src/helpers/__tests__/TCellConstraintsComputer.test.ts
new file mode 100644
index 0000000..95c10a6
--- /dev/null
+++ b/packages/heuristic-table-plugin/src/helpers/__tests__/TCellConstraintsComputer.test.ts
@@ -0,0 +1,430 @@
+import TCellConstraintsComputer, {
+ DEFAULT_FONT_WEIGHT_COEFFS,
+ FontWeightCoefficients
+} from '../TCellConstraintsComputer';
+import { TCellConstraints } from '../../shared-types';
+import { DEFAULT_CELL_PADDING } from '../cellPadding';
+import { createCellTNode } from '../../__tests__/utils';
+import { ViewStyle } from 'react-native';
+
+/**
+ * Pinned here so that the break-opportunity assertions below test the segment
+ * a string breaks into, and not whatever character-width estimate the computer
+ * happens to default to.
+ */
+const BASE_FONT_COEFF = 0.65;
+
+/**
+ * The horizontal room a cell which declares no padding of its own still owes
+ * to the user-agent stylesheet, and which every intrinsic width below
+ * therefore carries on top of its text.
+ */
+const DEFAULT_HORIZONTAL_PADDING = 2 * DEFAULT_CELL_PADDING;
+
+function constraintsFor(
+ cellMarkup: string,
+ contentWidth = 400,
+ fontWeightCoeffs?: FontWeightCoefficients
+): TCellConstraints {
+ return new TCellConstraintsComputer({
+ baseFontCoeff: BASE_FONT_COEFF,
+ fontWeightCoeffs
+ }).computeCellConstraints(
+ createCellTNode(``),
+ undefined,
+ contentWidth
+ );
+}
+
+describe('TCellConstraintsComputer', () => {
+ it('reuses descendant measurements while recomputing style and width constraints', () => {
+ const cell = createCellTNode(
+ ''
+ );
+ const children = cell.children;
+ const readChildren = jest.fn(() => children);
+ Object.defineProperty(cell, 'children', { get: readChildren });
+ const computer = new TCellConstraintsComputer({ baseFontCoeff: 0.5 });
+ const cases: [ViewStyle, number][] = [
+ [{ padding: 2, width: '50%', maxWidth: 80 }, 200],
+ [{ padding: 10, borderWidth: 3, width: '50%', maxWidth: 80 }, 400],
+ [{ padding: 0, width: 100, minWidth: 120 }, 300]
+ ];
+ const results = cases.map(([style, width]) =>
+ computer.computeCellConstraints(cell, style, width)
+ );
+ expect(readChildren).toHaveBeenCalledTimes(1);
+ cases.forEach(([style, width], i) => {
+ expect(results[i]).toEqual(
+ new TCellConstraintsComputer({
+ baseFontCoeff: 0.5
+ }).computeCellConstraints(cell, style, width)
+ );
+ });
+ expect(results[0]!.percentWidth).toBe(0.4);
+ expect(results[1]!.percentWidth).toBe(0.2);
+ expect(results[1]!.horizontalSpace).toBe(26);
+ expect(results[2]!.minWidth).toBeGreaterThanOrEqual(120);
+ const retuned = new TCellConstraintsComputer({
+ baseFontCoeff: 1
+ }).computeCellConstraints(cell, cases[0]![0], 200);
+ expect(retuned.contentDensity).toBe(results[0]!.contentDensity * 2);
+ });
+
+ describe('font weight coefficients', () => {
+ it('should widen bold text by the default coefficient', () => {
+ const { minWidth } = constraintsFor(
+ 'Method | '
+ );
+
+ expect(minWidth).toBeCloseTo(
+ DEFAULT_HORIZONTAL_PADDING +
+ 6 * 14 * BASE_FONT_COEFF * (DEFAULT_FONT_WEIGHT_COEFFS.bold as number)
+ );
+ });
+
+ it('should apply a coefficient supplied by the config', () => {
+ const { minWidth } = constraintsFor(
+ 'Method | ',
+ 400,
+ { bold: 1 }
+ );
+
+ // A cell of bold text now measures exactly as one of regular text.
+ expect(minWidth).toBeCloseTo(
+ DEFAULT_HORIZONTAL_PADDING + 6 * 14 * BASE_FONT_COEFF
+ );
+ });
+
+ it('should keep the defaults a partial config leaves untouched', () => {
+ // Only `bold` is retuned, so a `font-weight: 300` cell must still use
+ // the default 0.9 rather than falling back to 1.
+ const { minWidth } = constraintsFor(
+ 'Method | ',
+ 400,
+ { bold: 1 }
+ );
+
+ expect(minWidth).toBeCloseTo(
+ DEFAULT_HORIZONTAL_PADDING +
+ 6 *
+ 14 *
+ BASE_FONT_COEFF *
+ (DEFAULT_FONT_WEIGHT_COEFFS['300'] as number)
+ );
+ });
+ });
+
+ describe('text break opportunities', () => {
+ it('should allow a line break after a hyphen', () => {
+ const { minWidth } = constraintsFor('Medium-High | ');
+
+ // The longest unbreakable segment is "Medium-" (7 characters), not the
+ // full 11-character string.
+ expect(minWidth).toBeCloseTo(
+ DEFAULT_HORIZONTAL_PADDING + 7 * 14 * BASE_FONT_COEFF
+ );
+ });
+
+ it('should retain a non-breaking hyphen in one segment', () => {
+ const { minWidth } = constraintsFor('Medium‑High | ');
+
+ expect(minWidth).toBeCloseTo(
+ DEFAULT_HORIZONTAL_PADDING + 11 * 14 * BASE_FONT_COEFF
+ );
+ });
+
+ it('should not break a hyphen between two digits', () => {
+ // UAX #14 LB25 forbids it, and a date column that wraps mid-value is
+ // worse than a wide one.
+ const { minWidth } = constraintsFor('2026-09-03 | ');
+
+ expect(minWidth).toBeCloseTo(
+ DEFAULT_HORIZONTAL_PADDING + 10 * 14 * BASE_FONT_COEFF
+ );
+ });
+
+ it('should use the plugin heuristic to break ISO-2026 into two segments', () => {
+ // This heuristic differs from default UAX #14 LB25 (HY × NU).
+ // Both "ISO-" and "2026" have four characters.
+ const { minWidth } = constraintsFor('ISO-2026 | ');
+
+ expect(minWidth).toBeCloseTo(
+ DEFAULT_HORIZONTAL_PADDING + 4 * 14 * BASE_FONT_COEFF
+ );
+ });
+
+ it('should not break at a non-breaking space', () => {
+ // A whole grouped number is one unbreakable run of nine characters.
+ const { minWidth } = constraintsFor('10 000 km | ');
+
+ expect(minWidth).toBeCloseTo(
+ DEFAULT_HORIZONTAL_PADDING + 9 * 14 * BASE_FONT_COEFF
+ );
+ });
+
+ it('should break at a regular space', () => {
+ const { minWidth } = constraintsFor('10 000 km | ');
+
+ expect(minWidth).toBeCloseTo(
+ DEFAULT_HORIZONTAL_PADDING + 3 * 14 * BASE_FONT_COEFF
+ );
+ });
+ });
+
+ describe('words spanning inline nodes', () => {
+ it.each([
+ 'fnejfeaf',
+ 'fnejfeaf'
+ ])('should measure %s as one eight-character word', (markup) => {
+ const actual = constraintsFor(`${markup} | `);
+ const expected = constraintsFor('fnejfeaf | ');
+ expect(actual.minWidth).toBeCloseTo(expected.minWidth);
+ expect(actual.maxWidth).toBeCloseTo(expected.maxWidth);
+ });
+
+ it('should sum the widths of differently styled word fragments', () => {
+ const { minWidth, maxWidth } = constraintsFor(
+ 'fnejfeaf | '
+ );
+ const width =
+ DEFAULT_HORIZONTAL_PADDING +
+ 4 * BASE_FONT_COEFF * (14 + 20 * DEFAULT_FONT_WEIGHT_COEFFS.bold!);
+ expect(minWidth).toBeCloseTo(width);
+ expect(maxWidth).toBeCloseTo(width);
+ });
+
+ it.each([
+ ['fnej feaf', 'fnej feaf'],
+ ['fnej feaf', 'fnej feaf'],
+ ['10 000 km', '10 000 km'],
+ ['2026-09-03', '2026-09-03'],
+ ['Medium-High', 'Medium-High']
+ ])('should preserve break opportunities in %s', (markup, plain) => {
+ const actual = constraintsFor(`${markup} | `);
+ const expected = constraintsFor(`${plain} | `);
+ expect(actual.minWidth).toBeCloseTo(expected.minWidth);
+ expect(actual.maxWidth).toBeCloseTo(expected.maxWidth);
+ });
+
+ it.each([
+ 'fnej
feaf',
+ 'fnejfeaf
abcd',
+ 'fnej
feaf
'
+ ])('should keep separate lines from joining in %s', (markup) => {
+ expect(constraintsFor(`${markup} | `).minWidth).toBeCloseTo(
+ DEFAULT_HORIZONTAL_PADDING + 4 * 14 * BASE_FONT_COEFF
+ );
+ });
+
+ it('should keep max-width from clipping a word spanning nodes', () => {
+ const { minWidth, maxWidth } = constraintsFor(
+ 'fnejfeaf | '
+ );
+ expect(minWidth).toBeCloseTo(
+ DEFAULT_HORIZONTAL_PADDING + 8 * 14 * BASE_FONT_COEFF
+ );
+ expect(maxWidth).toBe(minWidth);
+ });
+ });
+
+ describe('default cell padding', () => {
+ it('should reserve the padding a bare cell gets from the user agent', () => {
+ const bare = constraintsFor('Method | ');
+ const unpadded = constraintsFor('Method | ');
+
+ expect(bare.minWidth - unpadded.minWidth).toBeCloseTo(
+ DEFAULT_HORIZONTAL_PADDING
+ );
+ expect(bare.maxWidth - unpadded.maxWidth).toBeCloseTo(
+ DEFAULT_HORIZONTAL_PADDING
+ );
+ });
+
+ it('should let a declared padding replace the default, not join it', () => {
+ // 8px on each side, so 16px of spacing — never 18px.
+ const declared = constraintsFor('Method | ');
+ const unpadded = constraintsFor('Method | ');
+
+ expect(declared.minWidth - unpadded.minWidth).toBeCloseTo(16);
+ });
+
+ it('should ignore a margin the cell renderer zeroes', () => {
+ // `useHtmlTableCellProps` unconditionally zeroes all four margins, so
+ // width reserved for one here only widens the column by a gap nothing
+ // ever paints.
+ const withMargin = constraintsFor(
+ 'Method | '
+ );
+ const bare = constraintsFor('Method | ');
+ expect(withMargin.minWidth).toBe(bare.minWidth);
+ expect(withMargin.maxWidth).toBe(bare.maxWidth);
+ });
+
+ it('should reserve the default beside a padding declared on one side', () => {
+ const oneSided = constraintsFor(
+ 'Method | '
+ );
+ const unpadded = constraintsFor('Method | ');
+
+ // The right side keeps the user-agent pixel it was never given a
+ // declaration for.
+ expect(oneSided.minWidth - unpadded.minWidth).toBeCloseTo(
+ 8 + DEFAULT_CELL_PADDING
+ );
+ });
+ });
+
+ describe('width resolution', () => {
+ it('should keep a percentage width as a preference, not an intrinsic floor', () => {
+ const { minWidth, percentWidth } = constraintsFor(
+ 'a | '
+ );
+ expect(percentWidth).toBe(0.5);
+ expect(minWidth).toBeCloseTo(
+ DEFAULT_HORIZONTAL_PADDING + 14 * BASE_FONT_COEFF
+ );
+ });
+
+ it('should not resolve a descendant percentage against the table', () => {
+ const { minWidth } = constraintsFor(
+ 'a | '
+ );
+ expect(minWidth).toBeCloseTo(
+ DEFAULT_HORIZONTAL_PADDING + 14 * BASE_FONT_COEFF
+ );
+ });
+
+ it('should treat a declared cell width as a border-box one', () => {
+ // React Native lays out with `box-sizing: border-box`, and so does CSS
+ // for a table cell: the padding sits inside the 200px, it does not
+ // widen the column to 216px.
+ const { minWidth, maxWidth } = constraintsFor(
+ 'a | '
+ );
+ expect(minWidth).toBe(200);
+ expect(maxWidth).toBe(200);
+ });
+
+ it('should still add cell spacing to a descendant width', () => {
+ // A block inside the cell is content-box against it, so the cell has to
+ // grow by its own padding to hold the 200px the block asked for.
+ const { minWidth } = constraintsFor(
+ ' | '
+ );
+ expect(minWidth).toBe(216);
+ });
+
+ it('should read the presentational width attribute', () => {
+ const { minWidth } = constraintsFor('a | ');
+ expect(minWidth).toBe(200);
+ });
+
+ it('should let a CSS width supersede the presentational attribute', () => {
+ // The attribute is a hint of the lowest priority.
+ const { minWidth } = constraintsFor(
+ 'a | '
+ );
+ expect(minWidth).toBe(100);
+ });
+
+ it('should let CSS auto override the presentational width attribute', () => {
+ const { minWidth } = constraintsFor(
+ 'a | '
+ );
+ expect(minWidth).toBeCloseTo(
+ DEFAULT_HORIZONTAL_PADDING + 14 * BASE_FONT_COEFF
+ );
+ });
+ });
+
+ describe('CSS clamping order', () => {
+ it('should raise a width up to min-width', () => {
+ const { minWidth } = constraintsFor(
+ 'a | '
+ );
+ expect(minWidth).toBe(300);
+ });
+
+ it('should cut a width down to max-width', () => {
+ const { minWidth } = constraintsFor(
+ 'a | '
+ );
+ expect(minWidth).toBe(100);
+ });
+
+ it('should let min-width win over a smaller max-width', () => {
+ // CSS 2.1 §10.4: the minimum is applied last, so it wins the conflict.
+ const { minWidth } = constraintsFor(
+ 'a | '
+ );
+ expect(minWidth).toBe(200);
+ });
+
+ it('should apply min-width on its own, without a width', () => {
+ const { minWidth } = constraintsFor('a | ');
+ expect(minWidth).toBe(250);
+ });
+ });
+
+ describe('maximum cell width', () => {
+ it.each([
+ 'AA
BBBB BBBB',
+ 'BBBB BBBB
AA',
+ 'AA
BBBB BBBB
',
+ 'BBBB BBBB
AA
',
+ 'AABBBB BBBB
',
+ 'BBBB BBBBAA
'
+ ])(
+ 'should use the widest forced line in %s without losing text density',
+ (markup) => {
+ const actual = constraintsFor(`${markup} | `);
+ // The wider line contains a space: its width exceeds the longest-word
+ // minimum, which would otherwise mask a broken maximum calculation.
+ expect(actual.maxWidth).toBeCloseTo(
+ DEFAULT_HORIZONTAL_PADDING + 9 * 14 * BASE_FONT_COEFF
+ );
+ expect(actual.contentDensity).toBeCloseTo(11 * 14 * BASE_FONT_COEFF);
+ }
+ );
+
+ it.each([
+ 'AB CD
E',
+ 'E
AB CD'
+ ])('should sum styled fragments in the widest line of %s', (markup) => {
+ const actual = constraintsFor(`${markup} | `);
+ expect(actual.maxWidth).toBeCloseTo(
+ DEFAULT_HORIZONTAL_PADDING + BASE_FONT_COEFF * (2 * 14 + 3 * 20)
+ );
+ });
+
+ it('should cap the maximum width at max-width', () => {
+ const { maxWidth } = constraintsFor(
+ `${'lorem ipsum '.repeat(20)} | `
+ );
+ expect(maxWidth).toBe(100);
+ });
+
+ it('should preserve the full unbreakable word when max-width is smaller', () => {
+ // A cap tighter than the longest word must not drive the cell below the
+ // width it needs to hold that word.
+ const { minWidth, maxWidth } = constraintsFor(
+ 'antidisestablishmentarianism | '
+ );
+ expect(minWidth).toBeCloseTo(
+ DEFAULT_HORIZONTAL_PADDING +
+ 'antidisestablishmentarianism'.length * 14 * BASE_FONT_COEFF
+ );
+ expect(maxWidth).toBe(minWidth);
+ });
+
+ it('should keep an explicitly sized block from collapsing the cell', () => {
+ // A cell holding only an image has no text, so its maximum has to come
+ // from the block width or the column would vanish.
+ const { maxWidth } = constraintsFor(
+ ' | '
+ );
+ expect(maxWidth).toBeGreaterThanOrEqual(120);
+ });
+ });
+});
diff --git a/packages/heuristic-table-plugin/src/helpers/__tests__/fillTableDisplay.test.ts b/packages/heuristic-table-plugin/src/helpers/__tests__/buildTableGrid.test.ts
similarity index 63%
rename from packages/heuristic-table-plugin/src/helpers/__tests__/fillTableDisplay.test.ts
rename to packages/heuristic-table-plugin/src/helpers/__tests__/buildTableGrid.test.ts
index 941d3aa..cad52d6 100644
--- a/packages/heuristic-table-plugin/src/helpers/__tests__/fillTableDisplay.test.ts
+++ b/packages/heuristic-table-plugin/src/helpers/__tests__/buildTableGrid.test.ts
@@ -1,15 +1,12 @@
-import { TNode } from '@native-html/render';
-import fillTableDisplay, { createEmptyDisplay } from '../fillTableDisplay';
-import TCellConstraintsComputer from '../TCellConstraintsComputer';
-import { createTableTNode } from './utils';
+import buildTableGrid from '../buildTableGrid';
+import { createTableTNode } from '../../__tests__/utils';
-function createDisplay(tnode: TNode) {
- const display = createEmptyDisplay({ contentWidth: 1000 });
- fillTableDisplay(tnode, display, new TCellConstraintsComputer({}));
- return display;
-}
+const createDisplay = buildTableGrid;
-describe('fillTableDisplay', () => {
+// The slot cursor and the occupancy index are local to the build, so what a
+// spanning cell blocks is asserted where it shows: the coordinates the cells
+// after it are given.
+describe('buildTableGrid', () => {
it('should parse cells', () => {
const table = `
@@ -68,7 +65,7 @@ describe('fillTableDisplay', () => {
`;
const tnode = createTableTNode(table);
const display = createDisplay(tnode);
- expect(display.offsetX).toBe(0);
+ // just past that row's final cell.
expect(display.maxX).toBe(3);
expect(display.maxY).toBe(1);
expect(display.cells).toMatchObject([
@@ -98,6 +95,12 @@ describe('fillTableDisplay', () => {
}
]);
});
+ it('should include a final colspan in the maximum column index', () => {
+ const tnode = createTableTNode(`
+
+ `);
+ expect(createDisplay(tnode).maxX).toBe(2);
+ });
it('should take rowspan into account to compute cell coordinates (x=0)', () => {
const table = `
@@ -115,8 +118,6 @@ describe('fillTableDisplay', () => {
const display = createDisplay(tnode);
expect(display.maxX).toBe(2);
expect(display.maxY).toBe(1);
- expect(display.offsetX).toBe(0);
- expect(display.occupiedCoordinates).toMatchObject([{ x: 0, y: 1 }]);
expect(display.cells).toMatchObject([
{
lenX: 1,
@@ -167,8 +168,6 @@ describe('fillTableDisplay', () => {
const display = createDisplay(tnode);
expect(display.maxX).toBe(2);
expect(display.maxY).toBe(1);
- expect(display.offsetX).toBe(0);
- expect(display.occupiedCoordinates).toMatchObject([{ x: 1, y: 1 }]);
expect(display.cells).toMatchObject([
{
lenX: 1,
@@ -219,11 +218,6 @@ describe('fillTableDisplay', () => {
const display = createDisplay(tnode);
expect(display.maxX).toBe(2);
expect(display.maxY).toBe(1);
- // expect(display.offsetX).toBe(2);
- expect(display.occupiedCoordinates).toMatchObject([
- { x: 0, y: 1 },
- { x: 2, y: 1 }
- ]);
expect(display.cells).toMatchObject([
{
lenX: 1,
@@ -272,7 +266,6 @@ describe('fillTableDisplay', () => {
const display = createDisplay(tnode);
expect(display.maxX).toBe(2);
expect(display.maxY).toBe(2);
- expect(display.offsetX).toBe(0);
expect(display.cells).toMatchObject([
{
lenX: 1,
@@ -312,4 +305,77 @@ describe('fillTableDisplay', () => {
}
]);
});
+ it('should skip past every slot claimed by consecutive rowspans', () => {
+ // Two adjacent spanning cells block columns 0 and 1 of the second row, so
+ // `D` belongs in column 2. Counting the blockers in one pass instead of
+ // walking slot by slot would land it on column 1, on top of `B`.
+ const table = `
+
+
+ | A |
+ B |
+ C |
+
+
+ | D |
+
+
+ `;
+ const display = createDisplay(createTableTNode(table));
+ expect(display.cells).toMatchObject([
+ { lenX: 1, lenY: 2, x: 0, y: 0 },
+ { lenX: 1, lenY: 2, x: 1, y: 0 },
+ { lenX: 1, lenY: 1, x: 2, y: 0 },
+ { lenX: 1, lenY: 1, x: 2, y: 1 }
+ ]);
+ });
+ it('should block every column a cell spans in the rows below it', () => {
+ // `A` covers a 2x2 rectangle, so `C` starts at column 2 — not column 1,
+ // which is still inside `A`.
+ const table = `
+
+ `;
+ const display = createDisplay(createTableTNode(table));
+ expect(display.cells).toMatchObject([
+ { lenX: 2, lenY: 2, x: 0, y: 0 },
+ { lenX: 1, lenY: 1, x: 2, y: 0 },
+ { lenX: 1, lenY: 1, x: 2, y: 1 }
+ ]);
+ });
+ it.each([
+ ['0', 1],
+ ['-2', 1],
+ ['', 1],
+ ['abc', 1],
+ ['2.5', 2],
+ ['3', 3]
+ ])('should clamp colspan="%s" to a valid span of %i', (colspan, expected) => {
+ const table = ``;
+ const display = createDisplay(createTableTNode(table));
+ expect(display.cells[0]).toMatchObject({ lenX: expected, x: 0 });
+ });
+ it('should clamp an invalid rowspan rather than span nothing', () => {
+ // `rowspan="0"` means "to the end of the row group" in HTML; row groups
+ // are not modelled here, so it must at least not corrupt the grid.
+ const table = `
+
+ `;
+ const display = createDisplay(createTableTNode(table));
+ expect(display.cells).toMatchObject([
+ { lenX: 1, lenY: 1, x: 0, y: 0 },
+ { lenX: 1, lenY: 1, x: 1, y: 0 },
+ { lenX: 1, lenY: 1, x: 0, y: 1 }
+ ]);
+ });
});
diff --git a/packages/heuristic-table-plugin/src/helpers/__tests__/cellStyles.test.ts b/packages/heuristic-table-plugin/src/helpers/__tests__/cellStyles.test.ts
new file mode 100644
index 0000000..d8f5073
--- /dev/null
+++ b/packages/heuristic-table-plugin/src/helpers/__tests__/cellStyles.test.ts
@@ -0,0 +1,527 @@
+import { I18nManager } from 'react-native';
+import { resolveBorderCollapse } from '../borderModel';
+import { getDefaultCellPaddingStyle } from '../cellPadding';
+import { resolveCellVerticalAlign } from '../cellVerticalAlign';
+import { getCollapsedCellBorderStyle, getCollapsedTableBorderStyle } from '../collapseBorders';
+import buildTableGrid from '../buildTableGrid';
+import { createCellTNode, createTableTNode } from '../../__tests__/utils';
+
+/** A wrapper that paints all four of its resolved outer edges. */
+const FRAMED = {
+ borderTopWidth: 1,
+ borderRightWidth: 1,
+ borderBottomWidth: 1,
+ borderLeftWidth: 1
+};
+
+function displayFor(html: string) {
+ const table = createTableTNode(html);
+ const display = buildTableGrid(table);
+ return { display, table };
+}
+
+describe('cell styles', () => {
+ describe('vertical alignment', () => {
+ it('declares nothing when the cell inherits the HTML default', () => {
+ expect(
+ resolveCellVerticalAlign(
+ createCellTNode('')
+ )
+ ).toBeNull();
+ });
+
+ it('honours inline cell alignment', () => {
+ expect(
+ resolveCellVerticalAlign(
+ createCellTNode(
+ ''
+ )
+ )
+ ).toBe('bottom');
+ });
+
+ it('inherits inline row alignment', () => {
+ expect(
+ resolveCellVerticalAlign(
+ createCellTNode(
+ ''
+ )
+ )
+ ).toBe('top');
+ });
+
+ it('honours the legacy valign attribute', () => {
+ expect(
+ resolveCellVerticalAlign(
+ createCellTNode(
+ ''
+ )
+ )
+ ).toBe('baseline');
+ });
+
+ it.each(['vertical-align: TOP', 'valign="TOP"'])(
+ 'matches the keyword in %s whatever its case',
+ (declaration) => {
+ const attribute = declaration.startsWith('valign');
+ expect(
+ resolveCellVerticalAlign(
+ createCellTNode(
+ ``
+ )
+ )
+ ).toBe('top');
+ }
+ );
+
+ it('honours an important declaration without its keyword', () => {
+ expect(
+ resolveCellVerticalAlign(
+ createCellTNode(
+ ''
+ )
+ )
+ ).toBe('bottom');
+ });
+
+ it('takes the last of several declarations, as the cascade does', () => {
+ expect(
+ resolveCellVerticalAlign(
+ createCellTNode(
+ ''
+ )
+ )
+ ).toBe('bottom');
+ });
+
+ it('skips inline style segments that declare nothing', () => {
+ // A trailing semicolon leaves an empty segment, and a malformed one has
+ // no colon to split on. Neither may derail the properties around them.
+ expect(
+ resolveCellVerticalAlign(
+ createCellTNode(
+ ''
+ )
+ )
+ ).toBe('bottom');
+ });
+
+ it.each(['initial', 'unset'])(
+ 'resets %s to the CSS initial value',
+ (keyword) => {
+ expect(
+ resolveCellVerticalAlign(
+ createCellTNode(
+ ``
+ )
+ )
+ ).toBe('baseline');
+ }
+ );
+
+ it.each(['10px', '50%', 'super', 'text-bottom'])(
+ 'treats the inline-only value %s as baseline, as CSS does for a cell',
+ (value) => {
+ expect(
+ resolveCellVerticalAlign(
+ createCellTNode(
+ ``
+ )
+ )
+ ).toBe('baseline');
+ }
+ );
+
+ it.each(['inherit', 'revert', 'revert-layer'])(
+ 'keeps walking up the tree past %s',
+ (keyword) => {
+ // The keyword declares nothing of its own: the cell takes whatever its
+ // row declares, exactly as though it had said nothing at all.
+ expect(
+ resolveCellVerticalAlign(
+ createCellTNode(
+ ``
+ )
+ )
+ ).toBe('top');
+ }
+ );
+
+ it('reports nothing when only an inherit keyword is declared', () => {
+ expect(
+ resolveCellVerticalAlign(
+ createCellTNode(
+ ''
+ )
+ )
+ ).toBeNull();
+ });
+ });
+
+ describe('default padding', () => {
+ const ONE_PIXEL_EVERY_SIDE = {
+ paddingTop: 1,
+ paddingRight: 1,
+ paddingBottom: 1,
+ paddingLeft: 1
+ };
+
+ it('gives a bare cell one pixel on every side', () => {
+ expect(
+ getDefaultCellPaddingStyle(
+ createCellTNode('').styles
+ .nativeBlockRet
+ )
+ ).toEqual(ONE_PIXEL_EVERY_SIDE);
+ });
+
+ it('leaves the sides an author declared alone', () => {
+ // Source CSS reaches the plugin expanded per side, so a `padding-left`
+ // replaces the default on that side alone — as it does in a browser.
+ expect(
+ getDefaultCellPaddingStyle(
+ createCellTNode(
+ ''
+ ).styles.nativeBlockRet
+ )
+ ).toEqual({ paddingTop: 1, paddingRight: 1, paddingBottom: 1 });
+ });
+
+ it('declares nothing for a cell padded on all sides', () => {
+ expect(
+ getDefaultCellPaddingStyle(
+ createCellTNode(
+ ''
+ ).styles.nativeBlockRet
+ )
+ ).toEqual({});
+ });
+
+ it('keeps a zero padding at zero', () => {
+ expect(
+ getDefaultCellPaddingStyle(
+ createCellTNode(
+ ''
+ ).styles.nativeBlockRet
+ )
+ ).toEqual({});
+ });
+
+ it('reads a shorthand from the config as a declaration of every side', () => {
+ // Yoga resolves a side against its own edge before the `padding` one, so
+ // a longhand default would outrank this shorthand however it is merged.
+ expect(getDefaultCellPaddingStyle(null, { padding: 8 })).toEqual({});
+ });
+
+ it('reads an axis shorthand from the config on that axis alone', () => {
+ expect(getDefaultCellPaddingStyle(null, { paddingVertical: 8 })).toEqual({
+ paddingRight: 1,
+ paddingLeft: 1
+ });
+ });
+
+ it('reserves both horizontal sides for a writing-direction keyword', () => {
+ // Which side `paddingStart` lands on is not known here, so neither may
+ // be given a default that would fight it.
+ expect(getDefaultCellPaddingStyle(null, { paddingStart: 8 })).toEqual({
+ paddingTop: 1,
+ paddingBottom: 1
+ });
+ });
+
+ it('lets the config decide a side the source CSS left bare', () => {
+ expect(
+ getDefaultCellPaddingStyle(
+ createCellTNode(
+ ''
+ ).styles.nativeBlockRet,
+ { paddingHorizontal: 4 }
+ )
+ ).toEqual({ paddingBottom: 1 });
+ });
+ });
+
+ describe('border collapse', () => {
+ it('keeps separate borders by default', () => {
+ const table = createTableTNode('');
+ expect(resolveBorderCollapse(table)).toBe(false);
+ });
+
+ it('honours an inline border-collapse declaration', () => {
+ const table = createTableTNode(
+ ''
+ );
+ expect(resolveBorderCollapse(table)).toBe(true);
+ });
+
+ it('allows renderer config to override inline CSS', () => {
+ const table = createTableTNode(
+ ''
+ );
+ expect(resolveBorderCollapse(table, 'separate')).toBe(false);
+ });
+
+ it('reads the legacy rules attribute as a collapsed table', () => {
+ // The HTML rendering rules give any `rules` value collapsed borders.
+ const table = createTableTNode(
+ ''
+ );
+ expect(resolveBorderCollapse(table)).toBe(true);
+ });
+
+ it.each(['collapse', 'separate'] as const)(
+ 'inherits %s from an ancestor that declares it',
+ (value) => {
+ // `border-collapse` is inherited, and only inline declarations survive
+ // the CSS processor, so the ancestors have to be walked by hand.
+ const table = createTableTNode(
+ ``
+ );
+ expect(resolveBorderCollapse(table)).toBe(value === 'collapse');
+ }
+ );
+
+ it('prefers its own declaration to an inherited one', () => {
+ const table = createTableTNode(
+ ''
+ );
+ expect(resolveBorderCollapse(table)).toBe(false);
+ });
+
+ it('removes duplicate leading and top cell edges', () => {
+ // An interior cell keeps only the trailing and bottom halves it owns.
+ expect(
+ getCollapsedCellBorderStyle(
+ { x: 1, y: 1, lenX: 1, lenY: 1 },
+ { borderWidth: 1, borderColor: 'black' },
+ { maxX: 2, maxY: 2, tableBorderStyle: FRAMED }
+ )
+ ).toEqual({
+ borderLeftWidth: 0,
+ borderTopWidth: 0,
+ borderRightWidth: 1,
+ borderRightColor: 'black',
+ borderStyle: 'solid',
+ borderBottomWidth: 1,
+ borderBottomColor: 'black'
+ });
+ });
+
+ it('lets the table wrapper own all resolved outside edges', () => {
+ expect(
+ getCollapsedCellBorderStyle(
+ { x: 0, y: 0, lenX: 1, lenY: 1 },
+ { borderWidth: 1, borderColor: 'black' },
+ { maxX: 0, maxY: 0, tableBorderStyle: FRAMED }
+ )
+ ).toEqual({
+ borderTopWidth: 0,
+ borderRightWidth: 0,
+ borderBottomWidth: 0,
+ borderLeftWidth: 0
+ });
+ });
+
+ it('keeps an outside edge the table wrapper does not paint', () => {
+ // A border a cell only gets from `getStyleForCell` is invisible to the
+ // wrapper resolution, so stripping it here would lose the frame.
+ expect(
+ getCollapsedCellBorderStyle(
+ { x: 0, y: 0, lenX: 1, lenY: 1 },
+ { borderWidth: 1, borderColor: 'blue' },
+ {
+ maxX: 0,
+ maxY: 0,
+ tableBorderStyle: {
+ borderTopWidth: 0,
+ borderRightWidth: 0,
+ borderBottomWidth: 0,
+ borderLeftWidth: 0
+ }
+ }
+ )
+ ).toEqual({
+ borderTopWidth: 1,
+ borderTopColor: 'blue',
+ borderRightWidth: 1,
+ borderRightColor: 'blue',
+ borderBottomWidth: 1,
+ borderBottomColor: 'blue',
+ borderLeftWidth: 1,
+ borderLeftColor: 'blue',
+ borderStyle: 'solid'
+ });
+ });
+
+ it('uses the stronger border from the adjacent cell at a shared edge', () => {
+ expect(
+ getCollapsedCellBorderStyle(
+ { x: 1, y: 1, lenX: 1, lenY: 1 },
+ {
+ borderLeftWidth: 9,
+ borderLeftColor: 'green',
+ borderRightWidth: 1,
+ borderRightColor: 'blue'
+ },
+ {
+ maxX: 3,
+ maxY: 3,
+ tableBorderStyle: FRAMED,
+ neighbours: {
+ End: [
+ {
+ x: 2,
+ y: 1,
+ lenX: 1,
+ lenY: 1,
+ tnode: createCellTNode('')
+ }
+ ],
+ Bottom: []
+ },
+ getCellStyle: () => ({ borderLeftWidth: 4, borderLeftColor: 'red' })
+ }
+ )
+ ).toMatchObject({ borderRightWidth: 4, borderRightColor: 'red' });
+ });
+
+ it('promotes a stronger cell border to the outside table edge', () => {
+ const { display, table } = displayFor(`
+
+ `);
+ expect(
+ getCollapsedTableBorderStyle(display, table.styles.nativeBlockRet)
+ ).toMatchObject({
+ borderTopWidth: 1,
+ borderTopColor: 'black',
+ borderRightWidth: 1,
+ borderRightColor: 'black',
+ borderBottomWidth: 1,
+ borderBottomColor: 'black',
+ borderLeftWidth: 1,
+ borderLeftColor: 'black'
+ });
+ });
+
+ it('clips a rowspan overrunning the last row to the bottom edge', () => {
+ // The table does not grow rows to fit an oversized `rowspan`, so the
+ // spanning cell sits at the bottom edge the wrapper painted rather than
+ // ruling off a row of its own underneath it.
+ expect(
+ getCollapsedCellBorderStyle(
+ { x: 0, y: 0, lenX: 1, lenY: 5 },
+ { borderBottomWidth: 3, borderBottomColor: 'red' },
+ { maxX: 1, maxY: 1, tableBorderStyle: FRAMED }
+ )
+ ).toMatchObject({ borderBottomWidth: 0 });
+ });
+
+ it('resolves the outside edge over the rows the table has', () => {
+ // A `rowspan` past the last row must not take the bottom edge with it:
+ // the cells of the last row still meet the wrapper there.
+ const { display, table } = displayFor(`
+
+ `);
+ expect(display.maxY).toBe(1);
+ expect(
+ getCollapsedTableBorderStyle(display, table.styles.nativeBlockRet)
+ ).toMatchObject({ borderBottomWidth: 5, borderBottomColor: 'blue' });
+ });
+
+ it('weighs the styles a cell only gets from the config', () => {
+ // `getStyleForCell` is invisible to the source CSS resolution, so a
+ // border it declares would otherwise lose to the weaker table one and
+ // be painted by neither the wrapper nor the cell.
+ const { display, table } = displayFor(`
+
+ `);
+ expect(
+ getCollapsedTableBorderStyle(
+ display,
+ table.styles.nativeBlockRet,
+ (cell) => ({
+ ...cell.tnode.styles.nativeBlockRet,
+ borderWidth: 3,
+ borderColor: 'red'
+ })
+ )
+ ).toMatchObject({
+ borderTopWidth: 3,
+ borderTopColor: 'red',
+ borderRightWidth: 3,
+ borderBottomWidth: 3,
+ borderLeftWidth: 3
+ });
+ });
+
+ it('gives an equal cell border precedence over the table color', () => {
+ const { display, table } = displayFor(`
+
+ `);
+ expect(
+ getCollapsedTableBorderStyle(display, table.styles.nativeBlockRet)
+ ).toMatchObject({
+ borderTopColor: 'blue',
+ borderRightColor: 'blue',
+ borderBottomColor: 'blue',
+ borderLeftColor: 'blue'
+ });
+ });
+ });
+
+ describe('writing direction', () => {
+ // A style which declares no `direction` of its own follows the locale, so
+ // the side a logical edge lands on is only knowable from `I18nManager`.
+ // This is the branch a right-to-left app takes, and the explicit
+ // `direction` one covered elsewhere never reaches it.
+ afterEach(() => jest.restoreAllMocks());
+
+ const LOGICAL_START = { borderStartWidth: 7, borderStartColor: 'red' };
+
+ it.each([
+ [false, 'borderLeftWidth', 'borderRightWidth'],
+ [true, 'borderRightWidth', 'borderLeftWidth']
+ ] as const)(
+ 'resolves a logical start edge with isRTL %s',
+ (isRTL, physicalSide, oppositeSide) => {
+ jest.replaceProperty(I18nManager, 'isRTL', isRTL);
+ const style = getCollapsedCellBorderStyle(
+ { x: 0, y: 0, lenX: 1, lenY: 1 },
+ LOGICAL_START,
+ { maxX: 0, maxY: 0, tableBorderStyle: null }
+ );
+ // The opposite side is asserted too: a logical edge resolved onto both
+ // physical ones would otherwise satisfy the winning side alone.
+ expect(style).toMatchObject({
+ [physicalSide]: 7,
+ [oppositeSide]: 0
+ });
+ }
+ );
+
+ it('lets an explicit direction outrank the locale', () => {
+ jest.replaceProperty(I18nManager, 'isRTL', true);
+ expect(
+ getCollapsedCellBorderStyle(
+ { x: 0, y: 0, lenX: 1, lenY: 1 },
+ { ...LOGICAL_START, direction: 'ltr' },
+ { maxX: 0, maxY: 0, tableBorderStyle: null }
+ )
+ ).toMatchObject({ borderLeftWidth: 7, borderRightWidth: 0 });
+ });
+ });
+});
diff --git a/packages/heuristic-table-plugin/src/helpers/__tests__/computeColumnWidths.test.ts b/packages/heuristic-table-plugin/src/helpers/__tests__/computeColumnWidths.test.ts
new file mode 100644
index 0000000..89a49e6
--- /dev/null
+++ b/packages/heuristic-table-plugin/src/helpers/__tests__/computeColumnWidths.test.ts
@@ -0,0 +1,222 @@
+import computeColumnWidths, {
+ ColumnLayoutInput
+} from '../computeColumnWidths';
+import { DisplayCell, TCellConstraints } from '../../shared-types';
+
+function makeDisplay(
+ cells: Array<
+ Pick & { constraints: TCellConstraints }
+ >,
+ { contentWidth, forceStretch }: { contentWidth: number; forceStretch?: boolean }
+): ColumnLayoutInput {
+ return {
+ assignableWidth: contentWidth,
+ forceStretch,
+ cells: cells.map((cell) => ({
+ lenX: 1,
+ lenY: 1,
+ tnode: null as never,
+ ...cell
+ }))
+ };
+}
+
+describe('computeColumnWidths', () => {
+ it('should preserve a fixed-width column beside a column with more content', () => {
+ // An icon column: a single wide glyph (`width: 40px` plus 11px of padding
+ // and borders) whose one character makes for a very low content density.
+ // CSS 2.1 §17.5.2.2 raises both the column minimum and maximum by the
+ // column `width`, so 51px is a floor the shrink-to-fit pass cannot cross.
+ const widths = computeColumnWidths(
+ makeDisplay(
+ [
+ {
+ x: 0,
+ y: 0,
+ constraints: { minWidth: 51, maxWidth: 51, contentDensity: 30.42 }
+ },
+ {
+ x: 1,
+ y: 0,
+ constraints: {
+ minWidth: 141.13,
+ maxWidth: 896.35,
+ contentDensity: 896.35
+ }
+ }
+ ],
+ { contentWidth: 400, forceStretch: false }
+ )
+ );
+ expect(widths[0]).toBe(51);
+ expect(widths[1]).toBe(349);
+ });
+
+ it('should never deal a column more width than it can use', () => {
+ // The surplus is shared over how much room each column has left to grow,
+ // so no column is ever dealt more than its maximum in the first place.
+ const constraints = [
+ {
+ x: 0,
+ y: 0,
+ constraints: { minWidth: 10, maxWidth: 30, contentDensity: 30 }
+ },
+ {
+ x: 1,
+ y: 0,
+ constraints: { minWidth: 10, maxWidth: 40, contentDensity: 100 }
+ },
+ {
+ x: 2,
+ y: 0,
+ constraints: { minWidth: 10, maxWidth: 400, contentDensity: 400 }
+ }
+ ];
+ const widths = computeColumnWidths(
+ makeDisplay(constraints, { contentWidth: 400, forceStretch: false })
+ );
+ widths.forEach((width, i) => {
+ expect(width).toBeLessThanOrEqual(constraints[i]!.constraints.maxWidth);
+ expect(width).toBeGreaterThanOrEqual(
+ constraints[i]!.constraints.minWidth
+ );
+ });
+ // The surplus is fully used: the table fills its container.
+ expect(widths.reduce((a, b) => a + b, 0)).toBeCloseTo(400);
+ });
+
+ it('should shrink to fit when no column can use the whole surplus', () => {
+ // Every column reaches its maximum and the table stays narrower than the
+ // container, rather than stretching columns past any useful width.
+ const widths = computeColumnWidths(
+ makeDisplay(
+ [
+ {
+ x: 0,
+ y: 0,
+ constraints: { minWidth: 10, maxWidth: 30, contentDensity: 30 }
+ },
+ {
+ x: 1,
+ y: 0,
+ constraints: { minWidth: 10, maxWidth: 40, contentDensity: 100 }
+ }
+ ],
+ { contentWidth: 600, forceStretch: false }
+ )
+ );
+ expect(widths).toEqual([30, 40]);
+ });
+
+ it('should stretch columns of equal density to fill the container when forceStretch is set', () => {
+ // Two identical columns have no relative preference between them, but
+ // `forceStretch` still has to fill the container — historically this case
+ // distributed nothing at all and left the table hugging its content.
+ const cell = {
+ constraints: { minWidth: 20, maxWidth: 20, contentDensity: 20 }
+ };
+ const widths = computeColumnWidths(
+ makeDisplay(
+ [
+ { x: 0, y: 0, ...cell },
+ { x: 1, y: 0, ...cell }
+ ],
+ { contentWidth: 400, forceStretch: true }
+ )
+ );
+ expect(widths).toEqual([200, 200]);
+ });
+
+ describe('declared column widths', () => {
+ /**
+ * Two columns holding the *same* 40px of content, where the first spends
+ * an extra `extraSpacing` on padding and borders — so its box is wider by
+ * exactly that much and nothing else differs.
+ */
+ const sameContentDifferentSpacing = (extraSpacing: number) =>
+ computeColumnWidths(
+ makeDisplay(
+ [extraSpacing, 0].map((horizontalSpace, x) => ({
+ x,
+ y: 0,
+ constraints: {
+ minWidth: 40 + horizontalSpace,
+ maxWidth: 40 + horizontalSpace,
+ contentDensity: 1,
+ horizontalSpace
+ }
+ })),
+ { contentWidth: 200, forceStretch: true }
+ )
+ );
+
+ it('shares surplus over content, not over the spacing a column carries', () => {
+ // Weighting by the whole box would give the first column the larger
+ // share purely for painting one more border edge — which is exactly the
+ // bookkeeping difference the collapsing model creates between cells, and
+ // exactly what must not become a visible width difference.
+ const [first, second] = sameContentDifferentSpacing(10);
+ expect(first! + second!).toBeCloseTo(200);
+ // Equal content in, equal content out; the box differs by the spacing.
+ expect(first! - 10).toBeCloseTo(second!);
+ expect(first!).toBeCloseTo(105);
+ expect(second!).toBeCloseTo(95);
+ });
+
+ it('splits surplus evenly when every column carries the same spacing', () => {
+ const [first, second] = sameContentDifferentSpacing(0);
+ expect(first).toBeCloseTo(100);
+ expect(second).toBeCloseTo(100);
+ });
+
+ it('gives a percentage column its share of the assignable width', () => {
+ const widths = computeColumnWidths(
+ makeDisplay(
+ [0, 1].map((x) => ({
+ x,
+ y: 0,
+ constraints: { minWidth: 10, maxWidth: 20, contentDensity: 1 }
+ })),
+ { contentWidth: 400, forceStretch: true }
+ ),
+ [
+ {
+ width: null,
+ percent: 0.75,
+ minWidth: 0,
+ maxWidth: null,
+ maxPercent: null
+ },
+ null
+ ]
+ );
+ expect(widths[0]).toBeCloseTo(300);
+ expect(widths[0]! + widths[1]!).toBeCloseTo(400);
+ });
+
+ it('never grows a column past a declared max-width', () => {
+ const widths = computeColumnWidths(
+ makeDisplay(
+ [0, 1].map((x) => ({
+ x,
+ y: 0,
+ constraints: { minWidth: 10, maxWidth: 20, contentDensity: 1 }
+ })),
+ { contentWidth: 400, forceStretch: true }
+ ),
+ [
+ {
+ width: null,
+ percent: null,
+ minWidth: 0,
+ maxWidth: 60,
+ maxPercent: null
+ },
+ null
+ ]
+ );
+ expect(widths[0]).toBeLessThanOrEqual(60);
+ expect(widths[0]! + widths[1]!).toBeCloseTo(400);
+ });
+ });
+});
diff --git a/packages/heuristic-table-plugin/src/helpers/__tests__/createRenderTree.test.ts b/packages/heuristic-table-plugin/src/helpers/__tests__/createRenderTree.test.ts
index 50937dc..f618562 100644
--- a/packages/heuristic-table-plugin/src/helpers/__tests__/createRenderTree.test.ts
+++ b/packages/heuristic-table-plugin/src/helpers/__tests__/createRenderTree.test.ts
@@ -1,7 +1,6 @@
-import fillTableDisplay, { createEmptyDisplay } from '../fillTableDisplay';
-import { createTableTNode } from './utils';
-import createRenderTree from '../createRenderTree';
-import TCellConstraintsComputer from '../TCellConstraintsComputer';
+import buildTableGrid from '../buildTableGrid';
+import { createTableTNode } from '../../__tests__/utils';
+import createRenderTree, { makeTableCells } from '../createRenderTree';
import {
TableCell,
TableFlexColumnContainer,
@@ -11,10 +10,9 @@ import {
function makeRenderTree(html: string, columnWidths: number[]) {
const tnode = createTableTNode(html);
- const display = createEmptyDisplay({ contentWidth: 1000 });
- const computer = new TCellConstraintsComputer({});
- fillTableDisplay(tnode, display, computer);
- return createRenderTree(display, columnWidths);
+ // The render tree is built from coordinates and widths alone, so the grid
+ // needs no measurement pass to produce one.
+ return createRenderTree(makeTableCells(buildTableGrid(tnode), columnWidths, 0));
}
function rowContainer(
diff --git a/packages/heuristic-table-plugin/src/helpers/__tests__/indexCellNeighbours.test.ts b/packages/heuristic-table-plugin/src/helpers/__tests__/indexCellNeighbours.test.ts
new file mode 100644
index 0000000..3bb79fa
--- /dev/null
+++ b/packages/heuristic-table-plugin/src/helpers/__tests__/indexCellNeighbours.test.ts
@@ -0,0 +1,51 @@
+import { DisplayCell } from '../../shared-types';
+import indexCellNeighbours, { CellNeighbours } from '../indexCellNeighbours';
+import { createCellTNode } from '../../__tests__/utils';
+
+/**
+ * The adjacency rule stated directly, as the oracle the index is checked
+ * against.
+ *
+ * @remarks
+ * This used to live in `getCollapsedCellBorderStyle` as the fallback taken
+ * when no index was supplied, and the test compared the two code paths. Every
+ * collapsing caller now supplies an index, so the rule survives here alone —
+ * still an independent implementation, just no longer one that also ships.
+ */
+function neighboursByScan(
+ cells: readonly DisplayCell[],
+ cell: DisplayCell
+): CellNeighbours {
+ return {
+ End: cells.filter(
+ (other) =>
+ other.x === cell.x + cell.lenX &&
+ other.y < cell.y + cell.lenY &&
+ other.y + other.lenY > cell.y
+ ),
+ Bottom: cells.filter(
+ (other) =>
+ other.y === cell.y + cell.lenY &&
+ other.x < cell.x + cell.lenX &&
+ other.x + other.lenX > cell.x
+ )
+ };
+}
+
+it('matches shared-edge searches for spans, holes, overlaps and document-order ties', () => {
+ const tnode = createCellTNode('');
+ // Deliberately unsorted and overlapping geometry exercises the behaviour for
+ // malformed tables as well as ordinary one-slot cells.
+ const cells: DisplayCell[] = Array.from({ length: 200 }, (_, i) => ({
+ x: (i * 7) % 19,
+ y: (i * 11) % 23,
+ lenX: 1 + (i % 4),
+ lenY: 1 + (i % 5),
+ tnode,
+ constraints: { minWidth: 0, maxWidth: 0, contentDensity: 0 }
+ }));
+ const index = indexCellNeighbours(cells);
+ for (const cell of cells) {
+ expect(index.get(cell)).toEqual(neighboursByScan(cells, cell));
+ }
+});
diff --git a/packages/heuristic-table-plugin/src/helpers/__tests__/makeRows.test.ts b/packages/heuristic-table-plugin/src/helpers/__tests__/makeRows.test.ts
index 5029346..174e6b3 100644
--- a/packages/heuristic-table-plugin/src/helpers/__tests__/makeRows.test.ts
+++ b/packages/heuristic-table-plugin/src/helpers/__tests__/makeRows.test.ts
@@ -1,5 +1,4 @@
import { TNode } from '@native-html/render';
-import R from 'ramda';
import { TableCell } from '../../shared-types';
import makeRows from '../makeRows';
@@ -11,7 +10,8 @@ function cell(y: number, x: number = 0): TableCell {
type: 'cell',
constraints: {
contentDensity: 0,
- minWidth: 0
+ minWidth: 0,
+ maxWidth: 0
},
width: 10,
x,
@@ -21,7 +21,38 @@ function cell(y: number, x: number = 0): TableCell {
describe('makeRows', () => {
it('should preserve order of rows', () => {
- const cells = R.map(cell, R.range(0, 100));
- expect(R.flatten(makeRows(cells))).toMatchObject(cells);
+ const cells = Array.from({ length: 100 }, (_, y) => cell(y));
+ expect(makeRows(cells).flat()).toMatchObject(cells);
+ });
+
+ it('groups cells by row, in ascending row order', () => {
+ // Deliberately out of order, and with several cells per row: the previous
+ // implementation happened to come back sorted because `y` stringifies to
+ // an array index, which is a property of the keys rather than something
+ // this function stated.
+ const rows = makeRows([
+ cell(2, 0),
+ cell(0, 0),
+ cell(1, 0),
+ cell(0, 1),
+ cell(2, 1)
+ ]);
+ expect(rows.map((row) => row.map((c) => [c.x, c.y]))).toEqual([
+ [
+ [0, 0],
+ [1, 0]
+ ],
+ [[0, 1]],
+ [
+ [0, 2],
+ [1, 2]
+ ]
+ ]);
+ });
+
+ it('keeps cells of one row in the order they were given', () => {
+ const rows = makeRows([cell(0, 2), cell(0, 0), cell(0, 1)]);
+ expect(rows).toHaveLength(1);
+ expect(rows[0]!.map((c) => c.x)).toEqual([2, 0, 1]);
});
});
diff --git a/packages/heuristic-table-plugin/src/helpers/__tests__/reduceColumnConstraints.test.ts b/packages/heuristic-table-plugin/src/helpers/__tests__/reduceColumnConstraints.test.ts
index 39a426f..500c016 100644
--- a/packages/heuristic-table-plugin/src/helpers/__tests__/reduceColumnConstraints.test.ts
+++ b/packages/heuristic-table-plugin/src/helpers/__tests__/reduceColumnConstraints.test.ts
@@ -1,6 +1,28 @@
import reduceColumnConstraints from '../reduceColumnConstraints';
+import { TColumnConstraints } from '../../shared-types';
+
+/** A column reduced from cells that declare no spacing and no percentage. */
+function bare(
+ constraints: Omit
+): TColumnConstraints {
+ return { horizontalSpace: 0, percentWidth: null, ...constraints };
+}
+
+describe('reduceColumnConstraints', () => {
+ it('should raise a maximum below its minimum to the minimum', () => {
+ expect(
+ reduceColumnConstraints([
+ {
+ x: 0,
+ y: 0,
+ lenX: 1,
+ lenY: 1,
+ constraints: { minWidth: 51, maxWidth: 30, contentDensity: 10 }
+ }
+ ])
+ ).toEqual([bare({ minWidth: 51, spread: 51, contentDensity: 10 })]);
+ });
-describe('getColumnConstraints', () => {
it('should return a record which keys are column indexes, and which values are the reduced constraints for this column', () => {
expect(
reduceColumnConstraints([
@@ -11,6 +33,7 @@ describe('getColumnConstraints', () => {
y: 0,
constraints: {
contentDensity: 3,
+ maxWidth: 3,
minWidth: 2
}
},
@@ -21,6 +44,7 @@ describe('getColumnConstraints', () => {
y: 0,
constraints: {
contentDensity: 4,
+ maxWidth: 4,
minWidth: 3
}
},
@@ -31,6 +55,7 @@ describe('getColumnConstraints', () => {
y: 1,
constraints: {
contentDensity: 3,
+ maxWidth: 3,
minWidth: 1
}
},
@@ -41,21 +66,14 @@ describe('getColumnConstraints', () => {
y: 1,
constraints: {
contentDensity: 2,
+ maxWidth: 2,
minWidth: 1
}
}
])
).toEqual([
- {
- contentDensity: 6,
- spread: 3,
- minWidth: 2
- },
- {
- contentDensity: 6,
- spread: 4,
- minWidth: 3
- }
+ bare({ contentDensity: 6, spread: 3, minWidth: 2 }),
+ bare({ contentDensity: 6, spread: 4, minWidth: 3 })
]);
});
it('should split content density and min width of cells expanding horizontaly by its length when reducing constraints', () => {
@@ -68,6 +86,7 @@ describe('getColumnConstraints', () => {
y: 0,
constraints: {
contentDensity: 9,
+ maxWidth: 9,
minWidth: 3
}
},
@@ -78,25 +97,101 @@ describe('getColumnConstraints', () => {
y: 1,
constraints: {
contentDensity: 4,
+ maxWidth: 4,
minWidth: 2
}
}
])
+ ).toEqual([
+ bare({ contentDensity: 7, spread: 4, minWidth: 2 }),
+ bare({ contentDensity: 3, spread: 3, minWidth: 1 }),
+ bare({ contentDensity: 3, spread: 3, minWidth: 1 })
+ ]);
+ });
+ it('should keep a slot for a column no cell occupies', () => {
+ // Callers look constraints up by a cell's absolute `x`, so an unoccupied
+ // column has to keep its place: compacting it away would hand every later
+ // column the width of its neighbour.
+ expect(
+ reduceColumnConstraints([
+ {
+ lenX: 1,
+ lenY: 1,
+ x: 0,
+ y: 0,
+ constraints: { contentDensity: 3, maxWidth: 3, minWidth: 2 }
+ },
+ {
+ lenX: 1,
+ lenY: 1,
+ x: 2,
+ y: 0,
+ constraints: { contentDensity: 5, maxWidth: 5, minWidth: 4 }
+ }
+ ])
+ ).toEqual([
+ bare({ contentDensity: 3, spread: 3, minWidth: 2 }),
+ bare({ contentDensity: 0, spread: 0, minWidth: 0 }),
+ bare({ contentDensity: 5, spread: 5, minWidth: 4 })
+ ]);
+ });
+
+ it('spreads a colspan cell spacing and percentage over its columns', () => {
+ expect(
+ reduceColumnConstraints([
+ {
+ lenX: 2,
+ lenY: 1,
+ x: 0,
+ y: 0,
+ constraints: {
+ contentDensity: 8,
+ maxWidth: 8,
+ minWidth: 4,
+ horizontalSpace: 6,
+ percentWidth: 0.5
+ }
+ }
+ ])
).toEqual([
{
- contentDensity: 7,
+ contentDensity: 4,
spread: 4,
- minWidth: 2
+ minWidth: 2,
+ horizontalSpace: 3,
+ percentWidth: 0.25
},
{
- contentDensity: 3,
- spread: 3,
- minWidth: 1
- },
+ contentDensity: 4,
+ spread: 4,
+ minWidth: 2,
+ horizontalSpace: 3,
+ percentWidth: 0.25
+ }
+ ]);
+ });
+
+ it('takes the widest spacing and largest percentage where cells disagree', () => {
+ const cell = (y: number, horizontalSpace: number, percentWidth: number) => ({
+ lenX: 1,
+ lenY: 1,
+ x: 0,
+ y,
+ constraints: {
+ contentDensity: 1,
+ maxWidth: 1,
+ minWidth: 1,
+ horizontalSpace,
+ percentWidth
+ }
+ });
+ expect(reduceColumnConstraints([cell(0, 2, 0.1), cell(1, 9, 0.4)])).toEqual([
{
- contentDensity: 3,
- spread: 3,
- minWidth: 1
+ contentDensity: 2,
+ spread: 1,
+ minWidth: 1,
+ horizontalSpace: 9,
+ percentWidth: 0.4
}
]);
});
diff --git a/packages/heuristic-table-plugin/src/helpers/__tests__/relaxHeightConstraint.test.ts b/packages/heuristic-table-plugin/src/helpers/__tests__/relaxHeightConstraint.test.ts
new file mode 100644
index 0000000..bd19e0c
--- /dev/null
+++ b/packages/heuristic-table-plugin/src/helpers/__tests__/relaxHeightConstraint.test.ts
@@ -0,0 +1,36 @@
+import relaxHeightConstraint from '../relaxHeightConstraint';
+
+describe('relaxHeightConstraint', () => {
+ it('should translate height to minHeight while preserving unrelated styles', () => {
+ expect(
+ relaxHeightConstraint({ height: 48, backgroundColor: 'red' })
+ ).toEqual({
+ minHeight: 48,
+ backgroundColor: 'red'
+ });
+ });
+ it('should leave styles without an explicit height untouched', () => {
+ expect(relaxHeightConstraint({ minHeight: 10, maxHeight: 20 })).toEqual({
+ minHeight: 10,
+ maxHeight: 20
+ });
+ });
+ it('should retain the greatest of height and minHeight', () => {
+ expect(relaxHeightConstraint({ height: 48, minHeight: 10 })).toEqual({
+ minHeight: 48
+ });
+ expect(relaxHeightConstraint({ height: 10, minHeight: 48 })).toEqual({
+ minHeight: 48
+ });
+ });
+ it('should favor an explicit minHeight over an incomparable height', () => {
+ expect(relaxHeightConstraint({ height: '50%', minHeight: 48 })).toEqual({
+ minHeight: 48
+ });
+ });
+ it('should not enforce a percentage height either', () => {
+ expect(relaxHeightConstraint({ height: '50%' })).toEqual({
+ minHeight: '50%'
+ });
+ });
+});
diff --git a/packages/heuristic-table-plugin/src/helpers/__tests__/resolveAvailableWidth.test.ts b/packages/heuristic-table-plugin/src/helpers/__tests__/resolveAvailableWidth.test.ts
new file mode 100644
index 0000000..943412f
--- /dev/null
+++ b/packages/heuristic-table-plugin/src/helpers/__tests__/resolveAvailableWidth.test.ts
@@ -0,0 +1,199 @@
+import resolveAvailableWidth from '../resolveAvailableWidth';
+import { createTableTNode } from '../../__tests__/utils';
+
+function availableWidthFor(html: string, contentWidth: number, nth = 0) {
+ return resolveAvailableWidth(createTableTNode(html, nth), contentWidth);
+}
+
+describe('resolveAvailableWidth', () => {
+ it('should return contentWidth when no ancestor imposes spacing', () => {
+ expect(availableWidthFor('', 400)).toBe(
+ 400
+ );
+ });
+
+ it('should subtract the padding of an ancestor', () => {
+ expect(
+ availableWidthFor(
+ '',
+ 400
+ )
+ ).toBe(360);
+ });
+
+ it('should subtract the border and margin of an ancestor', () => {
+ expect(
+ availableWidthFor(
+ ``,
+ 400
+ )
+ ).toBe(400 - 16 - 4);
+ });
+
+ it('should accumulate the spacing of every ancestor', () => {
+ expect(
+ availableWidthFor(
+ ``,
+ 400
+ )
+ ).toBe(400 - 40 - 15 - 5);
+ });
+
+ it('should treat an explicit ancestor width as a border box', () => {
+ // `width` in React Native already contains padding and border, so only the
+ // padding may be taken out of it — subtracting the margins too would
+ // shrink the table below the box its ancestor actually occupies.
+ expect(
+ availableWidthFor(
+ ``,
+ 400
+ )
+ ).toBe(280);
+ });
+
+ it('should resolve an ancestor percentage width against its own container', () => {
+ expect(
+ availableWidthFor(
+ ``,
+ 400
+ )
+ ).toBe(190);
+ });
+
+ it('should never report a negative width', () => {
+ expect(
+ availableWidthFor(
+ '',
+ 300
+ )
+ ).toBe(0);
+ });
+
+ it('should cap an auto-width ancestor at its max-width', () => {
+ expect(
+ availableWidthFor(
+ ``,
+ 400
+ )
+ ).toBe(280);
+ });
+
+ it('should leave an ancestor alone when its max-width is not reached', () => {
+ expect(
+ availableWidthFor(
+ '',
+ 400
+ )
+ ).toBe(400);
+ });
+
+ it('should not let an ancestor min-width narrow the available width', () => {
+ // `min-width` is a floor, not a width: an ancestor asking for *at least*
+ // 100px still hands its children the whole 400px it was given. Reading it
+ // as a declared width squeezed every descendant table to min-content.
+ expect(
+ availableWidthFor(
+ '',
+ 400
+ )
+ ).toBe(400);
+ });
+
+ it('should raise a narrow ancestor up to its min-width', () => {
+ expect(
+ availableWidthFor(
+ ``,
+ 400
+ )
+ ).toBe(100);
+ });
+
+ // Legacy markup sizes a cell with a `width` attribute rather than CSS. It is
+ // the lowest-priority width hint, but it is still a width: ignoring it handed
+ // the nested table the whole 400px. Both spellings resolve to the same 200px
+ // box here, less the user-agent pixel of cell padding per side.
+ it.each([
+ ['50%', 'as a fraction of the containing block'],
+ ['200', 'as an absolute length']
+ ])(
+ 'should resolve a presentational width attribute %s (%s)',
+ (declaration) => {
+ expect(
+ availableWidthFor(
+ ``,
+ 400,
+ 1
+ )
+ ).toBe(198);
+ }
+ );
+
+ describe('table cell ancestors', () => {
+ // The user-agent `td, th { padding: 1px }` never reaches `nativeBlockRet`,
+ // so a cell which declares nothing looks bare here while the renderer
+ // still spends the padding. Measuring the declared insets handed a nested
+ // table 2px more than its cell had left, once per level of nesting.
+ const NESTED_TABLE = '';
+
+ it('should subtract the default padding of a bare cell', () => {
+ expect(
+ availableWidthFor(
+ ``,
+ 400,
+ 1
+ )
+ ).toBe(398);
+ });
+
+ it('should subtract a declared cell padding instead of the default', () => {
+ expect(
+ availableWidthFor(
+ ``,
+ 400,
+ 1
+ )
+ ).toBe(380);
+ });
+
+ it('should subtract nothing from a cell which zeroes its padding', () => {
+ expect(
+ availableWidthFor(
+ ``,
+ 400,
+ 1
+ )
+ ).toBe(400);
+ });
+
+ it('should keep the default on the sides a cell leaves undeclared', () => {
+ expect(
+ availableWidthFor(
+ ``,
+ 400,
+ 1
+ )
+ ).toBe(400 - 10 - 1);
+ });
+
+ it('should not give the default padding to a non-cell ancestor', () => {
+ // The counterpart of the cases above: the user-agent padding belongs to
+ // `td`/`th` alone, so a plain wrapper must hand on everything it was
+ // given. Widening `isTableCell` would silently shrink every nested block.
+ expect(availableWidthFor(`${NESTED_TABLE}
`, 400)).toBe(400);
+ });
+ });
+});
diff --git a/packages/heuristic-table-plugin/src/helpers/__tests__/resolveWidth.test.ts b/packages/heuristic-table-plugin/src/helpers/__tests__/resolveWidth.test.ts
new file mode 100644
index 0000000..f3cbc69
--- /dev/null
+++ b/packages/heuristic-table-plugin/src/helpers/__tests__/resolveWidth.test.ts
@@ -0,0 +1,133 @@
+import {
+ clampWidth,
+ lesserBound,
+ resolveAttributeLength,
+ resolveAttributeSize,
+ resolveCssSize,
+ resolvePercentage
+} from '../resolveWidth';
+
+describe('resolveCssSize', () => {
+ it.each([
+ [200, 200],
+ [0, 0],
+ [12.5, 12.5]
+ ])('should pass the absolute length %s through', (value, expected) => {
+ expect(resolveCssSize(value, 400)).toBe(expected);
+ });
+
+ it.each([-1, NaN, Infinity, -Infinity])(
+ 'should reject the unusable number %s',
+ (value) => {
+ // A width that cannot be laid out must not reach the column solver as a
+ // constraint: a negative one would shrink a column below its content and
+ // a non-finite one would poison every sum it takes part in.
+ expect(resolveCssSize(value, 400)).toBeNull();
+ }
+ );
+
+ it.each([
+ ['50%', 200],
+ ['12.5%', 50],
+ ['0%', 0],
+ [' 25% ', 100]
+ ])('should resolve %s against the containing block', (value, expected) => {
+ expect(resolveCssSize(value, 400)).toBe(expected);
+ });
+
+ it.each(['auto', '10em', '20px', '%', 'NaN%', '', 'inherit'])(
+ 'should reject the unresolvable string %s',
+ (value) => {
+ // Lengths reach the plugin already converted to numbers, so a string
+ // that is not a percentage carries no width this pass can use.
+ expect(resolveCssSize(value, 400)).toBeNull();
+ }
+ );
+
+ it.each([undefined, null, {}, []])(
+ 'should reject the non-size value %s',
+ (value) => {
+ expect(resolveCssSize(value, 400)).toBeNull();
+ }
+ );
+});
+
+describe('resolvePercentage', () => {
+ it('should return a ratio rather than a resolved length', () => {
+ expect(resolvePercentage('25%')).toBe(0.25);
+ });
+
+ it.each([200, 'auto', '200', undefined])(
+ 'should report no ratio for %s',
+ (value) => {
+ expect(resolvePercentage(value)).toBeNull();
+ }
+ );
+});
+
+describe('resolveAttributeLength', () => {
+ it.each([
+ ['200', 200],
+ ['0', 0],
+ [' 42 ', 42]
+ ])('should read the unitless attribute %s', (value, expected) => {
+ expect(resolveAttributeLength(value)).toBe(expected);
+ });
+
+ it.each(['50%', '200px', 'abc', '-5', ''])(
+ 'should refuse the attribute %s, which is not a bare number',
+ (value) => {
+ expect(resolveAttributeLength(value)).toBeNull();
+ }
+ );
+});
+
+describe('resolveAttributeSize', () => {
+ it('should resolve a percentage attribute against the containing block', () => {
+ expect(resolveAttributeSize('50%', 400)).toBe(200);
+ });
+
+ it('should fall back to the unitless form', () => {
+ expect(resolveAttributeSize('200', 400)).toBe(200);
+ });
+
+ it.each(['abc', '200px', 42])('should refuse %s', (value) => {
+ expect(resolveAttributeSize(value, 400)).toBeNull();
+ });
+});
+
+describe('clampWidth', () => {
+ it('should leave a width inside both bounds alone', () => {
+ expect(clampWidth(150, 100, 200)).toBe(150);
+ });
+
+ it('should cut a width down to its maximum', () => {
+ expect(clampWidth(300, null, 200)).toBe(200);
+ });
+
+ it('should raise a width up to its minimum', () => {
+ expect(clampWidth(50, 100, null)).toBe(100);
+ });
+
+ it('should let the minimum win over a smaller maximum', () => {
+ // CSS applies `max-width` first and `min-width` second, so a floor above
+ // the ceiling wins — the order of the two clamps is the whole behaviour.
+ expect(clampWidth(150, 200, 100)).toBe(200);
+ });
+
+ it('should pass a width through when neither bound is declared', () => {
+ expect(clampWidth(150, null, null)).toBe(150);
+ });
+});
+
+describe('lesserBound', () => {
+ it.each([
+ [100, 200, 100],
+ [200, 100, 100],
+ [null, 200, 200],
+ [100, null, 100],
+ [null, null, null]
+ ])('should take the stricter of %s and %s', (a, b, expected) => {
+ expect(lesserBound(a, b)).toBe(expected);
+ });
+});
diff --git a/packages/heuristic-table-plugin/src/helpers/__tests__/tsconfig.json b/packages/heuristic-table-plugin/src/helpers/__tests__/tsconfig.json
deleted file mode 100644
index faf20aa..0000000
--- a/packages/heuristic-table-plugin/src/helpers/__tests__/tsconfig.json
+++ /dev/null
@@ -1,9 +0,0 @@
-{
- "extends": "../../../../../tsconfig-base.json",
- "compilerOptions": {
- "types": ["jest"],
- "noEmit": true,
- "ignoreDeprecations": "6.0"
- },
- "exclude": ["../../../node_modules", "../../../lib"]
-}
diff --git a/packages/heuristic-table-plugin/src/helpers/__tests__/utils.ts b/packages/heuristic-table-plugin/src/helpers/__tests__/utils.ts
deleted file mode 100644
index 8907154..0000000
--- a/packages/heuristic-table-plugin/src/helpers/__tests__/utils.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-import { TRenderEngine } from '@native-html/transient-render-engine';
-const engine = new TRenderEngine();
-
-export function createTableTNode(html: string) {
- const ttree = engine.buildTTree(html);
- const table = ttree.children[0].children[0];
- expect(table.tagName).toBe('table');
- return table;
-}
diff --git a/packages/heuristic-table-plugin/src/helpers/borderModel.ts b/packages/heuristic-table-plugin/src/helpers/borderModel.ts
new file mode 100644
index 0000000..0ce329a
--- /dev/null
+++ b/packages/heuristic-table-plugin/src/helpers/borderModel.ts
@@ -0,0 +1,36 @@
+import { TNode } from '@native-html/render';
+import { getInlineStyleValue } from './inlineStyle';
+
+export type BorderCollapse = 'collapse' | 'separate';
+
+/**
+ * Resolve whether a table uses the collapsing border model.
+ *
+ * Inline `border-collapse` is not part of React Native styles, so it must be
+ * read from the source DOM. The `rules` attribute also implies collapsed
+ * borders in the HTML rendering rules.
+ */
+export function resolveBorderCollapse(
+ tnode: TNode,
+ configuredValue?: BorderCollapse
+): boolean {
+ if (configuredValue) {
+ return configuredValue === 'collapse';
+ }
+ const ownValue = getInlineStyleValue(tnode, 'border-collapse');
+ if (ownValue === 'collapse' || ownValue === 'separate') {
+ return ownValue === 'collapse';
+ }
+ if (tnode.attributes.rules) {
+ return true;
+ }
+ // border-collapse is inherited. Only inline declarations are available to
+ // the plugin after unsupported web-only properties have been processed.
+ for (let parent = tnode.parent; parent; parent = parent.parent) {
+ const inheritedValue = getInlineStyleValue(parent, 'border-collapse');
+ if (inheritedValue === 'collapse' || inheritedValue === 'separate') {
+ return inheritedValue === 'collapse';
+ }
+ }
+ return false;
+}
diff --git a/packages/heuristic-table-plugin/src/helpers/borderSpacingGeometry.ts b/packages/heuristic-table-plugin/src/helpers/borderSpacingGeometry.ts
new file mode 100644
index 0000000..35be667
--- /dev/null
+++ b/packages/heuristic-table-plugin/src/helpers/borderSpacingGeometry.ts
@@ -0,0 +1,32 @@
+/**
+ * How `border-spacing` is spent across a table, in one place.
+ *
+ * @remarks
+ * These two figures and the renderer must agree, and they are derived rather
+ * than restated: {@link TreeRenderer} realises the same algebra as a
+ * `paddingHorizontal` on the table root plus a `marginEnd` on every cell that
+ * is not in the last column, which is exactly
+ * `2 * spacing + (columns - 1) * spacing` — the total below.
+ */
+
+/**
+ * The gap a cell spanning `lenX` columns swallows.
+ *
+ * @remarks
+ * A spanning cell covers the boundaries *between* the columns it spans, so its
+ * own box absorbs that spacing instead of the table painting it.
+ */
+export function spanInternalSpacing(lenX: number, spacing: number): number {
+ return Math.max(0, lenX - 1) * spacing;
+}
+
+/**
+ * The spacing a table spends in total: one gap between each pair of adjacent
+ * columns, plus one at each outer edge.
+ *
+ * @param maxX - The last occupied column index, so the table has `maxX + 1`
+ * columns and `maxX + 2` gaps.
+ */
+export function totalHorizontalSpacing(maxX: number, spacing: number): number {
+ return (maxX + 2) * spacing;
+}
diff --git a/packages/heuristic-table-plugin/src/helpers/boxSides.ts b/packages/heuristic-table-plugin/src/helpers/boxSides.ts
new file mode 100644
index 0000000..4bb0784
--- /dev/null
+++ b/packages/heuristic-table-plugin/src/helpers/boxSides.ts
@@ -0,0 +1,27 @@
+import { I18nManager, ViewStyle } from 'react-native';
+
+/** The four physical edges of a box, spelled as React Native style suffixes. */
+export type BoxSide = 'Bottom' | 'Left' | 'Right' | 'Top';
+
+export const BOX_SIDES = ['Top', 'Right', 'Bottom', 'Left'] as const;
+
+/**
+ * Whether a style resolves its logical edges right-to-left.
+ *
+ * @remarks
+ * An explicit `direction` wins; otherwise the app-wide setting decides, which
+ * is what Yoga itself does with an unset direction.
+ */
+export function isRTL(style: ViewStyle): boolean {
+ return (
+ style.direction === 'rtl' ||
+ (style.direction !== 'ltr' && I18nManager.isRTL)
+ );
+}
+
+/** The logical edge a physical horizontal side maps to, or `null` vertically. */
+export function logicalSideOf(side: BoxSide, rtl: boolean): 'End' | 'Start' | null {
+ if (side === 'Left') return rtl ? 'End' : 'Start';
+ if (side === 'Right') return rtl ? 'Start' : 'End';
+ return null;
+}
diff --git a/packages/heuristic-table-plugin/src/helpers/buildTableGrid.ts b/packages/heuristic-table-plugin/src/helpers/buildTableGrid.ts
new file mode 100644
index 0000000..38f0304
--- /dev/null
+++ b/packages/heuristic-table-plugin/src/helpers/buildTableGrid.ts
@@ -0,0 +1,117 @@
+import { TNode } from '@native-html/render';
+import { DisplayCell, TableGrid, TCellConstraints } from '../shared-types';
+import parseSpan, { MAX_COLSPAN, MAX_ROWSPAN } from './parseSpan';
+
+/**
+ * The constraints of a cell no computer has measured yet.
+ *
+ * @remarks
+ * The grid is built before the width its cells must be measured against is
+ * known — coordinates and spans do not depend on it, whereas constraints do,
+ * and measuring text is the costly half of a layout pass. Every cell carries
+ * this placeholder until {@link TableLayout}'s measurement pass replaces it.
+ */
+const UNMEASURED_CONSTRAINTS: TCellConstraints = Object.freeze({
+ contentDensity: 0,
+ maxWidth: 0,
+ minWidth: 0
+});
+
+/**
+ * The state of the walk that lays cells down, live only while building.
+ *
+ * @remarks
+ * Kept out of {@link TableGrid}: `offsetX` is meaningless once the last row is
+ * placed, and `occupied` is an index nothing downstream reads. Both used to be
+ * carried on the result, where the grid's consumers had to look past them.
+ */
+interface GridCursor {
+ /**
+ * The slot cursor for the current row. Cells are laid down left to right
+ * from wherever the previous one ended, skipping any slot a spanning cell
+ * from an earlier row has claimed. Deriving the column from `nodeIndex`
+ * instead would let a stray non-cell element inside the row shift every
+ * following cell.
+ */
+ offsetX: number;
+ /**
+ * Slots claimed by a cell spanning down from an earlier row, keyed `x,y`.
+ *
+ * @remarks
+ * A set rather than a list: this is probed once per slot per cell while
+ * scanning for a free column, so a linear scan makes filling a table with
+ * row spans quadratic in its cell count.
+ */
+ occupied: Set;
+}
+
+function isOccupied(cursor: GridCursor, x: number, y: number): boolean {
+ return cursor.occupied.has(`${x},${y}`);
+}
+
+/**
+ * Find the first slot in row `y` at or after `fromX` that no spanning cell has
+ * already claimed.
+ *
+ * @remarks
+ * The search must advance one slot at a time: counting blockers in a single
+ * pass can land the cell on another blocked slot, so two cells end up sharing
+ * one coordinate.
+ */
+function findFreeSlotX(cursor: GridCursor, fromX: number, y: number): number {
+ let x = fromX;
+ while (isOccupied(cursor, x, y)) {
+ x += 1;
+ }
+ return x;
+}
+
+function fill(tnode: TNode, grid: TableGrid, cursor: GridCursor) {
+ if (tnode.tagName === 'tr') {
+ grid.maxY = grid.maxY + 1;
+ cursor.offsetX = 0;
+ }
+ if (tnode.tagName !== 'th' && tnode.tagName !== 'td') {
+ tnode.children.forEach((child) => fill(child, grid, cursor));
+ return;
+ }
+ const lenX = parseSpan(tnode.attributes.colspan, MAX_COLSPAN);
+ const lenY = parseSpan(tnode.attributes.rowspan, MAX_ROWSPAN);
+ const startY = grid.maxY;
+ const startX = findFreeSlotX(cursor, cursor.offsetX, startY);
+ const cell: DisplayCell = {
+ lenX,
+ lenY,
+ x: startX,
+ y: startY,
+ tnode,
+ constraints: UNMEASURED_CONSTRAINTS
+ };
+ grid.cells.push(cell);
+ cursor.offsetX = startX + lenX;
+ if (lenY > 1) {
+ // A spanning cell claims the whole rectangle it covers, so a cell that is
+ // both `colspan` and `rowspan` blocks every column it straddles in each of
+ // the rows below — not just its first one.
+ for (let y = startY + 1; y < lenY + startY; y++) {
+ for (let x = startX; x < startX + lenX; x++) {
+ cursor.occupied.add(`${x},${y}`);
+ }
+ }
+ }
+ grid.maxX = Math.max(grid.maxX, startX + lenX - 1);
+}
+
+/**
+ * Lay every `th` and `td` of a table out on its matrix.
+ *
+ * @returns Where each cell sits and how far the matrix extends. Cell
+ * constraints are left {@link UNMEASURED_CONSTRAINTS} — measuring them needs
+ * the resolved cell styles and the table's content width, neither of which
+ * exists yet.
+ */
+export default function buildTableGrid(tnode: TNode): TableGrid {
+ const grid: TableGrid = { cells: [], maxX: -1, maxY: -1 };
+ fill(tnode, grid, { offsetX: 0, occupied: new Set() });
+ return grid;
+}
diff --git a/packages/heuristic-table-plugin/src/helpers/cellPadding.ts b/packages/heuristic-table-plugin/src/helpers/cellPadding.ts
new file mode 100644
index 0000000..1b66e0a
--- /dev/null
+++ b/packages/heuristic-table-plugin/src/helpers/cellPadding.ts
@@ -0,0 +1,225 @@
+import { ViewStyle } from 'react-native';
+import { TNode } from '@native-html/render';
+import { BoxSide, BOX_SIDES, logicalSideOf } from './boxSides';
+
+/**
+ * The padding HTML's user-agent stylesheet gives a table cell.
+ *
+ * @remarks
+ * `td, th { padding: 1px }`, per the
+ * {@link https://html.spec.whatwg.org/multipage/rendering.html#tables-2 | HTML rendering rules}.
+ * Being a user-agent declaration, it is outranked by any author padding, side
+ * by side: a cell which declares `padding-left` alone still gets the default
+ * on the three sides it left untouched.
+ *
+ * @public
+ */
+export const DEFAULT_CELL_PADDING = 1;
+
+/**
+ * The padding properties that can set one side, in the order Yoga resolves
+ * them: the first one a style declares is the one that wins.
+ *
+ * @remarks
+ * Source CSS always reaches the plugin expanded per side, but
+ * {@link HeuristicTablePluginConfig.getStyleForCell} is hand-written React
+ * Native style, where any shorthand is fair game — and a shorthand cannot
+ * simply be overwritten, because Yoga resolves a side against its own edge and
+ * only falls back to the `padding` edge.
+ *
+ * This is the single statement of that precedence. `getHorizontalInsets`
+ * reads it in order to find the value a side takes;
+ * {@link getDefaultCellPaddingStyle} reads {@link PADDING_DECLARERS}, the
+ * direction-agnostic union of it, to ask merely whether a side was declared.
+ */
+export function paddingSourcesFor(
+ side: BoxSide,
+ rtl: boolean
+): readonly (keyof ViewStyle)[] {
+ const logical = logicalSideOf(side, rtl);
+ if (logical) {
+ return [
+ `paddingInline${logical}`,
+ `padding${logical}`,
+ `padding${side}`,
+ 'paddingInline',
+ 'paddingHorizontal',
+ 'padding'
+ ] as (keyof ViewStyle)[];
+ }
+ return [
+ `padding${side}`,
+ `paddingBlock${side === 'Top' ? 'Start' : 'End'}`,
+ 'paddingBlock',
+ 'paddingVertical',
+ 'padding'
+ ] as (keyof ViewStyle)[];
+}
+
+/**
+ * Every property which declares padding on a given side, in either writing
+ * direction.
+ *
+ * @remarks
+ * The union of both directions on purpose. Which physical side a
+ * writing-direction keyword lands on is not known when merely asking whether
+ * an author declared a side, and reserving both is the harmless choice: it
+ * withholds a user-agent default rather than fighting an author declaration.
+ */
+const PADDING_DECLARERS = BOX_SIDES.reduce(
+ (declarers, side) => {
+ declarers[side] = [
+ ...new Set([
+ ...paddingSourcesFor(side, false),
+ ...paddingSourcesFor(side, true)
+ ])
+ ];
+ return declarers;
+ },
+ {} as Record
+);
+
+/**
+ * The source block style of a node, with its writing direction folded in.
+ *
+ * @remarks
+ * `direction` is a flow property, not a retained box one: the CSS processor
+ * files it under `nativeBlockFlow` (`makePropertiesValidators`, the sole
+ * member of the block-flow model), and unlike `nativeBlockRet` that bag is
+ * inherited — a cell of a `` carries `rtl`
+ * without declaring it.
+ *
+ * Every pass which resolves a *logical* edge has to see it: {@link isRTL}
+ * here, and `getHorizontalInsets` in `measure`. Reading `nativeBlockRet` alone
+ * makes an authored `direction` invisible, so an RTL table resolves its
+ * logical borders and padding onto the wrong physical side.
+ */
+export function getSourceBlockStyle(tnode: TNode): ViewStyle {
+ const style = tnode.styles.nativeBlockRet;
+ const direction = tnode.styles.nativeBlockFlow?.direction;
+ return direction == null ? style : { ...style, direction };
+}
+
+/**
+ * Whether a node is a table cell, and so subject to the cell rules of the
+ * user-agent stylesheet.
+ */
+export function isTableCell(tnode: TNode): boolean {
+ return tnode.tagName === 'td' || tnode.tagName === 'th';
+}
+
+/**
+ * Everything a node is painted with, the user-agent cell rules included.
+ *
+ * @remarks
+ * `nativeBlockRet` holds source CSS alone, so a cell which declares no padding
+ * appears to have none while the renderer gives it
+ * {@link DEFAULT_CELL_PADDING}. Any pass which measures a box against what
+ * ends up on screen has to reconcile the two here first.
+ */
+export function getPaintedBlockStyle(
+ tnode: TNode
+): TNode['styles']['nativeBlockRet'] {
+ const style = getSourceBlockStyle(tnode);
+ // The same cascade the renderer applies, with no config and no border: a
+ // cell measured against anything else would not match what it paints.
+ return isTableCell(tnode) ? composeCellStyle(style, null) : style;
+}
+
+/**
+ * The padding a table cell owes to {@link DEFAULT_CELL_PADDING} alone.
+ *
+ * @param declaredStyles - Everything the cell declares padding in, source CSS
+ * and {@link HeuristicTablePluginConfig.getStyleForCell} alike. A side any of
+ * them covers is left out of the result.
+ *
+ * @remarks
+ * The result is expanded per side rather than left as a `padding` shorthand,
+ * so that the sides an author did declare stay untouched.
+ */
+export function getDefaultCellPaddingStyle(
+ ...declaredStyles: (ViewStyle | null | undefined)[]
+): ViewStyle {
+ const resolvedStyle: ViewStyle = {};
+ for (const side of BOX_SIDES) {
+ const isDeclared = declaredStyles.some((style) =>
+ style
+ ? PADDING_DECLARERS[side].some((property) => style[property] != null)
+ : false
+ );
+ if (!isDeclared) {
+ Object.assign(resolvedStyle, {
+ [`padding${side}`]: DEFAULT_CELL_PADDING
+ });
+ }
+ }
+ return resolvedStyle;
+}
+
+/**
+ * Expand callback shorthands so resolved source longhands cannot mask them.
+ *
+ * @remarks
+ * Every shorthand Yoga resolves *after* a per-side edge has to be expanded
+ * here, the logical `paddingInline` / `paddingBlock` pair included: a cell
+ * declaring `padding-left` in its source CSS reaches the merge as a longhand,
+ * which would otherwise win on that one side and leave the callback's
+ * shorthand painting the other three — the opposite of the documented rule
+ * that callback padding replaces source padding outright.
+ *
+ * The per-side logical properties (`paddingStart`, `paddingInlineEnd` and
+ * friends) need no expansion: Yoga already resolves them ahead of the physical
+ * longhands, so they mask the source rather than being masked by it.
+ */
+export function resolveConfiguredCellStyle(
+ style: ViewStyle | null | undefined
+): ViewStyle | null {
+ if (!style) return null;
+ // The shorthands Yoga resolves *after* a per-side edge, in the same order
+ // `paddingSourcesFor` states: anything later than `padding` in that
+ // list would otherwise be masked by a source longhand.
+ const horizontal =
+ style.paddingInline ?? style.paddingHorizontal ?? style.padding;
+ const vertical = style.paddingBlock ?? style.paddingVertical ?? style.padding;
+ return {
+ ...(horizontal != null
+ ? { paddingLeft: horizontal, paddingRight: horizontal }
+ : null),
+ ...(vertical != null
+ ? { paddingTop: vertical, paddingBottom: vertical }
+ : null),
+ ...style
+ };
+}
+
+/**
+ * Merge everything a cell is painted with, in CSS origin order.
+ *
+ * @remarks
+ * Shared by measurement and rendering so the two cannot disagree about what a
+ * cell looks like. Lives here rather than in its own module because
+ * {@link getPaintedBlockStyle} is defined in terms of it, and
+ * {@link getDefaultCellPaddingStyle} in terms of that — three names for one
+ * cascade, which would be a cycle if they sat in separate files.
+ */
+export default function composeCellStyle(
+ source: ViewStyle,
+ configured: ViewStyle | null,
+ {
+ border = null,
+ rendererDefaults = {},
+ paddingSource = source
+ }: {
+ border?: ViewStyle | null;
+ rendererDefaults?: ViewStyle;
+ paddingSource?: ViewStyle;
+ } = {}
+): ViewStyle {
+ return {
+ ...getDefaultCellPaddingStyle(paddingSource, configured),
+ ...source,
+ ...rendererDefaults,
+ ...configured,
+ ...border
+ };
+}
diff --git a/packages/heuristic-table-plugin/src/helpers/cellVerticalAlign.ts b/packages/heuristic-table-plugin/src/helpers/cellVerticalAlign.ts
new file mode 100644
index 0000000..7dace3f
--- /dev/null
+++ b/packages/heuristic-table-plugin/src/helpers/cellVerticalAlign.ts
@@ -0,0 +1,93 @@
+import { ViewStyle } from 'react-native';
+import { TNode } from '@native-html/render';
+import { getInlineStyleValue } from './inlineStyle';
+
+export type CellVerticalAlign = 'baseline' | 'bottom' | 'middle' | 'top';
+
+function normalizeVerticalAlign(value: string): CellVerticalAlign | null {
+ switch (value.toLowerCase()) {
+ case 'top':
+ case 'middle':
+ case 'bottom':
+ case 'baseline':
+ return value.toLowerCase() as CellVerticalAlign;
+ case 'initial':
+ case 'unset':
+ return 'baseline';
+ case 'inherit':
+ case 'revert':
+ case 'revert-layer':
+ return null;
+ default:
+ // Lengths, percentages and the inline-only vertical-align keywords are
+ // treated as baseline for table cells by CSS.
+ return 'baseline';
+ }
+}
+
+/**
+ * The alignment HTML's user-agent stylesheet gives a table cell.
+ *
+ * @remarks
+ * Row groups and direct table rows are aligned to the middle, and rows and
+ * cells inherit it. Being a user-agent declaration, it is outranked by any
+ * author style that resolves to the same native property.
+ *
+ * @public
+ */
+export const DEFAULT_CELL_VERTICAL_ALIGN: CellVerticalAlign = 'middle';
+
+/**
+ * Resolve the vertical alignment a native table cell should emulate.
+ *
+ * The CSS processor intentionally drops `vertical-align` because React Native
+ * cannot consume it directly, so table renderers recover the value from inline
+ * CSS and the legacy `valign` attribute here.
+ *
+ * @returns The declared alignment, or `null` when the cell inherits nothing
+ * but {@link DEFAULT_CELL_VERTICAL_ALIGN}. Callers need the distinction: the
+ * default may not overwrite an author `justify-content`, whereas a declared
+ * alignment must.
+ */
+export function resolveCellVerticalAlign(
+ tnode: TNode
+): CellVerticalAlign | null {
+ for (
+ let current: TNode | null = tnode;
+ current && current.tagName !== 'table';
+ current = current.parent
+ ) {
+ const inlineValue = getInlineStyleValue(current, 'vertical-align');
+ if (inlineValue) {
+ const normalized = normalizeVerticalAlign(inlineValue);
+ if (normalized) {
+ return normalized;
+ }
+ }
+ const attributeValue = current.attributes.valign;
+ if (attributeValue) {
+ const normalized = normalizeVerticalAlign(attributeValue);
+ if (normalized) {
+ return normalized;
+ }
+ }
+ }
+ return null;
+}
+
+/**
+ * How a table cell emulates `vertical-align` in a column flex container.
+ *
+ * @remarks
+ * `baseline` has no native equivalent for a block box, and a cell's first line
+ * box sits at its top, so it collapses onto the same alignment as `top`.
+ */
+export const justifyContentForVerticalAlign: Record<
+ CellVerticalAlign,
+ NonNullable
+> = {
+ baseline: 'flex-start',
+ bottom: 'flex-end',
+ middle: 'center',
+ top: 'flex-start'
+};
diff --git a/packages/heuristic-table-plugin/src/helpers/collapseBorders.ts b/packages/heuristic-table-plugin/src/helpers/collapseBorders.ts
new file mode 100644
index 0000000..5e47bfb
--- /dev/null
+++ b/packages/heuristic-table-plugin/src/helpers/collapseBorders.ts
@@ -0,0 +1,309 @@
+import { ViewStyle } from 'react-native';
+import { DisplayCell, TableCell, TableGrid } from '../shared-types';
+import type { CellNeighbours } from './indexCellNeighbours';
+import { BOX_SIDES, BoxSide, isRTL, logicalSideOf } from './boxSides';
+import { getSourceBlockStyle } from './cellPadding';
+
+type BorderSide = BoxSide;
+
+interface BorderCandidate {
+ color: ViewStyle['borderColor'];
+ fromCell: boolean;
+ style: NonNullable;
+ width: number;
+}
+
+const borderStylePriority: Record = {
+ dotted: 0,
+ dashed: 1,
+ solid: 2
+};
+
+function borderCandidate(
+ style: ViewStyle,
+ side: BorderSide,
+ fromCell: boolean
+): BorderCandidate {
+ const logicalSide = logicalSideOf(side, isRTL(style));
+ // The CSS processor always expands `border` per side, but
+ // `getStyleForCell` is hand-written and the shorthand is the natural way to
+ // reach for a border there, so fall back to it. An explicit per-side `0`
+ // still wins, as it does in React Native.
+ const width = ((logicalSide
+ ? style[`border${logicalSide}Width`]
+ : undefined) ??
+ style[`border${side}Width`] ??
+ style.borderWidth) as number | undefined;
+ const color = ((logicalSide
+ ? style[`border${logicalSide}Color`]
+ : undefined) ??
+ style[`border${side}Color`] ??
+ style.borderColor) as ViewStyle['borderColor'];
+ return {
+ color: color ?? 'black',
+ fromCell,
+ style: style.borderStyle ?? 'solid',
+ width: typeof width === 'number' ? width : 0
+ };
+}
+
+/** Prevent logical edges from overriding the resolved physical borders. */
+function clearLogicalBorders(style: ViewStyle): ViewStyle {
+ const cleared: ViewStyle = {};
+ for (const key of [
+ 'borderStartWidth',
+ 'borderEndWidth',
+ 'borderStartColor',
+ 'borderEndColor'
+ ] as const) {
+ if (style[key] != null) Object.assign(cleared, { [key]: undefined });
+ }
+ return cleared;
+}
+
+function resolveBorderConflict(
+ winner: BorderCandidate,
+ candidate: BorderCandidate
+): BorderCandidate {
+ if (candidate.width !== winner.width) {
+ return candidate.width > winner.width ? candidate : winner;
+ }
+ const candidatePriority = borderStylePriority[candidate.style];
+ const winnerPriority = borderStylePriority[winner.style];
+ if (candidatePriority !== winnerPriority) {
+ return candidatePriority > winnerPriority ? candidate : winner;
+ }
+ // With otherwise equal borders, CSS gives a cell precedence over the table.
+ return candidate.fromCell && !winner.fromCell ? candidate : winner;
+}
+
+/**
+ * A cell as the collapsing border model sees it: where it sits in the matrix,
+ * and the node its source styles come from.
+ */
+type CollapsibleCell = Pick;
+
+/**
+ * The matrix a collapsed border is resolved over.
+ *
+ * @remarks
+ * `maxX` and `maxY` come from the display rather than from the cells, so that
+ * this agrees with {@link getCollapsedCellBorderStyle} on which cells are at
+ * an edge. The two disagree for a `rowspan` that overruns the last row: the
+ * table does not grow rows to fit it, so the cell is clipped and the last row
+ * the display laid out stays the bottom edge.
+ */
+type CollapsibleMatrix = {
+ cells: readonly C[];
+} & Pick;
+
+/**
+ * Whether a cell sits against one of the table's own edges.
+ *
+ * @remarks
+ * Shared by both collapsing passes on purpose. The wrapper resolves an outer
+ * border from the cells at an edge, and each cell then decides whether that
+ * same edge is its own; the two must agree, or a boundary is painted twice or
+ * not at all.
+ *
+ * A span that overruns the matrix is clipped to it rather than growing the
+ * table, so it sits at the edge it overran — hence `>=` rather than `===`.
+ */
+function isAtOuterEdge(
+ cell: Pick,
+ side: BorderSide,
+ { maxX, maxY }: Pick,
+ rtl: boolean
+): boolean {
+ switch (side) {
+ case 'Top':
+ return cell.y === 0;
+ case 'Right':
+ return rtl ? cell.x === 0 : cell.x + cell.lenX - 1 >= maxX;
+ case 'Bottom':
+ return cell.y + cell.lenY - 1 >= maxY;
+ case 'Left':
+ return rtl ? cell.x + cell.lenX - 1 >= maxX : cell.x === 0;
+ }
+}
+
+function cellsAtOuterEdge(
+ { cells, maxX, maxY }: CollapsibleMatrix,
+ side: BorderSide,
+ rtl: boolean
+): readonly C[] {
+ return cells.filter((cell) => isAtOuterEdge(cell, side, { maxX, maxY }, rtl));
+}
+
+function sourceCellStyle(cell: CollapsibleCell): ViewStyle {
+ return getSourceBlockStyle(cell.tnode);
+}
+
+/**
+ * Resolve each outer collapsed border between the table and its edge cells.
+ *
+ * React Native cannot render different border segments along one side of a
+ * View, so the strongest cell candidate is used for that complete side. This
+ * still preserves the central CSS conflict rules: wider borders win, then
+ * stronger styles, then cells over the table.
+ *
+ * @param matrix - See {@link CollapsibleMatrix}.
+ * @param tableStyle - The table source style. Each pass starts from this
+ * rather than a previously collapsed result, so a callback can remove a
+ * source cell border as well as strengthen it.
+ * @param getCellStyle - Everything an edge cell paints with. Defaults to its
+ * source CSS alone.
+ */
+export function getCollapsedTableBorderStyle(
+ matrix: CollapsibleMatrix,
+ tableStyle: ViewStyle,
+ getCellStyle: (cell: C) => ViewStyle = sourceCellStyle
+): ViewStyle {
+ const resolvedStyle: ViewStyle = clearLogicalBorders(tableStyle);
+ let strongestStyle: BorderCandidate['style'] | null = null;
+ for (const side of BOX_SIDES) {
+ const winner = cellsAtOuterEdge(matrix, side, isRTL(tableStyle)).reduce(
+ (currentWinner, cell) =>
+ resolveBorderConflict(
+ currentWinner,
+ borderCandidate(getCellStyle(cell), side, true)
+ ),
+ borderCandidate(tableStyle, side, false)
+ );
+ Object.assign(resolvedStyle, {
+ [`border${side}Width`]: winner.width,
+ [`border${side}Color`]: winner.color
+ });
+ if (
+ winner.width > 0 &&
+ (strongestStyle === null ||
+ borderStylePriority[winner.style] > borderStylePriority[strongestStyle])
+ ) {
+ strongestStyle = winner.style;
+ }
+ }
+ resolvedStyle.borderStyle = strongestStyle ?? 'solid';
+ return resolvedStyle;
+}
+
+/**
+ * Which boundaries of the table a cell sits against.
+ *
+ * @remarks
+ * `tableBorderStyle` is the wrapper edge {@link getCollapsedTableBorderStyle}
+ * resolved, and is consulted rather than assumed: a side the wrapper leaves
+ * bare has to stay with the cell.
+ */
+export interface CollapsedCellEdges {
+ /** Grid direction belongs to the table, independently of cell text direction. */
+ tableRTL?: boolean;
+ maxX: number;
+ maxY: number;
+ tableBorderStyle: ViewStyle | null;
+ /**
+ * The cells sharing this cell's trailing and bottom boundary, from
+ * {@link indexCellNeighbours}.
+ *
+ * @remarks
+ * Absent when the caller has no matrix to index — a `td` renderer reached
+ * outside this plugin's table — in which case the cell keeps its own
+ * borders rather than resolving them against neighbours it cannot see.
+ */
+ neighbours?: CellNeighbours;
+ /**
+ * Everything a neighbouring cell paints with. Required alongside
+ * `neighbours`, which is the only thing that consumes it.
+ */
+ getCellStyle?: (cell: CollapsibleCell) => ViewStyle;
+}
+
+/**
+ * Draw every shared cell boundary exactly once.
+ *
+ * @param cell - The cell's position in the table matrix.
+ * @param cellStyle - Everything the cell paints with, source CSS and
+ * {@link HeuristicTablePluginConfig.getStyleForCell} alike.
+ * @param edges - See {@link CollapsedCellEdges}.
+ *
+ * @remarks
+ * Each cell owns its trailing and bottom boundary, and the table wrapper owns
+ * the four outer ones it resolved against the edge cells. This mirrors the
+ * visible result of the collapsing model for the border styles React Native
+ * can render, without changing the flex geometry used for row and col spans.
+ *
+ * Shared boundaries compare the actual adjacent cells. Where spans bring
+ * several neighbours against one side, the strongest candidate paints that
+ * whole side; a native View cannot paint differently styled border segments.
+ */
+export function getCollapsedCellBorderStyle(
+ cell: Pick,
+ cellStyle: ViewStyle,
+ {
+ maxX,
+ maxY,
+ tableBorderStyle,
+ neighbours,
+ getCellStyle,
+ tableRTL: rtl = isRTL(cellStyle)
+ }: CollapsedCellEdges
+): ViewStyle {
+ const resolvedStyle: ViewStyle = clearLogicalBorders(cellStyle);
+ const isOuterEdge = (side: BorderSide) =>
+ isAtOuterEdge(cell, side, { maxX, maxY }, rtl);
+ const isPaintedByTable = (side: BorderSide) => {
+ const width = tableBorderStyle?.[`border${side}Width`];
+ return typeof width === 'number' && width > 0;
+ };
+ let strongestStyle: BorderCandidate['style'] | null = null;
+ const paint = (side: BorderSide, candidate: BorderCandidate | null) => {
+ if (!candidate || candidate.width === 0) {
+ Object.assign(resolvedStyle, { [`border${side}Width`]: 0 });
+ return;
+ }
+ if (
+ strongestStyle === null ||
+ borderStylePriority[candidate.style] > borderStylePriority[strongestStyle]
+ ) {
+ strongestStyle = candidate.style;
+ }
+ Object.assign(resolvedStyle, {
+ [`border${side}Width`]: candidate.width,
+ [`border${side}Color`]: candidate.color
+ });
+ };
+ const ownBorder = (side: BorderSide) =>
+ borderCandidate(cellStyle, side, true);
+ const keepOuterBorder = (side: BorderSide) =>
+ isPaintedByTable(side) ? null : ownBorder(side);
+ // A leading boundary is always drawn by the neighbour that precedes it,
+ // except on the outside where there is no neighbour to draw it.
+ paint('Top', isOuterEdge('Top') ? keepOuterBorder('Top') : null);
+ const start = rtl ? 'Right' : 'Left';
+ const end = rtl ? 'Left' : 'Right';
+ paint(start, isOuterEdge(start) ? keepOuterBorder(start) : null);
+ for (const [side, opposite, neighbourEdge] of [
+ [end, start, 'End'],
+ ['Bottom', 'Top', 'Bottom']
+ ] as const) {
+ paint(
+ side,
+ isOuterEdge(side)
+ ? keepOuterBorder(side)
+ : (neighbours?.[neighbourEdge] ?? []).reduce(
+ (winner, neighbour) =>
+ resolveBorderConflict(
+ winner,
+ borderCandidate(
+ (getCellStyle ?? sourceCellStyle)(neighbour),
+ opposite,
+ true
+ )
+ ),
+ ownBorder(side)
+ )
+ );
+ }
+ if (strongestStyle !== null) resolvedStyle.borderStyle = strongestStyle;
+ return resolvedStyle;
+}
+
diff --git a/packages/heuristic-table-plugin/src/helpers/computeColumnWidths.ts b/packages/heuristic-table-plugin/src/helpers/computeColumnWidths.ts
index b316322..053418a 100644
--- a/packages/heuristic-table-plugin/src/helpers/computeColumnWidths.ts
+++ b/packages/heuristic-table-plugin/src/helpers/computeColumnWidths.ts
@@ -1,46 +1,364 @@
-import { Display, TColumnConstraints } from '../shared-types';
+import { DisplayCell, TColumnConstraints } from '../shared-types';
import reduceColumnConstraints from './reduceColumnConstraints';
+import type { DeclaredColumnWidth } from './extractColumnWidths';
+import { clampWidth, lesserBound } from './resolveWidth';
+import sum from './sum';
-function mapMinWidths(constraints: TColumnConstraints[]): number[] {
- return constraints.map((c) => c.minWidth);
+/** Below this many pixels a leftover is not worth another distribution pass. */
+const EPSILON = 1e-6;
+
+/**
+ * Share `total` across `weights`, proportionally. Falls back to an even share
+ * when every weight is zero, so that no space is ever silently dropped.
+ */
+function distribute(total: number, weights: number[]): number[] {
+ if (weights.length === 0) {
+ return [];
+ }
+ const totalWeight = sum(weights);
+ if (totalWeight === 0) {
+ return weights.map(() => total / weights.length);
+ }
+ return weights.map((weight) => (total * weight) / totalWeight);
+}
+
+function interpolateWidths(
+ lower: number[],
+ upper: number[],
+ targetWidth: number
+): number[] {
+ const lowerTotal = sum(lower);
+ const upperTotal = sum(upper);
+ if (upperTotal <= lowerTotal) {
+ return lower;
+ }
+ const progress = Math.max(
+ 0,
+ Math.min(1, (targetWidth - lowerTotal) / (upperTotal - lowerTotal))
+ );
+ return lower.map(
+ (width, i) => width + (upper[i]! - width) * progress
+ );
}
-function mapSpreads(constraints: TColumnConstraints[]): number[] {
- return constraints.map((c) => c.spread);
+/** CSS tables cap accumulated intrinsic column percentages at 100%. */
+function normalizePercentages(
+ declaredWidths: Array,
+ columnCount: number
+): Array {
+ const percentages: Array = [];
+ let remaining = 1;
+ for (let i = 0; i < columnCount; i++) {
+ const percent = declaredWidths[i]?.percent;
+ if (percent == null || percent <= 0) {
+ percentages[i] = null;
+ } else {
+ percentages[i] = Math.min(percent, remaining);
+ remaining = Math.max(0, remaining - percent);
+ }
+ }
+ return percentages;
}
-// Normalize content densities so the minimum column is zero-referenced,
-// then weight them so they sum to 1 (used to distribute extra width).
-function mapWeightedColumnCoeffs(
- columnConstraints: TColumnConstraints[]
+/**
+ * Grow the columns at `indexes` by `total`, never past a column's own
+ * `max-width`.
+ *
+ * @remarks
+ * Space a capped column cannot take is offered to the others, and space none
+ * of them can take is left unassigned: a table whose every column is capped
+ * ends up narrower than the width it was given, as it would in CSS, rather
+ * than pushing a column past the ceiling it declared.
+ *
+ * The surplus is shared in proportion to how much *content* each column
+ * already holds, not to its whole border box, so that spacing a column
+ * happens to carry cannot earn it content width. It matters under the
+ * collapsing border model, where each cell owns a different subset of the
+ * boundaries around it — the cell in the last column has its trailing border
+ * painted by the table wrapper rather than by itself — and weighting by the
+ * border box would compound that difference instead of preserving it.
+ *
+ * @param insets - Each column's horizontal padding and border, which is held
+ * out of the weighting. Defaults to none.
+ */
+function addDistributedWidth(
+ widths: number[],
+ total: number,
+ indexes: number[],
+ caps: Array,
+ insets: number[]
): number[] {
- const densities = columnConstraints.map((c) => c.contentDensity);
- const minDensity = densities.reduce(
- (acc, x) => Math.min(acc, x),
- Infinity
+ if (indexes.length === 0 || total <= 0) {
+ return widths;
+ }
+ const result = [...widths];
+ const hasRoom = (i: number) => {
+ const cap = caps[i];
+ return cap == null || result[i]! < cap;
+ };
+ let candidates = indexes.filter(hasRoom);
+ let remaining = total;
+ while (remaining > EPSILON && candidates.length > 0) {
+ const shares = distribute(
+ remaining,
+ // A column holding nothing but its own spacing weighs nothing, and so
+ // waits while the columns with content grow. It is not stranded: once
+ // they have all reached their caps it is the only candidate left, and
+ // `distribute` shares evenly when every weight is zero.
+ candidates.map((i) => Math.max(0, result[i]! - insets[i]!))
+ );
+ let consumed = 0;
+ candidates.forEach((i, k) => {
+ const cap = caps[i];
+ const current = result[i]!;
+ const grown = current + shares[k]!;
+ const used = cap == null ? grown : Math.min(grown, cap);
+ result[i] = used;
+ consumed += used - current;
+ });
+ if (consumed <= EPSILON) {
+ break;
+ }
+ remaining -= consumed;
+ candidates = candidates.filter(hasRoom);
+ }
+ return result;
+}
+
+/**
+ * What deciding column widths actually depends on.
+ *
+ * @remarks
+ * Stated explicitly rather than taken from the whole layout: `assignableWidth`
+ * is the width left for columns after the table's own padding, border and
+ * border-spacing, which is a different quantity from the document width the
+ * config calls `contentWidth`, and passing the latter by mistake is otherwise
+ * invisible.
+ */
+export interface ColumnLayoutInput {
+ cells: readonly DisplayCell[];
+ /** The width the columns may share between them. */
+ assignableWidth: number;
+ /** Whether the columns must fill that width rather than shrink to fit. */
+ forceStretch?: boolean;
+}
+
+/**
+ * Fold each column's own percentage preference into the `col`/`colgroup`
+ * declarations, which share its sizing class.
+ */
+function mergeDeclarations(
+ columnConstraints: readonly TColumnConstraints[],
+ declaredWidths: Array
+): Array {
+ return columnConstraints.map((constraints, i) => {
+ const declared = declaredWidths[i];
+ const percent = constraints.percentWidth;
+ if (percent == null) {
+ return declared ?? null;
+ }
+ return {
+ width: null,
+ minWidth: 0,
+ maxWidth: null,
+ maxPercent: null,
+ ...declared,
+ percent: Math.max(declared?.percent ?? 0, percent)
+ };
+ });
+}
+
+/**
+ * Resolve each column's upper bound to pixels.
+ *
+ * @remarks
+ * A `max-width` may be declared in either unit and caps the column in
+ * whichever sizing class it ends up in. Percentage bounds travel unresolved so
+ * that the same declarations can be reused against another table width, and
+ * become pixels here, once that width is known.
+ */
+function resolveCaps(
+ declarations: Array,
+ contentWidth: number
+): Array {
+ return declarations.map((declared) =>
+ declared
+ ? lesserBound(
+ declared.maxWidth,
+ declared.maxPercent === null
+ ? null
+ : declared.maxPercent * contentWidth
+ )
+ : null
);
- const normalized = densities.map((x) => x - minDensity);
- const total = normalized.reduce((acc, x) => acc + x, 0);
- return normalized.map((x) => (total === 0 ? 0 : x / total));
-}
-
-export default function computeColumnWidths(display: Display): number[] {
- const contentWidth = display.contentWidth;
- const shouldClampWidth = !display.forceStretch;
- const columnConstraints = reduceColumnConstraints(display.cells);
- const minWidths = mapMinWidths(columnConstraints);
- const spreads = mapSpreads(columnConstraints);
- const sumOfMinWidths = minWidths.reduce((a, b) => a + b, 0);
- if (contentWidth < sumOfMinWidths) {
+}
+
+/**
+ * Apply declared widths and bounds to the intrinsic column constraints.
+ *
+ * @returns Fresh constraints; the input is left alone, so the same reduction
+ * may be reused for another candidate table width.
+ */
+function applyDeclaredBounds(
+ columnConstraints: readonly TColumnConstraints[],
+ declarations: Array,
+ caps: Array
+): TColumnConstraints[] {
+ return columnConstraints.map((constraints, i) => {
+ const declared = declarations[i];
+ if (!declared) {
+ return { ...constraints };
+ }
+ const cap = caps[i]!;
+ // Absolute column widths contribute to intrinsic minimum and preferred
+ // widths. Percentage widths remain unresolved until distribution, and
+ // contribute only the absolute floor they were given.
+ const floor = clampWidth(
+ declared.width ?? declared.minWidth,
+ declared.minWidth,
+ cap
+ );
+ const minWidth =
+ floor > 0 ? Math.max(constraints.minWidth, floor) : constraints.minWidth;
+ const spread =
+ floor > 0 ? Math.max(constraints.spread, floor) : constraints.spread;
+ return {
+ ...constraints,
+ minWidth,
+ // A `max-width` caps how far a column may grow, but never below the
+ // width its own content needs to be legible at all.
+ spread: clampWidth(spread, minWidth, cap)
+ };
+ });
+}
+
+/**
+ * The width each column would take if every percentage were honoured in full.
+ */
+function percentageGuessOf(
+ minWidths: number[],
+ percentages: Array,
+ caps: Array,
+ contentWidth: number
+): number[] {
+ return minWidths.map((minWidth, i) => {
+ const percent = percentages[i];
+ if (percent == null) {
+ return minWidth;
+ }
+ const cap = caps[i];
+ const preferred = percent * contentWidth;
+ return Math.max(
+ minWidth,
+ cap == null ? preferred : Math.min(preferred, cap)
+ );
+ });
+}
+
+/**
+ * Share the width left over once every column sits at its max-content size.
+ *
+ * @remarks
+ * Each class of column is offered the surplus in turn, so that what one cannot
+ * take — every column in it held at its own `max-width` — falls through to the
+ * next rather than being dropped and leaving the table short of the width it
+ * was told to fill. Only when no column anywhere has room left does the table
+ * stay narrower than its assignable width.
+ */
+function distributeSurplus(
+ maxContentGuess: number[],
+ declarations: Array,
+ percentages: Array,
+ caps: Array,
+ columnInsets: number[],
+ contentWidth: number
+): number[] {
+ const allColumns = maxContentGuess.map((_, i) => i);
+ // A column that declared a width of its own already has the width it asked
+ // for; the surplus belongs to the ones that left it to the table to decide.
+ const autoColumns = allColumns.filter((i) => {
+ const declared = declarations[i];
+ return !declared || (declared.width === null && declared.percent === null);
+ });
+ const percentColumns = allColumns.filter((i) => percentages[i] != null);
+ let widths = maxContentGuess;
+ for (const group of [autoColumns, percentColumns, allColumns]) {
+ const leftover = contentWidth - sum(widths);
+ if (leftover <= EPSILON) {
+ break;
+ }
+ widths = addDistributedWidth(widths, leftover, group, caps, columnInsets);
+ }
+ return widths;
+}
+
+/**
+ * Size the columns of a table, following the decision ladder of
+ * {@link https://www.w3.org/TR/CSS21/tables.html#auto-table-layout | CSS 2.1 §17.5.2.2}.
+ */
+export default function computeColumnWidths(
+ { cells, assignableWidth: contentWidth, forceStretch }: ColumnLayoutInput,
+ declaredWidths: Array = []
+): number[] {
+ // The cell grid alone decides how many columns a table has. `col` and
+ // `colgroup` declarations past its last column describe columns that do not
+ // exist — honouring them would widen the table by the sum of widths nothing
+ // is ever rendered into, and hand it a scroll view to hold the surplus.
+ const intrinsic = reduceColumnConstraints([...cells]);
+ if (intrinsic.length === 0) {
+ return [];
+ }
+ const declarations = mergeDeclarations(intrinsic, declaredWidths);
+ const caps = resolveCaps(declarations, contentWidth);
+ const columnConstraints = applyDeclaredBounds(intrinsic, declarations, caps);
+ const minWidths = columnConstraints.map((c) => c.minWidth);
+
+ // 1. Below its min-content width the table cannot fit: no column may go
+ // under the width it needs for its longest word, so it overflows and
+ // `HTMLTable` scrolls it.
+ if (contentWidth < sum(minWidths)) {
return minWidths;
}
- const widthToAssign = contentWidth - sumOfMinWidths;
- const weightedCoeffs = mapWeightedColumnCoeffs(columnConstraints);
- const rawWidths = minWidths.map(
- (min, i) => min + weightedCoeffs[i]! * widthToAssign
+
+ // 2. Percentage columns are their own sizing class. This is the critical
+ // difference from resolving percentages to hard pixel minima up front:
+ // when the full percentage guess does not fit, browsers interpolate back
+ // toward the min-content guess while keeping the total at the width.
+ const percentages = normalizePercentages(declarations, intrinsic.length);
+ const percentageGuess = percentageGuessOf(
+ minWidths,
+ percentages,
+ caps,
+ contentWidth
);
- if (shouldClampWidth) {
- return rawWidths.map((w, i) => Math.min(w, spreads[i] ?? Infinity));
+ if (contentWidth <= sum(percentageGuess)) {
+ return interpolateWidths(minWidths, percentageGuess, contentWidth);
}
- return rawWidths;
+
+ // 3. Then move non-percentage columns toward max-content. A percentage
+ // column keeps the width its own sizing guess assigned.
+ const spreads = columnConstraints.map((c) => c.spread);
+ const maxContentGuess = percentageGuess.map((width, i) =>
+ percentages[i] == null ? Math.max(width, spreads[i]!) : width
+ );
+ if (contentWidth <= sum(maxContentGuess)) {
+ return interpolateWidths(percentageGuess, maxContentGuess, contentWidth);
+ }
+
+ // 4. An auto-width table shrinks to its max-content size. An explicitly
+ // sized table — or `forceStretch` — must fill the width instead.
+ if (!forceStretch) {
+ return maxContentGuess;
+ }
+ return distributeSurplus(
+ maxContentGuess,
+ declarations,
+ percentages,
+ caps,
+ // The spacing each column carries, so the surplus is shared over content
+ // alone; `reduceColumnConstraints` reduced it the same way it reduced
+ // `minWidth`, which is the figure the spacing is held out of.
+ columnConstraints.map((c) => c.horizontalSpace),
+ contentWidth
+ );
}
diff --git a/packages/heuristic-table-plugin/src/helpers/createRenderTree.ts b/packages/heuristic-table-plugin/src/helpers/createRenderTree.ts
index b4ba642..be9c6a3 100644
--- a/packages/heuristic-table-plugin/src/helpers/createRenderTree.ts
+++ b/packages/heuristic-table-plugin/src/helpers/createRenderTree.ts
@@ -1,12 +1,13 @@
import {
TableCell,
- Display,
+ TableGrid,
DisplayCell,
TableFlexColumnContainer,
TableFlexRowContainer,
TableRoot
} from '../shared-types';
import makeRows from './makeRows';
+import { spanInternalSpacing } from './borderSpacingGeometry';
function getRowGroupHeight(cells: TableCell[]): number {
return cells.reduce((maxLen, cell) => Math.max(maxLen, cell.lenY), 0);
@@ -14,11 +15,12 @@ function getRowGroupHeight(cells: TableCell[]): number {
function groupCellsByVGroup(cellsByRow: TableCell[][]): TableCell[][][] {
const cellsByVGroup: TableCell[][][] = [];
- let rowHeight = 1;
- for (let i = 0; i < cellsByRow.length; i += Math.max(rowHeight, 1)) {
- const row = cellsByRow[i];
- rowHeight = getRowGroupHeight(row);
+ // A group is as tall as the tallest cell starting in its first row, and the
+ // next group starts where it ends.
+ for (let i = 0; i < cellsByRow.length; ) {
+ const rowHeight = Math.max(1, getRowGroupHeight(cellsByRow[i]!));
cellsByVGroup.push(cellsByRow.slice(i, i + rowHeight));
+ i += rowHeight;
}
return cellsByVGroup;
}
@@ -87,7 +89,11 @@ function translateVGroups(
return flattenRows;
}
-function makeCell(columnWidths: number[], cell: DisplayCell): TableCell {
+function makeCell(
+ columnWidths: number[],
+ cell: DisplayCell,
+ spacing: number
+): TableCell {
let width = 0;
for (let i = cell.x; i < cell.x + cell.lenX; i++) {
width += columnWidths[i] ?? 0;
@@ -95,15 +101,31 @@ function makeCell(columnWidths: number[], cell: DisplayCell): TableCell {
return {
...cell,
type: 'cell',
- width
+ width: width + spanInternalSpacing(cell.lenX, spacing)
};
}
-export default function createRenderTree(
- display: Display,
- columnWidths: number[]
-): TableRoot {
- const cells = display.cells.map((cell) => makeCell(columnWidths, cell));
+/**
+ * Resolve the width of every cell of `display` from the column widths.
+ *
+ * @remarks
+ * Kept apart from {@link createRenderTree} because the flat list is also what
+ * {@link HeuristicTablePluginConfig.getStyleForCell} is called with: a cell
+ * only becomes a {@link TableCell} once its width exists.
+ */
+export function makeTableCells(
+ grid: Pick,
+ columnWidths: number[],
+ /**
+ * The table's horizontal `border-spacing`. Required: a default would let a
+ * caller silently drop the gaps a spanning cell absorbs from every width.
+ */
+ spacing: number
+): TableCell[] {
+ return grid.cells.map((cell) => makeCell(columnWidths, cell, spacing));
+}
+
+export default function createRenderTree(cells: TableCell[]): TableRoot {
const rows = makeRows(cells);
const vGroups = groupCellsByVGroup(rows);
const children = translateVGroups(vGroups);
diff --git a/packages/heuristic-table-plugin/src/helpers/extractColumnWidths.ts b/packages/heuristic-table-plugin/src/helpers/extractColumnWidths.ts
new file mode 100644
index 0000000..9018777
--- /dev/null
+++ b/packages/heuristic-table-plugin/src/helpers/extractColumnWidths.ts
@@ -0,0 +1,170 @@
+import { TNode } from '@native-html/render';
+import {
+ lesserBound,
+ resolveAttributeLength,
+ resolvePercentage
+} from './resolveWidth';
+import parseSpan from './parseSpan';
+
+/**
+ * The width declarations a `col` or its `colgroup` contributes to one column.
+ *
+ * @remarks
+ * The properties are deliberately kept apart. A declared width and a bound
+ * are different things — conflating them lets a `min-width` on a column
+ * discard the width declared by its group — and a width and a fraction belong
+ * to different sizing classes, which `computeColumnWidths` reconciles only
+ * once it knows the width to assign.
+ *
+ * None of them is resolved against a containing width: a declaration is a
+ * property of the markup, not of the box the table happens to be laid out in,
+ * and one resolved against a first guess at the table width could not be
+ * reused for a second.
+ */
+export interface DeclaredColumnWidth {
+ /**
+ * An absolute width declared by the column or its group; `null` when the
+ * declaration is a percentage, or when there is none.
+ */
+ width: number | null;
+ /** A preferred fraction of the assignable table width. */
+ percent: number | null;
+ /** An absolute lower bound from `min-width`; `0` when none is declared. */
+ minWidth: number;
+ /** An absolute upper bound from `max-width`. */
+ maxWidth: number | null;
+ /**
+ * An upper bound from a percentage `max-width`, as a fraction of the
+ * assignable table width; `null` when there is none.
+ */
+ maxPercent: number | null;
+}
+
+function appendWidth(
+ widths: Array,
+ width: DeclaredColumnWidth | null,
+ span: number
+) {
+ for (let i = 0; i < span; i++) {
+ widths.push(width);
+ }
+}
+
+/**
+ * Combine the width of a `colgroup` with that of one of its `col` children.
+ *
+ * @remarks
+ * The column overrides its group rather than competing with it: a group width
+ * applies only to the columns that declare none of their own, so a 25% `col`
+ * inside a 50% `colgroup` is 25% wide — taking the greater of the two would
+ * let a group widen the very column that asked to be narrower. A declaration
+ * in either sizing class counts, so a percentage `col` replaces an absolute
+ * group width just as it would another percentage.
+ *
+ * Bounds are not declarations and do not override: the group box contains the
+ * column box, so both apply and the stricter one wins.
+ */
+function mergeWidths(
+ group: DeclaredColumnWidth | null,
+ column: DeclaredColumnWidth | null
+): DeclaredColumnWidth | null {
+ if (!group) return column;
+ if (!column) return group;
+ const columnDeclaresWidth = column.width !== null || column.percent !== null;
+ return {
+ width: columnDeclaresWidth ? column.width : group.width,
+ percent: columnDeclaresWidth ? column.percent : group.percent,
+ minWidth: Math.max(column.minWidth, group.minWidth),
+ maxWidth: lesserBound(column.maxWidth, group.maxWidth),
+ maxPercent: lesserBound(column.maxPercent, group.maxPercent)
+ };
+}
+
+/**
+ * A processed absolute length. Percentages arrive as strings and are read by
+ * `resolvePercentage` instead, which keeps them unresolved.
+ */
+function absoluteSize(value: unknown): number | null {
+ return typeof value === 'number' && Number.isFinite(value) && value >= 0
+ ? value
+ : null;
+}
+
+function resolveColumnWidth(tnode: TNode): DeclaredColumnWidth | null {
+ const style = tnode.styles.nativeBlockRet;
+ const cssPercent = resolvePercentage(style.width);
+ const cssAbsolute = absoluteSize(style.width);
+ // `auto` is still a CSS width declaration and therefore suppresses the
+ // lower-priority HTML presentational hint, despite contributing no size.
+ const hasCssWidth = style.width != null;
+ // The presentational attribute stands in for a missing CSS width, in
+ // whichever unit it is written.
+ const declaredPercent =
+ cssPercent ??
+ (hasCssWidth ? null : resolvePercentage(tnode.attributes.width));
+ // A percentage `min-width` contributes nothing to table-internal percentage
+ // sizing, so only an absolute lower bound is kept. A percentage `max-width`,
+ // on the other hand, caps the declared fraction in its own unit and travels
+ // on as a fraction, so that it also caps an absolute width once
+ // `computeColumnWidths` knows the width to resolve it against.
+ const minWidth = absoluteSize(style.minWidth) ?? 0;
+ const maxWidth = absoluteSize(style.maxWidth);
+ const maxPercent = resolvePercentage(style.maxWidth);
+ const percent =
+ declaredPercent === null
+ ? null
+ : Math.min(declaredPercent, maxPercent ?? declaredPercent);
+ const width =
+ percent !== null
+ ? null
+ : (cssAbsolute ??
+ (hasCssWidth ? null : resolveAttributeLength(tnode.attributes.width)));
+ if (
+ width === null &&
+ percent === null &&
+ minWidth === 0 &&
+ maxWidth === null &&
+ maxPercent === null
+ ) {
+ return null;
+ }
+ return { width, percent, minWidth, maxWidth, maxPercent };
+}
+
+function appendColgroupWidths(
+ widths: Array,
+ colgroup: TNode
+) {
+ const groupWidth = resolveColumnWidth(colgroup);
+ const columns = colgroup.children.filter((child) => child.tagName === 'col');
+ if (columns.length === 0) {
+ appendWidth(widths, groupWidth, parseSpan(colgroup.attributes.span));
+ return;
+ }
+ for (const column of columns) {
+ appendWidth(
+ widths,
+ mergeWidths(groupWidth, resolveColumnWidth(column)),
+ parseSpan(column.attributes.span)
+ );
+ }
+}
+
+/** Collect the ordered widths declared by colgroup and col elements. */
+export default function extractColumnWidths(
+ table: TNode
+): Array {
+ const widths: Array = [];
+ for (const child of table.children) {
+ if (child.tagName === 'colgroup') {
+ appendColgroupWidths(widths, child);
+ } else if (child.tagName === 'col') {
+ appendWidth(
+ widths,
+ resolveColumnWidth(child),
+ parseSpan(child.attributes.span)
+ );
+ }
+ }
+ return widths;
+}
diff --git a/packages/heuristic-table-plugin/src/helpers/fillTableDisplay.ts b/packages/heuristic-table-plugin/src/helpers/fillTableDisplay.ts
deleted file mode 100644
index 58785e0..0000000
--- a/packages/heuristic-table-plugin/src/helpers/fillTableDisplay.ts
+++ /dev/null
@@ -1,65 +0,0 @@
-import { TNode } from '@native-html/render';
-import { Display, DisplayCell, Settings } from '../shared-types';
-import TCellConstraintsComputer from './TCellConstraintsComputer';
-
-export function createEmptyDisplay(config: Settings): Display {
- return {
- offsetX: 0,
- occupiedCoordinates: [],
- maxY: -1,
- maxX: -1,
- cells: [],
- ...config
- };
-}
-
-function computeOffsetX(display: Display, startX: number, startY: number) {
- return display.occupiedCoordinates.reduce((prev, coordinates) => {
- if (coordinates.x <= startX && coordinates.y === startY) {
- return prev + 1;
- }
- return prev;
- }, 0);
-}
-
-export default function fillTableDisplay(
- tnode: TNode,
- display: Display,
- computer: TCellConstraintsComputer
-) {
- if (tnode.tagName === 'tr') {
- display.maxY = display.maxY + 1;
- display.offsetX = 0;
- }
- if (tnode.tagName === 'th' || tnode.tagName === 'td') {
- const rowspan = Number(tnode.attributes.rowspan);
- const colspan = Number(tnode.attributes.colspan);
- const lenX = Number.isFinite(colspan) ? colspan : 1;
- const lenY = Number.isFinite(rowspan) ? rowspan : 1;
- const initialStartX = display.offsetX + tnode.nodeIndex;
- const startY = display.maxY;
- const startX =
- computeOffsetX(display, initialStartX, display.maxY) + initialStartX;
- const constraints = computer.computeCellConstraints(tnode);
- const cell: DisplayCell = {
- lenX,
- lenY,
- x: startX,
- y: startY,
- tnode,
- constraints
- };
- display.cells.push(cell);
- display.offsetX += lenX - 1;
- if (lenY > 1) {
- for (let y = startY + 1; y < lenY + startY; y++) {
- display.occupiedCoordinates.push({ x: startX, y });
- }
- }
- display.maxX = Math.max(display.maxX, initialStartX);
- } else {
- tnode.children.forEach((child) =>
- fillTableDisplay(child, display, computer)
- );
- }
-}
diff --git a/packages/heuristic-table-plugin/src/helpers/indexCellNeighbours.ts b/packages/heuristic-table-plugin/src/helpers/indexCellNeighbours.ts
new file mode 100644
index 0000000..16f3abf
--- /dev/null
+++ b/packages/heuristic-table-plugin/src/helpers/indexCellNeighbours.ts
@@ -0,0 +1,84 @@
+import { DisplayCell } from '../shared-types';
+
+type Cell = Pick;
+export interface CellNeighbours {
+ /** Neighbours at increasing x: physically left in RTL, right in LTR. */
+ End: readonly Cell[];
+ Bottom: readonly Cell[];
+}
+
+interface Interval {
+ cell: Cell;
+ order: number;
+ start: number;
+ end: number;
+ maxEnd: number;
+}
+
+function indexEdges(cells: readonly Cell[], horizontal: boolean) {
+ const edges = new Map();
+ cells.forEach((cell, order) => {
+ const edge = horizontal ? cell.y : cell.x;
+ const start = horizontal ? cell.x : cell.y;
+ const end = start + (horizontal ? cell.lenX : cell.lenY);
+ const bucket = edges.get(edge) ?? [];
+ bucket.push({ cell, order, start, end, maxEnd: end });
+ edges.set(edge, bucket);
+ });
+ for (const bucket of edges.values()) {
+ bucket.sort((a, b) => a.start - b.start);
+ let maxEnd = -Infinity;
+ for (const interval of bucket) {
+ maxEnd = Math.max(maxEnd, interval.end);
+ interval.maxEnd = maxEnd;
+ }
+ }
+ return edges;
+}
+
+function overlapping(
+ bucket: Interval[] = [],
+ start: number,
+ end: number
+): Cell[] {
+ // Skip intervals ending before this side. Prefix maxima also handle
+ // overlapping spans in malformed markup without missing a long interval.
+ let low = 0;
+ let high = bucket.length;
+ while (low < high) {
+ const middle = Math.floor((low + high) / 2);
+ if (bucket[middle]!.maxEnd <= start) low = middle + 1;
+ else high = middle;
+ }
+ const matches: Interval[] = [];
+ for (let i = low; i < bucket.length && bucket[i]!.start < end; i++) {
+ if (bucket[i]!.end > start) matches.push(bucket[i]!);
+ }
+ // Equal-strength border conflicts retain document order, not spatial order.
+ return matches.sort((a, b) => a.order - b.order).map(({ cell }) => cell);
+}
+
+/** Index geometry once; border styles may change between measurement passes. */
+export default function indexCellNeighbours(
+ cells: readonly Cell[]
+): ReadonlyMap {
+ const startEdges = indexEdges(cells, false);
+ const topEdges = indexEdges(cells, true);
+ return new Map(
+ cells.map((cell) => [
+ cell,
+ {
+ End: overlapping(
+ startEdges.get(cell.x + cell.lenX),
+ cell.y,
+ cell.y + cell.lenY
+ ),
+ Bottom: overlapping(
+ topEdges.get(cell.y + cell.lenY),
+ cell.x,
+ cell.x + cell.lenX
+ )
+ }
+ ])
+ );
+}
diff --git a/packages/heuristic-table-plugin/src/helpers/inlineStyle.ts b/packages/heuristic-table-plugin/src/helpers/inlineStyle.ts
new file mode 100644
index 0000000..9bebb60
--- /dev/null
+++ b/packages/heuristic-table-plugin/src/helpers/inlineStyle.ts
@@ -0,0 +1,27 @@
+import { TNode } from '@native-html/render';
+
+export function getInlineStyleValue(
+ tnode: TNode,
+ propertyName: string
+): string | null {
+ const inlineStyle = tnode.attributes.style;
+ if (!inlineStyle) {
+ return null;
+ }
+ let value: string | null = null;
+ for (const declaration of inlineStyle.split(';')) {
+ const colonIndex = declaration.indexOf(':');
+ if (colonIndex === -1) {
+ continue;
+ }
+ const name = declaration.slice(0, colonIndex).trim().toLowerCase();
+ if (name === propertyName) {
+ value = declaration
+ .slice(colonIndex + 1)
+ .replace(/\s*!important\s*$/i, '')
+ .trim()
+ .toLowerCase();
+ }
+ }
+ return value;
+}
diff --git a/packages/heuristic-table-plugin/src/helpers/makeRows.ts b/packages/heuristic-table-plugin/src/helpers/makeRows.ts
index da3ed6e..4bd7e0a 100644
--- a/packages/heuristic-table-plugin/src/helpers/makeRows.ts
+++ b/packages/heuristic-table-plugin/src/helpers/makeRows.ts
@@ -1,11 +1,25 @@
import { TableCell } from '../shared-types';
+/**
+ * Group cells into rows, ordered top to bottom.
+ *
+ * @remarks
+ * The sort is explicit rather than left to key iteration order: grouping into
+ * a plain object happens to come back in ascending row order only because `y`
+ * stringifies to an array index, which is a property of the keys rather than
+ * anything this function states.
+ */
export default function makeRows(cells: readonly TableCell[]): TableCell[][] {
- const grouped: Record = {};
+ const grouped = new Map();
for (const cell of cells) {
- const key = String(cell.y);
- if (!grouped[key]) grouped[key] = [];
- grouped[key].push(cell);
+ const row = grouped.get(cell.y);
+ if (row) {
+ row.push(cell);
+ } else {
+ grouped.set(cell.y, [cell]);
+ }
}
- return Object.values(grouped);
+ return [...grouped.entries()]
+ .sort(([a], [b]) => a - b)
+ .map(([, row]) => row);
}
diff --git a/packages/heuristic-table-plugin/src/helpers/measure.ts b/packages/heuristic-table-plugin/src/helpers/measure.ts
index bce62ca..31c1cd4 100644
--- a/packages/heuristic-table-plugin/src/helpers/measure.ts
+++ b/packages/heuristic-table-plugin/src/helpers/measure.ts
@@ -1,6 +1,8 @@
-import { TNode } from '@native-html/render';
+import { ViewStyle } from 'react-native';
+import { isRTL } from './boxSides';
+import { paddingSourcesFor } from './cellPadding';
-type NativeBlockRetStyle = TNode['styles']['nativeBlockRet'];
+type NativeBlockRetStyle = ViewStyle;
type SpacingFields = Extract<
keyof NativeBlockRetStyle,
| 'borderLeftWidth'
@@ -13,15 +15,6 @@ type SpacingFields = Extract<
const hmarginFields: readonly SpacingFields[] = ['marginLeft', 'marginRight'];
-const hspacingFields: readonly SpacingFields[] = [
- 'borderLeftWidth',
- 'borderRightWidth',
- 'paddingLeft',
- 'paddingRight',
- 'marginLeft',
- 'marginRight'
-];
-
function sumFields(
style: NativeBlockRetStyle,
fields: readonly SpacingFields[]
@@ -36,6 +29,39 @@ export function getHorizontalMargins(style: NativeBlockRetStyle): number {
return sumFields(style, hmarginFields);
}
-export function getHorizontalSpacing(style: NativeBlockRetStyle): number {
- return sumFields(style, hspacingFields);
+/**
+ * The horizontal spacing that sits *inside* a border box.
+ *
+ * @remarks
+ * React Native lays out with `box-sizing: border-box`, so an element's width
+ * already contains its padding and border: only what is left of that width is
+ * offered to its children. Margins are excluded here because they sit outside
+ * the box, and so reduce the width the element itself may take rather than the
+ * width it may pass on.
+ */
+export function getHorizontalInsets(style: NativeBlockRetStyle): number {
+ const rtl = isRTL(style);
+ // The first declared property of the side's precedence list is the padding
+ // that side takes — the same list `getDefaultCellPaddingStyle` consults.
+ const paddingOn = (side: 'Left' | 'Right') =>
+ paddingSourcesFor(side, rtl)
+ .map((property) => style[property])
+ .find((value) => value != null);
+ const left = paddingOn('Left');
+ const right = paddingOn('Right');
+ const borderStart = style.borderStartWidth;
+ const borderEnd = style.borderEndWidth;
+ return [
+ left,
+ right,
+ (rtl ? borderEnd : borderStart) ??
+ style.borderLeftWidth ??
+ style.borderWidth,
+ (rtl ? borderStart : borderEnd) ??
+ style.borderRightWidth ??
+ style.borderWidth
+ ].reduce(
+ (total, value) => total + (typeof value === 'number' ? value : 0),
+ 0
+ );
}
diff --git a/packages/heuristic-table-plugin/src/helpers/measureTable.ts b/packages/heuristic-table-plugin/src/helpers/measureTable.ts
new file mode 100644
index 0000000..6103421
--- /dev/null
+++ b/packages/heuristic-table-plugin/src/helpers/measureTable.ts
@@ -0,0 +1,129 @@
+import { ViewStyle } from 'react-native';
+import { TNode } from '@native-html/render';
+import { TableGrid } from '../shared-types';
+import type indexCellNeighbours from './indexCellNeighbours';
+import type { DeclaredColumnWidth } from './extractColumnWidths';
+import type { BorderSpacing } from './resolveBorderSpacing';
+import type { TableWidths } from './resolveTableWidths';
+import TCellConstraintsComputer from './TCellConstraintsComputer';
+import computeColumnWidths from './computeColumnWidths';
+import resolveTableStyles, { ResolvedCellStyle } from './resolveTableStyles';
+import { getHorizontalInsets } from './measure';
+import sum from './sum';
+import { spanInternalSpacing } from './borderSpacingGeometry';
+
+export interface MeasureTableInput {
+ grid: TableGrid;
+ /** The table's own source style, its writing direction folded in. */
+ tableStyle: ViewStyle;
+ borderCollapse: boolean;
+ /**
+ * Shared cell neighbours, indexed once from coordinates alone. Absent when
+ * borders are not collapsing, where no cell has a shared edge to resolve.
+ */
+ neighbours: ReturnType | undefined;
+ /**
+ * Styles {@link HeuristicTablePluginConfig.getStyleForCell} returned, frozen
+ * from a previous pass. Empty on the first pass, when no widths exist to
+ * call the callback with.
+ */
+ configStyles: ReadonlyMap;
+ /**
+ * Shared across passes on purpose: its cache of per-cell intrinsic
+ * constraints is what keeps a second pass from re-walking every text node.
+ */
+ computer: TCellConstraintsComputer;
+ widths: TableWidths;
+ borderSpacing: BorderSpacing;
+ /** The border-spacing the table spends between and around its columns. */
+ spacingWidth: number;
+ declaredColumnWidths: Array;
+}
+
+export interface MeasuredTable {
+ cellStyles: ReadonlyMap;
+ tableBorderStyle: ViewStyle | null;
+ /** The table's own horizontal padding and border. */
+ insets: number;
+ columnWidths: number[];
+}
+
+/**
+ * Measure every cell against the resolved styles, then size the columns.
+ *
+ * @remarks
+ * Pure given its input: it reads the grid's coordinates and writes each cell's
+ * constraints, and is safe to run twice because the second run recomputes
+ * every constraint it overwrites. {@link TableLayout} runs it a second time
+ * once `getStyleForCell` has been consulted, since a callback may change the
+ * padding and borders the columns are measured against.
+ */
+export default function measureTable({
+ grid,
+ tableStyle,
+ borderCollapse,
+ neighbours,
+ configStyles,
+ computer,
+ widths,
+ borderSpacing,
+ spacingWidth,
+ declaredColumnWidths
+}: MeasureTableInput): MeasuredTable {
+ const resolved = resolveTableStyles(
+ grid,
+ tableStyle,
+ borderCollapse,
+ configStyles,
+ neighbours
+ );
+ const insets = getHorizontalInsets({
+ ...tableStyle,
+ ...resolved.tableBorderStyle
+ });
+ // The width left for the columns, once the table's own padding, border and
+ // border-spacing are taken out of the width it may occupy.
+ const assignableWidth = Math.max(
+ 0,
+ widths.usedTableWidth - insets - spacingWidth
+ );
+ for (const cell of grid.cells) {
+ const constraints = computer.computeCellConstraints(
+ cell.tnode,
+ resolved.cellStyles.get(cell.tnode)!.style,
+ assignableWidth
+ );
+ // A spanning cell also occupies the gaps between its columns.
+ const internalSpacing = spanInternalSpacing(
+ cell.lenX,
+ borderSpacing.horizontal
+ );
+ cell.constraints = {
+ ...constraints,
+ minWidth: Math.max(0, constraints.minWidth - internalSpacing),
+ maxWidth: Math.max(0, constraints.maxWidth - internalSpacing)
+ };
+ }
+ let columnWidths = computeColumnWidths(
+ { cells: grid.cells, assignableWidth, forceStretch: widths.forceStretch },
+ declaredColumnWidths
+ );
+ // A `min-width` on the table floors the columns too, so a table told to be
+ // at least this wide does not leave the surplus to its padding.
+ const minLayoutWidth = Math.max(
+ 0,
+ (widths.minWidth ?? 0) - insets - spacingWidth
+ );
+ if (sum(columnWidths) < minLayoutWidth) {
+ const raised = computeColumnWidths(
+ {
+ cells: grid.cells,
+ assignableWidth: minLayoutWidth,
+ forceStretch: true
+ },
+ declaredColumnWidths
+ );
+ if (sum(raised) > sum(columnWidths)) columnWidths = raised;
+ }
+ return { ...resolved, insets, columnWidths };
+}
diff --git a/packages/heuristic-table-plugin/src/helpers/parseSpan.ts b/packages/heuristic-table-plugin/src/helpers/parseSpan.ts
new file mode 100644
index 0000000..b42794a
--- /dev/null
+++ b/packages/heuristic-table-plugin/src/helpers/parseSpan.ts
@@ -0,0 +1,29 @@
+/**
+ * The largest `colspan` HTML allows, and the value `extractColumnWidths` uses
+ * for the `span` attribute of `col` and `colgroup`, which shares the limit.
+ */
+export const MAX_COLSPAN = 1000;
+
+/** The largest `rowspan` HTML allows. */
+export const MAX_ROWSPAN = 65534;
+
+/**
+ * Parse a `colspan`, `rowspan` or `span` attribute the way HTML requires.
+ *
+ * @remarks
+ * The attribute is a non-negative integer, clamped to a maximum; anything
+ * invalid — a missing value, a negative, a fraction, `0`, or plain nonsense —
+ * falls back to `1`. Letting a raw `Number()` through instead lets `0` and
+ * negatives corrupt the grid cursor.
+ *
+ * Note that `rowspan="0"` means "span to the end of the row group" in HTML.
+ * Row groups are not modelled here, so it degrades to `1` rather than
+ * silently spanning nothing.
+ */
+export default function parseSpan(value: unknown, max = MAX_COLSPAN): number {
+ const parsed = typeof value === 'string' ? Number(value.trim()) : NaN;
+ if (!Number.isFinite(parsed)) {
+ return 1;
+ }
+ return Math.min(Math.max(Math.floor(parsed), 1), max);
+}
diff --git a/packages/heuristic-table-plugin/src/helpers/reduceColumnConstraints.ts b/packages/heuristic-table-plugin/src/helpers/reduceColumnConstraints.ts
index ab593a9..bcedbc3 100644
--- a/packages/heuristic-table-plugin/src/helpers/reduceColumnConstraints.ts
+++ b/packages/heuristic-table-plugin/src/helpers/reduceColumnConstraints.ts
@@ -1,60 +1,118 @@
-import flatten from 'ramda/src/flatten';
-
+import { clampWidth } from './resolveWidth';
import {
CellProperties,
TCellConstraints,
TColumnConstraints
} from '../shared-types';
+const EMPTY_COLUMN: TColumnConstraints = {
+ minWidth: 0,
+ spread: 0,
+ contentDensity: 0,
+ horizontalSpace: 0,
+ percentWidth: null
+};
+
+function largest(a: number | null, b: number | null): number | null {
+ if (a === null) return b;
+ if (b === null) return a;
+ return Math.max(a, b);
+}
+
function getColumnMetrics(cells: CellProperties[]): TColumnConstraints {
- return cells
+ const column = cells
.map((c) => c.constraints)
.reduce(
- (columnConstraints: TColumnConstraints, cellConstraints: TCellConstraints) => ({
+ (
+ columnConstraints: TColumnConstraints,
+ cellConstraints: TCellConstraints
+ ) => ({
minWidth: Math.max(
columnConstraints.minWidth,
cellConstraints.minWidth
),
contentDensity:
columnConstraints.contentDensity + cellConstraints.contentDensity,
- spread: Math.max(
- columnConstraints.spread,
- cellConstraints.contentDensity
+ spread: Math.max(columnConstraints.spread, cellConstraints.maxWidth),
+ horizontalSpace: Math.max(
+ columnConstraints.horizontalSpace,
+ cellConstraints.horizontalSpace ?? 0
+ ),
+ percentWidth: largest(
+ columnConstraints.percentWidth,
+ cellConstraints.percentWidth ?? null
)
}),
- { minWidth: 0, spread: 0, contentDensity: 0 }
+ EMPTY_COLUMN
);
+ // CSS 2.1 §17.5.2.2 derives the column minimum and maximum from the same
+ // cells, each floored by the column 'width' — so a maximum below its own
+ // minimum is not a state the spec can produce. Restate it here so callers
+ // may clamp against `spread` without starving the column.
+ return {
+ ...column,
+ spread: clampWidth(column.spread, column.minWidth, null)
+ };
}
-function splitColspanCells(cell: CellProperties): CellProperties | CellProperties[] {
- if (cell.lenX > 1) {
- const cells: CellProperties[] = [];
- for (let i = 0; i < cell.lenX; i++) {
- cells[i] = {
- lenX: 1,
- lenY: cell.lenY,
- constraints: {
- minWidth: cell.constraints.minWidth / cell.lenX,
- contentDensity: cell.constraints.contentDensity / cell.lenX
- },
- x: cell.x + i,
- y: cell.y
- };
- }
- return cells;
+/**
+ * Share a spanning cell's figures across the columns it covers.
+ *
+ * @remarks
+ * Every per-cell quantity a column is reduced from is divided the same way, so
+ * that a `colspan` cannot contribute its whole width, spacing or percentage to
+ * each of its columns in turn. Keeping them together is the point: they were
+ * once spread in three places, and two of them had already drifted apart on
+ * whether a span overrunning the grid is clamped to it.
+ */
+function splitColspanCells(
+ cell: CellProperties
+): CellProperties | CellProperties[] {
+ if (cell.lenX === 1) {
+ return cell;
+ }
+ const share = (value: T) =>
+ value == null ? null : (value as number) / cell.lenX;
+ const cells: CellProperties[] = [];
+ for (let i = 0; i < cell.lenX; i++) {
+ cells[i] = {
+ lenX: 1,
+ lenY: cell.lenY,
+ constraints: {
+ minWidth: cell.constraints.minWidth / cell.lenX,
+ maxWidth: cell.constraints.maxWidth / cell.lenX,
+ contentDensity: cell.constraints.contentDensity / cell.lenX,
+ horizontalSpace: (cell.constraints.horizontalSpace ?? 0) / cell.lenX,
+ ...(share(cell.constraints.percentWidth) === null
+ ? null
+ : { percentWidth: share(cell.constraints.percentWidth)! })
+ },
+ x: cell.x + i,
+ y: cell.y
+ };
}
- return cell;
+ return cells;
}
export default function reduceColumnConstraints(
cells: CellProperties[]
): TColumnConstraints[] {
- const flatCells = flatten(cells.map(splitColspanCells)) as CellProperties[];
- const grouped: Record = {};
+ const flatCells = cells.flatMap(splitColspanCells);
+ if (flatCells.length === 0) {
+ return [];
+ }
+ const grouped: CellProperties[][] = [];
+ let lastColumn = 0;
for (const cell of flatCells) {
- const key = String(cell.x);
- if (!grouped[key]) grouped[key] = [];
- grouped[key].push(cell);
+ // Callers index the result by a cell's absolute `x`, so the array has to
+ // stay dense: a column that no cell occupies must still hold a slot, or
+ // every column after it would be handed the width of its neighbour.
+ (grouped[cell.x] ??= []).push(cell);
+ lastColumn = Math.max(lastColumn, cell.x);
+ }
+ const columns: TColumnConstraints[] = [];
+ for (let x = 0; x <= lastColumn; x++) {
+ columns[x] = getColumnMetrics(grouped[x] ?? []);
}
- return Object.values(grouped).map(getColumnMetrics);
+ return columns;
}
diff --git a/packages/heuristic-table-plugin/src/helpers/relaxHeightConstraint.ts b/packages/heuristic-table-plugin/src/helpers/relaxHeightConstraint.ts
new file mode 100644
index 0000000..b37e721
--- /dev/null
+++ b/packages/heuristic-table-plugin/src/helpers/relaxHeightConstraint.ts
@@ -0,0 +1,38 @@
+import type { ViewStyle } from 'react-native';
+
+type HeightConstraints = Pick;
+
+/**
+ * Fold an explicit `height` into a `minHeight` constraint.
+ *
+ * @remarks
+ * Per {@link https://www.w3.org/TR/CSS21/tables.html#height-layout | CSS 2.1
+ * §17.5.3}, the `height` property of `table`, `tr`, `th` and `td` boxes only
+ * defines a *minimum* height: those boxes always grow to fit their content.
+ * React Native has no table layout algorithm, so passing that `height` down to
+ * a `View` would enforce it, and taller content would overflow (or be clipped)
+ * instead of expanding the cell. `minHeight` conveys the HTML semantic
+ * faithfully.
+ *
+ * @param style - Native styles of a `table`, `tr`, `th` or `td` element.
+ *
+ * @returns The same styles, with `height` removed and merged into `minHeight`.
+ *
+ * When the two are declared in different units — a numeric `height` beside a
+ * percentage `minHeight`, say — they cannot be compared, so the declared
+ * `minHeight` is kept and the `height` is dropped rather than guessing which
+ * resolves larger.
+ */
+export default function relaxHeightConstraint(
+ style: T
+): Omit {
+ const { height, ...rest } = style;
+ if (height == null) {
+ return rest;
+ }
+ const minHeight =
+ typeof height === 'number' && typeof rest.minHeight === 'number'
+ ? Math.max(height, rest.minHeight)
+ : rest.minHeight ?? height;
+ return { ...rest, minHeight };
+}
diff --git a/packages/heuristic-table-plugin/src/helpers/resolveAvailableWidth.ts b/packages/heuristic-table-plugin/src/helpers/resolveAvailableWidth.ts
new file mode 100644
index 0000000..758c860
--- /dev/null
+++ b/packages/heuristic-table-plugin/src/helpers/resolveAvailableWidth.ts
@@ -0,0 +1,72 @@
+import { TNode } from '@native-html/render';
+import { getHorizontalInsets, getHorizontalMargins } from './measure';
+import { clampWidth, resolveWidthConstraints } from './resolveWidth';
+import { getPaintedBlockStyle } from './cellPadding';
+import type { CellContentBox } from '../CellContentWidthContext';
+
+/**
+ * The width `tnode` offers to a block-level child, i.e. its content box.
+ */
+function reduceToContentBox(tnode: TNode, containingWidth: number): number {
+ // The insets have to be the ones the ancestor is painted with rather than
+ // the ones it declares: a bare cell would otherwise hand its children the
+ // user-agent padding it is about to spend, and a table nested in it would
+ // overflow by that much once per level of nesting.
+ const style = getPaintedBlockStyle(tnode);
+ // Measured against the same style the insets come from, rather than the
+ // declared one: identical today, since the painted style only adds padding,
+ // but stating it keeps the two from drifting apart.
+ const { width, minWidth, maxWidth } = resolveWidthConstraints(
+ tnode,
+ containingWidth,
+ { style }
+ );
+ // A declared width is a border box in React Native, so it already accounts
+ // for padding and border; an auto width fills the containing block, minus
+ // the margins that sit outside the box. Either way `min-width` and
+ // `max-width` only bound the result: an ancestor asking for *at least*
+ // 100px still hands its children everything it was given, and must not
+ // squeeze them into that 100px.
+ const borderBox = clampWidth(
+ width ?? containingWidth - getHorizontalMargins(style),
+ minWidth,
+ maxWidth
+ );
+ return Math.max(0, borderBox - getHorizontalInsets(style));
+}
+
+/**
+ * Resolve the width the containing block of `tnode` actually offers.
+ *
+ * @remarks
+ * `contentWidth` is published once, at the root of the render tree, and is
+ * never narrowed as the engine descends. A node nested in padded, bordered or
+ * explicitly sized ancestors therefore has to subtract their horizontal
+ * spacing itself — otherwise it lays out against a width it was never given
+ * and overflows every one of them.
+ *
+ * @param tnode - The node whose containing block should be measured.
+ * @param contentWidth - The width available at the root of the render tree.
+ */
+export default function resolveAvailableWidth(
+ tnode: TNode,
+ contentWidth: number,
+ cellContentBox?: CellContentBox
+): number {
+ const ancestors: TNode[] = [];
+ for (let parent = tnode.parent; parent; parent = parent.parent) {
+ if (parent === cellContentBox?.tnode) {
+ // Start inside the assigned cell, then account only for wrappers
+ // between that cell and this table. Its insets are already deducted.
+ return ancestors.reduce(
+ (width, ancestor) => reduceToContentBox(ancestor, width),
+ cellContentBox.contentWidth
+ );
+ }
+ ancestors.unshift(parent);
+ }
+ return ancestors.reduce(
+ (width, ancestor) => reduceToContentBox(ancestor, width),
+ contentWidth
+ );
+}
diff --git a/packages/heuristic-table-plugin/src/helpers/resolveBorderSpacing.ts b/packages/heuristic-table-plugin/src/helpers/resolveBorderSpacing.ts
new file mode 100644
index 0000000..f7b4377
--- /dev/null
+++ b/packages/heuristic-table-plugin/src/helpers/resolveBorderSpacing.ts
@@ -0,0 +1,75 @@
+import { TNode } from '@native-html/render';
+import { getInlineStyleValue } from './inlineStyle';
+import { resolveAttributeLength } from './resolveWidth';
+
+export interface BorderSpacing {
+ horizontal: number;
+ vertical: number;
+}
+
+const ZERO: BorderSpacing = { horizontal: 0, vertical: 0 };
+
+const LENGTH_REGEX = /^(\d*\.?\d+)(px|em|rem|pt|pc|in|cm|mm)?$/;
+
+/** CSS absolute units, in px. */
+const ABSOLUTE_SCALES: Record = {
+ px: 1,
+ pt: 96 / 72,
+ pc: 16,
+ in: 96,
+ cm: 96 / 2.54,
+ mm: 96 / 25.4
+};
+
+const DEFAULT_FONT_SIZE = 16;
+
+function rootOf(node: TNode): TNode {
+ let root = node;
+ while (root.parent) root = root.parent;
+ return root;
+}
+
+function parseSpacing(value: string, node: TNode): BorderSpacing | null {
+ const parts = value.split(/\s+/);
+ if (parts.length < 1 || parts.length > 2) return null;
+ // The font-relative units resolve against this node, so the scales are the
+ // same for both parts and are built once rather than per part.
+ const scales: Record = {
+ ...ABSOLUTE_SCALES,
+ em: node.styles.nativeTextFlow.fontSize ?? DEFAULT_FONT_SIZE,
+ rem: rootOf(node).styles.nativeTextFlow.fontSize ?? DEFAULT_FONT_SIZE
+ };
+ const lengths = parts.map((part) => {
+ const match = LENGTH_REGEX.exec(part);
+ if (!match) return NaN;
+ const number = Number(match[1]);
+ const unit = match[2];
+ // Only zero may go unitless; every other bare number is invalid CSS.
+ if (!unit) return number === 0 ? 0 : NaN;
+ return number * scales[unit]!;
+ });
+ if (lengths.some((length) => !Number.isFinite(length))) return null;
+ return { horizontal: lengths[0]!, vertical: lengths[1] ?? lengths[0]! };
+}
+
+/** Unsupported web-only CSS survives on the source attributes, not native styles. */
+export default function resolveBorderSpacing(
+ tnode: TNode,
+ collapse: boolean
+): BorderSpacing {
+ if (collapse) return ZERO;
+ for (let node: TNode | null = tnode; node; node = node.parent) {
+ const value = getInlineStyleValue(node, 'border-spacing');
+ if (value === 'initial') return ZERO;
+ if (value) {
+ const spacing = parseSpacing(value, node);
+ if (spacing) return spacing;
+ if (value === 'inherit' || value === 'unset') continue;
+ }
+ if (node.tagName === 'table') {
+ const spacing = resolveAttributeLength(node.attributes.cellspacing);
+ if (spacing !== null) return { horizontal: spacing, vertical: spacing };
+ }
+ }
+ return ZERO;
+}
diff --git a/packages/heuristic-table-plugin/src/helpers/resolveTableStyles.ts b/packages/heuristic-table-plugin/src/helpers/resolveTableStyles.ts
new file mode 100644
index 0000000..a9b1ce7
--- /dev/null
+++ b/packages/heuristic-table-plugin/src/helpers/resolveTableStyles.ts
@@ -0,0 +1,58 @@
+import { TNode } from '@native-html/render';
+import { ViewStyle } from 'react-native';
+import { TableGrid } from '../shared-types';
+import { getSourceBlockStyle, resolveConfiguredCellStyle } from './cellPadding';
+import { getCollapsedCellBorderStyle, getCollapsedTableBorderStyle } from './collapseBorders';
+import composeCellStyle from './cellPadding';
+import indexCellNeighbours from './indexCellNeighbours';
+import { isRTL } from './boxSides';
+
+/** One saved style resolution shared by measurement and rendering. */
+export interface ResolvedCellStyle {
+ configStyle: ViewStyle | null;
+ borderStyle: ViewStyle | null;
+ style: ViewStyle;
+}
+
+export default function resolveTableStyles(
+ grid: TableGrid,
+ tableStyle: ViewStyle,
+ collapse: boolean,
+ configStyles: ReadonlyMap,
+ // Required: `TableLayout` indexes once per layout and passes it to both
+ // measurement passes, so a default here would be a second place stating the
+ // "index only when collapsing" rule, and would never run.
+ neighbours: ReturnType | undefined
+) {
+ const styles = new Map();
+ const configuredStyles = new Map();
+ for (const { tnode } of grid.cells) {
+ const source = getSourceBlockStyle(tnode);
+ const configured = resolveConfiguredCellStyle(configStyles.get(tnode));
+ configuredStyles.set(tnode, configured);
+ styles.set(tnode, composeCellStyle(source, configured));
+ }
+ const getCellStyle = ({ tnode }: { tnode: TNode }) => styles.get(tnode)!;
+ const tableBorderStyle = collapse
+ ? getCollapsedTableBorderStyle(grid, tableStyle, getCellStyle)
+ : null;
+ const cellStyles = new Map();
+ for (const cell of grid.cells) {
+ const borderStyle = collapse
+ ? getCollapsedCellBorderStyle(cell, getCellStyle(cell), {
+ tableRTL: isRTL(tableStyle),
+ maxX: grid.maxX,
+ maxY: grid.maxY,
+ tableBorderStyle,
+ getCellStyle,
+ neighbours: neighbours?.get(cell)
+ })
+ : null;
+ cellStyles.set(cell.tnode, {
+ configStyle: configuredStyles.get(cell.tnode)!,
+ borderStyle,
+ style: { ...getCellStyle(cell), ...borderStyle }
+ });
+ }
+ return { tableBorderStyle, cellStyles };
+}
diff --git a/packages/heuristic-table-plugin/src/helpers/resolveTableWidths.ts b/packages/heuristic-table-plugin/src/helpers/resolveTableWidths.ts
new file mode 100644
index 0000000..6b0539c
--- /dev/null
+++ b/packages/heuristic-table-plugin/src/helpers/resolveTableWidths.ts
@@ -0,0 +1,90 @@
+import { ViewStyle } from 'react-native';
+import { TNode } from '@native-html/render';
+import type { CellContentBox } from '../CellContentWidthContext';
+import { Settings } from '../shared-types';
+import resolveAvailableWidth from './resolveAvailableWidth';
+import { clampWidth, resolveWidthConstraints } from './resolveWidth';
+import { getHorizontalMargins } from './measure';
+
+/**
+ * Tables fill the width their containing block leaves them unless the config
+ * opts out, so that a table reads as part of the surrounding document rather
+ * than as a shrink-wrapped island.
+ */
+const DEFAULT_FORCE_STRETCH = true;
+
+/** The width envelope a table is laid out inside, before its grid is known. */
+export interface TableWidths {
+ /**
+ * The border-box width the table may occupy, after the horizontal spacing of
+ * every ancestor and the table's own margins have been subtracted from
+ * {@link Settings.contentWidth}.
+ */
+ availableWidth: number;
+ /**
+ * The border-box width the table would take if nothing constrained it
+ * further: its declared width when it has one, else the width on offer,
+ * bounded either way by `min-width` and `max-width`.
+ */
+ usedTableWidth: number;
+ /** The declared `min-width`, which also floors the columns. */
+ minWidth: number | null;
+ /** Whether the columns must fill the table width rather than shrink to fit. */
+ forceStretch: boolean;
+}
+
+/**
+ * Resolve how wide a table may be, independently of what is inside it.
+ *
+ * @remarks
+ * Kept apart from measuring the grid because it needs none of it: this is the
+ * envelope the ancestors and the table's own CSS allow, and the cells are
+ * later fitted into whatever is left of it.
+ */
+export default function resolveTableWidths(
+ tnode: TNode,
+ style: ViewStyle,
+ config: Settings,
+ cellContentBox?: CellContentBox
+): TableWidths {
+ const containingWidth = resolveAvailableWidth(
+ tnode,
+ config.contentWidth,
+ cellContentBox
+ );
+ const availableWidth = Math.max(
+ 0,
+ containingWidth - getHorizontalMargins(style)
+ );
+ // Percentages resolve against the width the table may actually occupy,
+ // margins already deducted, rather than against the whole containing block.
+ // Resolving `width:100%` against the latter would hand the columns more
+ // width than the table box is allowed — by exactly the margins — and the
+ // surplus would then be shown through a horizontal scroller the same table
+ // without a declared width never gets. An absolute width is untouched by
+ // this and still overflows into that scroller when it does not fit.
+ const { width, minWidth, maxWidth } = resolveWidthConstraints(
+ tnode,
+ availableWidth
+ );
+ const declaredTableWidth =
+ width === null ? null : clampWidth(width, minWidth, maxWidth);
+ return {
+ availableWidth,
+ // `min-width` and `max-width` bound the table width whether it is declared
+ // or filled. A table that merely asks for *at least* 200px still fills the
+ // width it was offered; one capped at 300px stops there rather than
+ // stretching past its own ceiling.
+ usedTableWidth: clampWidth(
+ declaredTableWidth ?? availableWidth,
+ minWidth,
+ maxWidth
+ ),
+ minWidth,
+ // A table with a specified width distributes that width over its columns;
+ // shrink-to-fit only applies when the table width is auto, and is opt-in.
+ forceStretch:
+ (config.forceStretch ?? DEFAULT_FORCE_STRETCH) ||
+ declaredTableWidth !== null
+ };
+}
diff --git a/packages/heuristic-table-plugin/src/helpers/resolveWidth.ts b/packages/heuristic-table-plugin/src/helpers/resolveWidth.ts
new file mode 100644
index 0000000..8e79128
--- /dev/null
+++ b/packages/heuristic-table-plugin/src/helpers/resolveWidth.ts
@@ -0,0 +1,166 @@
+import { ViewStyle } from 'react-native';
+import { TNode } from '@native-html/render';
+
+const PERCENTAGE_REGEX = /^(\d*\.?\d+)%$/;
+const UNITLESS_REGEX = /^(\d*\.?\d+)$/;
+
+/** Resolve a processed CSS width against its containing block. */
+export function resolveCssSize(
+ value: unknown,
+ containingWidth: number
+): number | null {
+ if (typeof value === 'number') {
+ return Number.isFinite(value) && value >= 0 ? value : null;
+ }
+ if (typeof value === 'string') {
+ const percentage = PERCENTAGE_REGEX.exec(value.trim());
+ if (percentage) {
+ return (containingWidth * Number(percentage[1])) / 100;
+ }
+ }
+ return null;
+}
+
+/** Return a CSS/HTML percentage as a ratio without resolving it to pixels. */
+export function resolvePercentage(value: unknown): number | null {
+ if (typeof value !== 'string') {
+ return null;
+ }
+ const percentage = PERCENTAGE_REGEX.exec(value.trim());
+ return percentage ? Number(percentage[1]) / 100 : null;
+}
+
+/**
+ * Resolve the unitless form of an HTML presentational width attribute, the
+ * only one that needs no containing block to make sense of.
+ */
+export function resolveAttributeLength(value: unknown): number | null {
+ if (typeof value !== 'string') {
+ return null;
+ }
+ const unitless = UNITLESS_REGEX.exec(value.trim());
+ return unitless ? Number(unitless[1]) : null;
+}
+
+/** Resolve an HTML presentational width attribute. */
+export function resolveAttributeSize(
+ value: unknown,
+ containingWidth: number
+): number | null {
+ if (typeof value !== 'string') {
+ return null;
+ }
+ const percentage = PERCENTAGE_REGEX.exec(value.trim());
+ if (percentage) {
+ return (containingWidth * Number(percentage[1])) / 100;
+ }
+ return resolveAttributeLength(value);
+}
+
+/** Apply the CSS max-width, then min-width clamping order. */
+export function clampWidth(
+ width: number,
+ minWidth: number | null,
+ maxWidth: number | null
+): number {
+ let used = width;
+ if (maxWidth !== null) {
+ used = Math.min(used, maxWidth);
+ }
+ if (minWidth !== null) {
+ used = Math.max(used, minWidth);
+ }
+ return used;
+}
+
+/** The stricter of two upper bounds, either of which may be absent. */
+export function lesserBound(a: number | null, b: number | null): number | null {
+ if (a === null) return b;
+ if (b === null) return a;
+ return Math.min(a, b);
+}
+
+export interface WidthConstraints {
+ /**
+ * The width specified by the element, resolved against its containing block;
+ * `null` when the width is `auto`.
+ */
+ width: number | null;
+ minWidth: number | null;
+ maxWidth: number | null;
+}
+
+interface ResolveWidthOptions {
+ style?: ViewStyle;
+ /**
+ * Percentage sizes do not impose an intrinsic width on a descendant whose
+ * containing block has not been sized yet.
+ */
+ resolvePercentages?: boolean;
+}
+
+/**
+ * Resolve the three width properties of an element independently.
+ *
+ * @remarks
+ * They are kept apart on purpose. A `min-width` is a floor and a `max-width` a
+ * ceiling on whatever width the element ends up using — neither is itself a
+ * declared width, and treating one as such makes an element take the width of
+ * its own bound rather than the width it was offered. Callers combine them
+ * with {@link clampWidth} once they know the width to clamp.
+ *
+ * CSS wins over the HTML `width` hint, which is consulted last as befits a
+ * presentational attribute.
+ */
+export function resolveWidthConstraints(
+ tnode: TNode,
+ containingWidth: number,
+ { resolvePercentages = true, style }: ResolveWidthOptions = {}
+): WidthConstraints {
+ const blockStyle = style ?? tnode.styles.nativeBlockRet;
+ const resolveCss = (value: unknown) =>
+ resolvePercentages || typeof value === 'number'
+ ? resolveCssSize(value, containingWidth)
+ : null;
+ const resolveAttribute = (value: unknown) =>
+ resolvePercentages
+ ? resolveAttributeSize(value, containingWidth)
+ : resolveAttributeLength(value);
+ // A presentational width is a lowest-priority CSS hint. It only participates
+ // when CSS supplied no width declaration at all; an explicit `width:auto`
+ // still wins even though it resolves to no numeric width here.
+ const hasCssWidth = blockStyle.width != null;
+ return {
+ width: hasCssWidth
+ ? resolveCss(blockStyle.width)
+ : resolveAttribute(tnode.attributes.width),
+ minWidth: resolveCss(blockStyle.minWidth),
+ maxWidth: resolveCss(blockStyle.maxWidth)
+ };
+}
+
+/**
+ * The width an element *imposes* on the box that holds it, or `null` when it
+ * imposes none.
+ *
+ * @remarks
+ * A lone `min-width` counts here, unlike when resolving the width an element
+ * will be *given*: a block demanding at least 200px makes its container at
+ * least that wide even with an `auto` width. This is the bound a table cell
+ * needs from its contents, not a width the block itself takes.
+ */
+export function resolveImposedWidth(
+ tnode: TNode,
+ containingWidth: number,
+ options?: ResolveWidthOptions
+): number | null {
+ const { width, minWidth, maxWidth } = resolveWidthConstraints(
+ tnode,
+ containingWidth,
+ options
+ );
+ if (width === null && minWidth === null) {
+ return null;
+ }
+ return clampWidth(width ?? minWidth ?? 0, minWidth, maxWidth);
+}
diff --git a/packages/heuristic-table-plugin/src/helpers/sum.ts b/packages/heuristic-table-plugin/src/helpers/sum.ts
new file mode 100644
index 0000000..5c23231
--- /dev/null
+++ b/packages/heuristic-table-plugin/src/helpers/sum.ts
@@ -0,0 +1,4 @@
+/** Total of `values`, or `0` when there are none. */
+export default function sum(values: readonly number[]): number {
+ return values.reduce((total, value) => total + value, 0);
+}
diff --git a/packages/heuristic-table-plugin/src/index.ts b/packages/heuristic-table-plugin/src/index.ts
index 2062342..a42385b 100644
--- a/packages/heuristic-table-plugin/src/index.ts
+++ b/packages/heuristic-table-plugin/src/index.ts
@@ -1,8 +1,9 @@
import { CustomBlockRenderer } from '@native-html/render';
-import { HeuristicTablePluginConfig, Settings } from './shared-types';
+import { HeuristicTablePluginConfig } from './shared-types';
import TableRenderer from './TableRenderer';
import TdRenderer from './TdRenderer';
import ThRenderer from './ThRenderer';
+import colgroupModel from './ColgroupModel';
export {
CellProperties,
@@ -10,6 +11,7 @@ export {
DisplayCell,
HeuristicTablePluginConfig,
HTMLTableProps,
+ Settings,
TableCell,
TableFlexColumnContainer,
TableFlexRowContainer,
@@ -17,7 +19,12 @@ export {
TableRoot
} from './shared-types';
-export { TableRenderer, ThRenderer, TdRenderer };
+export {
+ DEFAULT_FONT_WEIGHT_COEFFS,
+ FontWeightCoefficients
+} from './helpers/TCellConstraintsComputer';
+
+export { TableRenderer, ThRenderer, TdRenderer, colgroupModel };
/**
* Renderers to be merged in the `renderers` prop of `RenderHTML` component.
@@ -26,8 +33,8 @@ export { TableRenderer, ThRenderer, TdRenderer };
*/
const renderers: Record<'th' | 'td' | 'table', CustomBlockRenderer> = {
table: TableRenderer,
- th: ThRenderer as any,
- td: TdRenderer as any
+ th: ThRenderer,
+ td: TdRenderer
};
export { default as useHtmlTableProps } from './useHtmlTableProps';
@@ -39,7 +46,7 @@ declare module '@native-html/render' {
/**
* Configuration for `@native-html/heuristic-table-plugin` table renderer.
*/
- table?: Settings & HeuristicTablePluginConfig;
+ table?: HeuristicTablePluginConfig;
}
}
diff --git a/packages/heuristic-table-plugin/src/shared-types.ts b/packages/heuristic-table-plugin/src/shared-types.ts
index 534c1de..e90c1fc 100644
--- a/packages/heuristic-table-plugin/src/shared-types.ts
+++ b/packages/heuristic-table-plugin/src/shared-types.ts
@@ -5,7 +5,9 @@ import {
TBlock,
TNode
} from '@native-html/render';
-import TableLayout from './TableLayout';
+import type TableLayout from './TableLayout';
+import type { ResolvedCellStyle } from './helpers/resolveTableStyles';
+import type { FontWeightCoefficients } from './helpers/TCellConstraintsComputer';
/**
* @public
@@ -34,21 +36,71 @@ export interface TConstraintsBase {
*/
export interface TColumnConstraints extends TConstraintsBase {
/**
- * The minimum number for the text in one column to hold in one line.
+ * The width beyond which this column would gain nothing — the *maximum
+ * column width* of {@link https://www.w3.org/TR/CSS21/tables.html#auto-table-layout | CSS 2.1 §17.5.2.2}.
*
- * @remarks spread and contentDensity only differ when applied to a
- * whole column. Spread width will be the maximum of cell content densities,
- * while the column content density will be the sum of the cell content
- * densities.
+ * @remarks
+ * This is the greatest {@link TCellConstraints.maxWidth} among the cells of
+ * the column, and is always at least {@link TConstraintsBase.minWidth}:
+ * per the spec, both bounds are raised by the column `width`, so a maximum
+ * can never sit below its own minimum.
+ *
+ * Note that spread and contentDensity only differ when applied to a whole
+ * column: the column content density is the *sum* of the cell content
+ * densities, whereas spread is a maximum.
*/
spread: number;
+ /**
+ * The horizontal padding and border the column carries, already included in
+ * {@link TConstraintsBase.minWidth} and {@link TColumnConstraints.spread}.
+ *
+ * @remarks
+ * The widest of its cells' insets, a `colspan` contributing its share to
+ * each column it covers — the same reduction `minWidth` gets, which is the
+ * figure this is held out of when surplus width is shared over content.
+ */
+ horizontalSpace: number;
+ /**
+ * The fraction of the table width the column's cells prefer, or `null` when
+ * none declares one. A `colspan` contributes its share to each column it
+ * covers; where cells disagree the largest wins, as it does for `minWidth`.
+ */
+ percentWidth: number | null;
}
/**
* @public
*/
-// eslint-disable-next-line @typescript-eslint/no-empty-object-type
-export interface TCellConstraints extends TConstraintsBase {}
+export interface TCellConstraints extends TConstraintsBase {
+ /** Preferred fraction of the table width, resolved during distribution. */
+ percentWidth?: number;
+ /**
+ * The cell's own horizontal padding and border, already included in
+ * {@link TConstraintsBase.minWidth} and {@link TCellConstraints.maxWidth}.
+ *
+ * @remarks
+ * Reported separately so that distribution can tell a column's content
+ * apart from the spacing wrapped around it. Surplus width is shared over
+ * content alone: under the collapsing border model each cell owns a
+ * different set of the boundaries it touches, and weighting the share by the
+ * whole border box would turn that bookkeeping difference into a visible
+ * one, dealing a column that merely paints one more border edge more content
+ * width than its neighbours.
+ *
+ * @defaultValue 0, when a caller builds constraints by hand.
+ */
+ horizontalSpace?: number;
+ /**
+ * The width at which this cell would stop benefiting from more space — the
+ * *maximum cell width* of {@link https://www.w3.org/TR/CSS21/tables.html#auto-table-layout | CSS 2.1 §17.5.2.2},
+ * including horizontal spacing.
+ *
+ * @remarks
+ * Like {@link TConstraintsBase.minWidth}, this is raised by an explicit
+ * `width` on the cell, so it is never below `minWidth`.
+ */
+ maxWidth: number;
+}
/**
* @public
@@ -123,23 +175,56 @@ export type TableRenderNode =
| TableFlexRowContainer
| TableRoot;
-export interface Settings {
- /**
- * When true, force the table to stretch to the available width.
- */
- forceStretch?: boolean;
+/**
+ * Everything the table layout engine needs to lay a table out: the author
+ * configuration, plus the width the document offers it.
+ *
+ * @remarks
+ * This is resolved by {@link useHtmlTableProps} and handed to
+ * {@link HTMLTable}; it is not the shape a consumer writes. Author
+ * configuration goes to `renderersProps.table` as a
+ * {@link HeuristicTablePluginConfig}, which carries no
+ * {@link Settings.contentWidth}.
+ *
+ * {@link HeuristicTablePluginConfig.growBeyondHeight} is deliberately absent:
+ * it decides whether a declared table `height` becomes a viewport or a
+ * minimum, which is a rendering choice {@link HTMLTable} reads from the config
+ * directly. Excluding it here keeps `useHtmlTableProps` from having to copy a
+ * field no layout pass reads — and makes that a compile error rather than a
+ * silent omission if it ever does.
+ *
+ * @public
+ */
+export interface Settings
+ extends Omit {
/**
- * Available width prior to scrolling.
+ * Available width at the root of the render tree, prior to scrolling.
+ *
+ * @remarks
+ * This is the width offered to the document as a whole. The horizontal
+ * spacing of the table's ancestors, and of the table itself, is subtracted
+ * from it by the table layout engine.
*/
contentWidth: number;
}
-export interface Display extends Settings {
- maxY: number;
- maxX: number;
- occupiedCoordinates: Array;
- offsetX: number;
+/**
+ * Where every cell of a table sits, and how far the matrix extends.
+ *
+ * @remarks
+ * The durable result of laying a table out, and the only part of it anything
+ * downstream reads. `maxX`/`maxY` are the last occupied column and row, so a
+ * span overrunning them is clipped rather than growing the table.
+ *
+ * Deliberately holds neither configuration nor build-time scratch: it used to
+ * extend {@link Settings} and carry the grid-filling cursor, which meant
+ * `contentWidth` changed meaning halfway through a layout and every consumer
+ * had to narrow the type back down to the three fields it wanted.
+ */
+export interface TableGrid {
cells: DisplayCell[];
+ maxX: number;
+ maxY: number;
}
/**
@@ -149,13 +234,72 @@ export interface Display extends Settings {
*/
export interface HeuristicTablePluginConfig {
/**
- * When true, force the table to stretch to the available width.
+ * When true, the table stretches to fill the width its containing block
+ * offers — `contentWidth`, less the horizontal spacing of every ancestor.
+ * When false, a table with an auto width shrinks to fit its content.
+ *
+ * @defaultValue true
*/
forceStretch?: boolean;
+ /**
+ * The average advance width of one character, as a fraction of the font
+ * size, used to estimate how wide a cell's text is.
+ *
+ * @remarks
+ * Text is never measured, only estimated: a cell's bounds are its character
+ * count times this coefficient times the font size. Raise it when tables
+ * come out too narrow and their text wraps more than it should, lower it
+ * when cells claim more width than their content occupies.
+ *
+ * @defaultValue 0.65
+ */
+ baseFontCoeff?: number;
+ /**
+ * How much wider text renders at a given font weight than at a regular one,
+ * keyed by the stringified `fontWeight`.
+ *
+ * @remarks
+ * Merged over the defaults rather than replacing them, so `{ bold: 1.05 }`
+ * retunes bold text alone and leaves the numeric weights as they were. A
+ * weight with no entry, before or after merging, costs nothing. Pass a
+ * referentially stable object — a fresh literal on every render relays out
+ * every table using it.
+ *
+ * @defaultValue \{ normal: 1, bold: 1.3, '100': 0.8 … '900': 1.5 \}
+ */
+ fontWeightCoeffs?: FontWeightCoefficients;
+ /**
+ * Override the table's border model. When omitted, an inline
+ * `border-collapse` declaration from the table is used.
+ *
+ * @defaultValue `separate`
+ */
+ borderCollapse?: 'collapse' | 'separate';
+ /**
+ * When true, an explicit table `height` is treated as a minimum and the
+ * table grows to fit taller content. When false, the table keeps that height
+ * and scrolls vertically. Rows and cells always grow to fit their content;
+ * their declared heights are minimums in either mode.
+ *
+ * @remarks
+ * Per {@link https://www.w3.org/TR/CSS21/tables.html#height-layout | CSS 2.1
+ * §17.5.3}, `height` on a `table`, `tr`, `th` or `td` box is only a minimum,
+ * so `true` is the faithful reading of the HTML. It is off by default
+ * to preserve the requested table viewport size while keeping all content
+ * accessible by scrolling.
+ *
+ * @defaultValue false
+ */
+ growBeyondHeight?: boolean;
/**
* Customize cells appearance with this function.
*
- * @param cell - The cell for which styles should be provided.
+ * Called once per cell per layout, with provisional widths measured from
+ * source styles. Returned styles are saved, included in the final layout,
+ * and reused for rendering. Width-dependent callbacks are not iterated.
+ * Keep this function referentially stable to avoid unnecessary layouts.
+ *
+ * @param cell - The cell with its provisional width and constraints.
*/
getStyleForCell?(cell: TableCell): ViewStyle | null;
}
@@ -168,7 +312,6 @@ export interface HeuristicTablePluginConfig {
export interface HTMLTableProps extends CustomRendererProps {
layout: TableLayout;
config: HeuristicTablePluginConfig;
- settings: Settings;
}
/**
@@ -181,3 +324,42 @@ export interface TableCellPropsFromParent extends PropsFromParent {
config?: HeuristicTablePluginConfig;
cell: TableCell;
}
+
+/**
+ * What {@link TreeRenderer} hands a cell renderer on top of
+ * {@link TableCellPropsFromParent}.
+ *
+ * @remarks
+ * Internal: these are the values the table already resolved, passed down so a
+ * cell need not recompute them. A custom `td`/`th` renderer reached outside
+ * this plugin's table sees only the public fields, which is why every addition
+ * here is optional or has a defined absent state.
+ */
+export interface InternalTableCellPropsFromParent
+ extends TableCellPropsFromParent,
+ TableGeometry {
+ resolvedCellStyle?: ResolvedCellStyle;
+}
+
+/**
+ * What every cell of one table shares: where the matrix ends, and how its
+ * borders were collapsed.
+ *
+ * @remarks
+ * Composed by both the render context and the props a cell receives, so the
+ * two cannot state it differently.
+ */
+export interface TableGeometry {
+ borderCollapse: boolean;
+ maxX: number;
+ maxY: number;
+ /**
+ * The wrapper edge the collapsing model resolved.
+ *
+ * @remarks
+ * Cells need this, not just their position in the matrix: an outer boundary
+ * the wrapper leaves bare is still theirs to paint.
+ */
+ tableBorderStyle: ViewStyle | null;
+ config?: HeuristicTablePluginConfig;
+}
diff --git a/packages/heuristic-table-plugin/src/useHtmlTableCellProps.ts b/packages/heuristic-table-plugin/src/useHtmlTableCellProps.ts
index 5c9902e..c48182f 100644
--- a/packages/heuristic-table-plugin/src/useHtmlTableCellProps.ts
+++ b/packages/heuristic-table-plugin/src/useHtmlTableCellProps.ts
@@ -1,5 +1,49 @@
-import { TBlock, CustomRendererProps } from '@native-html/render';
-import { TableCellPropsFromParent } from './shared-types';
+import { ViewStyle } from 'react-native';
+import {
+ TBlock,
+ CustomRendererProps,
+ PropsFromParent
+} from '@native-html/render';
+import { InternalTableCellPropsFromParent } from './shared-types';
+import relaxHeightConstraint from './helpers/relaxHeightConstraint';
+import composeCellStyle from './helpers/cellPadding';
+import { getSourceBlockStyle, resolveConfiguredCellStyle } from './helpers/cellPadding';
+import { CellVerticalAlign, DEFAULT_CELL_VERTICAL_ALIGN, resolveCellVerticalAlign } from './helpers/cellVerticalAlign';
+import { getCollapsedCellBorderStyle } from './helpers/collapseBorders';
+
+/**
+ * How a table cell emulates `vertical-align` in a column flex container.
+ *
+ * @remarks
+ * `baseline` has no native equivalent for a block box, and a cell's first line
+ * box sits at its top, so it collapses onto the same alignment as `top`.
+ */
+const justifyContentForVerticalAlign: Record<
+ CellVerticalAlign,
+ NonNullable
+> = {
+ baseline: 'flex-start',
+ bottom: 'flex-end',
+ middle: 'center',
+ top: 'flex-start'
+};
+
+/**
+ * Whether a cell renderer was reached through this plugin's own table.
+ *
+ * @remarks
+ * `PropsFromParent` extends `Record`, so the props a `td` or `th`
+ * renderer receives type-check whatever produced them. A cell rendered outside
+ * a {@link TableRenderer} — a stray `td` in a fragment, or a document that
+ * registered this plugin's `td` renderer without its `table` renderer — gets
+ * none of the layout below, and every field this hook reads is absent.
+ */
+function isTableCellPropsFromParent(
+ propsFromParent: PropsFromParent | undefined
+): propsFromParent is InternalTableCellPropsFromParent {
+ return typeof (propsFromParent as Partial)
+ ?.cell?.lenX === 'number';
+}
/**
* Customize `td` and `th` renderers while reusing default cell renderer logic.
@@ -12,21 +56,62 @@ export default function useHtmlTableCellProps({
propsFromParent,
...props
}: CustomRendererProps): CustomRendererProps {
- const { config, cell } = propsFromParent as TableCellPropsFromParent;
- const styleFromConfig = config?.getStyleForCell?.call(null, cell);
- let spanStyles = {};
- if (cell.lenY > 1) {
- spanStyles = { justifyContent: 'center' };
- }
- if (cell.lenX > 1) {
- spanStyles = { alignItems: 'center' };
+ if (!isTableCellPropsFromParent(propsFromParent)) {
+ // Nothing laid this cell out, so there is no width, no matrix position and
+ // no resolved style to apply. Render it as the plain block it is rather
+ // than reaching into a layout that was never built.
+ return { ...props, propsFromParent };
}
+ const {
+ borderCollapse,
+ config,
+ cell,
+ maxX,
+ maxY,
+ tableBorderStyle,
+ resolvedCellStyle
+ } = propsFromParent;
+ const styleFromConfig = resolvedCellStyle
+ ? resolvedCellStyle.configStyle
+ : resolveConfiguredCellStyle(config?.getStyleForCell?.(cell));
+ const verticalAlign = resolveCellVerticalAlign(props.tnode);
+ // Vertical table-cell alignment and horizontal colspan centering are
+ // independent, so keep both declarations in the same style contribution.
+ //
+ // A declared `vertical-align` is the author declaration that targets cell
+ // alignment, so it wins. Absent one, the middle default is only the
+ // user-agent stylesheet's, and may not overwrite a `justify-content` the
+ // cell already resolved from `tagsStyles` or its own CSS.
+ const alignmentStyles = {
+ justifyContent: verticalAlign
+ ? justifyContentForVerticalAlign[verticalAlign]
+ : (props.style?.justifyContent ??
+ justifyContentForVerticalAlign[DEFAULT_CELL_VERTICAL_ALIGN]),
+ ...(cell.lenX > 1 ? { alignItems: 'center' as const } : null)
+ };
+ // The collapsing model has to weigh every border the cell actually paints,
+ // config included: resolving it against the source CSS alone would strip a
+ // border that came from `getStyleForCell` and leave nothing to draw it.
+ const collapsedBorderStyle = resolvedCellStyle
+ ? resolvedCellStyle.borderStyle
+ : borderCollapse
+ ? getCollapsedCellBorderStyle(
+ cell,
+ composeCellStyle(getSourceBlockStyle(props.tnode), styleFromConfig),
+ { maxX, maxY, tableBorderStyle }
+ )
+ : null;
const style = {
- ...props.style,
- flexGrow: 1,
- flexShrink: 0,
- ...spanStyles,
- ...styleFromConfig,
+ // Cells must fit their content even inside a fixed-height table viewport.
+ ...composeCellStyle(
+ relaxHeightConstraint(props.style),
+ styleFromConfig ? relaxHeightConstraint(styleFromConfig) : null,
+ {
+ border: collapsedBorderStyle,
+ rendererDefaults: { flexGrow: 1, flexShrink: 0, ...alignmentStyles },
+ paddingSource: getSourceBlockStyle(props.tnode)
+ }
+ ),
width: cell.width,
marginLeft: 0,
marginRight: 0,
diff --git a/packages/heuristic-table-plugin/src/useHtmlTableProps.ts b/packages/heuristic-table-plugin/src/useHtmlTableProps.ts
index bdc87f2..820c772 100644
--- a/packages/heuristic-table-plugin/src/useHtmlTableProps.ts
+++ b/packages/heuristic-table-plugin/src/useHtmlTableProps.ts
@@ -1,4 +1,7 @@
-import { useMemo } from 'react';
+import { useContext, useMemo } from 'react';
+import CellContentWidthContext, {
+ CellContentBox
+} from './CellContentWidthContext';
import {
CustomRendererProps,
TBlock,
@@ -6,19 +9,31 @@ import {
useContentWidth,
useRendererProps
} from '@native-html/render';
-import { Settings, HTMLTableProps } from './shared-types';
+import { HeuristicTablePluginConfig, Settings, HTMLTableProps } from './shared-types';
import TableLayout from './TableLayout';
+/**
+ * Stands in for an absent `renderersProps.table`.
+ *
+ * @remarks
+ * Shared rather than built per render, so that a document configuring no
+ * table options still hands `HTMLTable` a stable `config` and lets its
+ * `memo` hold.
+ */
+const EMPTY_CONFIG: HeuristicTablePluginConfig = {};
+
function useTableLayout({
tnode,
- settings
+ settings,
+ cellContentBox
}: {
tnode: TNode;
settings: Settings;
+ cellContentBox?: CellContentBox;
}) {
return useMemo(() => {
- return new TableLayout(tnode, settings);
- }, [tnode, settings]);
+ return new TableLayout(tnode, settings, cellContentBox);
+ }, [tnode, settings, cellContentBox]);
}
/**
@@ -35,27 +50,61 @@ export default function useHtmlTableProps(
{ sharedProps, tnode, ...props }: CustomRendererProps,
options: {
/**
- * If present, overrides contentWidth from shared props.
+ * Lay the table out against this width instead of the document's.
+ *
+ * @remarks
+ * Also detaches the table from the cell it sits in, if any: an explicit
+ * width is taken as the whole story, so the content box of an enclosing
+ * cell is not subtracted from it as well.
*/
overrideContentWidth?: number;
} = {}
): HTMLTableProps {
const table = useRendererProps('table');
- const forceStretch = table?.forceStretch ?? false;
+ // Destructured field by field, and memoized on the fields rather than on
+ // `table`, deliberately. `RenderersPropsProvider` memoizes on the whole
+ // `renderersProps` prop, so an inline `renderersProps={{ table: {...} }}` —
+ // the form the README shows — yields a new `table` object on every render.
+ // Depending on `table` itself would therefore rebuild `settings`, and with
+ // it the entire `TableLayout`, on every render of every table.
+ const forceStretch = table?.forceStretch;
+ const baseFontCoeff = table?.baseFontCoeff;
+ const fontWeightCoeffs = table?.fontWeightCoeffs;
+ const borderCollapse = table?.borderCollapse;
+ const getStyleForCell = table?.getStyleForCell;
const sharedContentWidth = useContentWidth();
- const contentWidth =
+ const cellContentBox = useContext(CellContentWidthContext);
+ const override =
typeof options.overrideContentWidth === 'number'
? options.overrideContentWidth
- : sharedContentWidth;
+ : undefined;
+ const contentWidth = override ?? sharedContentWidth;
const settings = useMemo(
- () => ({ contentWidth, forceStretch }),
- [contentWidth, forceStretch]
+ () => ({
+ contentWidth,
+ forceStretch,
+ baseFontCoeff,
+ fontWeightCoeffs,
+ borderCollapse,
+ getStyleForCell
+ }),
+ [
+ contentWidth,
+ forceStretch,
+ baseFontCoeff,
+ fontWeightCoeffs,
+ borderCollapse,
+ getStyleForCell
+ ]
);
- const layout = useTableLayout({ tnode, settings });
+ const layout = useTableLayout({
+ tnode,
+ settings,
+ cellContentBox: override === undefined ? cellContentBox : undefined
+ });
return {
layout,
- settings,
- config: table || {},
+ config: table ?? EMPTY_CONFIG,
sharedProps,
tnode,
...props
diff --git a/packages/heuristic-table-plugin/tsconfig.test.json b/packages/heuristic-table-plugin/tsconfig.test.json
new file mode 100644
index 0000000..ff5e938
--- /dev/null
+++ b/packages/heuristic-table-plugin/tsconfig.test.json
@@ -0,0 +1,8 @@
+{
+ "extends": "../../tsconfig-base.json",
+ "compilerOptions": {
+ "types": ["jest", "node", "@testing-library/react-native"],
+ "noEmit": true
+ },
+ "include": ["src/**/__tests__/**/*.ts", "src/**/__tests__/**/*.tsx"]
+}
diff --git a/packages/plugins-core/package.json b/packages/plugins-core/package.json
index c56a706..7bc5794 100644
--- a/packages/plugins-core/package.json
+++ b/packages/plugins-core/package.json
@@ -15,7 +15,7 @@
"scripts": {
"test": "yarn test:ts && yarn test:lint && yarn test:jest",
"test:jest": "jest src/",
- "test:ts": "tsc --noEmit",
+ "test:ts": "tsc --noEmit && tsc -p src/__tests__/tsconfig.json",
"test:lint": "eslint src/",
"build": "yarn build:source && yarn build:defs",
"build:source": "bob build",
diff --git a/packages/plugins-core/src/__tests__/linkPressTargetToOnDOMLinkPressArgs.test.ts b/packages/plugins-core/src/__tests__/linkPressTargetToOnDOMLinkPressArgs.test.ts
index a1b3928..5c33d26 100644
--- a/packages/plugins-core/src/__tests__/linkPressTargetToOnDOMLinkPressArgs.test.ts
+++ b/packages/plugins-core/src/__tests__/linkPressTargetToOnDOMLinkPressArgs.test.ts
@@ -2,9 +2,7 @@ import linkPressTargetToOnDOMLinkPressArgs from '../linkPressTargetToOnDOMLinkPr
describe('linkPressTargetToOnDOMLinkPressArgs', () => {
it('should transform all attributes', () => {
- const expectedOutput: ReturnType<
- typeof linkPressTargetToOnDOMLinkPressArgs
- > = [
+ const expectedOutput = [
{ nativeEvent: {} } as any,
'https://google.com/',
{
diff --git a/packages/plugins-core/src/__tests__/tsconfig.json b/packages/plugins-core/src/__tests__/tsconfig.json
index c8a11dd..047cb48 100644
--- a/packages/plugins-core/src/__tests__/tsconfig.json
+++ b/packages/plugins-core/src/__tests__/tsconfig.json
@@ -2,8 +2,7 @@
"extends": "../../../../tsconfig-base.json",
"compilerOptions": {
"types": ["jest"],
- "noEmit": true,
- "ignoreDeprecations": "6.0"
+ "noEmit": true
},
"exclude": ["../../node_modules", "../../lib"]
}
diff --git a/packages/table-plugin/src/HTMLTable.tsx b/packages/table-plugin/src/HTMLTable.tsx
index 6d2b8fd..99d1812 100644
--- a/packages/table-plugin/src/HTMLTable.tsx
+++ b/packages/table-plugin/src/HTMLTable.tsx
@@ -84,7 +84,6 @@ function findHeight({
computeHeuristicContentHeight: (tableStats: HTMLTableStats) => number;
contentHeight: number | null;
} & HTMLTableStats) {
- console.log('findHeight');
if (typeof contentHeight === 'number') {
return computeContainerHeight({
type: 'accurate',
@@ -138,15 +137,6 @@ function useAnimatedAutoheight({
webshellProps: webViewProps as any,
resetHeightOnViewportWidthChange: false
});
- console.log({
- computeContainerHeight,
- computeHeuristicContentHeight,
- 'contentSize.height': contentSize.height,
- syncState,
- numOfChars,
- numOfColumns,
- numOfRows
- });
const containerHeight = useMemo(
() =>
findHeight({
diff --git a/yarn.lock b/yarn.lock
index 868d2e9..971beb7 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3527,31 +3527,25 @@ __metadata:
version: 0.0.0-use.local
resolution: "@native-html/heuristic-table-plugin@workspace:packages/heuristic-table-plugin"
dependencies:
- "@babel/cli": "npm:^7.28.6"
"@babel/core": "npm:^7.29.0"
+ "@babel/plugin-transform-private-methods": "npm:^7.28.6"
+ "@babel/plugin-transform-private-property-in-object": "npm:^7.28.6"
"@babel/plugin-transform-react-jsx": "npm:^7.28.6"
"@babel/preset-typescript": "npm:^7.28.5"
"@babel/runtime": "npm:^7.28.6"
"@microsoft/api-documenter": "npm:^7.29.6"
"@microsoft/api-extractor": "npm:7.57.6"
"@native-html/render": "npm:1.0.0-alpha.0"
- "@testing-library/react": "npm:16.3.2"
+ "@native-html/transient-render-engine": "npm:12.0.0-alpha.0"
"@testing-library/react-native": "npm:^13.3.3"
"@tsconfig/react-native": "npm:^3.0.9"
- "@types/html-validator": "npm:^5.0.6"
"@types/jest": "npm:^30.0.0"
- "@types/prop-types": "npm:^15.7.15"
- "@types/ramda": "npm:^0.31.1"
"@types/react": "npm:^19.2.14"
- "@types/react-native": "npm:^0.73.0"
babel-jest: "npm:^30.2.0"
- babel-plugin-inline-import: "npm:^3.0.0"
+ babel-plugin-syntax-hermes-parser: "npm:^0.32.0"
eslint: "npm:^10.0.2"
jest: "npm:^30.2.0"
metro-react-native-babel-preset: "npm:^0.77.0"
- metro-react-native-babel-transformer: "npm:^0.77.0"
- prop-types: "npm:^15.8.1"
- ramda: "npm:^0.32.0"
react: "npm:19.2.0"
react-native: "npm:0.83.2"
react-native-builder-bob: "npm:^0.40.18"