react-native-laminar 1.4.2 → 1.4.4

package/lib/commonjs/hooks/use-inline-auto-width.js

@@ -15,10 +15,19 @@ const useInlineAutoWidth = ({
   measurementKey
 }) => {
   const widthValue = (0, _reactNativeReanimated.useSharedValue)(0);
+  const hasBootstrappedWidth = (0, _reactNativeReanimated.useSharedValue)(false);
   const measuredWidthRef = (0, _react.useRef)(null);
   const bootstrappedRef = (0, _react.useRef)(false);
   const widthCacheRef = (0, _react.useRef)(new Map());
-  const [hasBootstrappedWidth, setHasBootstrappedWidth] = (0, _react.useState)(false);
+  const hasCapturedVisibleLayoutRef = (0, _react.useRef)(false);
+  const initialMeasurementKeyRef = (0, _react.useRef)(null);
+  const firstProbeRef = (0, _react.useRef)(null);
+  const latestProbeRef = (0, _react.useRef)(null);
+  const bootstrapTimerRef = (0, _react.useRef)(null);
+  const [readyMeasurementKey, setReadyMeasurementKey] = (0, _react.useState)(null);
+  const markMeasurementReady = (0, _react.useCallback)(key => {
+    setReadyMeasurementKey(currentKey => currentKey === key ? currentKey : key);
+  }, []);
 
   // the first measurement establishes the shell without animating from zero
   const applyWidth = (0, _react.useCallback)(nextWidth => {
@@ -29,11 +38,62 @@ const useInlineAutoWidth = ({
     if (!bootstrappedRef.current) {
       bootstrappedRef.current = true;
       widthValue.value = nextWidth;
-      setHasBootstrappedWidth(true);
+      hasBootstrappedWidth.value = true;
       return;
     }
     widthValue.value = driveToWidth(nextWidth);
   }, [driveToWidth, widthValue]);
+  const bootstrapFromProbe = (0, _react.useCallback)(() => {
+    bootstrapTimerRef.current = null;
+    if (hasCapturedVisibleLayoutRef.current) {
+      return;
+    }
+    const firstProbe = firstProbeRef.current;
+    if (!firstProbe) {
+      return;
+    }
+
+    // The visible layout did not arrive in time, so use the first probe as a
+    // safe fallback. A later probe can still animate from this baseline.
+    hasCapturedVisibleLayoutRef.current = true;
+    initialMeasurementKeyRef.current = firstProbe.key;
+    applyWidth(firstProbe.width);
+    const latestProbe = latestProbeRef.current;
+    if (latestProbe && latestProbe.key !== firstProbe.key) {
+      // The target width is already cached. Defer its animation until the
+      // ready render so the shell and the new glyph row start together.
+      markMeasurementReady(latestProbe.key);
+    } else {
+      markMeasurementReady(firstProbe.key);
+    }
+  }, [applyWidth, markMeasurementReady]);
+  const captureVisibleLayout = (0, _react.useCallback)(event => {
+    if (!enabled || hasCapturedVisibleLayoutRef.current) {
+      return;
+    }
+    if (bootstrapTimerRef.current !== null) {
+      clearTimeout(bootstrapTimerRef.current);
+      bootstrapTimerRef.current = null;
+    }
+    hasCapturedVisibleLayoutRef.current = true;
+    // bootstrap from the visible tree so the first explicit width matches
+    // the geometry that was already painted to the user
+    const nextWidth = Math.max(0, event.nativeEvent.layout.width);
+    // retain the visible width for the initial key so a later cache hit does
+    // not reintroduce the probe-to-visible mismatch
+    widthCacheRef.current.delete(measurementKey);
+    widthCacheRef.current.set(measurementKey, nextWidth);
+    const firstProbe = firstProbeRef.current;
+    if (firstProbe && firstProbe.key !== measurementKey) {
+      initialMeasurementKeyRef.current = firstProbe.key;
+      applyWidth(firstProbe.width);
+      markMeasurementReady(measurementKey);
+      return;
+    }
+    initialMeasurementKeyRef.current = measurementKey;
+    applyWidth(nextWidth);
+    markMeasurementReady(measurementKey);
+  }, [applyWidth, enabled, markMeasurementReady, measurementKey]);
   const captureLayout = (0, _react.useCallback)(event => {
     if (!enabled) {
       return;
@@ -41,36 +101,63 @@ const useInlineAutoWidth = ({
 
     // round up so fractional native measurements cannot clip the final glyph
     const nextWidth = Math.max(0, Math.ceil(event.nativeEvent.layout.width));
-
-    // delete before setting so a repeated key moves to the most recent position
-    widthCacheRef.current.delete(measurementKey);
-    if (widthCacheRef.current.size >= WIDTH_CACHE_LIMIT) {
-      // map insertion order gives the lru entry at the front
-      const oldestKey = widthCacheRef.current.keys().next().value;
-      if (oldestKey !== undefined) {
-        widthCacheRef.current.delete(oldestKey);
+    const isInitialMeasurement = initialMeasurementKeyRef.current === measurementKey;
+    if (!isInitialMeasurement) {
+      // delete before setting so a repeated key moves to the most recent position
+      widthCacheRef.current.delete(measurementKey);
+      if (widthCacheRef.current.size >= WIDTH_CACHE_LIMIT) {
+        // map insertion order gives the lru entry at the front
+        const oldestKey = widthCacheRef.current.keys().next().value;
+        if (oldestKey !== undefined) {
+          widthCacheRef.current.delete(oldestKey);
+        }
       }
+      widthCacheRef.current.set(measurementKey, nextWidth);
     }
-    widthCacheRef.current.set(measurementKey, nextWidth);
-    applyWidth(nextWidth);
-  }, [applyWidth, enabled, measurementKey]);
+    const probe = {
+      key: measurementKey,
+      width: nextWidth
+    };
+    if (!firstProbeRef.current) {
+      firstProbeRef.current = probe;
+    }
+    latestProbeRef.current = probe;
+    if (!hasCapturedVisibleLayoutRef.current && bootstrapTimerRef.current === null) {
+      bootstrapTimerRef.current = setTimeout(bootstrapFromProbe, 0);
+    }
+
+    // Do not let the initial probe override the visible first frame.
+    if (hasCapturedVisibleLayoutRef.current && !isInitialMeasurement) {
+      // captureLayout only records the target. The cache effect applies the
+      // animation during the render that releases the new glyph row.
+      markMeasurementReady(measurementKey);
+    }
+  }, [applyWidth, bootstrapFromProbe, enabled, markMeasurementReady, measurementKey]);
   const cachedWidth = widthCacheRef.current.get(measurementKey);
 
   // a cached width can restore the shell before the hidden probe renders again
-  (0, _react.useEffect)(() => {
-    if (enabled && cachedWidth !== undefined) {
+  (0, _react.useLayoutEffect)(() => {
+    if (enabled && cachedWidth !== undefined && hasCapturedVisibleLayoutRef.current) {
       // promote cache hits so active states stay available longer
       widthCacheRef.current.delete(measurementKey);
       widthCacheRef.current.set(measurementKey, cachedWidth);
       applyWidth(cachedWidth);
+      markMeasurementReady(measurementKey);
+    }
+  }, [applyWidth, cachedWidth, enabled, markMeasurementReady, measurementKey]);
+  (0, _react.useEffect)(() => () => {
+    if (bootstrapTimerRef.current !== null) {
+      clearTimeout(bootstrapTimerRef.current);
     }
-  }, [applyWidth, cachedWidth, enabled, measurementKey]);
-  const animatedWidthStyle = (0, _reactNativeReanimated.useAnimatedStyle)(() => enabled && hasBootstrappedWidth ? {
+  }, []);
+  const animatedWidthStyle = (0, _reactNativeReanimated.useAnimatedStyle)(() => enabled && hasBootstrappedWidth.value ? {
     width: widthValue.value
-  } : {}, [enabled, hasBootstrappedWidth]);
+  } : {}, [enabled]);
   return {
     captureLayout,
+    captureVisibleLayout,
     animatedWidthStyle,
+    isReady: !enabled || cachedWidth !== undefined || readyMeasurementKey === measurementKey,
     shouldMeasure: enabled && cachedWidth === undefined
   };
 };

package/lib/commonjs/hooks/use-inline-auto-width.js.map

@@ -1 +1 @@
-{"version":3,"names":["_react","require","_reactNativeReanimated","WIDTH_CACHE_LIMIT","useInlineAutoWidth","enabled","driveToWidth","measurementKey","widthValue","useSharedValue","measuredWidthRef","useRef","bootstrappedRef","widthCacheRef","Map","hasBootstrappedWidth","setHasBootstrappedWidth","useState","applyWidth","useCallback","nextWidth","current","value","captureLayout","event","Math","max","ceil","nativeEvent","layout","width","delete","size","oldestKey","keys","next","undefined","set","cachedWidth","get","useEffect","animatedWidthStyle","useAnimatedStyle","shouldMeasure","exports"],"sourceRoot":"../../../src","sources":["hooks/use-inline-auto-width.ts"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["_react","require","_reactNativeReanimated","WIDTH_CACHE_LIMIT","useInlineAutoWidth","enabled","driveToWidth","measurementKey","widthValue","useSharedValue","hasBootstrappedWidth","measuredWidthRef","useRef","bootstrappedRef","widthCacheRef","Map","hasCapturedVisibleLayoutRef","initialMeasurementKeyRef","firstProbeRef","latestProbeRef","bootstrapTimerRef","readyMeasurementKey","setReadyMeasurementKey","useState","markMeasurementReady","useCallback","key","currentKey","applyWidth","nextWidth","current","value","bootstrapFromProbe","firstProbe","width","latestProbe","captureVisibleLayout","event","clearTimeout","Math","max","nativeEvent","layout","delete","set","captureLayout","ceil","isInitialMeasurement","size","oldestKey","keys","next","undefined","probe","setTimeout","cachedWidth","get","useLayoutEffect","useEffect","animatedWidthStyle","useAnimatedStyle","isReady","shouldMeasure","exports"],"sourceRoot":"../../../src","sources":["hooks/use-inline-auto-width.ts"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,OAAA;AAQA,IAAAC,sBAAA,GAAAD,OAAA;AAaA,MAAME,iBAAiB,GAAG,EAAE;;AAE5B;AACO,MAAMC,kBAAkB,GAAGA,CAAC;EACjCC,OAAO;EACPC,YAAY;EACZC;AACM,CAAC,KAAK;EACZ,MAAMC,UAAU,GAAG,IAAAC,qCAAc,EAAC,CAAC,CAAC;EACpC,MAAMC,oBAAoB,GAAG,IAAAD,qCAAc,EAAC,KAAK,CAAC;EAClD,MAAME,gBAAgB,GAAG,IAAAC,aAAM,EAAgB,IAAI,CAAC;EACpD,MAAMC,eAAe,GAAG,IAAAD,aAAM,EAAC,KAAK,CAAC;EACrC,MAAME,aAAa,GAAG,IAAAF,aAAM,EAAC,IAAIG,GAAG,CAAiB,CAAC,CAAC;EACvD,MAAMC,2BAA2B,GAAG,IAAAJ,aAAM,EAAC,KAAK,CAAC;EACjD,MAAMK,wBAAwB,GAAG,IAAAL,aAAM,EAAgB,IAAI,CAAC;EAC5D,MAAMM,aAAa,GAAG,IAAAN,aAAM,EAAsB,IAAI,CAAC;EACvD,MAAMO,cAAc,GAAG,IAAAP,aAAM,EAAsB,IAAI,CAAC;EACxD,MAAMQ,iBAAiB,GAAG,IAAAR,aAAM,EAAuC,IAAI,CAAC;EAC5E,MAAM,CAACS,mBAAmB,EAAEC,sBAAsB,CAAC,GAAG,IAAAC,eAAQ,EAC5D,IACF,CAAC;EAED,MAAMC,oBAAoB,GAAG,IAAAC,kBAAW,EAAEC,GAAW,IAAK;IACxDJ,sBAAsB,CAAEK,UAAU,IAChCA,UAAU,KAAKD,GAAG,GAAGC,UAAU,GAAGD,GACpC,CAAC;EACH,CAAC,EAAE,EAAE,CAAC;;EAEN;EACA,MAAME,UAAU,GAAG,IAAAH,kBAAW,EAC3BI,SAAiB,IAAK;IACrB,IAAIlB,gBAAgB,CAACmB,OAAO,KAAKD,SAAS,EAAE;MAC1C;IACF;IAEAlB,gBAAgB,CAACmB,OAAO,GAAGD,SAAS;IAEpC,IAAI,CAAChB,eAAe,CAACiB,OAAO,EAAE;MAC5BjB,eAAe,CAACiB,OAAO,GAAG,IAAI;MAC9BtB,UAAU,CAACuB,KAAK,GAAGF,SAAS;MAC5BnB,oBAAoB,CAACqB,KAAK,GAAG,IAAI;MACjC;IACF;IAEAvB,UAAU,CAACuB,KAAK,GAAGzB,YAAY,CAACuB,SAAS,CAAC;EAC5C,CAAC,EACD,CAACvB,YAAY,EAAEE,UAAU,CAC3B,CAAC;EAED,MAAMwB,kBAAkB,GAAG,IAAAP,kBAAW,EAAC,MAAM;IAC3CL,iBAAiB,CAACU,OAAO,GAAG,IAAI;IAEhC,IAAId,2BAA2B,CAACc,OAAO,EAAE;MACvC;IACF;IAEA,MAAMG,UAAU,GAAGf,aAAa,CAACY,OAAO;IACxC,IAAI,CAACG,UAAU,EAAE;MACf;IACF;;IAEA;IACA;IACAjB,2BAA2B,CAACc,OAAO,GAAG,IAAI;IAC1Cb,wBAAwB,CAACa,OAAO,GAAGG,UAAU,CAACP,GAAG;IACjDE,UAAU,CAACK,UAAU,CAACC,KAAK,CAAC;IAE5B,MAAMC,WAAW,GAAGhB,cAAc,CAACW,OAAO;IAC1C,IAAIK,WAAW,IAAIA,WAAW,CAACT,GAAG,KAAKO,UAAU,CAACP,GAAG,EAAE;MACrD;MACA;MACAF,oBAAoB,CAACW,WAAW,CAACT,GAAG,CAAC;IACvC,CAAC,MAAM;MACLF,oBAAoB,CAACS,UAAU,CAACP,GAAG,CAAC;IACtC;EACF,CAAC,EAAE,CAACE,UAAU,EAAEJ,oBAAoB,CAAC,CAAC;EAEtC,MAAMY,oBAAoB,GAAG,IAAAX,kBAAW,EACrCY,KAAwB,IAAK;IAC5B,IAAI,CAAChC,OAAO,IAAIW,2BAA2B,CAACc,OAAO,EAAE;MACnD;IACF;IAEA,IAAIV,iBAAiB,CAACU,OAAO,KAAK,IAAI,EAAE;MACtCQ,YAAY,CAAClB,iBAAiB,CAACU,OAAO,CAAC;MACvCV,iBAAiB,CAACU,OAAO,GAAG,IAAI;IAClC;IAEAd,2BAA2B,CAACc,OAAO,GAAG,IAAI;IAC1C;IACA;IACA,MAAMD,SAAS,GAAGU,IAAI,CAACC,GAAG,CAAC,CAAC,EAAEH,KAAK,CAACI,WAAW,CAACC,MAAM,CAACR,KAAK,CAAC;IAC7D;IACA;IACApB,aAAa,CAACgB,OAAO,CAACa,MAAM,CAACpC,cAAc,CAAC;IAC5CO,aAAa,CAACgB,OAAO,CAACc,GAAG,CAACrC,cAAc,EAAEsB,SAAS,CAAC;IACpD,MAAMI,UAAU,GAAGf,aAAa,CAACY,OAAO;IACxC,IAAIG,UAAU,IAAIA,UAAU,CAACP,GAAG,KAAKnB,cAAc,EAAE;MACnDU,wBAAwB,CAACa,OAAO,GAAGG,UAAU,CAACP,GAAG;MACjDE,UAAU,CAACK,UAAU,CAACC,KAAK,CAAC;MAC5BV,oBAAoB,CAACjB,cAAc,CAAC;MACpC;IACF;IAEAU,wBAAwB,CAACa,OAAO,GAAGvB,cAAc;IACjDqB,UAAU,CAACC,SAAS,CAAC;IACrBL,oBAAoB,CAACjB,cAAc,CAAC;EACtC,CAAC,EACD,CAACqB,UAAU,EAAEvB,OAAO,EAAEmB,oBAAoB,EAAEjB,cAAc,CAC5D,CAAC;EAED,MAAMsC,aAAa,GAAG,IAAApB,kBAAW,EAC9BY,KAAwB,IAAK;IAC5B,IAAI,CAAChC,OAAO,EAAE;MACZ;IACF;;IAEA;IACA,MAAMwB,SAAS,GAAGU,IAAI,CAACC,GAAG,CAAC,CAAC,EAAED,IAAI,CAACO,IAAI,CAACT,KAAK,CAACI,WAAW,CAACC,MAAM,CAACR,KAAK,CAAC,CAAC;IAExE,MAAMa,oBAAoB,GACxB9B,wBAAwB,CAACa,OAAO,KAAKvB,cAAc;IAErD,IAAI,CAACwC,oBAAoB,EAAE;MACzB;MACAjC,aAAa,CAACgB,OAAO,CAACa,MAAM,CAACpC,cAAc,CAAC;MAE5C,IAAIO,aAAa,CAACgB,OAAO,CAACkB,IAAI,IAAI7C,iBAAiB,EAAE;QACnD;QACA,MAAM8C,SAAS,GAAGnC,aAAa,CAACgB,OAAO,CAACoB,IAAI,CAAC,CAAC,CAACC,IAAI,CAAC,CAAC,CAACpB,KAAK;QAE3D,IAAIkB,SAAS,KAAKG,SAAS,EAAE;UAC3BtC,aAAa,CAACgB,OAAO,CAACa,MAAM,CAACM,SAAS,CAAC;QACzC;MACF;MAEAnC,aAAa,CAACgB,OAAO,CAACc,GAAG,CAACrC,cAAc,EAAEsB,SAAS,CAAC;IACtD;IAEA,MAAMwB,KAAK,GAAG;MAAE3B,GAAG,EAAEnB,cAAc;MAAE2B,KAAK,EAAEL;IAAU,CAAC;IACvD,IAAI,CAACX,aAAa,CAACY,OAAO,EAAE;MAC1BZ,aAAa,CAACY,OAAO,GAAGuB,KAAK;IAC/B;IACAlC,cAAc,CAACW,OAAO,GAAGuB,KAAK;IAE9B,IACE,CAACrC,2BAA2B,CAACc,OAAO,IACpCV,iBAAiB,CAACU,OAAO,KAAK,IAAI,EAClC;MACAV,iBAAiB,CAACU,OAAO,GAAGwB,UAAU,CAACtB,kBAAkB,EAAE,CAAC,CAAC;IAC/D;;IAEA;IACA,IAAIhB,2BAA2B,CAACc,OAAO,IAAI,CAACiB,oBAAoB,EAAE;MAChE;MACA;MACAvB,oBAAoB,CAACjB,cAAc,CAAC;IACtC;EACF,CAAC,EACD,CACEqB,UAAU,EACVI,kBAAkB,EAClB3B,OAAO,EACPmB,oBAAoB,EACpBjB,cAAc,CAElB,CAAC;EAED,MAAMgD,WAAW,GAAGzC,aAAa,CAACgB,OAAO,CAAC0B,GAAG,CAACjD,cAAc,CAAC;;EAE7D;EACA,IAAAkD,sBAAe,EAAC,MAAM;IACpB,IACEpD,OAAO,IACPkD,WAAW,KAAKH,SAAS,IACzBpC,2BAA2B,CAACc,OAAO,EACnC;MACA;MACAhB,aAAa,CAACgB,OAAO,CAACa,MAAM,CAACpC,cAAc,CAAC;MAC5CO,aAAa,CAACgB,OAAO,CAACc,GAAG,CAACrC,cAAc,EAAEgD,WAAW,CAAC;MACtD3B,UAAU,CAAC2B,WAAW,CAAC;MACvB/B,oBAAoB,CAACjB,cAAc,CAAC;IACtC;EACF,CAAC,EAAE,CACDqB,UAAU,EACV2B,WAAW,EACXlD,OAAO,EACPmB,oBAAoB,EACpBjB,cAAc,CACf,CAAC;EAEF,IAAAmD,gBAAS,EACP,MAAM,MAAM;IACV,IAAItC,iBAAiB,CAACU,OAAO,KAAK,IAAI,EAAE;MACtCQ,YAAY,CAAClB,iBAAiB,CAACU,OAAO,CAAC;IACzC;EACF,CAAC,EACD,EACF,CAAC;EAED,MAAM6B,kBAAkB,GAAG,IAAAC,uCAAgB,EACzC,MACEvD,OAAO,IAAIK,oBAAoB,CAACqB,KAAK,GACjC;IACEG,KAAK,EAAE1B,UAAU,CAACuB;EACpB,CAAC,GACD,CAAC,CAAC,EACR,CAAC1B,OAAO,CACV,CAAC;EAED,OAAO;IACLwC,aAAa;IACbT,oBAAoB;IACpBuB,kBAAkB;IAClBE,OAAO,EACL,CAACxD,OAAO,IACRkD,WAAW,KAAKH,SAAS,IACzB/B,mBAAmB,KAAKd,cAAc;IACxCuD,aAAa,EAAEzD,OAAO,IAAIkD,WAAW,KAAKH;EAC5C,CAAC;AACH,CAAC;AAACW,OAAA,CAAA3D,kBAAA,GAAAA,kBAAA","ignoreList":[]}

package/lib/commonjs/hooks/use-text-glyphs.js

@@ -7,25 +7,21 @@ exports.useTextGlyphs = void 0;
 var _react = require("react");
 var _displayUnits = require("../model/display-units");
 var _textKeys = require("../model/text-keys");
-// build the inline token stream that lets text and leading content share one ledger
+// build text glyphs independently, then prepend a separately keyed leading token
 const useTextGlyphs = (value, namespace, leading, leadingKey) => {
-  const units = (0, _react.useMemo)(() => [
-  // the map key becomes the identity when leading content is state keyed
-  ...(leading ? [{
-    kind: "element",
-    signature: `leading:${String(leadingKey ?? "default")}`,
-    element: leading
-  }] : []), ...(0, _displayUnits.splitDisplayUnits)(value).map(unit => ({
+  // Reconcile text independently so inserting/removing a leading token cannot
+  // change which repeated text glyphs the LCS ledger preserves.
+  const textUnits = (0, _react.useMemo)(() => [...(0, _displayUnits.splitDisplayUnits)(value).map(unit => ({
     kind: "text",
     signature: `text:${unit}`,
     value: unit
-  }))], [leading, leadingKey, value]);
-  const signatures = units.map(unit => unit.signature);
+  }))], [value]);
+  const signatures = textUnits.map(unit => unit.signature);
   const ledgerRef = (0, _react.useRef)({
     previousValue: value,
     previousSignatures: signatures,
-    glyphKeys: units.map((_, index) => `${namespace}:c${index}`),
-    nextSeed: units.length
+    glyphKeys: textUnits.map((_, index) => `${namespace}:c${index}`),
+    nextSeed: textUnits.length
   });
 
   // reconcile only when a token signature changes so stable glyphs keep their views
@@ -41,16 +37,23 @@ const useTextGlyphs = (value, namespace, leading, leadingKey) => {
   }
   const glyphKeys = ledgerRef.current.glyphKeys;
 
-  // normalize spaces at the edge where tokens become renderable glyphs
-  return (0, _react.useMemo)(() => units.map((unit, index) => ({
-    id: glyphKeys[index],
-    kind: unit.kind,
-    ...(unit.kind === "text" ? {
+  // normalize spaces at the edge where tokens become renderable glyphs, then
+  // prepend the leading token with an identity that is independent of text
+  return (0, _react.useMemo)(() => {
+    const textGlyphs = textUnits.map((unit, index) => ({
+      id: glyphKeys[index],
+      kind: "text",
       value: (0, _displayUnits.normalizeDisplayUnit)(unit.value)
-    } : {
-      element: unit.element
-    })
-  })), [glyphKeys, units]);
+    }));
+    if (!leading) {
+      return textGlyphs;
+    }
+    return [{
+      id: `${namespace}:leading:${String(leadingKey ?? "default")}`,
+      kind: "element",
+      element: leading
+    }, ...textGlyphs];
+  }, [glyphKeys, leading, leadingKey, namespace, textUnits]);
 };
 exports.useTextGlyphs = useTextGlyphs;
 //# sourceMappingURL=use-text-glyphs.js.map

package/lib/commonjs/hooks/use-text-glyphs.js.map

@@ -1 +1 @@
-{"version":3,"names":["_react","require","_displayUnits","_textKeys","useTextGlyphs","value","namespace","leading","leadingKey","units","useMemo","kind","signature","String","element","splitDisplayUnits","map","unit","signatures","ledgerRef","useRef","previousValue","previousSignatures","glyphKeys","_","index","nextSeed","length","current","some","nextLedger","reconcileTextGlyphKeys","id","normalizeDisplayUnit","exports"],"sourceRoot":"../../../src","sources":["hooks/use-text-glyphs.ts"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,OAAA;AACA,IAAAC,aAAA,GAAAD,OAAA;AAIA,IAAAE,SAAA,GAAAF,OAAA;AAcA;AACO,MAAMG,aAAa,GAAGA,CAC3BC,KAAa,EACbC,SAAiB,EACjBC,OAAmB,EACnBC,UAA4B,KACF;EAC1B,MAAMC,KAAK,GAAG,IAAAC,cAAO,EACnB,MAAM;EACJ;EACA,IAAIH,OAAO,GACP,CACE;IACEI,IAAI,EAAE,SAAS;IACfC,SAAS,EAAE,WAAWC,MAAM,CAACL,UAAU,IAAI,SAAS,CAAC,EAAE;IACvDM,OAAO,EAAEP;EACX,CAAC,CACF,GACD,EAAE,CAAC,EACP,GAAG,IAAAQ,+BAAiB,EAACV,KAAK,CAAC,CAACW,GAAG,CAAEC,IAAI,KAAM;IACzCN,IAAI,EAAE,MAAe;IACrBC,SAAS,EAAE,QAAQK,IAAI,EAAE;IACzBZ,KAAK,EAAEY;EACT,CAAC,CAAC,CAAC,CACJ,EACD,CAACV,OAAO,EAAEC,UAAU,EAAEH,KAAK,CAC7B,CAAC;EACD,MAAMa,UAAU,GAAGT,KAAK,CAACO,GAAG,CAAEC,IAAI,IAAKA,IAAI,CAACL,SAAS,CAAC;EACtD,MAAMO,SAAS,GAAG,IAAAC,aAAM,EAAkB;IACxCC,aAAa,EAAEhB,KAAK;IACpBiB,kBAAkB,EAAEJ,UAAU;IAC9BK,SAAS,EAAEd,KAAK,CAACO,GAAG,CAAC,CAACQ,CAAC,EAAEC,KAAK,KAAK,GAAGnB,SAAS,KAAKmB,KAAK,EAAE,CAAC;IAC5DC,QAAQ,EAAEjB,KAAK,CAACkB;EAClB,CAAC,CAAC;;EAEF;EACA,IACEtB,KAAK,KAAKc,SAAS,CAACS,OAAO,CAACP,aAAa,IACzCH,UAAU,CAACS,MAAM,KAAKR,SAAS,CAACS,OAAO,CAACN,kBAAkB,CAACK,MAAM,IACjET,UAAU,CAACW,IAAI,CACb,CAACjB,SAAS,EAAEa,KAAK,KAAKb,SAAS,KAAKO,SAAS,CAACS,OAAO,CAACN,kBAAkB,CAACG,KAAK,CAChF,CAAC,EACD;IACA;IACA,MAAMK,UAAU,GAAG,IAAAC,gCAAsB,EACvCZ,SAAS,CAACS,OAAO,CAACN,kBAAkB,EACpCJ,UAAU,EACVC,SAAS,CAACS,OAAO,CAACL,SAAS,EAC3BJ,SAAS,CAACS,OAAO,CAACF,QAAQ,EAC1BpB,SACF,CAAC;IAEDa,SAAS,CAACS,OAAO,GAAG;MAClBP,aAAa,EAAEhB,KAAK;MACpBiB,kBAAkB,EAAEJ,UAAU;MAC9BK,SAAS,EAAEO,UAAU,CAACP,SAAS;MAC/BG,QAAQ,EAAEI,UAAU,CAACJ;IACvB,CAAC;EACH;EAEA,MAAMH,SAAS,GAAGJ,SAAS,CAACS,OAAO,CAACL,SAAS;;EAE7C;EACA,OAAO,IAAAb,cAAO,EACZ,MACED,KAAK,CAACO,GAAG,CAAC,CAACC,IAAI,EAAEQ,KAAK,MAAM;IAC1BO,EAAE,EAAET,SAAS,CAACE,KAAK,CAAC;IACpBd,IAAI,EAAEM,IAAI,CAACN,IAAI;IACf,IAAIM,IAAI,CAACN,IAAI,KAAK,MAAM,GACpB;MAAEN,KAAK,EAAE,IAAA4B,kCAAoB,EAAChB,IAAI,CAACZ,KAAK;IAAE,CAAC,GAC3C;MAAES,OAAO,EAAEG,IAAI,CAACH;IAAQ,CAAC;EAC/B,CAAC,CAAC,CAAC,EACL,CAACS,SAAS,EAAEd,KAAK,CACnB,CAAC;AACH,CAAC;AAACyB,OAAA,CAAA9B,aAAA,GAAAA,aAAA","ignoreList":[]}
+{"version":3,"names":["_react","require","_displayUnits","_textKeys","useTextGlyphs","value","namespace","leading","leadingKey","textUnits","useMemo","splitDisplayUnits","map","unit","kind","signature","signatures","ledgerRef","useRef","previousValue","previousSignatures","glyphKeys","_","index","nextSeed","length","current","some","nextLedger","reconcileTextGlyphKeys","textGlyphs","id","normalizeDisplayUnit","String","element","exports"],"sourceRoot":"../../../src","sources":["hooks/use-text-glyphs.ts"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,OAAA;AACA,IAAAC,aAAA,GAAAD,OAAA;AAIA,IAAAE,SAAA,GAAAF,OAAA;AAgBA;AACO,MAAMG,aAAa,GAAGA,CAC3BC,KAAa,EACbC,SAAiB,EACjBC,OAAmB,EACnBC,UAA4B,KACF;EAC1B;EACA;EACA,MAAMC,SAAS,GAAG,IAAAC,cAAO,EACvB,MAAM,CACJ,GAAG,IAAAC,+BAAiB,EAACN,KAAK,CAAC,CAACO,GAAG,CAAEC,IAAI,KAAM;IACzCC,IAAI,EAAE,MAAe;IACrBC,SAAS,EAAE,QAAQF,IAAI,EAAE;IACzBR,KAAK,EAAEQ;EACT,CAAC,CAAC,CAAC,CACJ,EACD,CAACR,KAAK,CACR,CAAC;EACD,MAAMW,UAAU,GAAGP,SAAS,CAACG,GAAG,CAAEC,IAAI,IAAKA,IAAI,CAACE,SAAS,CAAC;EAC1D,MAAME,SAAS,GAAG,IAAAC,aAAM,EAAkB;IACxCC,aAAa,EAAEd,KAAK;IACpBe,kBAAkB,EAAEJ,UAAU;IAC9BK,SAAS,EAAEZ,SAAS,CAACG,GAAG,CAAC,CAACU,CAAC,EAAEC,KAAK,KAAK,GAAGjB,SAAS,KAAKiB,KAAK,EAAE,CAAC;IAChEC,QAAQ,EAAEf,SAAS,CAACgB;EACtB,CAAC,CAAC;;EAEF;EACA,IACEpB,KAAK,KAAKY,SAAS,CAACS,OAAO,CAACP,aAAa,IACzCH,UAAU,CAACS,MAAM,KAAKR,SAAS,CAACS,OAAO,CAACN,kBAAkB,CAACK,MAAM,IACjET,UAAU,CAACW,IAAI,CACb,CAACZ,SAAS,EAAEQ,KAAK,KAAKR,SAAS,KAAKE,SAAS,CAACS,OAAO,CAACN,kBAAkB,CAACG,KAAK,CAChF,CAAC,EACD;IACA;IACA,MAAMK,UAAU,GAAG,IAAAC,gCAAsB,EACvCZ,SAAS,CAACS,OAAO,CAACN,kBAAkB,EACpCJ,UAAU,EACVC,SAAS,CAACS,OAAO,CAACL,SAAS,EAC3BJ,SAAS,CAACS,OAAO,CAACF,QAAQ,EAC1BlB,SACF,CAAC;IAEDW,SAAS,CAACS,OAAO,GAAG;MAClBP,aAAa,EAAEd,KAAK;MACpBe,kBAAkB,EAAEJ,UAAU;MAC9BK,SAAS,EAAEO,UAAU,CAACP,SAAS;MAC/BG,QAAQ,EAAEI,UAAU,CAACJ;IACvB,CAAC;EACH;EAEA,MAAMH,SAAS,GAAGJ,SAAS,CAACS,OAAO,CAACL,SAAS;;EAE7C;EACA;EACA,OAAO,IAAAX,cAAO,EACZ,MAAM;IACJ,MAAMoB,UAAU,GAAGrB,SAAS,CAACG,GAAG,CAAC,CAACC,IAAI,EAAEU,KAAK,MAAM;MACjDQ,EAAE,EAAEV,SAAS,CAACE,KAAK,CAAC;MACpBT,IAAI,EAAE,MAAe;MACrBT,KAAK,EAAE,IAAA2B,kCAAoB,EAACnB,IAAI,CAACR,KAAK;IACxC,CAAC,CAAC,CAAC;IAEH,IAAI,CAACE,OAAO,EAAE;MACZ,OAAOuB,UAAU;IACnB;IAEA,OAAO,CACL;MACEC,EAAE,EAAE,GAAGzB,SAAS,YAAY2B,MAAM,CAACzB,UAAU,IAAI,SAAS,CAAC,EAAE;MAC7DM,IAAI,EAAE,SAAkB;MACxBoB,OAAO,EAAE3B;IACX,CAAC,EACD,GAAGuB,UAAU,CACd;EACH,CAAC,EACD,CAACT,SAAS,EAAEd,OAAO,EAAEC,UAAU,EAAEF,SAAS,EAAEG,SAAS,CACvD,CAAC;AACH,CAAC;AAAC0B,OAAA,CAAA/B,aAAA,GAAAA,aAAA","ignoreList":[]}

package/lib/commonjs/index.js

@@ -66,7 +66,9 @@ const Laminar = exports.Laminar = /*#__PURE__*/_react.default.memo(function Lami
   }, [leadingGap, resolvedLeading, resolvedLeadingKey, resolvedValue, textStyle, variant]);
   const {
     captureLayout,
+    captureVisibleLayout,
     animatedWidthStyle,
+    isReady: isAutoSizeReady,
     shouldMeasure
   } = (0, _useInlineAutoWidth.useInlineAutoWidth)({
     enabled: autoSize,
@@ -86,6 +88,7 @@ const Laminar = exports.Laminar = /*#__PURE__*/_react.default.memo(function Lami
     align: align,
     containerStyle: containerStyle,
     animatedWidthStyle: animatedWidthStyle,
+    onVisibleLayout: autoSize ? captureVisibleLayout : undefined,
     measurement: shouldMeasure ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
       onLayout: captureLayout,
       style: {
@@ -103,7 +106,7 @@ const Laminar = exports.Laminar = /*#__PURE__*/_react.default.memo(function Lami
         style: textStyle,
         children: (0, _displayUnits.normalizeDisplayUnit)(unit)
       }, `${unit}-${index}`))]
-    }) : undefined,
+    }, measurementKey) : undefined,
     children: variant === "slots" ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_slotsRun.SlotsRun, {
       value: resolvedValue,
       motionRecipe: motionRecipe,
@@ -125,8 +128,10 @@ const Laminar = exports.Laminar = /*#__PURE__*/_react.default.memo(function Lami
       motionRecipe: motionRecipe,
       align: align,
       leading: resolvedLeading,
+      leadingLayoutGroup: Boolean(leading),
       leadingKey: resolvedLeadingKey,
       leadingGap: leadingGap,
+      ready: !autoSize || isAutoSizeReady,
       textStyle: textStyle,
       className: className
     })

package/lib/commonjs/index.js.map

@@ -1 +1 @@
-{"version":3,"names":["_react","_interopRequireDefault","require","_reactNative","_useInlineAutoWidth","_useMorphMotion","_useMorphTextStyle","_displayUnits","_morphViewport","_numberRun","_slotsRun","_textRun","_jsxRuntime","e","__esModule","default","Laminar","exports","React","memo","text","variant","fontSize","color","align","className","leading","leadingKey","leadingGap","style","containerStyle","fontStyle","animationDuration","animationPreset","stagger","autoSize","clipToBounds","resolvedValue","String","leadingMap","isLeadingMap","undefined","resolvedLeading","resolvedLeadingKey","motionRecipe","staggerMs","useMorphMotion","textStyle","useMorphTextStyle","measurementKey","useMemo","flattenedStyle","StyleSheet","flatten","JSON","stringify","fontFamily","fontWeight","fontVariant","letterSpacing","lineHeight","textTransform","Boolean","captureLayout","animatedWidthStyle","shouldMeasure","useInlineAutoWidth","enabled","driveToWidth","driveNumber","measuredValue","splitDisplayUnits","map","normalizeDisplayUnit","join","jsx","MorphViewport","measurement","jsxs","View","onLayout","flexDirection","alignSelf","children","alignItems","justifyContent","marginRight","unit","index","Text","SlotsRun","value","NumberRun","TextRun","isValidElement","Array","isArray"],"sourceRoot":"../../src","sources":["index.tsx"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["_react","_interopRequireDefault","require","_reactNative","_useInlineAutoWidth","_useMorphMotion","_useMorphTextStyle","_displayUnits","_morphViewport","_numberRun","_slotsRun","_textRun","_jsxRuntime","e","__esModule","default","Laminar","exports","React","memo","text","variant","fontSize","color","align","className","leading","leadingKey","leadingGap","style","containerStyle","fontStyle","animationDuration","animationPreset","stagger","autoSize","clipToBounds","resolvedValue","String","leadingMap","isLeadingMap","undefined","resolvedLeading","resolvedLeadingKey","motionRecipe","staggerMs","useMorphMotion","textStyle","useMorphTextStyle","measurementKey","useMemo","flattenedStyle","StyleSheet","flatten","JSON","stringify","fontFamily","fontWeight","fontVariant","letterSpacing","lineHeight","textTransform","Boolean","captureLayout","captureVisibleLayout","animatedWidthStyle","isReady","isAutoSizeReady","shouldMeasure","useInlineAutoWidth","enabled","driveToWidth","driveNumber","measuredValue","splitDisplayUnits","map","normalizeDisplayUnit","join","jsx","MorphViewport","onVisibleLayout","measurement","jsxs","View","onLayout","flexDirection","alignSelf","children","alignItems","justifyContent","marginRight","unit","index","Text","SlotsRun","value","NumberRun","TextRun","leadingLayoutGroup","ready","isValidElement","Array","isArray"],"sourceRoot":"../../src","sources":["index.tsx"],"mappings":"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","ignoreList":[]}

package/lib/commonjs/view/glyph-run.js

@@ -14,6 +14,11 @@ const rowStyle = {
   alignItems: "center",
   alignSelf: "flex-start"
 };
+const textRowStyle = {
+  flexDirection: "row",
+  alignItems: "center",
+  alignSelf: "flex-start"
+};
 const rowAlignStyles = {
   left: {
     alignSelf: "flex-start"
@@ -30,6 +35,8 @@ const rowAlignStyles = {
 const GlyphRun = exports.GlyphRun = /*#__PURE__*/_react.default.memo(({
   glyphs,
   layoutTransition,
+  leadingLayoutTransition,
+  leadingLayoutGroup = false,
   enterTransition,
   elementEnterTransition,
   exitTransition,
@@ -38,30 +45,42 @@ const GlyphRun = exports.GlyphRun = /*#__PURE__*/_react.default.memo(({
   align,
   textStyle,
   className
-}) =>
-/*#__PURE__*/
-// each token keeps its own view so reanimated can animate only changed content
-(0, _jsxRuntime.jsx)(_reactNative.View, {
-  style: [rowStyle, rowAlignStyles[align]],
-  children: glyphs.map((glyph, glyphIndex) => glyph.kind === "element" ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeReanimated.default.View, {
-    layout: layoutTransition,
-    entering: elementEnterTransition ?? enterTransition,
-    exiting: elementExitTransition ?? exitTransition,
-    style: [{
-      alignItems: "center",
-      justifyContent: "center"
-    }, glyphIndex === 0 && (leadingGap ?? 0) > 0 ? {
-      marginRight: leadingGap
-    } : undefined],
-    children: glyph.element
-  }, glyph.id) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeReanimated.default.Text, {
+}) => {
+  // The leading token is always first. Keep it outside the text row so its
+  // appearance moves the text as one unit instead of reflowing every glyph.
+  const leadingGlyph = glyphs[0]?.kind === "element" ? glyphs[0] : undefined;
+  const textGlyphs = leadingGlyph ? glyphs.slice(1) : glyphs;
+  const shouldGroupText = Boolean(leadingGlyph) || Boolean(leadingLayoutTransition) || leadingLayoutGroup;
+  const renderTextGlyph = glyph => glyph.kind === "text" ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeReanimated.default.Text, {
     layout: layoutTransition,
     entering: enterTransition,
     exiting: exitTransition,
     style: textStyle,
     className: className,
     children: glyph.value
-  }, glyph.id))
-}));
+  }, glyph.id) : null;
+  const textRow = /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeReanimated.default.View, {
+    layout: leadingLayoutTransition,
+    style: textRowStyle,
+    children: textGlyphs.map(renderTextGlyph)
+  }, "text-row");
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+    style: [rowStyle, rowAlignStyles[align]],
+    children: [leadingGlyph ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeReanimated.default.View, {
+      // leading elements own their enter/exit geometry; generic layout
+      // motion here would compete with those transitions
+      layout: undefined,
+      entering: elementEnterTransition ?? enterTransition,
+      exiting: elementExitTransition ?? exitTransition,
+      style: [{
+        alignItems: "center",
+        justifyContent: "center"
+      }, (leadingGap ?? 0) > 0 ? {
+        marginRight: leadingGap
+      } : undefined],
+      children: leadingGlyph.element
+    }, leadingGlyph.id) : null, shouldGroupText ? textRow : textGlyphs.map(renderTextGlyph)]
+  });
+});
 GlyphRun.displayName = "GlyphRun";
 //# sourceMappingURL=glyph-run.js.map

package/lib/commonjs/view/glyph-run.js.map

@@ -1 +1 @@
-{"version":3,"names":["_react","_interopRequireDefault","require","_reactNative","_reactNativeReanimated","_jsxRuntime","e","__esModule","default","rowStyle","flexDirection","alignItems","alignSelf","rowAlignStyles","left","center","right","GlyphRun","exports","React","memo","glyphs","layoutTransition","enterTransition","elementEnterTransition","exitTransition","elementExitTransition","leadingGap","align","textStyle","className","jsx","View","style","children","map","glyph","glyphIndex","kind","layout","entering","exiting","justifyContent","marginRight","undefined","element","id","Text","value","displayName"],"sourceRoot":"../../../src","sources":["view/glyph-run.tsx"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,YAAA,GAAAD,OAAA;AACA,IAAAE,sBAAA,GAAAH,sBAAA,CAAAC,OAAA;AAA+C,IAAAG,WAAA,GAAAH,OAAA;AAAA,SAAAD,uBAAAK,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AAO/C,MAAMG,QAAQ,GAAG;EACfC,aAAa,EAAE,KAAK;EACpBC,UAAU,EAAE,QAAQ;EACpBC,SAAS,EAAE;AACb,CAAU;AAEV,MAAMC,cAAc,GAAG;EACrBC,IAAI,EAAE;IAAEF,SAAS,EAAE;EAAa,CAAC;EACjCG,MAAM,EAAE;IAAEH,SAAS,EAAE;EAAS,CAAC;EAC/BI,KAAK,EAAE;IAAEJ,SAAS,EAAE;EAAW;AACjC,CAAU;;AAEV;AACO,MAAMK,QAAQ,GAAAC,OAAA,CAAAD,QAAA,gBAAGE,cAAK,CAACC,IAAI,CAChC,CAAC;EACCC,MAAM;EACNC,gBAAgB;EAChBC,eAAe;EACfC,sBAAsB;EACtBC,cAAc;EACdC,qBAAqB;EACrBC,UAAU;EACVC,KAAK;EACLC,SAAS;EACTC;AAYD,CAAC;AAAA;AACA;AACE,IAAAzB,WAAA,CAAA0B,GAAA,EAAC5B,YAAA,CAAA6B,IAAI;EAACC,KAAK,EAAE,CAACxB,QAAQ,EAAEI,cAAc,CAACe,KAAK,CAAC,CAAE;EAAAM,QAAA,EAE5Cb,MAAM,CAACc,GAAG,CAAC,CAACC,KAAK,EAAEC,UAAU,KAC5BD,KAAK,CAACE,IAAI,KAAK,SAAS,gBACtB,IAAAjC,WAAA,CAAA0B,GAAA,EAAC3B,sBAAA,CAAAI,OAAQ,CAACwB,IAAI;IAEZO,MAAM,EAAEjB,gBAAiB;IACzBkB,QAAQ,EAAEhB,sBAAsB,IAAID,eAAgB;IACpDkB,OAAO,EAAEf,qBAAqB,IAAID,cAAe;IACjDQ,KAAK,EAAE,CACL;MAAEtB,UAAU,EAAE,QAAQ;MAAE+B,cAAc,EAAE;IAAS,CAAC,EAClDL,UAAU,KAAK,CAAC,IAAI,CAACV,UAAU,IAAI,CAAC,IAAI,CAAC,GACrC;MAAEgB,WAAW,EAAEhB;IAAW,CAAC,GAC3BiB,SAAS,CACb;IAAAV,QAAA,EAEDE,KAAK,CAACS;EAAO,GAXTT,KAAK,CAACU,EAYE,CAAC,gBAEhB,IAAAzC,WAAA,CAAA0B,GAAA,EAAC3B,sBAAA,CAAAI,OAAQ,CAACuC,IAAI;IAEZR,MAAM,EAAEjB,gBAAiB;IACzBkB,QAAQ,EAAEjB,eAAgB;IAC1BkB,OAAO,EAAEhB,cAAe;IACxBQ,KAAK,EAAEJ,SAAU;IACjBC,SAAS,EAAEA,SAAU;IAAAI,QAAA,EAEpBE,KAAK,CAACY;EAAK,GAPPZ,KAAK,CAACU,EAQE,CAEnB;AAAC,CACG,CAEZ,CAAC;AAED7B,QAAQ,CAACgC,WAAW,GAAG,UAAU","ignoreList":[]}
+{"version":3,"names":["_react","_interopRequireDefault","require","_reactNative","_reactNativeReanimated","_jsxRuntime","e","__esModule","default","rowStyle","flexDirection","alignItems","alignSelf","textRowStyle","rowAlignStyles","left","center","right","GlyphRun","exports","React","memo","glyphs","layoutTransition","leadingLayoutTransition","leadingLayoutGroup","enterTransition","elementEnterTransition","exitTransition","elementExitTransition","leadingGap","align","textStyle","className","leadingGlyph","kind","undefined","textGlyphs","slice","shouldGroupText","Boolean","renderTextGlyph","glyph","jsx","Text","layout","entering","exiting","style","children","value","id","textRow","View","map","jsxs","justifyContent","marginRight","element","displayName"],"sourceRoot":"../../../src","sources":["view/glyph-run.tsx"],"mappings":"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","ignoreList":[]}

package/lib/commonjs/view/morph-viewport.js

@@ -63,6 +63,7 @@ const MorphViewport = exports.MorphViewport = /*#__PURE__*/_react.default.memo((
   align,
   containerStyle,
   animatedWidthStyle,
+  onVisibleLayout,
   measurement,
   children
 }) => {
@@ -81,6 +82,7 @@ const MorphViewport = exports.MorphViewport = /*#__PURE__*/_react.default.memo((
         style: measuredContentStyle,
         children: measurement
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeReanimated.default.View, {
+        onLayout: onVisibleLayout,
         style: [resolvedViewportStyle, animatedWidthStyle],
         children: children
       })]

package/lib/commonjs/view/morph-viewport.js.map

@@ -1 +1 @@
-{"version":3,"names":["_react","_interopRequireWildcard","require","_reactNative","_reactNativeReanimated","_interopRequireDefault","_jsxRuntime","e","__esModule","default","t","WeakMap","r","n","o","i","f","__proto__","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","shellStyle","position","alignSelf","viewportStyle","measuredContentStyle","left","top","opacity","flexShrink","clippedViewportStyle","overflow","unclippedViewportStyle","fullWidthViewportStyle","width","shellAlignStyles","center","right","viewportAlignStyles","alignItems","MorphViewport","exports","React","memo","autoSize","clipToBounds","align","containerStyle","animatedWidthStyle","measurement","children","resolvedViewportStyle","useMemo","jsx","View","style","jsxs","Fragment","accessibilityElementsHidden","collapsable","importantForAccessibility","pointerEvents","displayName"],"sourceRoot":"../../../src","sources":["view/morph-viewport.tsx"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,uBAAA,CAAAC,OAAA;AAEA,IAAAC,YAAA,GAAAD,OAAA;AACA,IAAAE,sBAAA,GAAAC,sBAAA,CAAAH,OAAA;AAA+C,IAAAI,WAAA,GAAAJ,OAAA;AAAA,SAAAG,uBAAAE,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AAAA,SAAAN,wBAAAM,CAAA,EAAAG,CAAA,6BAAAC,OAAA,MAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAV,uBAAA,YAAAA,CAAAM,CAAA,EAAAG,CAAA,SAAAA,CAAA,IAAAH,CAAA,IAAAA,CAAA,CAAAC,UAAA,SAAAD,CAAA,MAAAO,CAAA,EAAAC,CAAA,EAAAC,CAAA,KAAAC,SAAA,QAAAR,OAAA,EAAAF,CAAA,iBAAAA,CAAA,uBAAAA,CAAA,yBAAAA,CAAA,SAAAS,CAAA,MAAAF,CAAA,GAAAJ,CAAA,GAAAG,CAAA,GAAAD,CAAA,QAAAE,CAAA,CAAAI,GAAA,CAAAX,CAAA,UAAAO,CAAA,CAAAK,GAAA,CAAAZ,CAAA,GAAAO,CAAA,CAAAM,GAAA,CAAAb,CAAA,EAAAS,CAAA,gBAAAN,CAAA,IAAAH,CAAA,gBAAAG,CAAA,OAAAW,cAAA,CAAAC,IAAA,CAAAf,CAAA,EAAAG,CAAA,OAAAK,CAAA,IAAAD,CAAA,GAAAS,MAAA,CAAAC,cAAA,KAAAD,MAAA,CAAAE,wBAAA,CAAAlB,CAAA,EAAAG,CAAA,OAAAK,CAAA,CAAAI,GAAA,IAAAJ,CAAA,CAAAK,GAAA,IAAAN,CAAA,CAAAE,CAAA,EAAAN,CAAA,EAAAK,CAAA,IAAAC,CAAA,CAAAN,CAAA,IAAAH,CAAA,CAAAG,CAAA,WAAAM,CAAA,KAAAT,CAAA,EAAAG,CAAA;AAG/C,MAAMgB,UAAU,GAAG;EACjBC,QAAQ,EAAE,UAAU;EACpBC,SAAS,EAAE;AACb,CAAU;AAEV,MAAMC,aAAa,GAAG;EACpBD,SAAS,EAAE;AACb,CAAU;AAEV,MAAME,oBAA+B,GAAG;EACtCH,QAAQ,EAAE,UAAU;EACpBI,IAAI,EAAE,CAAC;EACPC,GAAG,EAAE,CAAC;EACNC,OAAO,EAAE,CAAC;EACVL,SAAS,EAAE,YAAY;EACvBM,UAAU,EAAE;AACd,CAAC;AAED,MAAMC,oBAA+B,GAAG;EACtCC,QAAQ,EAAE;AACZ,CAAC;AAED,MAAMC,sBAAiC,GAAG;EACxCD,QAAQ,EAAE;AACZ,CAAC;AAED,MAAME,sBAAiC,GAAG;EACxCC,KAAK,EAAE;AACT,CAAC;AAED,MAAMC,gBAAiD,GAAG;EACxDT,IAAI,EAAE;IAAEH,SAAS,EAAE;EAAa,CAAC;EACjCa,MAAM,EAAE;IAAEb,SAAS,EAAE;EAAS,CAAC;EAC/Bc,KAAK,EAAE;IAAEd,SAAS,EAAE;EAAW;AACjC,CAAC;AAED,MAAMe,mBAAoD,GAAG;EAC3DZ,IAAI,EAAE;IAAEa,UAAU,EAAE;EAAa,CAAC;EAClCH,MAAM,EAAE;IAAEG,UAAU,EAAE;EAAS,CAAC;EAChCF,KAAK,EAAE;IAAEE,UAAU,EAAE;EAAW;AAClC,CAAC;AAYD;AACO,MAAMC,aAAa,GAAAC,OAAA,CAAAD,aAAA,gBAAGE,cAAK,CAACC,IAAI,CACrC,CAAC;EACCC,QAAQ;EACRC,YAAY;EACZC,KAAK;EACLC,cAAc;EACdC,kBAAkB;EAClBC,WAAW;EACXC;AACkB,CAAC,KAAK;EACxB;EACA,MAAMC,qBAAqB,GAAG,IAAAC,cAAO,EACnC,MAAM,CACJ5B,aAAa,EACbc,mBAAmB,CAACQ,KAAK,CAAC,EAC1BD,YAAY,GAAGf,oBAAoB,GAAGE,sBAAsB,CAC7D,EACD,CAACc,KAAK,EAAED,YAAY,CACtB,CAAC;;EAED;EACA,oBACE,IAAA5C,WAAA,CAAAoD,GAAA,EAACvD,YAAA,CAAAwD,IAAI;IAACC,KAAK,EAAE,CAAClC,UAAU,EAAEc,gBAAgB,CAACW,KAAK,CAAC,EAAEC,cAAc,CAAE;IAAAG,QAAA,EAChEN,QAAQ,gBACP,IAAA3C,WAAA,CAAAuD,IAAA,EAAAvD,WAAA,CAAAwD,QAAA;MAAAP,QAAA,gBACE,IAAAjD,WAAA,CAAAoD,GAAA,EAACvD,YAAA,CAAAwD,IAAI;QACHI,2BAA2B;QAC3BC,WAAW,EAAE,KAAM;QACnBC,yBAAyB,EAAC,qBAAqB;QAC/CC,aAAa,EAAC,MAAM;QACpBN,KAAK,EAAE9B,oBAAqB;QAAAyB,QAAA,EAE3BD;MAAW,CACR,CAAC,eACP,IAAAhD,WAAA,CAAAoD,GAAA,EAACtD,sBAAA,CAAAK,OAAQ,CAACkD,IAAI;QAACC,KAAK,EAAE,CAACJ,qBAAqB,EAAEH,kBAAkB,CAAE;QAAAE,QAAA,EAC/DA;MAAQ,CACI,CAAC;IAAA,CAChB,CAAC,gBAEH,IAAAjD,WAAA,CAAAoD,GAAA,EAACvD,YAAA,CAAAwD,IAAI;MAACC,KAAK,EAAE,CAACJ,qBAAqB,EAAElB,sBAAsB,CAAE;MAAAiB,QAAA,EAC1DA;IAAQ,CACL;EACP,CACG,CAAC;AAEX,CACF,CAAC;AAEDV,aAAa,CAACsB,WAAW,GAAG,eAAe","ignoreList":[]}
+{"version":3,"names":["_react","_interopRequireWildcard","require","_reactNative","_reactNativeReanimated","_interopRequireDefault","_jsxRuntime","e","__esModule","default","t","WeakMap","r","n","o","i","f","__proto__","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","shellStyle","position","alignSelf","viewportStyle","measuredContentStyle","left","top","opacity","flexShrink","clippedViewportStyle","overflow","unclippedViewportStyle","fullWidthViewportStyle","width","shellAlignStyles","center","right","viewportAlignStyles","alignItems","MorphViewport","exports","React","memo","autoSize","clipToBounds","align","containerStyle","animatedWidthStyle","onVisibleLayout","measurement","children","resolvedViewportStyle","useMemo","jsx","View","style","jsxs","Fragment","accessibilityElementsHidden","collapsable","importantForAccessibility","pointerEvents","onLayout","displayName"],"sourceRoot":"../../../src","sources":["view/morph-viewport.tsx"],"mappings":"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","ignoreList":[]}

package/lib/commonjs/view/text-run.js

@@ -17,24 +17,44 @@ const TextRun = exports.TextRun = /*#__PURE__*/_react.default.memo(({
   motionRecipe,
   align,
   leading,
+  leadingLayoutGroup = false,
   leadingKey,
   leadingGap = 0,
+  ready = true,
   textStyle,
   className
 }) => {
   // namespace ids per instance so repeated strings do not collide
   const scopeId = (0, _react.useId)();
-  const lastValueRef = (0, _react.useRef)(value);
-  const lastLeadingPresenceRef = (0, _react.useRef)(Boolean(leading));
-  const lastLeadingKeyRef = (0, _react.useRef)(leadingKey);
+  const hasDisplayedRef = (0, _react.useRef)(false);
+  const displayedValueRef = (0, _react.useRef)(value);
+  const displayedLeadingRef = (0, _react.useRef)(leading);
+  const displayedLeadingKeyRef = (0, _react.useRef)(leadingKey);
+  const displayedLeadingGapRef = (0, _react.useRef)(leadingGap);
+  const shouldDisplayTarget = ready || !hasDisplayedRef.current;
+  const visibleValue = shouldDisplayTarget ? value : displayedValueRef.current;
+  const visibleLeading = shouldDisplayTarget ? leading : displayedLeadingRef.current;
+  const visibleLeadingKey = shouldDisplayTarget ? leadingKey : displayedLeadingKeyRef.current;
+  const visibleLeadingGap = shouldDisplayTarget ? leadingGap : displayedLeadingGapRef.current;
+  if (shouldDisplayTarget) {
+    hasDisplayedRef.current = true;
+    displayedValueRef.current = value;
+    displayedLeadingRef.current = leading;
+    displayedLeadingKeyRef.current = leadingKey;
+    displayedLeadingGapRef.current = leadingGap;
+  }
+  const lastValueRef = (0, _react.useRef)(visibleValue);
+  const lastLeadingPresenceRef = (0, _react.useRef)(Boolean(visibleLeading));
+  const lastLeadingKeyRef = (0, _react.useRef)(visibleLeadingKey);
   const hasAnimatedRef = (0, _react.useRef)(false);
-  const isLeadingSwap = Boolean(leading) && lastLeadingPresenceRef.current && leadingKey !== lastLeadingKeyRef.current;
+  const isLeadingSwap = Boolean(visibleLeading) && lastLeadingPresenceRef.current && visibleLeadingKey !== lastLeadingKeyRef.current;
+  const isLeadingChange = Boolean(visibleLeading) !== lastLeadingPresenceRef.current || Boolean(visibleLeading) && visibleLeadingKey !== lastLeadingKeyRef.current;
   // update the worklet flag after commit so render never writes a shared value
   const leadingSwapProgress = (0, _reactNativeReanimated.useSharedValue)(0);
   (0, _react.useLayoutEffect)(() => {
     leadingSwapProgress.value = isLeadingSwap ? 1 : 0;
   }, [isLeadingSwap, leadingSwapProgress]);
-  const glyphs = (0, _useTextGlyphs.useTextGlyphs)(value, scopeId, leading, leadingKey);
+  const glyphs = (0, _useTextGlyphs.useTextGlyphs)(visibleValue, scopeId, visibleLeading, visibleLeadingKey);
   const elementEnterTransition = (0, _react.useMemo)(() => (0, _entryExitBuilders.createLeadingEnterTransition)({
     durationMs: motionRecipe.durationMs,
     easing: motionRecipe.easing
@@ -42,26 +62,28 @@ const TextRun = exports.TextRun = /*#__PURE__*/_react.default.memo(({
   const elementExitTransition = (0, _react.useMemo)(() => (0, _entryExitBuilders.createLeadingExitTransition)({
     durationMs: motionRecipe.durationMs,
     easing: motionRecipe.easing,
-    leadingGap,
+    leadingGap: visibleLeadingGap,
     scale: leadingSwapProgress
-  }), [leadingGap, leadingSwapProgress, motionRecipe.durationMs, motionRecipe.easing]);
+  }), [visibleLeadingGap, leadingSwapProgress, motionRecipe.durationMs, motionRecipe.easing]);
 
   // mark the first value as settled and later changes as eligible for motion
-  if (value !== lastValueRef.current || Boolean(leading) !== lastLeadingPresenceRef.current || leadingKey !== lastLeadingKeyRef.current) {
+  if (visibleValue !== lastValueRef.current || Boolean(visibleLeading) !== lastLeadingPresenceRef.current || visibleLeadingKey !== lastLeadingKeyRef.current) {
     hasAnimatedRef.current = true;
-    lastValueRef.current = value;
-    lastLeadingPresenceRef.current = Boolean(leading);
-    lastLeadingKeyRef.current = leadingKey;
+    lastValueRef.current = visibleValue;
+    lastLeadingPresenceRef.current = Boolean(visibleLeading);
+    lastLeadingKeyRef.current = visibleLeadingKey;
   }
   const hasAnimated = hasAnimatedRef.current;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_glyphRun.GlyphRun, {
     glyphs: glyphs,
     layoutTransition: hasAnimated ? motionRecipe.layoutTransition : undefined,
+    leadingLayoutTransition: isLeadingChange ? motionRecipe.layoutTransition : undefined,
+    leadingLayoutGroup: leadingLayoutGroup,
     enterTransition: hasAnimatedRef.current ? motionRecipe.enterTransition : undefined,
     elementEnterTransition: isLeadingSwap ? elementEnterTransition : undefined,
     exitTransition: motionRecipe.exitTransition,
     elementExitTransition: elementExitTransition,
-    leadingGap: leadingGap,
+    leadingGap: visibleLeadingGap,
     align: align,
     textStyle: textStyle,
     className: className