@react-x11/components 0.16.0 → 0.16.1

package/dist/html/layout/flex.js

@@ -210,6 +210,13 @@ 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');
+    // Yoga aligns the lines of a box that wraps, or of a row that aligns by
+    // baselines, in one pass of its own, which drops a margin
+    // (`lineMarginFix`) — and not those of a column that does not wrap,
+    // whatever it aligns by, whose margins Yoga keeps
+    let 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 +231,38 @@ export function layoutFlex(box, ctx, contentWidth) {
                 node.setAlignSelf(ALIGN[aligned]);
         }
     }
+    else if (baselines) {
+        // Yoga takes a row that does not wrap through that pass as well, and
+        // sets its 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. It has sized that line already, as the most any
+        // item reaches down to its bottom edge — a baseline, to Yoga — and the
+        // largest bottom margin besides, whichever items those are: a row of
+        // no height of its own was as tall as both. And it sets an item with
+        // an `auto` margin 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.
+        // With fewer than two items left that do take part, they come to their
+        // line's start (8.3), which Yoga is told as well: then nothing in the
+        // row is aligned by its baseline, Yoga takes no such pass, and the line
+        // is the row. Two or more are lined up by their baselines once those
+        // are known (`baselineLines`), and the row laid out again with none.
+        for (const { box: child, node } of items) {
+            const aligned = autoAcross(child.style, false);
+            if (aligned)
+                node.setAlignSelf(ALIGN[aligned]);
+        }
+        const aligned = items.filter(({ box: child }) => byBaseline(box.style, child.style));
+        if (aligned.length < 2) {
+            for (const { node } of aligned)
+                node.setAlignSelf(Y.ALIGN_FLEX_START);
+            if (box.style.alignItems === 'baseline') {
+                root.setAlignItems(Y.ALIGN_FLEX_START);
+            }
+            baselines = false;
+        }
+    }
     // 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 +281,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,21 +397,19 @@ 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);
+    // whether Yoga's last layout took its pass for lines (`placeItems`)
+    let lined = box.style.flexWrap !== 'nowrap' || baselines;
+    let bottom = placeItems(box, ctx, items, row, own, lined, 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;
+    const lines = baselines ? baselineLines(box.style, items) : null;
+    const started = new Set();
     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);
@@ -382,6 +420,8 @@ export function layoutFlex(box, ctx, contentWidth) {
         if (box.style.alignItems === 'baseline') {
             root.setAlignItems(Y.ALIGN_FLEX_START);
         }
+        // so it takes it only where the row wraps
+        lined = box.style.flexWrap !== 'nowrap';
         ctx.flexDepth = depth + 1;
         try {
             calculate();
@@ -389,7 +429,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 +447,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();
@@ -581,7 +621,7 @@ crossed) {
     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 +
@@ -771,6 +811,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
@@ -2462,19 +2510,22 @@ function baselineLines(style, items) {
             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) {
+        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) {
+    const aligned = item.alignSelf === AUTO ? container.alignItems : item.alignSelf;
+    return (aligned === 'baseline' &&
+        item.marginTop !== AUTO &&
+        item.marginBottom !== AUTO);
+}
 /**
  * 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`).
@@ -2587,9 +2638,12 @@ function autoAcross(item, reverse) {
  * 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.
+ * wrap: where Yoga still takes that pass for such a row, its items are
+ * laid out again without it, aligned by their baselines (`layoutFlex`).
  */
-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;
@@ -2609,6 +2663,11 @@ function lineMarginFix(container, item, node, row, started = false) {
     }
     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 +2684,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 +2827,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 +2863,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 +2924,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,9 +2978,10 @@ 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,
@@ -2922,6 +3025,10 @@ gap) {
         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 +3049,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();