@react-x11/components 0.16.0 → 0.17.0

package/dist/html/layout/flex.js

@@ -210,6 +210,9 @@ export function layoutFlex(box, ctx, contentWidth) {
         root.setWidth(contentWidth);
     const direction = box.style.direction === 'rtl' ? Y.DIRECTION_RTL : Y.DIRECTION_LTR;
     const row = box.style.flexDirection.startsWith('row');
+    const baselines = row &&
+        (box.style.alignItems === 'baseline' ||
+            items.some(({ box: child }) => child.style.alignSelf === 'baseline'));
     // An `auto` margin across a row that wraps takes the room its line has
     // past the item (CSS Flexbox 8.1, 9.6), where Yoga's pass that sets the
     // items across their lines reads an item's alignment and not its
@@ -224,6 +227,46 @@ export function layoutFlex(box, ctx, contentWidth) {
                 node.setAlignSelf(ALIGN[aligned]);
         }
     }
+    else if (baselines) {
+        // Yoga takes a row aligned by baselines through that pass whether it
+        // wraps or not, and sets an item with an `auto` margin there by its
+        // baseline: at the top, where the margin puts it at the bottom, and
+        // every item beside it as far down as its height reached. That item
+        // takes no part in aligning the line by baselines (9.4 step 8), and
+        // Yoga is told the alignment its margins come to.
+        for (const { box: child, node } of items) {
+            const aligned = autoAcross(child.style, false);
+            if (aligned)
+                node.setAlignSelf(ALIGN[aligned]);
+        }
+    }
+    // Items aligned by their baselines, which Yoga cannot see, are told they
+    // are at their lines' starts, which is where one is that shares its line
+    // with no other (8.3); those that do share one are lined up by their
+    // baselines once those are known (`baselineLines`), and the row laid out
+    // again. Told an item is aligned by its baseline, Yoga sizes each line
+    // of the row as the most any item on it reaches down to its bottom edge
+    // — a baseline, to Yoga — and the largest bottom margin besides,
+    // whichever items those are, and stretches the items on the line to
+    // that: a row of no height of its own was as tall as both, and
+    // `align-content` had that much less room to share out. And it takes a
+    // row that does not wrap through its pass for lines, which sets the one
+    // line there as tall as its items and not the row: an item centred or at
+    // the end of a row of a height was centred or ended in the items'
+    // height. Told none is, it takes neither. A row whose lines wrap in
+    // reverse is left to Yoga.
+    const started = new Set();
+    if (baselines && box.style.flexWrap !== 'wrap-reverse') {
+        for (const { box: child, node } of items) {
+            if (!byBaseline(box.style, child.style))
+                continue;
+            node.setAlignSelf(Y.ALIGN_FLEX_START);
+            started.add(child);
+        }
+        if (box.style.alignItems === 'baseline') {
+            root.setAlignItems(Y.ALIGN_FLEX_START);
+        }
+    }
     // frozen at its least size on the one line of a box that does not
     // wrap, by a basis where Yoga takes one along the main axis
     // (`applyItem`'s `setBasis`)
@@ -242,11 +285,12 @@ export function layoutFlex(box, ctx, contentWidth) {
     // `align-content` spaces out come out of its layout as tall as their
     // line and the room after it as well (`unspace`): laid out so that each
     // is as tall as its line, where the box has room to space them out in —
-    // a height, or a minimum one
+    // a height, or a minimum one — and with the lines at its start where it
+    // may be too short for them, a height or a maximum one
     const spaced = row &&
         bounded &&
         !hold.frozen &&
-        (height !== null || floor > 0) &&
+        (height !== null || floor > 0 || ceiling < Infinity) &&
         spacesLines(box.style);
     const ask = restretched.length > 0
         ? () => unstretch(items, restretched, sized, layout)
@@ -357,31 +401,23 @@ export function layoutFlex(box, ctx, contentWidth) {
             ctx.flexDepth = depth;
         }
     }
-    // Yoga aligns the lines of a box that wraps, or aligns by baselines, in
-    // one pass of its own, which drops a margin (`lineMarginFix`)
-    const baselines = box.style.alignItems === 'baseline' ||
-        items.some(({ box: child }) => child.style.alignSelf === 'baseline');
-    let bottom = placeItems(box, ctx, items, row, own, box.style.flexWrap !== 'nowrap' || baselines, contentWidth, undefined, crossed ? crossLines(box.style, items, contentWidth, columnGap) : undefined);
-    // Items aligned by their baselines, which Yoga cannot see, are aligned
-    // with their baselines known (`baselineLines`)
-    // by the flex layout again, set at their lines' starts with the margins
-    // that put their baselines together, which makes each line as tall as
-    // that does
-    const lines = row && baselines ? baselineLines(box.style, items) : null;
+    // Yoga aligns the lines of a box that wraps in one pass of its own, which
+    // drops a margin (`lineMarginFix`), and keeps the margins of one that
+    // does not, which it takes through that pass only where it is told an
+    // item is aligned by its baseline: here, never
+    const lined = box.style.flexWrap !== 'nowrap';
+    let bottom = placeItems(box, ctx, items, row, own, lined, contentWidth, started, crossed ? crossLines(box.style, items, contentWidth, columnGap) : undefined);
+    // Items that share a line and are aligned by their baselines are laid
+    // out by the flex layout again, set at their lines' starts with the
+    // margins that put their baselines together (`baselineLines`), which
+    // makes each line as tall as that does
+    const lines = started.size > 1 ? baselineLines(box.style, items) : null;
     if (lines) {
-        // every one of them, and the box's own `baseline` too, which is what
-        // takes Yoga down that pass
-        const started = new Set();
         for (const line of lines) {
-            line.forEach(({ box: child, node }, i) => {
-                node.setAlignSelf(Y.ALIGN_FLEX_START);
+            line.forEach(({ node }, i) => {
                 node.setMargin(Y.EDGE_TOP, line.margins[i]);
-                started.add(child);
             });
         }
-        if (box.style.alignItems === 'baseline') {
-            root.setAlignItems(Y.ALIGN_FLEX_START);
-        }
         ctx.flexDepth = depth + 1;
         try {
             calculate();
@@ -389,7 +425,7 @@ export function layoutFlex(box, ctx, contentWidth) {
         finally {
             ctx.flexDepth = depth;
         }
-        bottom = placeItems(box, ctx, items, row, own, box.style.flexWrap !== 'nowrap', contentWidth, started);
+        bottom = placeItems(box, ctx, items, row, own, lined, contentWidth, started);
     }
     // A replaced item with a ratio that is stretched across a line of a
     // definite size takes its flex base size from the stretched one through
@@ -407,7 +443,7 @@ export function layoutFlex(box, ctx, contentWidth) {
         finally {
             ctx.flexDepth = depth;
         }
-        bottom = placeItems(box, ctx, items, row, own, box.style.flexWrap !== 'nowrap' || baselines, contentWidth);
+        bottom = placeItems(box, ctx, items, row, own, lined, contentWidth, started);
     }
     const contentHeight = root.getComputedHeight();
     root.freeRecursive();
@@ -578,14 +614,23 @@ crossed) {
     let bottom = 0;
     // the lines of a row that wraps in reverse are turned round to run up it
     const reverse = row && box.style.flexWrap === 'wrap-reverse';
+    // the left edge a column's items aligned by baselines share, where it
+    // does not wrap (`baselineEdge`); a column that wraps is `crossed`
+    const edge = row || box.style.flexWrap !== 'nowrap'
+        ? NaN
+        : baselineEdge(box.style, items);
     for (const { box: child, node, laid } of items) {
         const placed = crossed?.get(child);
         const across = lined && !placed
-            ? lineMarginFix(box.style, child, node, row, started?.has(child))
+            ? lineMarginFix(box.style, child, node, row, own, started?.has(child))
             : 0;
         const itemHeight = row ? heightOf(node, laid) : laid.main;
         const left = box.contentX +
-            (placed ? placed.x : node.getComputedLeft() + (row ? 0 : across));
+            (placed
+                ? placed.x
+                : !Number.isNaN(edge) && byBaseline(box.style, child.style, false)
+                    ? edge
+                    : node.getComputedLeft() + (row ? 0 : across));
         // which Yoga turns an item round in by the height it laid it out at, and
         // not the one it is (`unspace`)
         const top = box.contentY +
@@ -771,6 +816,14 @@ weighed) {
         node.setFlexShrink(style.flexShrink);
     if (style.alignSelf !== AUTO)
         node.setAlignSelf(ALIGN[style.alignSelf] ?? Y.ALIGN_AUTO);
+    // `stretch` sets an item whose height is a percentage of none at its
+    // line's start, as tall as its content (`heightOfNone`), where Yoga,
+    // which is handed no height for it, stretched it across the line
+    if (row && box.parent && heightOfNone(style, own)) {
+        const align = style.alignSelf === AUTO ? box.parent.style.alignItems : style.alignSelf;
+        if (align === 'stretch')
+            node.setAlignSelf(Y.ALIGN_FLEX_START);
+    }
     // Yoga's sizes are border boxes, as `box-sizing: border-box` has them;
     // a `content-box` length is the content's, and the item's padding and
     // border go on top of it
@@ -2427,15 +2480,15 @@ function contentBottom(box) {
  * its bottom edge, so it lined them up by their bottoms. With the items laid
  * out, each line's, and for each the top margin that sets it at the line's
  * start with its first baseline where the lowest-reaching one's is — or
- * null where no line has two to align.
+ * null where no line has two to align. Not for a row whose lines wrap in
+ * reverse, which grow from their ends and are left to Yoga (`layoutFlex`).
  */
 function baselineLines(style, items) {
-    // a line that grows from its end is aligned from there, and left to Yoga
-    if (style.flexWrap === 'wrap-reverse')
-        return null;
     const wraps = style.flexWrap !== 'nowrap';
-    // along a line the items go the way the main axis does, and the next
-    // line starts where one does not
+    // along a line the items go the way the main axis does, each margin box
+    // after the last one's end, and the next line starts before it (9.3): at
+    // the line's start, where an item with a margin before it was further
+    // along than one alone on the line before
     const back = (style.flexDirection === 'row-reverse') !== (style.direction === 'rtl');
     const out = [];
     let line = [];
@@ -2456,25 +2509,64 @@ function baselineLines(style, items) {
         out.push(Object.assign(line, { margins }));
     };
     for (const item of items) {
-        const box = item.box;
-        if (wraps && line.length && (back ? box.x >= last : box.x <= last)) {
+        const { box, node } = item;
+        const left = node.getComputedLeft() - node.getComputedMargin(Y.EDGE_LEFT);
+        const right = node.getComputedLeft() +
+            node.getComputedWidth() +
+            node.getComputedMargin(Y.EDGE_RIGHT);
+        if (wraps &&
+            line.length &&
+            (back ? right > last + 0.01 : left < last - 0.01)) {
             close();
             line = [];
         }
-        last = box.x;
-        const own = box.style;
-        const aligned = own.alignSelf === AUTO ? style.alignItems : own.alignSelf;
-        // an `auto` margin across the line takes it over alignment
-        if (aligned === 'baseline' &&
-            own.marginTop !== AUTO &&
-            own.marginBottom !== AUTO) {
+        last = back ? left : right;
+        if (byBaseline(style, box.style))
             line.push(item);
-        }
     }
     close();
     // one alone on its line is at its start already
     return several ? out : null;
 }
+/** Whether an item takes part in aligning its line by baselines (CSS
+ *  Flexbox 8.3, 9.4 step 8): aligned by its baseline, with no `auto`
+ *  margin across the line, which takes it over its alignment. */
+function byBaseline(container, item, 
+/** Whether the line is a row's, across which its margins are its top
+ *  and bottom ones; a column's are its left and right ones. */
+row = true) {
+    const aligned = item.alignSelf === AUTO ? container.alignItems : item.alignSelf;
+    return (aligned === 'baseline' &&
+        (row ? item.marginTop : item.marginLeft) !== AUTO &&
+        (row ? item.marginBottom : item.marginRight) !== AUTO);
+}
+/**
+ * Where the items a column that does not wrap aligns by baselines have
+ * their left edges, from its content box's: NaN where it has none.
+ *
+ * A horizontal item has no baseline across a column, and one is made from
+ * its border box — the line-under edge of the vertical writing mode it is
+ * taken to have, its left, whichever way its text runs (CSS Box Alignment
+ * 3, 9.1). So the items share their left edges, and are set together at
+ * the line's cross start, the column's left or, where it runs right to
+ * left, its right (9.3; CSS Flexbox 8.3), as Chrome sets them: as far from
+ * there as the most any of them reaches past its edge on that side. Yoga
+ * never aligns a column by baselines, and sets each at its line's start
+ * with its margin there, so that is the furthest any of them is from the
+ * start: the rightmost left edge, or from the right the leftmost.
+ */
+function baselineEdge(container, items) {
+    const rtl = container.direction === 'rtl';
+    let edge = NaN;
+    for (const { box, node } of items) {
+        if (!byBaseline(container, box.style, false))
+            continue;
+        const left = node.getComputedLeft();
+        if (!(rtl ? left >= edge : left <= edge))
+            edge = left;
+    }
+    return edge;
+}
 /**
  * Whether Yoga made a line of a row that wraps the row's height, where its
  * items make it another (CSS Flexbox 9.4, steps 7 and 8; `layoutFlex`).
@@ -2571,13 +2663,13 @@ function autoAcross(item, reverse) {
 }
 /**
  * How far an item is from where it belongs across its line, where Yoga
- * (3.2.1) aligned the lines in the pass it takes for a box that wraps or
- * aligns by baselines: it sets an item aligned to its line's start there
- * as though it had no margin at that side, and one centred as though it had
- * none at either — `items-start` in a wrapping row put every card's top
- * margin under it. By the margin at the start of the line's cross axis, and
- * by half what it exceeds the one at the end by, as Yoga holds them: for an
- * item set at its line's start (`started`), its baseline's.
+ * (3.2.1) aligned the lines in the pass it takes for a box that wraps: it
+ * sets an item aligned to its line's start there as though it had no
+ * margin at that side, and one centred as though it had none at either —
+ * `items-start` in a wrapping row put every card's top margin under it. By
+ * the margin at the start of the line's cross axis, and by half what it
+ * exceeds the one at the end by, as Yoga holds them: for an item set at
+ * its line's start (`started`), its baseline's.
  *
  * A row whose lines wrap in reverse Yoga lays out as though they wrapped
  * forward, and then turns each item over across the box, its margins with
@@ -2586,10 +2678,11 @@ function autoAcross(item, reverse) {
  * stretched, is its bottom margin down from its line's top where it is its
  * top one; and one centred, half the difference. A column's, whose cross
  * axis runs right to left, or that wraps in reverse, is left as Yoga has
- * it, and so is an item an `auto` margin aligns in a row that does not
- * wrap.
+ * it, and so is an item an `auto` margin aligns across a column.
  */
-function lineMarginFix(container, item, node, row, started = false) {
+function lineMarginFix(container, item, node, row, 
+/** Whether the flex box has a definite height. */
+own, started = false) {
     const reverse = container.flexWrap === 'wrap-reverse';
     if (!row && (reverse || container.direction === 'rtl'))
         return 0;
@@ -2602,13 +2695,15 @@ function lineMarginFix(container, item, node, row, started = false) {
     if (started)
         align = 'flex-start';
     else if (lead === AUTO || trail === AUTO) {
-        align =
-            row && container.flexWrap !== 'nowrap'
-                ? autoAcross(style, reverse)
-                : null;
+        align = row ? autoAcross(style, reverse) : null;
     }
     else {
         align = style.alignSelf === AUTO ? container.alignItems : style.alignSelf;
+        // which sets one whose height is a percentage of none at its line's
+        // start, as Yoga is told it does (`applyItem`)
+        if (align === 'stretch' && row && heightOfNone(style, own)) {
+            align = 'flex-start';
+        }
     }
     const leading = node.getComputedMargin(row ? Y.EDGE_TOP : Y.EDGE_LEFT);
     const trailing = node.getComputedMargin(row ? Y.EDGE_BOTTOM : Y.EDGE_RIGHT);
@@ -2625,12 +2720,15 @@ function lineMarginFix(container, item, node, row, started = false) {
 }
 /** An item's first baseline, down from its border edge: its content's
  *  first line's, or where it has none, or is replaced, one synthesized
- *  from its border box — its bottom edge. */
+ *  from its border box — its bottom edge. Past that edge where the line
+ *  is: only a scroll container's is held to its box (`firstBaselineIn`),
+ *  and an item shorter than its text, or whose padding puts the text
+ *  under it, sits on its text where it had sat on its bottom. */
 function itemBaseline(item) {
     if (item.kind !== 'replaced') {
         const found = firstBaselineIn(item);
         if (found !== null)
-            return Math.min(found - item.y, item.height);
+            return found - item.y;
     }
     return item.height;
 }
@@ -2765,12 +2863,31 @@ function spacesLines(style) {
  * makes too, and is kept. Where they do, Yoga is asked again as the row
  * is, for where the lines and the items are, and the heights are kept from
  * the first layout.
+ *
+ * And where the lines are taller than the row, `space-around` and
+ * `space-evenly` fall back to `safe center`, which sets them at the row's
+ * own start, its top (CSS Box Alignment 3, 4.3 and 5.1; CSS Flexbox 8.4).
+ * Yoga falls back to `flex-start` for both, which is the bottom where the
+ * lines run bottom to top, and ran them out past the row's top. It sets
+ * the lines of a row that wraps in reverse top to bottom and turns them
+ * over once they are set, so it is asked for them at `flex-end` there,
+ * which comes out at the top — where the lines it set at their start, or
+ * spaced, reach past the row's bottom.
  */
 function unspace(root, items, 
 /** Whether the lines run bottom to top. */
 reverse, layout) {
     for (const { laid } of items)
         laid.unstretched = NaN;
+    const lines = root.getAlignContent();
+    // where the lines start at the row's bottom, its start is their end
+    const safe = reverse &&
+        (lines === Y.ALIGN_SPACE_AROUND || lines === Y.ALIGN_SPACE_EVENLY);
+    const atEnd = () => {
+        root.setAlignContent(Y.ALIGN_FLEX_END);
+        layout();
+        root.setAlignContent(lines);
+    };
     // each item Yoga stretches: `stretch`, with no height of its own
     const align = root.getAlignItems();
     const stretched = items.filter(({ node }) => {
@@ -2782,15 +2899,23 @@ reverse, layout) {
     });
     if (stretched.length === 0) {
         layout();
+        // spaced where there is room, and else at their start, past the bottom
+        if (safe &&
+            linesReach(root, items, reverse) - root.getComputedHeight() > NEAR) {
+            atEnd();
+        }
         return;
     }
-    const lines = root.getAlignContent();
     root.setAlignContent(Y.ALIGN_FLEX_START);
     layout();
     root.setAlignContent(lines);
-    if (!(root.getComputedHeight() - linesReach(root, items, reverse) > NEAR)) {
+    const room = root.getComputedHeight() - linesReach(root, items, reverse);
+    if (safe && room < -NEAR) {
+        atEnd();
         return;
     }
+    if (!(room > NEAR))
+        return;
     const heights = stretched.map(({ node }) => node.getComputedHeight());
     layout();
     stretched.forEach(({ node, laid }, i) => {
@@ -2835,6 +2960,19 @@ function linesReach(root, items, reverse) {
     }
     return reach;
 }
+/**
+ * Whether a row item's height is a percentage of a height its flex box has
+ * none of. That is `auto` to the item's size (CSS 2.1 10.5), and is not
+ * handed to Yoga (`applyItem`), but it is not `auto` to its alignment:
+ * `stretch` stretches an item whose height computes to `auto` (CSS Flexbox
+ * 8.3), and this one's computes to the percentage. Such an item is as tall
+ * as its content, set at its line's start, which is what Yoga is told.
+ */
+function heightOfNone(style, 
+/** Whether the flex box has a definite height. */
+own) {
+    return !own && isPct(style.height);
+}
 /** Whether an item is stretched across its line: `stretch`, its own or its
  *  container's, with no height of its own and no `auto` margin across. */
 function stretches(box, container, 
@@ -2876,15 +3014,17 @@ function wrapsColumn(style, width) {
  * where they are short of the box; `center` and `flex-end` whether they are
  * or not, so that lines wider than the box run past both its sides, or its
  * start; and the spacing values only where there is room, setting the lines
- * at the box's start where there is none (CSS Box Alignment 3, 4.3:
- * `space-between` falls back to `flex-start`, `space-around` and
- * `space-evenly` to `safe center`, the start where the lines overflow). An
+ * at their start where there is none, or at the box's (CSS Box Alignment 3,
+ * 4.3: `space-between` falls back to `flex-start`, `space-around` and
+ * `space-evenly` to `safe center`, the box's own start where the lines
+ * overflow, and not theirs where they wrap in reverse). An
  * item with an `auto` margin across its line takes the room the line has
  * past it on that side (8.1), and none where there is none; a stretched
  * item is as wide as its line less its margins, within its limits (9.4,
- * step 11), and as tall as the column made it; and the rest are where
- * `align-self` says, a baseline at the line's start, as a column has none
- * across it to align by.
+ * step 11), and as tall as the column made it; those aligned by baselines
+ * share their left edges, set together at the line's start, where a column
+ * that does not wrap sets them (`baselineEdge`); and the rest are where
+ * `align-self` says.
  */
 function crossLines(style, items, 
 /** The flex box's content width. */
@@ -2915,13 +3055,36 @@ gap) {
         lead.push(fromRight ? r : l);
         trail.push(fromRight ? l : r);
     });
-    const across = lines.map((line) => line.reduce((most, i) => Math.max(most, sizes[i] + lead[i] + trail[i]), 0));
+    // A line is as wide as its widest item, margins and all, and as the
+    // items it aligns by baselines come to, sharing their left edges: the
+    // most any reaches from the line's start to that edge, and the most any
+    // reaches past it (`baselineEdge`; 9.4 step 8). `reach` is each line's
+    // first, where those items' left edges are from its start.
+    const reach = [];
+    const across = lines.map((line) => {
+        let most = 0;
+        let before = -Infinity;
+        let after = -Infinity;
+        for (const i of line) {
+            most = Math.max(most, sizes[i] + lead[i] + trail[i]);
+            if (!byBaseline(style, items[i].box.style, false))
+                continue;
+            before = Math.max(before, lead[i] + (fromRight ? sizes[i] : 0));
+            after = Math.max(after, trail[i] + (fromRight ? 0 : sizes[i]));
+        }
+        reach.push(before);
+        return Math.max(most, before + after);
+    });
     const count = lines.length;
     let room = width - gap * (count - 1);
     for (const size of across)
         room -= size;
     let at = 0;
     let between = gap;
+    // Where they are wider than the box, `space-around` and `space-evenly`
+    // set the lines at the box's own start (`safe center`), which is where
+    // their last one ends where they wrap in reverse: they run past its end
+    const reverse = style.flexWrap === 'wrap-reverse';
     switch (crossContent(style)) {
         case 'flex-end':
             at = room;
@@ -2942,12 +3105,16 @@ gap) {
                 at = room / count / 2;
                 between += room / count;
             }
+            else if (reverse)
+                at = room;
             break;
         case 'space-evenly':
             if (room > 0) {
                 at = room / (count + 1);
                 between += room / (count + 1);
             }
+            else if (reverse)
+                at = room;
             break;
     }
     const placed = new Map();
@@ -2976,6 +3143,9 @@ gap) {
                     itemWidth = least;
                 itemWidth = Math.max(itemWidth, box.horizontalExtra);
             }
+            else if (byBaseline(style, own, false)) {
+                offset = reach[k] - (fromRight ? itemWidth : 0);
+            }
             else {
                 const align = own.alignSelf === AUTO ? style.alignItems : own.alignSelf;
                 if (align === 'center')