feat: detect three-line List rows on web by measuring the description

Author: adam-sajko

src/components/List/ListAccordion.tsx

@@ -3,17 +3,16 @@ import { StyleSheet, View } from 'react-native';
 import type {
   ColorValue,
   GestureResponderEvent,
-  NativeSyntheticEvent,
   PressableAndroidRippleConfig,
   StyleProp,
-  TextLayoutEventData,
   TextStyle,
   ViewProps,
   ViewStyle,
 } from 'react-native';
 
 import { ListAccordionGroupContext } from './ListAccordionGroup';
 import { ListTokens } from './tokens';
+import { useMultilineDescription } from './useMultilineDescription';
 import type { ListChildProps, Style } from './utils';
 import { ListRowContext, getAccordionColors, getLeftStyles } from './utils';
 import { useLocale } from '../../core/locale';
@@ -202,15 +201,11 @@ const ListAccordion = ({
   const [expanded, setExpanded] = React.useState<boolean>(
     expandedProp || false
   );
-  const [isDescriptionMultiline, setIsDescriptionMultiline] =
-    React.useState(false);
-
-  const onDescriptionTextLayout = (
-    event: NativeSyntheticEvent<TextLayoutEventData>
-  ) => {
-    const { nativeEvent } = event;
-    setIsDescriptionMultiline(nativeEvent.lines.length >= 2);
-  };
+  const {
+    isMultiline: isDescriptionMultiline,
+    contentRef,
+    descriptionProps,
+  } = useMultilineDescription(Boolean(description));
 
   const handlePressAction = (e: GestureResponderEvent) => {
     onPress?.(e);
@@ -285,7 +280,10 @@ const ListAccordion = ({
                     style: getLeftStyles(isDescriptionMultiline, description),
                   })
                 : null}
-              <View style={[styles.contentItem, styles.content, contentStyle]}>
+              <View
+                ref={contentRef}
+                style={[styles.contentItem, styles.content, contentStyle]}
+              >
                 <Text
                   variant="bodyLarge"
                   theme={theme}
@@ -313,7 +311,7 @@ const ListAccordion = ({
                       },
                       descriptionStyle,
                     ]}
-                    onTextLayout={onDescriptionTextLayout}
+                    {...descriptionProps}
                     maxFontSizeMultiplier={descriptionMaxFontSizeMultiplier}
                   >
                     {description}

src/components/List/ListItem.tsx

@@ -3,14 +3,13 @@ import { StyleSheet, View } from 'react-native';
 import type {
   ColorValue,
   GestureResponderEvent,
-  NativeSyntheticEvent,
   StyleProp,
-  TextLayoutEventData,
   TextStyle,
   ViewStyle,
 } from 'react-native';
 
 import { ListTokens } from './tokens';
+import { useMultilineDescription } from './useMultilineDescription';
 import { ListRowContext, getLeftStyles, getRightStyles } from './utils';
 import type { Style } from './utils';
 import { useInternalTheme } from '../../core/theming';
@@ -162,15 +161,11 @@ const ListItem = ({
   ...rest
 }: Props) => {
   const theme = useInternalTheme(themeOverrides);
-  const [isDescriptionMultiline, setIsDescriptionMultiline] =
-    React.useState(false);
-
-  const onDescriptionTextLayout = (
-    event: NativeSyntheticEvent<TextLayoutEventData>
-  ) => {
-    const { nativeEvent } = event;
-    setIsDescriptionMultiline(nativeEvent.lines.length >= 2);
-  };
+  const {
+    isMultiline: isDescriptionMultiline,
+    contentRef,
+    descriptionProps,
+  } = useMultilineDescription(Boolean(description));
 
   const renderDescription = (
     descriptionColor: ColorValue,
@@ -191,7 +186,7 @@ const ListItem = ({
         numberOfLines={descriptionNumberOfLines}
         ellipsizeMode={descriptionEllipsizeMode}
         style={[{ color: descriptionColor }, descriptionStyle]}
-        onTextLayout={onDescriptionTextLayout}
+        {...descriptionProps}
         maxFontSizeMultiplier={descriptionMaxFontSizeMultiplier}
       >
         {description}
@@ -258,6 +253,7 @@ const ListItem = ({
               })
             : null}
           <View
+            ref={contentRef}
             style={[styles.item, styles.content, contentStyle]}
             testID={`${testID}-content`}
           >

src/components/List/useMultilineDescription.native.tsx

@@ -0,0 +1,33 @@
+import * as React from 'react';
+import type {
+  NativeSyntheticEvent,
+  TextLayoutEventData,
+  TextProps,
+  View,
+} from 'react-native';
+
+type MultilineDescription = {
+  isMultiline: boolean;
+  contentRef: React.RefObject<View | null>;
+  descriptionProps: Pick<TextProps, 'onTextLayout'>;
+};
+
+export const useMultilineDescription = (
+  hasDescription: boolean
+): MultilineDescription => {
+  const contentRef = React.useRef<View>(null);
+  const [isMultiline, setIsMultiline] = React.useState(false);
+
+  const onTextLayout = React.useCallback(
+    (event: NativeSyntheticEvent<TextLayoutEventData>) => {
+      setIsMultiline(event.nativeEvent.lines.length >= 2);
+    },
+    []
+  );
+
+  return {
+    isMultiline: hasDescription && isMultiline,
+    contentRef,
+    descriptionProps: { onTextLayout },
+  };
+};

src/components/List/useMultilineDescription.tsx

@@ -0,0 +1,65 @@
+import * as React from 'react';
+import type { TextProps, View } from 'react-native';
+
+type MultilineDescription = {
+  isMultiline: boolean;
+  contentRef: React.RefObject<View | null>;
+  descriptionProps: Pick<TextProps, 'onTextLayout'>;
+};
+
+const LINE_TOLERANCE_PX = 1;
+
+/**
+ * Web has no `onTextLayout`, so the description is measured from the DOM.
+ * `useLayoutEffect` runs before paint, so the row is laid out at its final
+ * height in the frame it first appears. `ResizeObserver` re-measures on
+ * reflow, for example when a web font swaps in or the column is resized.
+ */
+export const useMultilineDescription = (
+  hasDescription: boolean
+): MultilineDescription => {
+  const contentRef = React.useRef<View>(null);
+  const [isMultiline, setIsMultiline] = React.useState(false);
+
+  React.useLayoutEffect(() => {
+    // eslint-disable-next-line @typescript-eslint/no-unsafe-type-assertion
+    const content = contentRef.current as unknown as HTMLElement | null;
+
+    if (!hasDescription || !content) {
+      setIsMultiline(false);
+      return undefined;
+    }
+
+    // The description is rendered after the title, as the last node of the column.
+    const description = content.lastElementChild;
+
+    if (!description) {
+      return undefined;
+    }
+
+    const measure = () => {
+      const { height } = description.getBoundingClientRect();
+
+      if (height === 0) {
+        return;
+      }
+
+      const computed = window.getComputedStyle(description);
+      const lineHeight = Number.parseFloat(computed.lineHeight);
+      const resolvedLineHeight = Number.isNaN(lineHeight)
+        ? Number.parseFloat(computed.fontSize) * 1.2 // `line-height: normal` fallback
+        : lineHeight;
+
+      setIsMultiline(height > resolvedLineHeight + LINE_TOLERANCE_PX);
+    };
+
+    measure();
+
+    const observer = new ResizeObserver(measure);
+    observer.observe(description);
+
+    return () => observer.disconnect();
+  }, [hasDescription]);
+
+  return { isMultiline, contentRef, descriptionProps: {} };
+};