@planningcenter/chat-react-native 3.15.0-rc.0 → 3.15.0-rc.10

package/src/components/display/pressable_row.tsx

@@ -0,0 +1,103 @@
+import { PlatformPressable } from '@react-navigation/elements'
+import { PropsWithChildren } from 'react'
+import { StyleSheet, View, ViewStyle } from 'react-native'
+import { useTheme } from '../../hooks'
+import { Icon, IconProps } from './icon'
+import { Text } from './text'
+
+export interface PressableRowProps extends PropsWithChildren {
+  isActive?: boolean
+  onPress: () => void
+  style?: ViewStyle
+  textStyle?: any
+  text: string
+  iconPath?: IconProps['name']
+  iconColor?: string
+}
+
+export const PressableRow = ({
+  children,
+  isActive,
+  onPress,
+  style,
+  text,
+  textStyle,
+  iconPath,
+  iconColor,
+}: PressableRowProps) => {
+  const styles = useRowStyles({ isActive, iconColor })
+
+  return (
+    <PlatformPressable
+      style={styles.container}
+      onPress={onPress}
+      accessibilityRole="radio"
+      accessibilityState={{ selected: isActive }}
+    >
+      <View style={[styles.innerContainer, style]}>
+        {children}
+        <Text style={textStyle}>{text}</Text>
+        <Icon
+          name={iconPath || 'general.check'}
+          size={16}
+          style={styles.rowIconRight}
+          accessibilityElementsHidden
+        />
+      </View>
+    </PlatformPressable>
+  )
+}
+
+const ASPECT_RATIO = 16 / 9
+const THUMBNAIL_WIDTH = 80
+const THUMBNAIL_HEIGHT = THUMBNAIL_WIDTH / ASPECT_RATIO
+
+const useRowStyles = ({
+  isActive = false,
+  iconColor,
+}: { isActive?: boolean; iconColor?: string } = {}) => {
+  const theme = useTheme()
+  return StyleSheet.create({
+    container: {
+      paddingLeft: 16,
+    },
+    innerContainer: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      gap: 12,
+      borderBottomWidth: 1,
+      borderBottomColor: theme.colors.fillColorNeutral050Base,
+      paddingVertical: 12,
+      paddingRight: 16,
+    },
+    borderLessRow: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      gap: 12,
+      paddingVertical: 12,
+      paddingRight: 16,
+      paddingLeft: 16,
+    },
+    viewMoreButton: {
+      flex: 1,
+    },
+    row: {},
+    rowImage: {
+      width: THUMBNAIL_WIDTH,
+      height: THUMBNAIL_HEIGHT,
+      borderRadius: 4,
+    },
+    rowContent: {
+      flexShrink: 1,
+    },
+    rowIconRight: {
+      marginLeft: 'auto',
+      color: iconColor || theme.colors.iconColorDefaultDim,
+      opacity: isActive ? 1 : 0,
+    },
+    rowTitle: {
+      fontSize: 16,
+      flexShrink: 1,
+    },
+  })
+}

package/src/components/display/toggle_button.tsx

@@ -17,11 +17,20 @@ import { Icon, IconString } from './icon'
 import { tokens } from '../../vendor/tapestry/tokens'
 import { Haptic } from '../../utils/native_adapters/configuration'
 
+// =================================
+// ====== Constants ================
+// =================================
+
+// We are omitting `onLongPress` because we are instead supporting `accessibilityShowsLargeContentViewer`.
+// This is triggered by an `onLongPress` event when an iOS device is in Apple's accessible font scale range.
+// Triggering this prop will display an almost full screen iOS a11y button.
+type RestrictedPressableProps = Omit<PressableProps, 'onLongPress'>
+
 // =================================
 // ====== Component ================
 // =================================
 
-export interface ToggleButtonProps extends PressableProps {
+export interface ToggleButtonProps extends RestrictedPressableProps {
   /**
    * Pressable container styles
    */
@@ -102,6 +111,8 @@ export function ToggleButton({
       accessibilityState={{ checked: active }}
       android_ripple={{ color: androidRippleColor, borderless: false, foreground: true }}
       onPress={handlePress}
+      accessibilityShowsLargeContentViewer
+      accessibilityLargeContentTitle={title}
       {...props}
     >
       {iconNameLeft && (

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/components/primitive/form_sheet.tsx

@@ -14,6 +14,7 @@ import { useSafeAreaInsets } from 'react-native-safe-area-context'
 import { useTheme } from '../../hooks'
 import type { ButtonProps, TextButtonProps } from '../display'
 import { Button, Heading, Icon, IconString, Text, TextButton } from '../display'
+import { MAX_FONT_SIZE_MULTIPLIER_LANDMARK } from '../../utils'
 
 // =================================
 // ====== Exports ==================
@@ -146,7 +147,11 @@ function FormSheetHeaderTitle({ children }: FormSheetHeaderTitleProps) {
   const styles = useStyles()
 
   return (
-    <Heading variant="h3" style={styles.headerTitle} maxFontSizeMultiplier={1}>
+    <Heading
+      variant="h3"
+      style={styles.headerTitle}
+      maxFontSizeMultiplier={MAX_FONT_SIZE_MULTIPLIER_LANDMARK}
+    >
       {children}
     </Heading>
   )
@@ -174,10 +179,23 @@ FormSheetHeaderActions.displayName = 'FormSheet.HeaderActions'
 // ====== FormSheetHeaderTextButton ==========
 // ===========================================
 
-interface FormSheetHeaderTextButtonProps extends Omit<TextButtonProps, 'maxFontSizeMultiplier'> {}
+// We are omitting `onLongPress` because we are instead supporting `accessibilityShowsLargeContentViewer`.
+// This is triggered by an `onLongPress` event when an iOS device is in Apple's accessible font scale range.
+// Triggering this prop will display an almost full screen iOS a11y button.
+interface FormSheetHeaderTextButtonProps
+  extends Omit<TextButtonProps, 'maxFontSizeMultiplier' | 'onLongPress'> {
+  children: string
+}
 
 function FormSheetHeaderTextButton(props: FormSheetHeaderTextButtonProps) {
-  return <TextButton {...props} maxFontSizeMultiplier={1} />
+  return (
+    <TextButton
+      {...props}
+      maxFontSizeMultiplier={MAX_FONT_SIZE_MULTIPLIER_LANDMARK}
+      accessibilityShowsLargeContentViewer
+      accessibilityLargeContentTitle={props.children}
+    />
+  )
 }
 
 FormSheetHeaderTextButton.displayName = 'FormSheet.HeaderTextButton'
@@ -186,10 +204,19 @@ FormSheetHeaderTextButton.displayName = 'FormSheet.HeaderTextButton'
 // ====== FormSheetHeaderButton ============
 // =========================================
 
-interface FormSheetHeaderButtonProps extends Omit<ButtonProps, 'maxFontSizeMultiplier'> {}
+// Same `onLongPress`note as `FormSheetHeaderTextButtonProps`
+interface FormSheetHeaderButtonProps
+  extends Omit<ButtonProps, 'maxFontSizeMultiplier' | 'onLongPress'> {}
 
 function FormSheetHeaderButton(props: FormSheetHeaderButtonProps) {
-  return <Button {...props} maxFontSizeMultiplier={1} />
+  return (
+    <Button
+      {...props}
+      maxFontSizeMultiplier={MAX_FONT_SIZE_MULTIPLIER_LANDMARK}
+      accessibilityShowsLargeContentViewer
+      accessibilityLargeContentTitle={props.title}
+    />
+  )
 }
 
 FormSheetHeaderButton.displayName = 'FormSheet.HeaderButton'
@@ -324,6 +351,7 @@ const useStyles = ({ appearance = 'neutral' }: Styles = {}) => {
     },
     headerTitle: {
       textAlign: 'left',
+      flex: 1,
     },
     headerActions: {
       flexDirection: 'row',

package/src/hooks/index.ts

@@ -13,3 +13,4 @@ export * from './use_api_client'
 export * from './use_message_reaction_toggle'
 export * from './use_interaction_ghost_color'
 export * from './use_at_font_scale_breakpoint'
+export * from './use_scalable_number_of_lines'

package/src/hooks/use_api.ts

@@ -5,7 +5,7 @@ import {
   useQuery,
 } from '@tanstack/react-query'
 import { ApiCollection, ApiError, ApiResource, ResourceObject } from '../types'
-import { GetRequest, RequestData } from '../utils/client/types'
+import { GetRequest, RequestData } from '../utils/client'
 import { App, useApiClient } from './use_api_client'
 import { getRequestQueryKey, RequestQueryKey } from './use_suspense_api'
 

package/src/hooks/use_api_client.ts

@@ -3,8 +3,8 @@ import { ChatContext } from '../contexts/chat_context'
 import { Client } from '../utils/client'
 import { Uri } from '../utils'
 
-export type App = 'chat' | 'groups' | 'services'
-const apps: App[] = ['chat', 'groups', 'services']
+export type App = 'chat' | 'groups' | 'services' | 'people'
+const apps: App[] = ['chat', 'groups', 'services', 'people']
 
 export type ApiClient = { [_K in App]: Client }
 

package/src/hooks/use_app_name.ts

@@ -0,0 +1,17 @@
+import DeviceInfo from 'react-native-device-info'
+
+export type AppName = 'chat' | 'churchcenter' | 'services'
+
+export const useAppName = (): AppName => {
+  const applicationName = DeviceInfo.getApplicationName()
+
+  if (/churchcenter/i.test(applicationName)) {
+    return 'churchcenter'
+  }
+
+  if (/services/i.test(applicationName)) {
+    return 'services'
+  }
+
+  return 'chat'
+}

package/src/hooks/use_async_storage.ts

@@ -4,7 +4,7 @@ import { useCallback } from 'react'
 
 const cacheKeyGenerator = (key: string) => [`AsyncStorageResource:${key}`]
 
-type SetValue<TCacheData> = (_itemValue?: TCacheData | null) => void
+type SetValue<TCacheData> = (_itemValue?: TCacheData | null) => Promise<void>
 
 export function useAsyncStorage<TCacheData>(
   key: string,
@@ -28,11 +28,14 @@ export function useAsyncStorage<TCacheData>(
   const setValue: SetValue<TCacheData> = useCallback(
     itemValue => {
       if (itemValue === null || itemValue === undefined) {
-        AsyncStorage.removeItem(key)
-      } else {
-        AsyncStorage.setItem(key, JSON.stringify(itemValue))
+        return AsyncStorage.removeItem(key).then(() => {
+          refetch()
+        })
       }
-      refetch()
+
+      return AsyncStorage.setItem(key, JSON.stringify(itemValue)).then(() => {
+        refetch()
+      })
     },
     [key, refetch]
   )

package/src/hooks/use_report_bug_action.ts

@@ -1,12 +1,5 @@
 import { useMutation } from '@tanstack/react-query'
 import { useApiClient } from './use_api_client'
-import DeviceInfo from 'react-native-device-info'
-const brand = DeviceInfo.getBrand()
-const model = DeviceInfo.getModel()
-const systemName = DeviceInfo.getSystemName()
-const systemVersion = DeviceInfo.getSystemVersion()
-const readableVersion = DeviceInfo.getReadableVersion()
-const appName = DeviceInfo.getApplicationName()
 
 export const useReportBugAction = () => {
   const apiClient = useApiClient()
@@ -18,7 +11,7 @@ export const useReportBugAction = () => {
       attachmentIds,
     }: {
       description: string
-      description_json: string
+      description_json: Record<string, any>
       attachmentIds: string[]
     }) => {
       return apiClient.chat.post({
@@ -28,8 +21,7 @@ export const useReportBugAction = () => {
             type: '',
             attributes: {
               description,
-              description_json,
-              device_info: `${appName}/${readableVersion} (${brand}, ${model}, ${systemName}, ${systemVersion})`,
+              description_json: JSON.stringify(description_json),
               attachment_ids: attachmentIds,
             },
           },

package/src/hooks/use_scalable_number_of_lines.ts

@@ -0,0 +1,10 @@
+import { useAtFontScaleBreakpoint } from './use_at_font_scale_breakpoint'
+
+export const useScalableNumberOfLines = (numberOfLines?: number): number | undefined => {
+  const atFontScaleBreakpoint = useAtFontScaleBreakpoint()
+
+  if (!numberOfLines) return undefined
+
+  const numberOfLinesDoubled = numberOfLines + 1
+  return atFontScaleBreakpoint ? numberOfLinesDoubled : numberOfLines
+}

package/src/hooks/use_suspense_api.ts

@@ -6,7 +6,7 @@ import {
   UseSuspenseQueryOptions,
 } from '@tanstack/react-query'
 import { ApiCollection, ApiResource, ResourceObject } from '../types'
-import { GetRequest, RequestData } from '../utils/client/types'
+import { GetRequest, RequestData } from '../utils/client'
 import { App, useApiClient } from './use_api_client'
 import { Log } from '../utils'
 import { ApiError } from '../types/api_primitives'

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/navigation/index.tsx

@@ -4,47 +4,50 @@ import {
   createNativeStackNavigator,
   NativeStackHeaderRightProps,
 } from '@react-navigation/native-stack'
+import { CardStyleInterpolators } from '@react-navigation/stack'
 import React from 'react'
+import { Platform } from 'react-native'
 import { Icon } from '../components'
+import { HeaderTextButton } from '../components/display/platform_modal_header_buttons'
+import {
+  AttachmentActionsScreen,
+  AttachmentActionsScreenOptions,
+} from '../screens/attachment_actions/attachment_actions_screen'
+import { BugReportScreen, BugReportScreenOptions } from '../screens/bug_report_screen'
+import {
+  MessageReadReceiptsScreen,
+  MessageReadReceiptsScreenOptions,
+} from '../screens/conversation/message_read_receipts_screen'
 import { ConversationDetailsScreen } from '../screens/conversation_details_screen'
+import {
+  ConversationFilterReceipientsScreenOptions,
+  ConversationFilterRecipientsScreen,
+} from '../screens/conversation_filter_recipients/conversation_filter_recipients_screen'
+import { ConversationFiltersParams } from '../screens/conversation_filters/screen_props'
+import {
+  ConversationFiltersScreen,
+  ConversationFiltersScreenOptions,
+} from '../screens/conversation_filters_screen'
+import { ConversationNewScreen } from '../screens/conversation_new/conversation_new_screen'
 import {
   ConversationRouteProps,
   ConversationScreen,
   ConversationScreenTitle,
 } from '../screens/conversation_screen'
-import { ConversationsScreen } from '../screens/conversations/conversations_screen'
-import { ConversationNewScreen } from '../screens/conversation_new/conversation_new_screen'
-import {
-  ConversationFilterReceipientsScreenOptions,
-  ConversationFilterRecipientsScreen,
-} from '../screens/conversation_filter_recipients/conversation_filter_recipients_screen'
+import { ConversationSelectGroupRecipientsScreen } from '../screens/conversation_select_recipients/conversation_select_group_recipients_screen'
 import { ConversationSelectRecipientsScreen } from '../screens/conversation_select_recipients/conversation_select_recipients_screen'
+import { ConversationSelectTeamsILeadRecipientsScreen } from '../screens/conversation_select_recipients/conversation_select_teams_i_lead_recipients_screen'
+import { ConversationsScreen } from '../screens/conversations/conversations_screen'
+import { GetHelpScreen } from '../screens/get_help_screen'
 import {
   MessageActionsScreen,
   MessageActionsScreenOptions,
 } from '../screens/message_actions_screen'
-import { SendGiphyScreen, SendGiphyScreenOptions } from '../screens/send_giphy_screen'
 import { NotFound } from '../screens/not_found'
 import { ReactionsScreen, ReactionsScreenOptions } from '../screens/reactions_screen'
-import { ScreenLayout } from './screenLayout'
-import {
-  ConversationFiltersScreen,
-  ConversationFiltersScreenOptions,
-} from '../screens/conversation_filters_screen'
-import { ConversationFiltersParams } from '../screens/conversation_filters/screen_props'
-import { ConversationSelectGroupRecipientsScreen } from '../screens/conversation_select_recipients/conversation_select_group_recipients_screen'
-import { ConversationSelectTeamsILeadRecipientsScreen } from '../screens/conversation_select_recipients/conversation_select_teams_i_lead_recipients_screen'
-import { AttachmentActionsScreenOptions } from '../screens/attachment_actions/attachment_actions_screen'
-import { AttachmentActionsScreen } from '../screens/attachment_actions/attachment_actions_screen'
-import { BugReportScreen, BugReportScreenOptions } from '../screens/bug_report_screen'
-import {
-  MessageReadReceiptsScreen,
-  MessageReadReceiptsScreenOptions,
-} from '../screens/conversation/message_read_receipts_screen'
-import { Platform } from 'react-native'
-import { HeaderTextButton } from '../components/display/platform_modal_header_buttons'
+import { SendGiphyScreen, SendGiphyScreenOptions } from '../screens/send_giphy_screen'
 import { TeamConversationScreen } from '../screens/team_conversation_screen'
-import { CardStyleInterpolators } from '@react-navigation/stack'
+import { ScreenLayout } from './screenLayout'
 
 const HEADER_BACK_BUTTON_LAYOUT_RESET_STYLES = {
   marginLeft: Platform.select({ ios: -8, default: -3 }),
@@ -231,6 +234,16 @@ export const ChatStack = createNativeStackNavigator({
       screen: BugReportScreen,
       options: BugReportScreenOptions,
     },
+    GetHelp: {
+      screen: GetHelpScreen,
+      options: ({ navigation }) => ({
+        headerTitle: 'Get help',
+        presentation: 'modal',
+        headerLeft: props => (
+          <HeaderTextButton {...props} onPress={navigation.goBack} title="Close" />
+        ),
+      }),
+    },
     NotFound: {
       screen: NotFound,
       options: {

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