@planningcenter/chat-react-native 3.43.1-qa-858.1 → 3.44.0-rc.0

package/src/components/display/platform_modal_header_buttons.tsx

@@ -1,15 +1,12 @@
-import { HeaderBackButton, HeaderButton, PlatformPressable } from '@react-navigation/elements'
-import { useNavigation } from '@react-navigation/native'
+import { HeaderBackButton, HeaderButton } from '@react-navigation/elements'
 import type {
-  NativeStackHeaderItemProps,
-  NativeStackNavigationOptions,
+  NativeStackHeaderLeftProps,
+  NativeStackHeaderRightProps,
 } from '@react-navigation/native-stack'
-import { useLayoutEffect } from 'react'
 import { ColorValue, Platform, StyleSheet } from 'react-native'
-import type { SFSymbol } from 'sf-symbols-typescript'
-import { useFontScale, useTheme } from '../../hooks'
-import { MAX_FONT_SIZE_MULTIPLIER_LANDMARK } from '../../utils'
-import { Icon, type IconString } from './icon'
+import { useTheme } from '../../hooks'
+import { isLiquidGlassEnabled } from '../../utils/liquid_glass'
+import { Icon } from './icon'
 import { TextButton } from './text_button'
 
 interface HeaderTextButtonProps {
@@ -70,209 +67,61 @@ export const HeaderDismissButton = ({
   })
 }
 
-const createTextHeaderRight =
-  ({ onPress, title, disabled }: HeaderTextButtonProps) =>
-  (props: NativeStackHeaderItemProps) => (
-    <HeaderTextButton {...props} onPress={onPress} title={title} disabled={disabled} />
-  )
-
-export type OptionsDecorator = (
-  options: NativeStackNavigationOptions
-) => NativeStackNavigationOptions
-
-export const composeOptions = (
-  base: NativeStackNavigationOptions,
-  ...decorators: OptionsDecorator[]
-): NativeStackNavigationOptions => decorators.reduce((options, decorate) => decorate(options), base)
-
-interface TextButtonDecoratorProps {
-  text: string
-  onPress: () => void
-  disabled?: boolean
+interface HeaderDoneButtonProps extends NativeStackHeaderRightProps {
+  navigation: { goBack: () => void; getState: () => any }
 }
 
-export const withRightText =
-  ({ text, onPress, disabled }: TextButtonDecoratorProps): OptionsDecorator =>
-  options => ({
-    ...options,
-    headerRight: createTextHeaderRight({ onPress, title: text, disabled }),
-    unstable_headerRightItems: () => [{ type: 'button' as const, label: text, onPress, disabled }],
-  })
+export const HeaderDoneButton = ({ navigation, ...props }: HeaderDoneButtonProps) => {
+  const state = navigation.getState()
+  const isFirstScreen = state.index === 0
 
-const HEADER_ICON_SIZE = 17
-const HEADER_GLASS_BUTTON_SIZE = 44
-const HEADER_BAR_INSET = 16
-const HEADER_SLOT_GAP = 12
-
-export const useHeaderSlotReserve = (): number => {
-  const fontScale = useFontScale({ maxFontSizeMultiplier: MAX_FONT_SIZE_MULTIPLIER_LANDMARK })
-
-  return HEADER_BAR_INSET + HEADER_GLASS_BUTTON_SIZE * fontScale + HEADER_SLOT_GAP
-}
-
-const HEADER_FALLBACK_HIT_SLOP = 14
-
-const iconStyles = StyleSheet.create({
-  disabled: {
-    opacity: 0.4,
-  },
-  fallbackButton: {
-    alignItems: 'center',
-    justifyContent: 'center',
-    paddingHorizontal: 8,
-  },
-  fallbackButtonLeft: {
-    marginRight: Platform.select({ android: 16, default: 0 }),
-  },
-})
+  if (!isFirstScreen) {
+    return null
+  }
 
-const SF_SYMBOL_NAMES: Partial<Record<IconString, SFSymbol>> = {
-  'general.x': 'xmark',
-  'general.check': 'checkmark',
-  'general.upArrow': 'arrow.up',
-  'general.leftChevron': 'chevron.left',
+  return <HeaderTextButton {...props} onPress={navigation.goBack} title="Done" />
 }
 
-const sfSymbolFor = (icon: IconString): SFSymbol => {
-  const name = SF_SYMBOL_NAMES[icon]
-
-  if (!name) throw new Error(`No SF Symbol mapped for icon "${icon}" — add one to SF_SYMBOL_NAMES.`)
-
-  return name
-}
-
-export interface HeaderIconProps {
-  icon: IconString
-  accessibilityLabel: string
-  onPress: () => void
-  disabled?: boolean
-  prominent?: boolean
-  tintColor?: ColorValue
-}
-
-const createHeaderIconItem = ({
-  icon,
-  accessibilityLabel,
-  onPress,
-  disabled,
-  prominent,
-  tintColor,
-}: HeaderIconProps) => ({
-  type: 'button' as const,
-  label: '',
-  accessibilityLabel,
-  onPress,
-  disabled,
-  icon: { type: 'sfSymbol' as const, name: sfSymbolFor(icon) },
-  ...(prominent ? { variant: 'prominent' as const, tintColor } : {}),
-})
-
-const createHeaderIconElement =
-  (position: 'left' | 'right') =>
-  ({ icon, accessibilityLabel, onPress, disabled, tintColor }: HeaderIconProps) =>
-  () => (
-    <PlatformPressable
-      onPress={onPress}
-      disabled={disabled}
-      hitSlop={HEADER_FALLBACK_HIT_SLOP}
-      accessibilityRole="button"
-      accessibilityLabel={accessibilityLabel}
-      style={[
-        iconStyles.fallbackButton,
-        position === 'left' && iconStyles.fallbackButtonLeft,
-        disabled && iconStyles.disabled,
-      ]}
-    >
-      <Icon name={icon} size={HEADER_ICON_SIZE} color={tintColor} />
-    </PlatformPressable>
-  )
-
-export const withRightIcon =
-  (props: HeaderIconProps): OptionsDecorator =>
-  options => ({
-    ...options,
-    headerRight: createHeaderIconElement('right')(props),
-    unstable_headerRightItems: () => [createHeaderIconItem(props)],
-  })
-
-export const withLeftIcon =
-  (props: HeaderIconProps): OptionsDecorator =>
-  options => ({
-    ...options,
-    headerLeft: createHeaderIconElement('left')(props),
-    unstable_headerLeftItems: () => [createHeaderIconItem(props)],
-  })
-
-export const withRightClose = ({ onPress }: { onPress: () => void }) =>
-  withRightIcon({ icon: 'general.x', accessibilityLabel: 'Close', onPress })
-
-export const withLeftClose = ({ onPress }: { onPress: () => void }) =>
-  withLeftIcon({ icon: 'general.x', accessibilityLabel: 'Close', onPress })
-
-export const withRightDone = ({ onPress }: { onPress: () => void }) =>
-  withRightIcon({ icon: 'general.check', accessibilityLabel: 'Done', onPress })
+// The default back icon reserves trailing space for a label that
+// displayMode="minimal" never shows; a custom image skips it so the glass
+// capsule hugs the glyph.
+const renderGlassBackImage = ({ tintColor }: { tintColor: string }) => (
+  <Icon name="general.leftChevron" size={18} color={tintColor} />
+)
 
-const createMinimalHeaderBackElement =
+// The iOS 26 glass capsule manages its own insets — negative margins clip
+// the button against the capsule edge.
+export const createMinimalHeaderBackButton =
   ({ onPress }: { onPress: () => void }) =>
-  (props: NativeStackHeaderItemProps) => (
+  (props: NativeStackHeaderLeftProps) => (
     <HeaderBackButton
-      style={Platform.select({
-        ios: { marginLeft: -8 },
-        default: { marginLeft: -3, marginRight: 30 },
-      })}
+      style={
+        isLiquidGlassEnabled()
+          ? undefined
+          : {
+              marginLeft: Platform.select({ ios: -8, default: -3 }),
+              marginRight: Platform.select({ ios: 0, default: 30 }),
+            }
+      }
+      backImage={isLiquidGlassEnabled() ? renderGlassBackImage : undefined}
       displayMode="minimal"
       onPress={onPress}
       {...props}
     />
   )
 
-export const withMinimalBack =
-  ({ onPress }: { onPress: () => void }): OptionsDecorator =>
-  options => ({
-    ...options,
-    headerLeft: createMinimalHeaderBackElement({ onPress }),
-    unstable_headerLeftItems: () => [
-      createHeaderIconItem({ icon: 'general.leftChevron', accessibilityLabel: 'Back', onPress }),
-    ],
-  })
-
-type UseHeaderRightOptions = {
+// Under glass the native minimal back button suffices; pre-26 needs the
+// custom button and its layout nudges.
+export const composeHeaderOptions = ({
+  title,
+  onPress,
+}: {
+  title: string
   onPress: () => void
-  disabled?: boolean
-  enabled?: boolean
-} & (
-  | (Omit<HeaderIconProps, 'tintColor'> & { title?: never })
-  | { title: string; icon?: never; accessibilityLabel?: never; prominent?: never }
-)
-
-export const useHeaderRight = (options: UseHeaderRightOptions) => {
-  const navigation = useNavigation()
-  const { colors } = useTheme()
-  const { onPress, disabled, enabled = true } = options
-  const icon = options.icon
-  const label = options.icon !== undefined ? options.accessibilityLabel : options.title
-  const prominent = options.icon !== undefined ? options.prominent : undefined
-
-  useLayoutEffect(() => {
-    if (!enabled) {
-      navigation.setOptions({ headerRight: () => null, unstable_headerRightItems: undefined })
-      return
-    }
-
-    const decorate = icon
-      ? withRightIcon({
-          icon,
-          accessibilityLabel: label,
-          onPress,
-          disabled,
-          prominent,
-          tintColor: prominent ? colors.interaction : undefined,
-        })
-      : withRightText({ text: label, onPress, disabled })
-
-    navigation.setOptions(decorate({}))
-  }, [colors.interaction, disabled, enabled, icon, label, navigation, onPress, prominent])
-}
+}) => ({
+  title,
+  ...(isLiquidGlassEnabled() ? {} : { headerLeft: createMinimalHeaderBackButton({ onPress }) }),
+})
 
 const useStyles = () => {
   const { colors } = useTheme()

package/src/components/primitive/form_sheet.tsx

@@ -12,7 +12,7 @@ import {
 } from 'react-native'
 import { useSafeAreaInsets } from 'react-native-safe-area-context'
 import { useTheme } from '../../hooks'
-import { isLiquidGlassEnabled, MAX_FONT_SIZE_MULTIPLIER_LANDMARK } from '../../utils'
+import { MAX_FONT_SIZE_MULTIPLIER_LANDMARK } from '../../utils'
 import type { ButtonProps, TextButtonProps } from '../display'
 import { Button, Heading, Icon, IconString, Text, TextButton } from '../display'
 
@@ -22,28 +22,24 @@ import { Button, Heading, Icon, IconString, Text, TextButton } from '../display'
 
 /**
  * Screen options for the formsheet's NativeStackNavigation route
- *
- * Returns a factory rather than an object because callers assign it at module
- * scope, which runs before ChatProvider reports the host's liquid glass
- * capability. React Navigation calls the factory per render, so the sheet
- * corner radius is resolved once that capability is known.
- *
  * @param {string} options.headerTitle - Doesn't show in UI but good to have for semantic reasons.
  * @param {number[]} [options.sheetAllowedDetents] - Controls the height increments the sheet grows to. To prevent bugs in Android, do not specify more then two values and use [0.94] instead of [1] to go full screen.
  * @param {NativeStackNavigationOptions} [options.rest] - Adds or overrides any valid NativeStackNavigationOptions
- * @returns {() => NativeStackNavigationOptions} Factory producing merged NativeStackNavigationOptions
+ * @returns {NativeStackNavigationOptions} Merged NativeStackNavigationOptions
  */
-export const getFormSheetScreenOptions =
-  ({ headerTitle, sheetAllowedDetents = [0.25], ...rest }: NativeStackNavigationOptions = {}) =>
-  (): NativeStackNavigationOptions => ({
-    presentation: 'formSheet',
-    headerShown: false,
-    sheetAllowedDetents,
-    sheetCornerRadius: isLiquidGlassEnabled() ? undefined : 16,
-    sheetGrabberVisible: true,
-    headerTitle,
-    ...rest,
-  })
+export const getFormSheetScreenOptions = ({
+  headerTitle,
+  sheetAllowedDetents = [0.25],
+  ...rest
+}: NativeStackNavigationOptions = {}): NativeStackNavigationOptions => ({
+  presentation: 'formSheet',
+  headerShown: false,
+  sheetAllowedDetents,
+  sheetCornerRadius: 16,
+  sheetGrabberVisible: true,
+  headerTitle,
+  ...rest,
+})
 
 const FormSheet = {
   Root: FormSheetRoot,