@planningcenter/chat-react-native 3.15.0-rc.6 → 3.15.0-rc.8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@planningcenter/chat-react-native",
-  "version": "3.15.0-rc.6",
+  "version": "3.15.0-rc.8",
   "description": "",
   "main": "build/index.js",
   "types": "build/index.d.ts",
@@ -26,7 +26,7 @@
     "@react-navigation/elements": "*",
     "@react-navigation/native": ">=7.0.0",
     "@react-navigation/native-stack": ">=7.0.0",
-    "@shopify/flash-list": "*",
+    "@shopify/flash-list": "<2.0.0",
     "@tanstack/react-query": "^5.0.0",
     "color": "^3.1.2",
     "lodash": "*",
@@ -37,7 +37,7 @@
     "react-native-device-info": "*",
     "react-native-gesture-handler": "*",
     "react-native-linear-gradient": "^2.8.3",
-    "react-native-reanimated": "*",
+    "react-native-reanimated": "<4.0.0",
     "react-native-safe-area-context": ">=4.0.0",
     "react-native-svg": "*"
   },
@@ -46,7 +46,7 @@
     "@testing-library/react-hooks": "^8.0.1",
     "@types/jest": "^29.5.14",
     "@typescript-eslint/parser": "^8.32.0",
-    "expo-module-scripts": "^4.1.6",
+    "expo-module-scripts": "^5.0.7",
     "fast-text-encoding": "^1.0.6",
     "jest": "^29.7.0",
     "jest-fetch-mock": "^3.0.3",
@@ -55,5 +55,5 @@
     "react-native-url-polyfill": "^2.0.0",
     "typescript": "<5.6.0"
   },
-  "gitHead": "c9061788178feeb893f4e54b88f2b515658061d7"
+  "gitHead": "98f7a5fc0b4d1fa7127a7fc4e151dc706147c29f"
 }

package/src/__tests__/event-polyfill.test.ts

@@ -0,0 +1,314 @@
+/**
+ * Tests for Event/CustomEvent/EventTarget polyfills
+ */
+
+import Event from '../polyfills/events/Event'
+import EventTarget from '../polyfills/events/EventTarget'
+import { CustomEvent } from '../polyfills/events/CustomEvent'
+
+// Set up global polyfill for tests
+;(global as any).Event = Event
+;(global as any).CustomEvent = CustomEvent
+
+describe('Event Polyfill', () => {
+  describe('Event', () => {
+    it('should create a basic event', () => {
+      const event = new Event('test')
+      expect(event.type).toBe('test')
+      expect(event.bubbles).toBe(false)
+      expect(event.cancelable).toBe(false)
+      expect(event.composed).toBe(false)
+      expect(event.defaultPrevented).toBe(false)
+      expect(event.isTrusted).toBe(false)
+      expect(event.eventPhase).toBe(Event.NONE)
+      expect(typeof event.timeStamp).toBe('number')
+    })
+
+    it('should create an event with options', () => {
+      const event = new Event('test', {
+        bubbles: true,
+        cancelable: true,
+        composed: true,
+      })
+      expect(event.bubbles).toBe(true)
+      expect(event.cancelable).toBe(true)
+      expect(event.composed).toBe(true)
+    })
+
+    it('should have correct phase constants', () => {
+      expect(Event.NONE).toBe(0)
+      expect(Event.CAPTURING_PHASE).toBe(1)
+      expect(Event.AT_TARGET).toBe(2)
+      expect(Event.BUBBLING_PHASE).toBe(3)
+    })
+
+    it('should prevent default when cancelable', () => {
+      const event = new Event('test', { cancelable: true })
+      expect(event.defaultPrevented).toBe(false)
+      event.preventDefault()
+      expect(event.defaultPrevented).toBe(true)
+    })
+
+    it('should not prevent default when not cancelable', () => {
+      const event = new Event('test', { cancelable: false })
+      event.preventDefault()
+      expect(event.defaultPrevented).toBe(false)
+    })
+
+    it('should support stopPropagation', () => {
+      const event = new Event('test')
+      // No error thrown - internal flags are set
+      event.stopPropagation()
+      event.stopImmediatePropagation()
+    })
+  })
+
+  describe('CustomEvent', () => {
+    it('should create a custom event with detail', () => {
+      const detail = { foo: 'bar', count: 42 }
+      const event = new CustomEvent('custom', { detail })
+      expect(event.type).toBe('custom')
+      expect(event.detail).toEqual(detail)
+    })
+
+    it('should inherit from Event', () => {
+      const event = new CustomEvent('custom', {
+        bubbles: true,
+        cancelable: true,
+        detail: 'test',
+      })
+      expect(event instanceof Event).toBe(true)
+      expect(event.bubbles).toBe(true)
+      expect(event.cancelable).toBe(true)
+    })
+
+    it('should handle undefined detail', () => {
+      const event = new CustomEvent('custom')
+      expect(event.detail).toBeUndefined()
+    })
+  })
+
+  describe('EventTarget', () => {
+    let target: EventTarget
+
+    beforeEach(() => {
+      target = new EventTarget()
+    })
+
+    it('should add and remove event listeners', () => {
+      const listener = jest.fn()
+      target.addEventListener('test', listener)
+
+      const event = new Event('test')
+      const result = target.dispatchEvent(event)
+
+      expect(listener).toHaveBeenCalledWith(event)
+      expect(listener).toHaveBeenCalledTimes(1)
+      expect(result).toBe(true) // not prevented
+
+      target.removeEventListener('test', listener)
+      target.dispatchEvent(new Event('test'))
+      expect(listener).toHaveBeenCalledTimes(1) // not called again
+    })
+
+    it('should handle multiple listeners for the same event', () => {
+      const listener1 = jest.fn()
+      const listener2 = jest.fn()
+
+      target.addEventListener('test', listener1)
+      target.addEventListener('test', listener2)
+
+      target.dispatchEvent(new Event('test'))
+
+      expect(listener1).toHaveBeenCalledTimes(1)
+      expect(listener2).toHaveBeenCalledTimes(1)
+    })
+
+    it('should handle once option', () => {
+      const listener = jest.fn()
+      target.addEventListener('test', listener, { once: true })
+
+      target.dispatchEvent(new Event('test'))
+      target.dispatchEvent(new Event('test'))
+
+      expect(listener).toHaveBeenCalledTimes(1)
+    })
+
+    it('should handle capture option', () => {
+      const listener = jest.fn()
+      target.addEventListener('test', listener, { capture: true })
+
+      target.dispatchEvent(new Event('test'))
+      expect(listener).toHaveBeenCalledTimes(1)
+
+      target.removeEventListener('test', listener, { capture: true })
+      target.dispatchEvent(new Event('test'))
+      expect(listener).toHaveBeenCalledTimes(1)
+    })
+
+    it('should handle passive option', () => {
+      const listener = jest.fn()
+      target.addEventListener('test', listener, { passive: true })
+
+      target.dispatchEvent(new Event('test'))
+      expect(listener).toHaveBeenCalledTimes(1)
+    })
+
+    it('should handle object listeners with handleEvent', () => {
+      const listener = {
+        handleEvent: jest.fn(),
+      }
+
+      target.addEventListener('test', listener)
+      target.dispatchEvent(new Event('test'))
+
+      expect(listener.handleEvent).toHaveBeenCalledTimes(1)
+    })
+
+    it('should return false when event is prevented', () => {
+      const listener = (event: Event) => {
+        event.preventDefault()
+      }
+
+      target.addEventListener('test', listener)
+      const event = new Event('test', { cancelable: true })
+      const result = target.dispatchEvent(event)
+
+      expect(result).toBe(false)
+      expect(event.defaultPrevented).toBe(true)
+    })
+
+    it('should set event properties during dispatch', () => {
+      let capturedEvent: Event | null = null
+
+      const listener = (event: Event) => {
+        capturedEvent = event
+        expect(event.target).toBe(target)
+        expect(event.currentTarget).toBe(target)
+        expect(event.eventPhase).toBe(Event.AT_TARGET)
+      }
+
+      target.addEventListener('test', listener)
+      target.dispatchEvent(new Event('test'))
+
+      expect(capturedEvent).not.toBeNull()
+      // After dispatch, these should be reset
+      expect(capturedEvent!.currentTarget).toBeNull()
+      expect(capturedEvent!.eventPhase).toBe(Event.NONE)
+    })
+
+    it('should handle bubbling events', () => {
+      const listener = jest.fn()
+      target.addEventListener('test', listener)
+
+      const bubblingEvent = new Event('test', { bubbles: true })
+      target.dispatchEvent(bubblingEvent)
+
+      expect(listener).toHaveBeenCalledWith(bubblingEvent)
+    })
+
+    it('should handle error in listener gracefully', () => {
+      const errorListener = () => {
+        throw new Error('Test error')
+      }
+      const normalListener = jest.fn()
+
+      // Mock console.error to avoid test output noise
+      const consoleErrorSpy = jest.spyOn(console, 'error').mockImplementation()
+
+      target.addEventListener('test', errorListener)
+      target.addEventListener('test', normalListener)
+
+      target.dispatchEvent(new Event('test'))
+
+      expect(normalListener).toHaveBeenCalledTimes(1)
+      expect(consoleErrorSpy).toHaveBeenCalled()
+
+      consoleErrorSpy.mockRestore()
+    })
+
+    it('should ignore null listeners', () => {
+      // Should not throw
+      target.addEventListener('test', null)
+      target.removeEventListener('test', null)
+      target.dispatchEvent(new Event('test'))
+    })
+
+    it('should handle composed path', () => {
+      let composedPath: readonly EventTarget[] | null = null
+
+      const listener = (event: Event) => {
+        composedPath = event.composedPath()
+      }
+
+      target.addEventListener('test', listener)
+      target.dispatchEvent(new Event('test'))
+
+      expect(composedPath).toEqual([target])
+    })
+
+    it('should prevent duplicate listeners', () => {
+      const listener = jest.fn()
+
+      target.addEventListener('test', listener)
+      target.addEventListener('test', listener) // Same listener
+
+      target.dispatchEvent(new Event('test'))
+      expect(listener).toHaveBeenCalledTimes(1) // Only called once
+    })
+  })
+
+  describe('Event flow integration', () => {
+    it('should work with CustomEvent dispatch', () => {
+      const target = new EventTarget()
+      const listener = jest.fn()
+      const detail = { message: 'hello' }
+
+      target.addEventListener('custom', listener)
+
+      const event = new CustomEvent('custom', {
+        detail,
+        bubbles: true,
+        cancelable: true,
+      })
+
+      const result = target.dispatchEvent(event)
+
+      expect(listener).toHaveBeenCalledWith(event)
+      expect(listener.mock.calls[0][0].detail).toEqual(detail)
+      expect(result).toBe(true)
+    })
+
+    it('should handle stopImmediatePropagation', () => {
+      const target = new EventTarget()
+      const listener1 = jest.fn((event: Event) => {
+        event.stopImmediatePropagation()
+      })
+      const listener2 = jest.fn()
+
+      target.addEventListener('test', listener1)
+      target.addEventListener('test', listener2)
+
+      target.dispatchEvent(new Event('test'))
+
+      expect(listener1).toHaveBeenCalledTimes(1)
+      expect(listener2).toHaveBeenCalledTimes(0) // Stopped
+    })
+  })
+
+  describe('Global polyfill installation', () => {
+    it('should make Event available globally', () => {
+      // This tests that our polyfill setup works
+      expect(typeof (global as any).Event).toBe('function')
+      expect(typeof (global as any).CustomEvent).toBe('function')
+
+      const globalEvent = new (global as any).Event('test')
+      expect(globalEvent.type).toBe('test')
+
+      const globalCustomEvent = new (global as any).CustomEvent('custom', {
+        detail: 'test',
+      })
+      expect(globalCustomEvent.detail).toBe('test')
+    })
+  })
+})

package/src/components/display/avatar.tsx

@@ -12,6 +12,8 @@ interface AvatarProps {
   presence?: AvatarPresenceProps['presence']
   showFallback?: boolean
   fallbackIconName?: IconString
+  style?: AvatarRootProps['style']
+  maxFontSizeMultiplier?: AvatarRootProps['maxFontSizeMultiplier']
 }
 
 export function Avatar({
@@ -20,11 +22,13 @@ export function Avatar({
   sourceUri,
   showFallback = false,
   fallbackIconName = 'general.person',
+  style,
+  maxFontSizeMultiplier,
 }: AvatarProps) {
   const shouldShowFallback = showFallback || !sourceUri
 
   return (
-    <AvatarPrimitive.Root size={size}>
+    <AvatarPrimitive.Root size={size} style={style} maxFontSizeMultiplier={maxFontSizeMultiplier}>
       <AvatarPrimitive.Mask>
         {shouldShowFallback ? (
           <AvatarPrimitive.ImageFallback name={fallbackIconName} />

package/src/components/display/avatar_group.tsx

@@ -10,6 +10,8 @@ interface AvatarGroupDisplayProps {
   showFallback?: boolean
   fallbackIconName?: IconString
   size?: AvatarRootProps['size']
+  style?: AvatarRootProps['style']
+  maxFontSizeMultiplier?: AvatarRootProps['maxFontSizeMultiplier']
 }
 
 export function AvatarGroup({
@@ -17,11 +19,13 @@ export function AvatarGroup({
   showFallback = false,
   fallbackIconName = 'general.person',
   size = 'lg',
+  style,
+  maxFontSizeMultiplier,
 }: AvatarGroupDisplayProps) {
   const shouldShowFallback = showFallback || !sourceUris || sourceUris.length === 0
 
   return (
-    <AvatarPrimitive.Root size={size}>
+    <AvatarPrimitive.Root size={size} style={style} maxFontSizeMultiplier={maxFontSizeMultiplier}>
       <AvatarPrimitive.Mask>
         {shouldShowFallback ? (
           <AvatarPrimitive.ImageFallback name={fallbackIconName} />

package/src/components/primitive/avatar_primitive.tsx

@@ -85,6 +85,7 @@ interface AvatarContextType {
   size: AvatarSize
   allImagesLoaded: boolean
   setAllImagesLoaded: React.Dispatch<React.SetStateAction<boolean>>
+  maxFontSizeMultiplier: number
 }
 
 const AvatarContext = createContext<AvatarContextType | null>(null)
@@ -104,15 +105,24 @@ function useAvatarContext() {
 interface AvatarRootProps {
   children: React.ReactNode
   size?: AvatarSize
+  style?: ViewProps['style']
+  maxFontSizeMultiplier?: number
 }
 
-function AvatarRoot({ children, size = 'md' }: AvatarRootProps) {
+function AvatarRoot({
+  children,
+  size = 'md',
+  style,
+  maxFontSizeMultiplier = MAX_FONT_SIZE_MULTIPLIER,
+}: AvatarRootProps) {
   const [allImagesLoaded, setAllImagesLoaded] = useState(false)
-  const styles = useStyles({ size })
+  const styles = useStyles({ size, maxFontSizeMultiplier })
 
   return (
-    <AvatarContext.Provider value={{ size, allImagesLoaded, setAllImagesLoaded }}>
-      <View style={styles.rootContainer}>{children}</View>
+    <AvatarContext.Provider
+      value={{ size, allImagesLoaded, setAllImagesLoaded, maxFontSizeMultiplier }}
+    >
+      <View style={[styles.rootContainer, style]}>{children}</View>
     </AvatarContext.Provider>
   )
 }
@@ -126,7 +136,8 @@ AvatarRoot.displayName = 'Avatar.Root'
 type AvatarMaskProps = ViewProps
 
 function AvatarMask({ children, ...props }: AvatarMaskProps) {
-  const styles = useStyles()
+  const { maxFontSizeMultiplier } = useAvatarContext()
+  const styles = useStyles({ maxFontSizeMultiplier })
 
   return (
     <View style={styles.mask} {...props}>
@@ -146,8 +157,8 @@ interface AvatarImageProps extends Omit<ImageProps, 'source' | 'alt'> {
 }
 
 function AvatarImage({ sourceUri, ...props }: AvatarImageProps) {
-  const { size } = useAvatarContext()
-  const fontScale = useFontScale({ maxFontSizeMultiplier: MAX_FONT_SIZE_MULTIPLIER })
+  const { size, maxFontSizeMultiplier } = useAvatarContext()
+  const fontScale = useFontScale({ maxFontSizeMultiplier })
   const scaledAvatarSize = AVATAR_PX[size] * fontScale
 
   return <Image source={{ uri: sourceUri }} loaderSize={scaledAvatarSize} {...props} alt="" />
@@ -172,9 +183,9 @@ interface AvatarImageFallbackProps {
 }
 
 function AvatarImageFallback({ name = 'general.person' }: AvatarImageFallbackProps) {
-  const { size } = useAvatarContext()
-  const styles = useStyles()
-  const fontScale = useFontScale({ maxFontSizeMultiplier: MAX_FONT_SIZE_MULTIPLIER })
+  const { size, maxFontSizeMultiplier } = useAvatarContext()
+  const styles = useStyles({ maxFontSizeMultiplier })
+  const fontScale = useFontScale({ maxFontSizeMultiplier })
   const scaledIconSize = AVATAR_FALLBACK_ICON_PX[size] * fontScale
 
   return (
@@ -202,8 +213,8 @@ interface AvatarGroupProps {
 type AvatarIndex = 0 | 1 | 2 | 3
 
 function AvatarGroup({ sourceUris }: AvatarGroupProps) {
-  const styles = useStyles()
-  const { setAllImagesLoaded } = useAvatarContext()
+  const { setAllImagesLoaded, maxFontSizeMultiplier } = useAvatarContext()
+  const styles = useStyles({ maxFontSizeMultiplier })
   const [loadingStatus, setLoadingStatus] = useState<Record<AvatarIndex, boolean>>({
     0: false,
     1: false,
@@ -312,9 +323,9 @@ AvatarGroup.displayName = 'Avatar.Group'
 // =================================
 
 function AvatarGroupLoader() {
-  const { size, allImagesLoaded } = useAvatarContext()
-  const styles = useStyles({ size })
-  const fontScale = useFontScale({ maxFontSizeMultiplier: MAX_FONT_SIZE_MULTIPLIER })
+  const { size, allImagesLoaded, maxFontSizeMultiplier } = useAvatarContext()
+  const styles = useStyles({ size, maxFontSizeMultiplier })
+  const fontScale = useFontScale({ maxFontSizeMultiplier })
   const scaledSpinnerSize = AVATAR_PX[size] * fontScale
 
   if (allImagesLoaded) return null
@@ -337,8 +348,8 @@ interface AvatarPresenceProps extends ViewProps {
 }
 
 function AvatarPresence({ presence, ...props }: AvatarPresenceProps) {
-  const { size } = useAvatarContext()
-  const styles = useStyles({ size, presence })
+  const { size, maxFontSizeMultiplier } = useAvatarContext()
+  const styles = useStyles({ size, presence, maxFontSizeMultiplier })
 
   return <View style={styles.presence} {...props} />
 }
@@ -352,11 +363,16 @@ AvatarPresence.displayName = 'Avatar.Presence'
 interface Styles {
   size?: AvatarSize
   presence?: AvatarPresenceType
+  maxFontSizeMultiplier?: number
 }
 
-const useStyles = ({ size = 'md', presence = 'offline' }: Styles = {}) => {
+const useStyles = ({
+  size = 'md',
+  presence = 'offline',
+  maxFontSizeMultiplier = MAX_FONT_SIZE_MULTIPLIER,
+}: Styles = {}) => {
   const { colors } = useTheme()
-  const fontScale = useFontScale({ maxFontSizeMultiplier: MAX_FONT_SIZE_MULTIPLIER })
+  const fontScale = useFontScale({ maxFontSizeMultiplier })
   const PRESENCE_COLOR = {
     online: colors.fillColorInteractionOnlineDefault,
     offline: colors.iconColorDefaultDisabled,

package/src/index.tsx

@@ -8,3 +8,5 @@ export * from './types'
 export { platformFontWeightBold, Session, TemporaryDefaultColorsType, Uri } from './utils'
 export * from './utils/client'
 export * from './utils/native_adapters'
+export { default as Event } from './polyfills/events/Event'
+export { CustomEvent } from './polyfills/events/CustomEvent'

package/src/polyfills/events/CustomEvent.ts

@@ -0,0 +1,32 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+/**
+ * This module implements the `CustomEvent` interface from the DOM.
+ * See https://dom.spec.whatwg.org/#interface-customevent.
+ */
+
+import Event from './Event'
+import type { EventInit as RNEventInit } from './Event'
+
+export interface CustomEventInit extends RNEventInit {
+  detail?: unknown
+}
+
+export class CustomEvent extends Event {
+  private _detail: unknown
+
+  constructor(type: string, options?: CustomEventInit) {
+    super(type, options)
+
+    this._detail = options?.detail
+  }
+
+  get detail(): unknown {
+    return this._detail
+  }
+}