@ng-native/fabric 0.18.1 → 0.18.2

package/dist/engine.d.ts

@@ -1172,12 +1172,30 @@ export declare class Engine implements HostEngine {
      * keyboard's top edge, for a field the keyboard would otherwise hide.
      *
      * Measured in the window, all of it, so the scroll view's offset needs no tracking: it is how
-     * far its content's top edge is above its own.
+     * far its content's top edge is above its own. In a sheet on iOS the window is the sheet's: see
+     * `sheetTop`.
+     *
+     * A scroll view under a navigation bar rests scrolled above zero, by the inset the bar adds, and
+     * is not scrolled up past where it rests, nor past zero from below it: how far above zero it can
+     * go is known only while it is there.
      */
     reveal(node: EngineNode, options?: {
         visibleBottom?: number;
         margin?: number;
     }): void;
+    /**
+     * How far down the window the iOS sheet a node is presented in starts, where that is known, so
+     * the keyboard's `visibleBottom` can be brought into the sheet. React Native measures a view in a
+     * presented sheet from the sheet's own top: the sheet's place on the screen is UIKit's, and the
+     * shadow tree has the sheet at the top of the window.
+     *
+     * A sheet as wide as the window is attached to its bottom edge, so it starts the window's height
+     * less its own down. One that is narrower (an iPad's form sheet, or one floating at a partial
+     * detent) could be anywhere, and one no taller than the room above the keyboard may have risen
+     * over it, so for those nothing is known and nothing is taken off. On Android the sheet is laid
+     * out in the shadow tree, so nothing is either.
+     */
+    private sheetTop;
     /**
      * The view a scroll view's content is in: an element that scrolls its overflow holds its
      * children in one of its own, and any other scroll view's first child is it.
@@ -3531,8 +3549,8 @@ export declare class Engine implements HostEngine {
      * `unstable_*EventPriority` constants) is read into the facade but not acted on. Angular's
      * zoneless scheduler already flushes on a microtask, which is soon enough for taps. It stops
      * being soon enough for a controlled TextInput, where the echo has to beat the next
-     * keystroke. `mostRecentEventCount` covers that today by letting native reject a stale write;
-     * a synchronous flush for discrete priority is the fix if it ever stops being enough.
+     * keystroke. The text input's event count covers that today by letting native reject a stale
+     * write; a synchronous flush for discrete priority is the fix if it ever stops being enough.
      *
      * **Nothing thrown here may escape.** Fabric calls this synchronously from C++
      * (`UIManagerBinding::dispatchEventToJS`), often from inside a mounting transaction, and a throw

package/dist/engine.js

@@ -341,6 +341,8 @@ const ENGINE_PROPS = new Set([
     'disabled',
     'intrinsicSize',
     'styleOverride',
+    // A text field's latest event count, committed as `mostRecentEventCount`: see `echoedEventCount`.
+    'latestEventCount',
     ...Object.values(EVENT_OPT_IN_PROPS),
     ...Object.values(VIEW_EVENT_OPT_IN_PROPS).flatMap((props) => Object.values(props)),
 ]);
@@ -3442,6 +3444,65 @@ function alignMultiline(viewName, props) {
         return;
     props['textAlignVertical'] ??= 'top';
 }
+/** The props React Native builds a text field's text attributes from, as `BaseTextProps` reads them. */
+const TEXT_ATTRIBUTES = [
+    'color',
+    'backgroundColor',
+    'opacity',
+    'fontFamily',
+    'fontSize',
+    'fontStyle',
+    'fontWeight',
+    'fontVariant',
+    'fontVariationSettings',
+    'allowFontScaling',
+    'maxFontSizeMultiplier',
+    'dynamicTypeRamp',
+    'letterSpacing',
+    'lineHeight',
+    'textAlign',
+    'writingDirection',
+    'direction',
+    'lineBreakStrategyIOS',
+    'lineBreakModeIOS',
+    'textDecorationLine',
+    'textDecorationColor',
+    'textDecorationStyle',
+    'textShadowColor',
+    'textShadowOffset',
+    'textShadowRadius',
+    'textTransform',
+];
+/**
+ * The prop a text field that echoes its text puts its latest event count in, for
+ * `echoedEventCount` to commit as `mostRecentEventCount`. It never reaches native.
+ */
+const LATEST_EVENT_COUNT = 'latestEventCount';
+/**
+ * The event count a text field that echoes its text is committed with: the latest on Android, and
+ * on iOS 0, the count native starts at, but for a commit that changes a multiline field's text
+ * style, which carries the latest.
+ *
+ * iOS takes the `text` prop only with the count it holds, and then replaces the field's text unless
+ * the two compare equal, attributes and all. UIKit gives an empty field's first typed text a
+ * paragraph style whose line break strategy differs from the one RN compares it with, so an echo
+ * of that very text replaces it, and the keystrokes queued behind the replace are lost. Text from
+ * code goes as `setTextAndSelection` instead, which carries the count. A restyle still needs the
+ * replace on a multiline field: a single-line one restyles its text from its new default
+ * attributes, a multiline one only takes them for what is typed next.
+ *
+ * A field that sets `mostRecentEventCount` itself, and never echoes, is left as it is.
+ */
+function echoedEventCount(viewName, props, previous) {
+    const latest = props[LATEST_EVENT_COUNT];
+    if (latest === undefined)
+        return;
+    delete props[LATEST_EVENT_COUNT];
+    const restyled = props['multiline'] === true &&
+        previous !== undefined &&
+        TEXT_ATTRIBUTES.some((key) => !Object.is(previous[key], props[key]));
+    props['mostRecentEventCount'] = viewName !== 'TextInput' || restyled ? latest : 0;
+}
 /** The props of a run of text that change how tall its line is drawn. */
 const SIZES_A_RUN = new Set(['style', 'allowFontScaling', 'maxFontSizeMultiplier']);
 /**
@@ -3631,6 +3692,12 @@ function seenByCss(merged) {
 /** A screen of a native stack, which is what the swipe back is a gesture of. */
 const STACK_SCREEN = 'RNSScreen';
 const FIXED_BOUNDARIES = new Set([MODAL_HOST, STACK_SCREEN, 'RNSFullWindowOverlay']);
+/**
+ * The presentations that can leave a sheet short of the top of the screen on iOS: a screen's
+ * `stackPresentation` (`modal` is a page sheet from iOS 13) or a modal host's `presentationStyle`.
+ * The others cover the screen, or what they are presented over.
+ */
+const SHEETS = new Set(['modal', 'formSheet', 'pageSheet']);
 /** What an element's `touch-action` is: bound on it, or from the rules it matches. */
 function touchActionOf(node) {
     return inlineOf(node)['touchAction'] ?? node.styleCache?.style['touchAction'];
@@ -6011,7 +6078,12 @@ export class Engine {
      * keyboard's top edge, for a field the keyboard would otherwise hide.
      *
      * Measured in the window, all of it, so the scroll view's offset needs no tracking: it is how
-     * far its content's top edge is above its own.
+     * far its content's top edge is above its own. In a sheet on iOS the window is the sheet's: see
+     * `sheetTop`.
+     *
+     * A scroll view under a navigation bar rests scrolled above zero, by the inset the bar adds, and
+     * is not scrolled up past where it rests, nor past zero from below it: how far above zero it can
+     * go is known only while it is there.
      */
     reveal(node, options = {}) {
         const scroll = scrollingDown(node);
@@ -6019,23 +6091,68 @@ export class Engine {
         if (!scroll || !content)
             return;
         const margin = options.margin ?? 16;
+        const { visibleBottom } = options;
+        const covered = visibleBottom === undefined ? Infinity : visibleBottom - this.sheetTop(node, visibleBottom);
         this.measure(scroll, (view) => {
             this.measureHandle(content, (inner) => {
                 this.measure(node, (target) => {
                     const offset = view.y - inner.y;
                     const top = view.y + margin;
-                    const bottom = Math.min(view.y + view.height, options.visibleBottom ?? Infinity) - margin;
+                    const bottom = Math.min(view.y + view.height, covered) - margin;
                     let by = 0;
                     if (target.y + target.height > bottom)
                         by = target.y + target.height - bottom;
                     else if (target.y < top)
                         by = target.y - top;
                     if (by !== 0)
-                        this.dispatchCommand(scroll, 'scrollTo', [0, Math.max(0, offset + by), true]);
+                        this.dispatchCommand(scroll, 'scrollTo', [
+                            0,
+                            Math.max(Math.min(0, offset), offset + by),
+                            true,
+                        ]);
                 });
             });
         });
     }
+    /**
+     * How far down the window the iOS sheet a node is presented in starts, where that is known, so
+     * the keyboard's `visibleBottom` can be brought into the sheet. React Native measures a view in a
+     * presented sheet from the sheet's own top: the sheet's place on the screen is UIKit's, and the
+     * shadow tree has the sheet at the top of the window.
+     *
+     * A sheet as wide as the window is attached to its bottom edge, so it starts the window's height
+     * less its own down. One that is narrower (an iPad's form sheet, or one floating at a partial
+     * detent) could be anywhere, and one no taller than the room above the keyboard may have risen
+     * over it, so for those nothing is known and nothing is taken off. On Android the sheet is laid
+     * out in the shadow tree, so nothing is either.
+     */
+    sheetTop(node, keyboardTop) {
+        if (platformOS !== 'ios')
+            return 0;
+        for (let up = node.parent; up; up = up.parent) {
+            if (up.nodeKind !== 'element')
+                continue;
+            const viewName = viewNameOf(up);
+            // React Native's own modal measures what it holds from its own top, wherever it is written.
+            const modal = viewName === MODAL_HOST;
+            const presented = modal
+                ? up.props['presentationStyle']
+                : viewName === STACK_SCREEN && up.props['stackPresentation'];
+            // A screen pushed in a stack is measured in whatever it is pushed in.
+            if (!modal && (!presented || presented === 'push'))
+                continue;
+            if (!SHEETS.has(String(presented)))
+                return 0;
+            let top = 0;
+            this.measure(up, (sheet) => {
+                if (sheet.width < this.viewportSize.width || sheet.height <= keyboardTop)
+                    return;
+                top = Math.max(0, this.viewportSize.height - (modal ? 0 : sheet.y) - sheet.height);
+            });
+            return top;
+        }
+        return 0;
+    }
     /**
      * The view a scroll view's content is in: an element that scrolls its overflow holds its
      * children in one of its own, and any other scroll view's first child is it.
@@ -10323,6 +10440,8 @@ export class Engine {
         // On iOS: Android's field says the baseline of the line it is sized and centred by.
         if (field)
             centreSingleLine(viewName, merged, this.fontScale, isOnBaseline(node, viewName));
+        if (field)
+            echoedEventCount(viewName, merged, node.committed?.props);
         // After a transition, which eases the basis as the basis it was written as.
         basisAsSize(node, merged);
         // Each asked of the key it reads first, here and in `engineLayout`: it is asked of every node
@@ -14006,8 +14125,8 @@ export class Engine {
      * `unstable_*EventPriority` constants) is read into the facade but not acted on. Angular's
      * zoneless scheduler already flushes on a microtask, which is soon enough for taps. It stops
      * being soon enough for a controlled TextInput, where the echo has to beat the next
-     * keystroke. `mostRecentEventCount` covers that today by letting native reject a stale write;
-     * a synchronous flush for discrete priority is the fix if it ever stops being enough.
+     * keystroke. The text input's event count covers that today by letting native reject a stale
+     * write; a synchronous flush for discrete priority is the fix if it ever stops being enough.
      *
      * **Nothing thrown here may escape.** Fabric calls this synchronously from C++
      * (`UIManagerBinding::dispatchEventToJS`), often from inside a mounting transaction, and a throw