@linktr.ee/messaging-react 3.15.0 → 3.15.1-rc-1784866707

package/dist/index.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./index-NcnnPWrl.cjs");exports.ActionButton=e.ActionButton;exports.Avatar=e.Avatar;exports.ChannelEmptyState=e.ChannelEmptyState;exports.ChannelList=e.ChannelList;exports.ChannelView=e.ChannelView;exports.CustomMessageProvider=e.CustomMessageProvider;exports.FaqList=e.FaqList;exports.FaqListItem=e.FaqListItem;exports.LinkAttachment=e.LinkAttachment;exports.LockedAttachment=e.LockedAttachment;exports.MediaMessage=e.MediaMessage;exports.MessageAttachment=e.MessageAttachment;exports.MessageBubble=e.MessageBubble;exports.MessageVoteButtons=e.MessageVoteButtons;exports.MessagingProvider=e.MessagingProvider;exports.MessagingShell=e.MessagingShell;exports.buildCompactMetaLabel=e.buildCompactMetaLabel;exports.formatFileSize=e.formatFileSize;exports.formatRelativeTime=e.formatRelativeTime;exports.getFileExtensionLabel=e.getFileExtensionLabel;exports.getMessageDisplayText=e.getMessageDisplayText;exports.isLinkAttachment=e.isLinkAttachment;exports.isUuidLike=e.isUuidLike;exports.messageAttachmentGroupPositionFromStream=e.bubbleGroupPositionFromStream;exports.normalizeLanguageCode=e.normalizeLanguageCode;exports.optimizeMessagingAttachmentUrl=e.optimizeMessagingAttachmentUrl;exports.resolveConversationParticipant=e.resolveConversationParticipant;exports.resolveLinkAttachment=e.resolveLinkAttachment;exports.resolveMediaFromMessage=e.resolveMediaFromMessage;exports.resolveParticipantDisplayName=e.resolveParticipantDisplayName;exports.useComposerLocked=e.useComposerLocked;exports.useCustomMessage=e.useCustomMessage;exports.useMessageVote=e.useMessageVote;exports.useMessaging=e.useMessaging;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./index-stv1fd7v.cjs");exports.ActionButton=e.ActionButton;exports.Avatar=e.Avatar;exports.ChannelEmptyState=e.ChannelEmptyState;exports.ChannelList=e.ChannelList;exports.ChannelView=e.ChannelView;exports.CustomMessageProvider=e.CustomMessageProvider;exports.FaqList=e.FaqList;exports.FaqListItem=e.FaqListItem;exports.LinkAttachment=e.LinkAttachment;exports.LockedAttachment=e.LockedAttachment;exports.MediaMessage=e.MediaMessage;exports.MessageAttachment=e.MessageAttachment;exports.MessageBubble=e.MessageBubble;exports.MessageVoteButtons=e.MessageVoteButtons;exports.MessagingProvider=e.MessagingProvider;exports.MessagingShell=e.MessagingShell;exports.buildCompactMetaLabel=e.buildCompactMetaLabel;exports.formatFileSize=e.formatFileSize;exports.formatRelativeTime=e.formatRelativeTime;exports.getFileExtensionLabel=e.getFileExtensionLabel;exports.getMessageDisplayText=e.getMessageDisplayText;exports.isLinkAttachment=e.isLinkAttachment;exports.isUuidLike=e.isUuidLike;exports.messageAttachmentGroupPositionFromStream=e.bubbleGroupPositionFromStream;exports.normalizeLanguageCode=e.normalizeLanguageCode;exports.optimizeMessagingAttachmentUrl=e.optimizeMessagingAttachmentUrl;exports.resolveConversationParticipant=e.resolveConversationParticipant;exports.resolveLinkAttachment=e.resolveLinkAttachment;exports.resolveMediaFromMessage=e.resolveMediaFromMessage;exports.resolveParticipantDisplayName=e.resolveParticipantDisplayName;exports.useComposerLocked=e.useComposerLocked;exports.useCustomMessage=e.useCustomMessage;exports.useMessageVote=e.useMessageVote;exports.useMessaging=e.useMessaging;
 //# sourceMappingURL=index.cjs.map

package/dist/index.js

@@ -1,4 +1,4 @@
-import { a as e, b as t, C as i, c as o, d as n, e as m, F as r, f as g, L as l, h as M, M as c, i as u, j as L, k as h, l as p, m as d, n as v, p as C, q as A, s as k, t as F, u as b, v as P, w as f, x, o as y, y as z, z as B, B as S, D as q, E as D, G as E, H as V, I as w } from "./index-DdVzOymJ.js";
+import { a as e, b as t, C as i, c as o, d as n, e as m, F as r, f as g, L as l, h as M, M as c, i as u, j as L, k as h, l as p, m as d, n as v, p as C, q as A, s as k, t as F, u as b, v as P, w as f, x, o as y, y as z, z as B, B as S, D as q, E as D, G as E, H as V, I as w } from "./index-BOThiuy9.js";
 export {
   e as ActionButton,
   t as Avatar,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@linktr.ee/messaging-react",
-  "version": "3.15.0",
+  "version": "3.15.1-rc-1784866707",
   "description": "React messaging components built on messaging-core for web applications",
   "type": "module",
   "main": "dist/index.cjs",
@@ -50,7 +50,7 @@
   },
   "dependencies": {
     "@linktr.ee/component-library": "11.8.6",
-    "@linktr.ee/messaging-core": "^2.2.0",
+    "@linktr.ee/messaging-core": "2.3.0-rc-1784866707",
     "@phosphor-icons/react": "^2.1.10"
   },
   "devDependencies": {

package/src/components/CustomMessageInput/index.tsx

@@ -11,6 +11,7 @@ import {
   useMessageInputContext,
 } from 'stream-chat-react'
 
+import { isIOS } from '../../utils/isIOS'
 import { CustomLinkPreviewList } from '../CustomLinkPreviewList'
 
 /**
@@ -33,6 +34,10 @@ const ComposerLockedContext = React.createContext(false)
  */
 const NEAR_BOTTOM_THRESHOLD_PX = 200
 
+// Read once: the user agent doesn't change over a session, so there's no
+// reason to re-run the check on every render.
+const IS_IOS = isIOS()
+
 /**
  * Read the composer's locked (frozen-channel) state from inside a custom
  * composer supplied via `composerInput`. Returns true when the channel is
@@ -119,9 +124,13 @@ const CustomMessageInputInner: React.FC = () => {
           className="w-full resize-none bg-transparent py-3.5 pl-4 pr-4 outline-none leading-5 placeholder:text-black/30 text-sm"
           // While this might usually be considered an anti-pattern, in most
           // cases, when a message thread is rendered, we want the input to
-          // gain focus automatically.
+          // gain focus automatically. Skipped on iOS: WebKit only opens the
+          // keyboard for a focus() made inside a genuine user gesture, so
+          // autofocusing on mount just flashes focus (enough to trip a
+          // host's focus-driven viewport resize) before WebKit revokes it —
+          // net worse than waiting for the user's first tap.
           // eslint-disable-next-line jsx-a11y/no-autofocus
-          autoFocus={!disabled}
+          autoFocus={!disabled && !IS_IOS}
           // Enter sends (Shift+Enter inserts a newline), so label the
           // on-screen keyboard's return key accordingly.
           enterKeyHint="send"

package/src/utils/isIOS.test.ts

@@ -0,0 +1,54 @@
+import { afterEach, describe, expect, it, vi } from 'vitest'
+
+import { isIOS } from './isIOS'
+
+const mockNavigator = (overrides: Partial<Navigator>) => {
+  vi.stubGlobal('navigator', { ...navigator, ...overrides })
+}
+
+describe('isIOS', () => {
+  afterEach(() => {
+    vi.unstubAllGlobals()
+  })
+
+  it('detects iPhone user agents', () => {
+    mockNavigator({
+      userAgent:
+        'Mozilla/5.0 (iPhone; CPU iPhone OS 17_0 like Mac OS X) AppleWebKit/605.1.15',
+    })
+
+    expect(isIOS()).toBe(true)
+  })
+
+  it('detects iPadOS, which reports as MacIntel but exposes touch points', () => {
+    mockNavigator({
+      userAgent:
+        'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_6) AppleWebKit/605.1.15',
+      platform: 'MacIntel',
+      maxTouchPoints: 5,
+    })
+
+    expect(isIOS()).toBe(true)
+  })
+
+  it('does not flag a real Mac (no touch points)', () => {
+    mockNavigator({
+      userAgent:
+        'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_6) AppleWebKit/605.1.15',
+      platform: 'MacIntel',
+      maxTouchPoints: 0,
+    })
+
+    expect(isIOS()).toBe(false)
+  })
+
+  it('does not flag Android', () => {
+    mockNavigator({
+      userAgent: 'Mozilla/5.0 (Linux; Android 14) AppleWebKit/537.36',
+      platform: 'Linux armv81',
+      maxTouchPoints: 5,
+    })
+
+    expect(isIOS()).toBe(false)
+  })
+})

package/src/utils/isIOS.ts

@@ -0,0 +1,19 @@
+/**
+ * True on iOS (including iPadOS, which reports as `MacIntel` but exposes
+ * touch points a real Mac never does). WebKit only opens the on-screen
+ * keyboard for a `focus()` call made inside a genuine user gesture — an
+ * `autoFocus`/programmatic focus on mount briefly flashes focus (enough to
+ * trip a host's focus-driven viewport resize) before WebKit revokes it, so
+ * callers use this to skip autofocusing the composer on iOS and let the
+ * user's first tap focus it instead.
+ */
+export function isIOS(): boolean {
+  if (typeof navigator === 'undefined') {
+    return false
+  }
+
+  return (
+    /iPad|iPhone|iPod/.test(navigator.userAgent) ||
+    (navigator.platform === 'MacIntel' && navigator.maxTouchPoints > 1)
+  )
+}