Add displayName to contexts (#8814)

src/components/Admonition.tsx

@@ -23,6 +23,7 @@ type Context = {
 const Context = createContext<Context>({
   type: 'info',
 })
+Context.displayName = 'AdmonitionContext'
 
 export function Icon() {
   const t = useTheme()

src/components/Button.tsx

@@ -109,6 +109,7 @@ const Context = React.createContext<VariantProps & ButtonState>({
   pressed: false,
   disabled: false,
 })
+Context.displayName = 'ButtonContext'
 
 export function useButtonContext() {
   return React.useContext(Context)

src/components/ContextMenu/context.tsx

@@ -7,10 +7,13 @@ import {
 } from '#/components/ContextMenu/types'
 
 export const Context = React.createContext<ContextType | null>(null)
+Context.displayName = 'ContextMenuContext'
 
 export const MenuContext = React.createContext<MenuContextType | null>(null)
+MenuContext.displayName = 'ContextMenuMenuContext'
 
 export const ItemContext = React.createContext<ItemContextType | null>(null)
+ItemContext.displayName = 'ContextMenuItemContext'
 
 export function useContextMenuContext() {
   const context = React.useContext(Context)

src/components/Dialog/context.ts

@@ -23,6 +23,7 @@ export const Context = createContext<DialogContextProps>({
   setDisableDrag: () => {},
   isWithinDialog: false,
 })
+Context.displayName = 'DialogContext'
 
 export function useDialogContext() {
   return useContext(Context)

src/components/Grid.tsx

@@ -1,11 +1,12 @@
 import {createContext, useContext, useMemo} from 'react'
 import {View} from 'react-native'
 
-import {atoms as a, ViewStyleProp} from '#/alf'
+import {atoms as a, type ViewStyleProp} from '#/alf'
 
 const Context = createContext({
   gap: 0,
 })
+Context.displayName = 'GridContext'
 
 export function Row({
   children,

src/components/Layout/Header/index.tsx

@@ -77,6 +77,7 @@ export function Outer({
 }
 
 const AlignmentContext = createContext<'platform' | 'left'>('platform')
+AlignmentContext.displayName = 'AlignmentContext'
 
 export function Content({
   children,

src/components/Layout/context.ts

@@ -3,3 +3,4 @@ import React from 'react'
 export const ScrollbarOffsetContext = React.createContext({
   isWithinOffsetView: false,
 })
+ScrollbarOffsetContext.displayName = 'ScrollbarOffsetContext'

src/components/Menu/context.tsx

@@ -3,8 +3,10 @@ import React from 'react'
 import {type ContextType, type ItemContextType} from '#/components/Menu/types'
 
 export const Context = React.createContext<ContextType | null>(null)
+Context.displayName = 'MenuContext'
 
 export const ItemContext = React.createContext<ItemContextType | null>(null)
+ItemContext.displayName = 'MenuItemContext'
 
 export function useMenuContext() {
   const context = React.useContext(Context)

src/components/PolicyUpdateOverlay/context.tsx

@@ -28,6 +28,7 @@ const Context = createContext<{
    */
   setIsReadyToShowOverlay: () => {},
 })
+Context.displayName = 'PolicyUpdateOverlayContext'
 
 export function usePolicyUpdateContext() {
   const context = useContext(Context)

src/components/Portal.tsx

@@ -28,6 +28,7 @@ export function createPortalGroup() {
     append: () => {},
     remove: () => {},
   })
+  Context.displayName = 'PortalContext'
 
   function Provider(props: React.PropsWithChildren<{}>) {
     const map = useRef<ComponentMap>({})

src/components/Post/Embed/VideoEmbed/ActiveVideoWebContext.tsx

@@ -15,6 +15,7 @@ const Context = React.createContext<{
   setActiveView: (viewId: string) => void
   sendViewPosition: (viewId: string, y: number) => void
 } | null>(null)
+Context.displayName = 'ActiveVideoWebContext'
 
 export function Provider({children}: {children: React.ReactNode}) {
   if (!isWeb) {

src/components/Post/Embed/VideoEmbed/VideoVolumeContext.tsx

@@ -8,6 +8,7 @@ const Context = React.createContext<{
   volume: number
   setVolume: React.Dispatch<React.SetStateAction<number>>
 } | null>(null)
+Context.displayName = 'VideoVolumeContext'
 
 export function Provider({children}: {children: React.ReactNode}) {
   const [muted, setMuted] = React.useState(true)

src/components/Post/Embed/VideoEmbed/index.web.tsx

@@ -125,6 +125,7 @@ export function VideoEmbed({
 }
 
 const NearScreenContext = createContext(false)
+NearScreenContext.displayName = 'VideoNearScreenContext'
 
 /**
  * Renders a 100vh tall div and watches it with an IntersectionObserver to

src/components/PostControls/PostControlButton.tsx

@@ -13,6 +13,7 @@ const PostControlContext = createContext<{
   active?: boolean
   color?: {color: string}
 }>({})
+PostControlContext.displayName = 'PostControlContext'
 
 // Base button style, which the the other ones extend
 export function PostControlButton({

src/components/Prompt.tsx

@@ -27,6 +27,7 @@ const Context = React.createContext<{
   titleId: '',
   descriptionId: '',
 })
+Context.displayName = 'PromptContext'
 
 export function Outer({
   children,

src/components/Select/index.tsx

@@ -34,10 +34,12 @@ type ContextType = {
 } & Pick<RootProps, 'value' | 'onValueChange' | 'disabled'>
 
 const Context = createContext<ContextType | null>(null)
+Context.displayName = 'SelectContext'
 
 const ValueTextContext = createContext<
   [any, React.Dispatch<React.SetStateAction<any>>]
 >([undefined, () => {}])
+ValueTextContext.displayName = 'ValueTextContext'
 
 function useSelectContext() {
   const ctx = useContext(Context)
@@ -229,6 +231,7 @@ const ItemContext = createContext<{
   focused: false,
   pressed: false,
 })
+ItemContext.displayName = 'SelectItemContext'
 
 export function useItemContext() {
   return useContext(ItemContext)

src/components/Select/index.web.tsx

@@ -23,6 +23,7 @@ import {
 } from './types'
 
 const SelectedValueContext = createContext<string | undefined | null>(null)
+SelectedValueContext.displayName = 'SelectSelectedValueContext'
 
 export function Root(props: RootProps) {
   return (
@@ -219,6 +220,7 @@ const ItemContext = createContext<{
   pressed: false,
   selected: false,
 })
+ItemContext.displayName = 'SelectItemContext'
 
 export function useItemContext() {
   return useContext(ItemContext)

src/components/Toast/Toast.tsx

@@ -24,6 +24,7 @@ export const ICONS = {
 const Context = createContext<ContextType>({
   type: 'default',
 })
+Context.displayName = 'ToastContext'
 
 export function Toast({
   type,

src/components/Tooltip/index.tsx

@@ -53,12 +53,14 @@ const TooltipContext = createContext<TooltipContextType>({
   visible: false,
   onVisibleChange: () => {},
 })
+TooltipContext.displayName = 'TooltipContext'
 
 const TargetContext = createContext<TargetContextType>({
   targetMeasurements: undefined,
   setTargetMeasurements: () => {},
   shouldMeasure: false,
 })
+TargetContext.displayName = 'TargetContext'
 
 export function Outer({
   children,

src/components/Tooltip/index.web.tsx

@@ -20,6 +20,7 @@ const TooltipContext = createContext<TooltipContextType>({
   position: 'bottom',
   onVisibleChange: () => {},
 })
+TooltipContext.displayName = 'TooltipContext'
 
 export function Outer({
   children,

src/components/dialogs/Context.tsx

@@ -27,6 +27,7 @@ type ControlsContext = {
 }
 
 const ControlsContext = createContext<ControlsContext | null>(null)
+ControlsContext.displayName = 'GlobalDialogControlsContext'
 
 export function useGlobalDialogsControlContext() {
   const ctx = useContext(ControlsContext)

src/components/dialogs/nuxs/index.tsx

@@ -47,6 +47,7 @@ const Context = React.createContext<Context>({
   activeNux: undefined,
   dismissActiveNux: () => {},
 })
+Context.displayName = 'NuxDialogContext'
 
 export function useNuxDialogContext() {
   return React.useContext(Context)

src/components/dms/MessageContext.tsx

@@ -1,6 +1,7 @@
 import React from 'react'
 
 const MessageContext = React.createContext(false)
+MessageContext.displayName = 'MessageContext'
 
 export function MessageContextProvider({
   children,

src/components/forms/TextField.tsx

@@ -46,6 +46,7 @@ const Context = createContext<{
   onFocus: () => {},
   onBlur: () => {},
 })
+Context.displayName = 'TextFieldContext'
 
 export type RootProps = React.PropsWithChildren<{isInvalid?: boolean}>
 

src/components/forms/Toggle.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import {Pressable, View, ViewStyle} from 'react-native'
+import {Pressable, View, type ViewStyle} from 'react-native'
 import Animated, {LinearTransition} from 'react-native-reanimated'
 
 import {HITSLOP_10} from '#/lib/constants'
@@ -8,9 +8,9 @@ import {
   atoms as a,
   flatten,
   native,
-  TextStyleProp,
+  type TextStyleProp,
   useTheme,
-  ViewStyleProp,
+  type ViewStyleProp,
 } from '#/alf'
 import {useInteractionState} from '#/components/hooks/useInteractionState'
 import {CheckThick_Stroke2_Corner0_Rounded as Checkmark} from '#/components/icons/Check'
@@ -35,6 +35,7 @@ const ItemContext = React.createContext<ItemState>({
   pressed: false,
   focused: false,
 })
+ItemContext.displayName = 'ToggleItemContext'
 
 const GroupContext = React.createContext<{
   values: string[]
@@ -49,6 +50,7 @@ const GroupContext = React.createContext<{
   maxSelectionsReached: false,
   setFieldValue: () => {},
 })
+GroupContext.displayName = 'ToggleGroupContext'
 
 export type GroupProps = React.PropsWithChildren<{
   type?: 'radio' | 'checkbox'

src/components/intents/IntentDialogs.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
 
 import * as Dialog from '#/components/Dialog'
-import {DialogControlProps} from '#/components/Dialog'
+import {type DialogControlProps} from '#/components/Dialog'
 import {VerifyEmailIntentDialog} from '#/components/intents/VerifyEmailIntentDialog'
 
 interface Context {
@@ -11,6 +11,7 @@ interface Context {
 }
 
 const Context = React.createContext({} as Context)
+Context.displayName = 'IntentDialogsContext'
 export const useIntentDialogs = () => React.useContext(Context)
 
 export function Provider({children}: {children: React.ReactNode}) {

src/components/moderation/Hider.tsx

@@ -1,8 +1,8 @@
 import React from 'react'
-import {ModerationUI} from '@atproto/api'
+import {type ModerationUI} from '@atproto/api'
 
 import {
-  ModerationCauseDescription,
+  type ModerationCauseDescription,
   useModerationCauseDescription,
 } from '#/lib/moderation/useModerationCauseDescription'
 import {
@@ -22,6 +22,7 @@ type Context = {
 }
 
 const Context = React.createContext<Context>({} as Context)
+Context.displayName = 'HiderContext'
 
 export const useHider = () => React.useContext(Context)