@ethora/chat-component-rn 26.5.19 → 26.5.20

package/src/hooks/useChatFonts.ts

@@ -1,5 +1,5 @@
 import { useEffect, useState } from 'react';
-import { Text, TextInput } from 'react-native';
+import { StyleSheet, Text, TextInput } from 'react-native';
 import type { TypographyConfig } from '../types/types';
 
 /**
@@ -25,6 +25,8 @@ import type { TypographyConfig } from '../types/types';
 export function useChatFonts(typography?: TypographyConfig): boolean {
   const [ready, setReady] = useState(!typography?.fonts?.length);
 
+  // Apply synchronously on render (not just in the effect) so the factory
+  // patch sees the active family/weights before the first child paints.
   applyDefaultFont(typography);
 
   useEffect(() => {
@@ -76,23 +78,78 @@ export function useChatFonts(typography?: TypographyConfig): boolean {
 }
 
 /**
- * The family currently applied as the chat-wide default. Read at render time
- * by the patched components below, so updating it (then triggering a re-render)
- * restyles the whole tree.
+ * The family currently applied as the chat-wide default. Read at element-
+ * creation time by the patched JSX factories below, so updating it (then
+ * triggering a re-render) restyles the whole tree.
  */
 let activeFamily: string | undefined;
 
+/**
+ * Per-weight families (regular/medium/semibold/bold). When set, the factory
+ * patch maps a Text's effective `fontWeight` to the matching family so custom
+ * fonts render intermediate weights correctly — RN can't synthesise 500/600
+ * from a single font file (only fake-bold ~700), so each weight needs its own
+ * loaded family. This is why a bare `fontWeight: '500'` looked like it did
+ * nothing before: there was no medium family to switch to.
+ */
+let activeWeightFamilies: TypographyConfig['weightFamilies'] | undefined;
+
+/**
+ * Resolve a desired weight to a configured family variant. Returns undefined
+ * when there's no variant for that tier (so we leave the default family /
+ * weight untouched rather than guessing).
+ */
+function familyForWeight(weight: unknown): string | undefined {
+  const wf = activeWeightFamilies;
+  if (!wf || weight == null) {return undefined;}
+  let w: number;
+  if (typeof weight === 'number') {
+    w = weight;
+  } else if (weight === 'bold') {
+    w = 700;
+  } else if (weight === 'normal') {
+    w = 400;
+  } else {
+    const n = parseInt(String(weight), 10);
+    w = Number.isFinite(n) ? n : 400;
+  }
+  if (w >= 700) {return wf.bold;}
+  if (w >= 600) {return wf.semibold;}
+  if (w >= 500) {return wf.medium;}
+  return wf.regular;
+}
 
+/**
+ * Build the style array for a Text/TextInput element: the default family as the
+ * lowest-priority layer (explicit per-component styles still win), and — when
+ * per-weight families are configured — the variant family that matches the
+ * element's effective `fontWeight` as a top layer (with the numeric weight
+ * cleared so the OS doesn't also try to synthesise on top). An explicit
+ * per-element `fontFamily` override is respected.
+ */
+function styleForElement(style: any): any {
+  const base = [{ fontFamily: activeFamily }, style];
+  if (!activeWeightFamilies) {return base;}
+  const flat = (StyleSheet.flatten(style) || {}) as any;
+  if (flat.fontFamily && flat.fontFamily !== activeFamily) {return base;}
+  const fam = familyForWeight(flat.fontWeight);
+  if (!fam) {return base;}
+  return [{ fontFamily: activeFamily }, style, { fontFamily: fam, fontWeight: 'normal' }];
+}
+
+/**
+ * Wrap a JSX factory (`jsx`/`jsxs`/`jsxDEV`/`createElement`) so every Text /
+ * TextInput it creates gets the chat-wide font injected. We patch the factory
+ * rather than `Text.render` because render-wrapping a `forwardRef` component is
+ * fragile across React 19 / RN 0.81; intercepting element creation is version-
+ * independent and catches styled-components' inner Text elements too.
+ */
 function wrapFactory(orig: any): any {
   if (typeof orig !== 'function') return orig;
   if (orig.__ethoraFontWrapped) return orig;
   const wrapped = function (this: any, type: any, props: any, ...rest: any[]) {
-    if (
-      activeFamily &&
-      props &&
-      (type === Text || type === TextInput)
-    ) {
-      props = { ...props, style: [{ fontFamily: activeFamily }, props.style] };
+    if (activeFamily && props && (type === Text || type === TextInput)) {
+      props = { ...props, style: styleForElement(props.style) };
     }
     return orig.call(this, type, props, ...rest);
   };
@@ -145,9 +202,10 @@ function ensurePatched(): void {
 }
 
 /**
- * Set (or clear) the chat-wide default font family.
+ * Set (or clear) the chat-wide default font family + per-weight families.
  */
 function applyDefaultFont(typography?: TypographyConfig): void {
   activeFamily = typography?.fontFamily;
+  activeWeightFamilies = typography?.weightFamilies;
   if (activeFamily) ensurePatched();
 }

package/src/main.ts

@@ -47,4 +47,5 @@ export type {
   MessageProps,
   TypographyConfig,
   RNFontSource,
+  ChatTextStyle,
 } from './types/types';

package/src/types/types.ts

@@ -1,4 +1,4 @@
-import type { ViewStyle, TextStyle, ImageSourcePropType } from 'react-native';
+import type { ViewStyle, ImageSourcePropType, TextStyle } from 'react-native';
 import type { Iso639_1Codes } from './models/language.model';
 import type { IMessage, IReply } from './models/message.model';
 import type { RoomMember } from './models/room.model';
@@ -248,10 +248,31 @@ export interface RNFontSource {
  * itself (e.g. via `@expo-google-fonts/*` or its own `useFonts`), pass only
  * `fontFamily` and leave `fonts` empty.
  */
+/**
+ * Per-element font size / weight override.
+ *
+ * `fontWeight` is honoured even with a custom `fontFamily`: when
+ * `weightFamilies` is configured, the chat maps the requested weight to the
+ * matching family variant at render time (a single font file can't synthesise
+ * 500/600 — only fake-bold ~700 — so the variant family is what actually
+ * renders medium/semibold). Omit a field to keep the component default.
+ */
+export interface ChatTextStyle {
+  /** Point size. */
+  fontSize?: number;
+  /** '400' | '500' | '600' | '700' | 'normal' | 'bold' | number. */
+  fontWeight?: TextStyle['fontWeight'];
+}
+
 export interface TypographyConfig {
   /** Family applied across the chat UI. Must be loaded (via `fonts` or by the host). */
   fontFamily?: string;
-  /** Optional per-weight families, used where the chat renders bolder text. */
+  /**
+   * Optional per-weight families. REQUIRED for `fontWeight` overrides to take
+   * visible effect when a custom `fontFamily` is set — RN can't synthesise
+   * intermediate weights from one font file, so each weight needs its own
+   * loaded family (and a matching entry in `fonts`).
+   */
   weightFamilies?: {
     regular?: string;
     medium?: string;
@@ -260,52 +281,39 @@ export interface TypographyConfig {
   };
   /** Fonts for the SDK to load with expo-font before applying `fontFamily`. */
   fonts?: RNFontSource[];
-  /** Per-element size / weight overrides. Each entry replaces only the
-   * properties it sets; everything else keeps the built-in style. */
-  elements?: {
-    /** Message body text inside bubbles (default 16). */
-    messageText?: ElementFontStyle;
-    /** Sender's name above incoming bubbles (default 14 / 500). */
-    senderName?: ElementFontStyle;
-    /** Room title in the chat header (default 16 / 600). */
-    chatHeaderTitle?: ElementFontStyle;
-    /** Typed text AND the "Type message" placeholder (default 16).
-     * Pair larger sizes with `inputLayout.minHeight` so glyphs aren't
-     * clipped vertically. */
-    input?: ElementFontStyle;
-    /** Room name on the chat-profile screen (default 24 / 400). */
-    chatProfileTitle?: ElementFontStyle;
-    /** Member names in the chat-profile list (default 16 / 600). */
-    chatProfileMemberName?: ElementFontStyle;
-    /** "ATTACH" caption of the attachment sheet (default 13 / 600). */
-    attachSheetTitle?: ElementFontStyle;
-    /** Row labels in the attachment sheet — "Take photo", "Photo or
-     * video", "Document" (default 16 / 500). */
-    attachSheetRowLabel?: ElementFontStyle;
-    /** Row hints under each label (default 12). */
-    attachSheetRowHint?: ElementFontStyle;
-    /** "Cancel" button of the attachment sheet (default 16 / 600). */
-    attachSheetCancel?: ElementFontStyle;
-  };
-}
-
-/** Size/weight override for one chat-UI text element. */
-export interface ElementFontStyle {
-  fontSize?: number;
-  fontWeight?: TextStyle['fontWeight'];
-}
 
-/**
- * Geometry of the message-input row. Raise `minHeight` together with
- * `typography.elements.input.fontSize` so larger text isn't clipped.
- */
-export interface InputLayoutConfig {
-  /** Min height of the text field, also its single-line height (default 40). */
-  minHeight?: number;
-  /** Height at which the field stops growing and starts scrolling (default 120). */
-  maxHeight?: number;
-  /** Diameter of the round send / mic button (default 40). */
-  sendButtonSize?: number;
+  // ----- per-element size / weight overrides -----
+  /** Message body text inside chat bubbles. Default 16. */
+  messageText?: ChatTextStyle;
+  /** Sender name shown above incoming messages. Default 14 / "500". */
+  senderName?: ChatTextStyle;
+  /** Room title in the chat header. Default 16 / "600". */
+  headerTitle?: ChatTextStyle;
+  /** Message composer: the input/placeholder text plus its layout sizing. */
+  input?: ChatTextStyle & {
+    /** Min height of the input box in px. Default 40. */
+    minHeight?: number;
+    /** Max height before the input scrolls in px. Default 120. */
+    maxHeight?: number;
+    /** Width & height of the round send button in px. Default 40. */
+    sendButtonSize?: number;
+  };
+  /** Chat profile screen (opens when tapping the room name in the header). */
+  profile?: {
+    /** Big room-name title at the top of the profile screen. Default 24 / "400". */
+    title?: ChatTextStyle;
+    /** Member name rows. Default 16 / "600". */
+    memberName?: ChatTextStyle;
+  };
+  /** Attach (photo/document picker) bottom sheet. */
+  attachSheet?: {
+    /** "Attach" header label. Default 13 / "600". */
+    title?: ChatTextStyle;
+    /** Row labels (Camera / Gallery / Document). Default 16 / "500". */
+    rowLabel?: ChatTextStyle;
+    /** Cancel button. Default 16 / "600". */
+    cancelButton?: ChatTextStyle;
+  };
 }
 
 export interface IConfig {
@@ -336,8 +344,6 @@ export interface IConfig {
   };
   /** Configurable font family / weights for the chat UI. See TypographyConfig. */
   typography?: TypographyConfig;
-  /** Input-row geometry (field height, send-button size). See InputLayoutConfig. */
-  inputLayout?: InputLayoutConfig;
   messageColor?: {
     backgroundMessage: string;
     backgroundMessageUser: string;

package/lib/commonjs/helpers/getElementFont.js

@@ -1,29 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.getElementFont = void 0;
-/**
- * Per-element font override from `config.typography.elements`, as an RN
- * style object suitable for appending to a component's `style` (so it
- * wins over the built-in size/weight but touches nothing else).
- * Returns undefined when the element isn't configured — appending
- * undefined to a style array is a no-op.
- */
-const getElementFont = (config, element) => {
-  const override = config?.typography?.elements?.[element];
-  if (!override) {
-    return undefined;
-  }
-  const style = {};
-  if (override.fontSize != null) {
-    style.fontSize = override.fontSize;
-  }
-  if (override.fontWeight != null) {
-    style.fontWeight = override.fontWeight;
-  }
-  return style.fontSize != null || style.fontWeight != null ? style : undefined;
-};
-exports.getElementFont = getElementFont;
-//# sourceMappingURL=getElementFont.js.map

package/lib/commonjs/helpers/getElementFont.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["getElementFont","config","element","override","typography","elements","undefined","style","fontSize","fontWeight","exports"],"sourceRoot":"../../../src","sources":["helpers/getElementFont.ts"],"mappings":";;;;;;AAKA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,MAAMA,cAAc,GAAGA,CAC5BC,MAA2B,EAC3BC,OAAmB,KACO;EAC1B,MAAMC,QAAQ,GAAGF,MAAM,EAAEG,UAAU,EAAEC,QAAQ,GAAGH,OAAO,CAAC;EACxD,IAAI,CAACC,QAAQ,EAAE;IAAC,OAAOG,SAAS;EAAC;EACjC,MAAMC,KAAgB,GAAG,CAAC,CAAC;EAC3B,IAAIJ,QAAQ,CAACK,QAAQ,IAAI,IAAI,EAAE;IAACD,KAAK,CAACC,QAAQ,GAAGL,QAAQ,CAACK,QAAQ;EAAC;EACnE,IAAIL,QAAQ,CAACM,UAAU,IAAI,IAAI,EAAE;IAACF,KAAK,CAACE,UAAU,GAAGN,QAAQ,CAACM,UAAU;EAAC;EACzE,OAAOF,KAAK,CAACC,QAAQ,IAAI,IAAI,IAAID,KAAK,CAACE,UAAU,IAAI,IAAI,GACrDF,KAAK,GACLD,SAAS;AACf,CAAC;AAACI,OAAA,CAAAV,cAAA,GAAAA,cAAA","ignoreList":[]}

package/lib/module/helpers/getElementFont.js

@@ -1,24 +0,0 @@
-"use strict";
-
-/**
- * Per-element font override from `config.typography.elements`, as an RN
- * style object suitable for appending to a component's `style` (so it
- * wins over the built-in size/weight but touches nothing else).
- * Returns undefined when the element isn't configured — appending
- * undefined to a style array is a no-op.
- */
-export const getElementFont = (config, element) => {
-  const override = config?.typography?.elements?.[element];
-  if (!override) {
-    return undefined;
-  }
-  const style = {};
-  if (override.fontSize != null) {
-    style.fontSize = override.fontSize;
-  }
-  if (override.fontWeight != null) {
-    style.fontWeight = override.fontWeight;
-  }
-  return style.fontSize != null || style.fontWeight != null ? style : undefined;
-};
-//# sourceMappingURL=getElementFont.js.map

package/lib/module/helpers/getElementFont.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["getElementFont","config","element","override","typography","elements","undefined","style","fontSize","fontWeight"],"sourceRoot":"../../../src","sources":["helpers/getElementFont.ts"],"mappings":";;AAKA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,MAAMA,cAAc,GAAGA,CAC5BC,MAA2B,EAC3BC,OAAmB,KACO;EAC1B,MAAMC,QAAQ,GAAGF,MAAM,EAAEG,UAAU,EAAEC,QAAQ,GAAGH,OAAO,CAAC;EACxD,IAAI,CAACC,QAAQ,EAAE;IAAC,OAAOG,SAAS;EAAC;EACjC,MAAMC,KAAgB,GAAG,CAAC,CAAC;EAC3B,IAAIJ,QAAQ,CAACK,QAAQ,IAAI,IAAI,EAAE;IAACD,KAAK,CAACC,QAAQ,GAAGL,QAAQ,CAACK,QAAQ;EAAC;EACnE,IAAIL,QAAQ,CAACM,UAAU,IAAI,IAAI,EAAE;IAACF,KAAK,CAACE,UAAU,GAAGN,QAAQ,CAACM,UAAU;EAAC;EACzE,OAAOF,KAAK,CAACC,QAAQ,IAAI,IAAI,IAAID,KAAK,CAACE,UAAU,IAAI,IAAI,GACrDF,KAAK,GACLD,SAAS;AACf,CAAC","ignoreList":[]}

package/lib/typescript/helpers/getElementFont.d.ts

@@ -1,13 +0,0 @@
-import type { TextStyle } from 'react-native';
-import type { IConfig, TypographyConfig } from '../types/types';
-type ElementKey = keyof NonNullable<TypographyConfig['elements']>;
-/**
- * Per-element font override from `config.typography.elements`, as an RN
- * style object suitable for appending to a component's `style` (so it
- * wins over the built-in size/weight but touches nothing else).
- * Returns undefined when the element isn't configured — appending
- * undefined to a style array is a no-op.
- */
-export declare const getElementFont: (config: IConfig | undefined, element: ElementKey) => TextStyle | undefined;
-export {};
-//# sourceMappingURL=getElementFont.d.ts.map

package/lib/typescript/helpers/getElementFont.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"getElementFont.d.ts","sourceRoot":"","sources":["../../../src/helpers/getElementFont.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAC9C,OAAO,KAAK,EAAE,OAAO,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAEhE,KAAK,UAAU,GAAG,MAAM,WAAW,CAAC,gBAAgB,CAAC,UAAU,CAAC,CAAC,CAAC;AAElE;;;;;;GAMG;AACH,eAAO,MAAM,cAAc,GACzB,QAAQ,OAAO,GAAG,SAAS,EAC3B,SAAS,UAAU,KAClB,SAAS,GAAG,SASd,CAAC"}

package/src/helpers/getElementFont.ts

@@ -1,25 +0,0 @@
-import type { TextStyle } from 'react-native';
-import type { IConfig, TypographyConfig } from '../types/types';
-
-type ElementKey = keyof NonNullable<TypographyConfig['elements']>;
-
-/**
- * Per-element font override from `config.typography.elements`, as an RN
- * style object suitable for appending to a component's `style` (so it
- * wins over the built-in size/weight but touches nothing else).
- * Returns undefined when the element isn't configured — appending
- * undefined to a style array is a no-op.
- */
-export const getElementFont = (
-  config: IConfig | undefined,
-  element: ElementKey
-): TextStyle | undefined => {
-  const override = config?.typography?.elements?.[element];
-  if (!override) {return undefined;}
-  const style: TextStyle = {};
-  if (override.fontSize != null) {style.fontSize = override.fontSize;}
-  if (override.fontWeight != null) {style.fontWeight = override.fontWeight;}
-  return style.fontSize != null || style.fontWeight != null
-    ? style
-    : undefined;
-};