@grahlnn/comps 0.1.9 → 0.1.11

package/dist/index.js

@@ -3275,6 +3275,19 @@ import { useLayoutEffect, useRef, useState } from "react";
 var activeMorphMeasurementConsumers = 0;
 var detachMorphMeasurementInvalidationListeners = null;
 var morphMeasurementInvalidationSubscribers = new Set;
+var FONT_METRIC_TRANSITION_PROPERTIES = new Set([
+  "font",
+  "font-family",
+  "font-size",
+  "font-stretch",
+  "font-style",
+  "font-weight",
+  "font-variation-settings",
+  "letter-spacing",
+  "line-height",
+  "text-transform",
+  "word-spacing"
+]);
 function parsePx(value) {
   const parsed = Number.parseFloat(value);
   if (Number.isFinite(parsed)) {
@@ -3316,6 +3329,18 @@ function readContentWidth(node, styles) {
   const borderRight = parsePx(styles.borderRightWidth) ?? 0;
   return Math.max(0, rectWidth - paddingLeft - paddingRight - borderLeft - borderRight);
 }
+function isFontMetricTransitionProperty(propertyName) {
+  return FONT_METRIC_TRANSITION_PROPERTIES.has(propertyName);
+}
+function doesTransitionTargetAffectNode(node, target) {
+  if (target === node) {
+    return true;
+  }
+  if (typeof target !== "object" || target === null || !("contains" in target) || typeof target.contains !== "function") {
+    return false;
+  }
+  return target.contains(node);
+}
 function readLayoutContext(node, width) {
   const styles = getComputedStyle(node);
   const parentDisplay = (node.parentElement && getComputedStyle(node.parentElement).display) ?? "block";
@@ -3419,6 +3444,79 @@ function useObservedLayoutContext(deps) {
         refreshMeasurements: true
       });
     });
+    const activeFontMetricTransitions = new Map;
+    const ownerDocument = node.ownerDocument;
+    const ownerWindow = ownerDocument.defaultView ?? window;
+    let fontMetricTransitionFrame = null;
+    const stopFontMetricTransitionPolling = () => {
+      if (fontMetricTransitionFrame === null) {
+        return;
+      }
+      ownerWindow.cancelAnimationFrame(fontMetricTransitionFrame);
+      fontMetricTransitionFrame = null;
+    };
+    const pollFontMetricTransition = () => {
+      syncLayoutContext({
+        refreshMeasurements: true
+      });
+      fontMetricTransitionFrame = ownerWindow.requestAnimationFrame(pollFontMetricTransition);
+    };
+    const startFontMetricTransitionPolling = () => {
+      if (fontMetricTransitionFrame !== null) {
+        return;
+      }
+      syncLayoutContext({
+        refreshMeasurements: true
+      });
+      fontMetricTransitionFrame = ownerWindow.requestAnimationFrame(pollFontMetricTransition);
+    };
+    const handleFontMetricTransitionStart = (event) => {
+      if (!isFontMetricTransitionProperty(event.propertyName)) {
+        return;
+      }
+      if (!doesTransitionTargetAffectNode(node, event.target)) {
+        return;
+      }
+      const transitionTarget = event.target;
+      if (transitionTarget === null) {
+        return;
+      }
+      let activeProperties = activeFontMetricTransitions.get(transitionTarget);
+      if (activeProperties === undefined) {
+        activeProperties = new Set;
+        activeFontMetricTransitions.set(transitionTarget, activeProperties);
+      }
+      activeProperties.add(`${event.propertyName}\x00${event.pseudoElement}`);
+      startFontMetricTransitionPolling();
+    };
+    const handleFontMetricTransitionStop = (event) => {
+      if (!isFontMetricTransitionProperty(event.propertyName)) {
+        return;
+      }
+      if (!doesTransitionTargetAffectNode(node, event.target)) {
+        return;
+      }
+      const transitionTarget = event.target;
+      if (transitionTarget === null) {
+        return;
+      }
+      const activeProperties = activeFontMetricTransitions.get(transitionTarget);
+      if (activeProperties === undefined) {
+        return;
+      }
+      activeProperties.delete(`${event.propertyName}\x00${event.pseudoElement}`);
+      if (activeProperties.size > 0) {
+        return;
+      }
+      activeFontMetricTransitions.delete(transitionTarget);
+      if (activeFontMetricTransitions.size > 0) {
+        return;
+      }
+      stopFontMetricTransitionPolling();
+      syncLayoutContext({
+        refreshMeasurements: true
+      });
+    };
     let resizeObserver = null;
     if (shouldObserveWrappingWidth) {
       resizeObserver = new ResizeObserver(([entry]) => {
@@ -3428,12 +3526,22 @@ function useObservedLayoutContext(deps) {
       });
     }
     resizeObserver?.observe(node);
+    ownerDocument.addEventListener("transitionrun", handleFontMetricTransitionStart, true);
+    ownerDocument.addEventListener("transitionstart", handleFontMetricTransitionStart, true);
+    ownerDocument.addEventListener("transitionend", handleFontMetricTransitionStop, true);
+    ownerDocument.addEventListener("transitioncancel", handleFontMetricTransitionStop, true);
     acquireMorphMeasurementInvalidationListeners();
     return () => {
       disposed = true;
       syncLayoutContextRef.current = null;
       unsubscribeInvalidation();
       resizeObserver?.disconnect();
+      stopFontMetricTransitionPolling();
+      activeFontMetricTransitions.clear();
+      ownerDocument.removeEventListener("transitionrun", handleFontMetricTransitionStart, true);
+      ownerDocument.removeEventListener("transitionstart", handleFontMetricTransitionStart, true);
+      ownerDocument.removeEventListener("transitionend", handleFontMetricTransitionStop, true);
+      ownerDocument.removeEventListener("transitioncancel", handleFontMetricTransitionStop, true);
       releaseMorphMeasurementInvalidationListeners();
     };
   }, deps);
@@ -4151,7 +4259,8 @@ var SCREEN_READER_ONLY_STYLE = {
 };
 var FALLBACK_TEXT_STYLE = {
   display: "block",
-  gridArea: "1 / 1"
+  gridArea: "1 / 1",
+  whiteSpace: "nowrap"
 };
 var SHARED_GLYPH_TYPOGRAPHY_STYLE = {
   font: "inherit",

package/dist/torph/src/components/Torph.d.ts

@@ -1,3 +1,5 @@
+import { type CSSProperties } from "react";
+export declare function getFallbackTextStyle(shouldHideFlowText: boolean): CSSProperties;
 export type TorphProps = {
     text: string;
     className?: string;

package/dist/torph/src/core/layout-observer.d.ts

@@ -1,5 +1,7 @@
 import { type LayoutContext } from "./types";
 export declare function readFont(styles: CSSStyleDeclaration): string;
+export declare function isFontMetricTransitionProperty(propertyName: string): boolean;
+export declare function doesTransitionTargetAffectNode(node: Node, target: EventTarget | null): any;
 export declare function notifyMorphMeasurementInvalidationSubscribers(): void;
 export declare function subscribeMorphMeasurementInvalidation(subscriber: () => void): () => void;
 export declare function useObservedLayoutContext<T extends HTMLElement>(deps: readonly unknown[]): {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@grahlnn/comps",
-  "version": "0.1.9",
+  "version": "0.1.11",
   "description": "React components from grahlnn/comps.",
   "main": "./dist/index.js",
   "module": "./dist/index.js",