@planningcenter/chat-react-native 3.15.0-rc.7 → 3.15.0-rc.9

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/icon.tsx

@@ -5,29 +5,17 @@ import { SvgXml } from 'react-native-svg'
 import type { XmlProps } from 'react-native-svg'
 import { useFontScale, useTheme } from '../../hooks'
 
-// @ts-ignore
 import * as accounts from '@planningcenter/icons/paths/accounts'
-// @ts-ignore
 import * as api from '@planningcenter/icons/paths/api'
-// @ts-ignore
 import * as brand from '@planningcenter/icons/paths/brand'
-// @ts-ignore
 import * as calendar from '@planningcenter/icons/paths/calendar'
-// @ts-ignore
 import * as chat from '@planningcenter/icons/paths/chat'
-// @ts-ignore
 import * as churchCenter from '@planningcenter/icons/paths/church-center'
-// @ts-ignore
 import * as general from '@planningcenter/icons/paths/general'
-// @ts-ignore
 import * as groups from '@planningcenter/icons/paths/groups'
-// @ts-ignore
 import * as logomark from '@planningcenter/icons/paths/logomark'
-// @ts-ignore
 import * as people from '@planningcenter/icons/paths/people'
-// @ts-ignore
 import * as services from '@planningcenter/icons/paths/services'
-// @ts-ignore
 import * as publishing from '@planningcenter/icons/paths/publishing'
 
 // =================================
@@ -57,7 +45,22 @@ export type IconStyle = ViewStyle & {
 }
 
 export type IconSetName = keyof typeof ICONS
-export type IconString = `${IconSetName}.${(typeof ICONS)[IconSetName]}`
+
+type IconName<T extends IconSetName> = keyof (typeof ICONS)[T] & string
+
+export type IconString =
+  | `accounts.${IconName<'accounts'>}`
+  | `api.${IconName<'api'>}`
+  | `brand.${IconName<'brand'>}`
+  | `calendar.${IconName<'calendar'>}`
+  | `chat.${IconName<'chat'>}`
+  | `churchCenter.${IconName<'churchCenter'>}`
+  | `general.${IconName<'general'>}`
+  | `groups.${IconName<'groups'>}`
+  | `logomark.${IconName<'logomark'>}`
+  | `people.${IconName<'people'>}`
+  | `services.${IconName<'services'>}`
+  | `publishing.${IconName<'publishing'>}`
 
 // =================================
 // ====== Component ================
@@ -137,7 +140,7 @@ const useGetIconSize = (size?: number, style?: IconStyle, maxFontSizeMultiplier?
 const getIconPath = (name: IconString): string => {
   const [setName, iconName] = name.split('.')
 
-  return ICONS[setName as IconSetName]?.[iconName]
+  return (ICONS[setName as IconSetName] as Record<string, string>)?.[iconName]
 }
 
 // =================================

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
+  }
+}

package/src/polyfills/events/Event.ts

@@ -0,0 +1,186 @@
+/**
+ * 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 `Event` interface from the DOM.
+ * See https://dom.spec.whatwg.org/#interface-event.
+ */
+
+import type RNEventTarget from './EventTarget'
+import {
+  getComposedPath,
+  getCurrentTarget,
+  getEventPhase,
+  getInPassiveListenerFlag,
+  getIsTrusted,
+  getTarget,
+  setStopImmediatePropagationFlag,
+  setStopPropagationFlag,
+  setIsTrusted,
+  setEventPhase,
+} from './internals/EventInternals'
+import { setPlatformObject } from '../webidl/PlatformObjects'
+
+export interface EventInit {
+  bubbles?: boolean
+  cancelable?: boolean
+  composed?: boolean
+}
+
+export type EventPhase = 0 | 1 | 2 | 3
+
+export default class Event {
+  static NONE: 0
+  static CAPTURING_PHASE: 1
+  static AT_TARGET: 2
+  static BUBBLING_PHASE: 3
+
+  readonly NONE!: 0
+  readonly CAPTURING_PHASE!: 1
+  readonly AT_TARGET!: 2
+  readonly BUBBLING_PHASE!: 3
+
+  private _bubbles: boolean
+  private _cancelable: boolean
+  private _composed: boolean
+  private _type: string
+
+  private _defaultPrevented: boolean = false
+  private _timeStamp: number = performance.now()
+
+  // Symbol-keyed fields are internal and managed via helpers; not declared here.
+
+  constructor(type: string, options?: EventInit | null) {
+    if (arguments.length < 1) {
+      throw new TypeError("Failed to construct 'Event': 1 argument required, but only 0 present.")
+    }
+
+    const typeOfOptions = typeof options
+    if (options != null && typeOfOptions !== 'object' && typeOfOptions !== 'function') {
+      throw new TypeError(
+        "Failed to construct 'Event': The provided value is not of type 'EventInit'."
+      )
+    }
+
+    this._type = String(type)
+    this._bubbles = Boolean((options as EventInit | undefined)?.bubbles)
+    this._cancelable = Boolean((options as EventInit | undefined)?.cancelable)
+    this._composed = Boolean((options as EventInit | undefined)?.composed)
+
+    // Initialize internal flags
+    setIsTrusted(this, false)
+    setEventPhase(this, 0 as 0)
+  }
+
+  get bubbles(): boolean {
+    return this._bubbles
+  }
+
+  get cancelable(): boolean {
+    return this._cancelable
+  }
+
+  get composed(): boolean {
+    return this._composed
+  }
+
+  get currentTarget(): RNEventTarget | null {
+    return getCurrentTarget(this)
+  }
+
+  get defaultPrevented(): boolean {
+    return this._defaultPrevented
+  }
+
+  get eventPhase(): EventPhase {
+    return getEventPhase(this)
+  }
+
+  get isTrusted(): boolean {
+    return getIsTrusted(this)
+  }
+
+  get target(): RNEventTarget | null {
+    return getTarget(this)
+  }
+
+  get timeStamp(): number {
+    return this._timeStamp
+  }
+
+  get type(): string {
+    return this._type
+  }
+
+  composedPath(): ReadonlyArray<RNEventTarget> {
+    return getComposedPath(this).slice()
+  }
+
+  preventDefault(): void {
+    if (!this._cancelable) {
+      return
+    }
+
+    if (getInPassiveListenerFlag(this)) {
+      console.error(new Error('Unable to preventDefault inside passive event listener invocation.'))
+      return
+    }
+
+    this._defaultPrevented = true
+  }
+
+  stopImmediatePropagation(): void {
+    setStopPropagationFlag(this, true)
+    setStopImmediatePropagationFlag(this, true)
+  }
+
+  stopPropagation(): void {
+    setStopPropagationFlag(this, true)
+  }
+}
+
+Object.defineProperty(Event, 'NONE', {
+  enumerable: true,
+  value: 0,
+})
+
+Object.defineProperty(Event.prototype, 'NONE', {
+  enumerable: true,
+  value: 0,
+})
+
+Object.defineProperty(Event, 'CAPTURING_PHASE', {
+  enumerable: true,
+  value: 1,
+})
+
+Object.defineProperty(Event.prototype, 'CAPTURING_PHASE', {
+  enumerable: true,
+  value: 1,
+})
+
+Object.defineProperty(Event, 'AT_TARGET', {
+  enumerable: true,
+  value: 2,
+})
+
+Object.defineProperty(Event.prototype, 'AT_TARGET', {
+  enumerable: true,
+  value: 2,
+})
+
+Object.defineProperty(Event, 'BUBBLING_PHASE', {
+  enumerable: true,
+  value: 3,
+})
+
+Object.defineProperty(Event.prototype, 'BUBBLING_PHASE', {
+  enumerable: true,
+  value: 3,
+})
+
+setPlatformObject(Event)

package/src/polyfills/events/EventHandlerAttributes.ts

@@ -0,0 +1,67 @@
+/**
+ * Helpers to implement event handler IDL attributes.
+ */
+
+import type EventTarget from './EventTarget'
+import type { EventCallback } from './EventTarget'
+
+type EventHandler = Readonly<{
+  handleEvent: EventCallback
+}>
+type EventHandlerAttributeMap = Map<string, EventHandler | null>
+
+const EVENT_HANDLER_CONTENT_ATTRIBUTE_MAP_KEY = Symbol('eventHandlerAttributeMap')
+
+function getEventHandlerAttributeMap(
+  target: EventTarget
+): EventHandlerAttributeMap | null | undefined {
+  return (target as any)[EVENT_HANDLER_CONTENT_ATTRIBUTE_MAP_KEY]
+}
+
+function setEventHandlerAttributeMap(target: EventTarget, map: EventHandlerAttributeMap | null) {
+  ;(target as any)[EVENT_HANDLER_CONTENT_ATTRIBUTE_MAP_KEY] = map
+}
+
+export function getEventHandlerAttribute(target: EventTarget, type: string): EventCallback | null {
+  const listener = getEventHandlerAttributeMap(target)?.get(type)
+  return listener != null ? listener.handleEvent : null
+}
+
+export function setEventHandlerAttribute(
+  target: EventTarget,
+  type: string,
+  callback: EventCallback | null | undefined
+): void {
+  let map = getEventHandlerAttributeMap(target)
+  if (map != null) {
+    const currentListener = map.get(type)
+    if (currentListener) {
+      target.removeEventListener(type, currentListener)
+      map.delete(type)
+    }
+  }
+
+  if (
+    callback != null &&
+    (typeof callback === 'function' || typeof (callback as any) === 'object')
+  ) {
+    const listener: EventHandler = {
+      handleEvent: callback as EventCallback,
+    }
+
+    try {
+      target.addEventListener(type, listener)
+      if (map == null) {
+        map = new Map()
+        setEventHandlerAttributeMap(target, map)
+      }
+      map.set(type, listener)
+    } catch (_e) {
+      // Assigning incorrect listener does not throw in setters.
+    }
+  }
+
+  if (map != null && map.size === 0) {
+    setEventHandlerAttributeMap(target, null)
+  }
+}