@planningcenter/chat-react-native 3.44.2 → 3.44.3-qa-staging.1

package/src/hooks/use_selected_chip_background_color.ts

@@ -0,0 +1,21 @@
+import colorFunction from 'color'
+import { useMemo } from 'react'
+import { useTheme } from './use_theme'
+
+/**
+ * Background color for a chip surface (filter button, reaction pill) in its
+ * selected state. Falls back to `colors.interaction` when a consumer hasn't
+ * supplied `colors.fillColorChipSelected`.
+ */
+export function useSelectedChipBackgroundColor() {
+  const { colors, chip } = useTheme()
+
+  return useMemo(
+    () =>
+      colorFunction(colors.fillColorChipSelected ?? colors.interaction)
+        .hsl()
+        .lightness(chip.hslLightnessChipSelected)
+        .string(),
+    [colors.fillColorChipSelected, colors.interaction, chip.hslLightnessChipSelected]
+  )
+}

package/src/screens/design_system_screen.tsx

@@ -29,7 +29,7 @@ import {
 import { VideoAttachmentPreview } from '../components/display/video_attachment_preview'
 import BannerPrimitive from '../components/primitive/banner_primitive'
 import BlankState from '../components/primitive/blank_state_primitive'
-import { useInteractionGhostBackgroundColor, useTheme } from '../hooks'
+import { useSelectedChipBackgroundColor, useTheme } from '../hooks'
 import {
   MAX_FONT_SIZE_MULTIPLIER,
   platformPressedOpacityStyle,
@@ -1325,7 +1325,7 @@ function HapticButton({ title, onPress }: { title: string; onPress: () => void }
 
 const useStyles = () => {
   const { colors } = useTheme()
-  const interactionGhostBackgroundColor = useInteractionGhostBackgroundColor()
+  const selectedChipBackgroundColor = useSelectedChipBackgroundColor()
 
   return StyleSheet.create({
     hapticButton: {
@@ -1334,7 +1334,7 @@ const useStyles = () => {
       padding: 16,
       alignItems: 'center',
       justifyContent: 'center',
-      backgroundColor: interactionGhostBackgroundColor,
+      backgroundColor: selectedChipBackgroundColor,
       borderWidth: 1,
       borderColor: colors.interaction,
       borderRadius: 8,

package/src/types/whatwg-fetch.d.ts

@@ -0,0 +1,5 @@
+declare module 'whatwg-fetch' {
+  export const Response: {
+    new (body?: BodyInit | null, init?: ResponseInit): globalThis.Response
+  }
+}

package/src/utils/__tests__/response_error.test.ts

@@ -1,3 +1,5 @@
+import { Response as ReactNativeResponse } from 'whatwg-fetch'
+
 import { isResponseLike, ResponseError, throwResponseError } from '../response_error'
 
 // Mimics Expo's winter `FetchResponse`: the full Response shape, but NOT an
@@ -24,6 +26,17 @@ describe('isResponseLike', () => {
     expect(isResponseLike(notARealResponse)).toBe(true)
   })
 
+  it("recognizes React Native's fetch Response, which never assigns `redirected`", () => {
+    const response = new ReactNativeResponse(JSON.stringify({ errors: [] }), {
+      status: 401,
+      statusText: 'Unauthorized',
+      headers: { 'Content-Type': 'application/json' },
+    })
+
+    expect('redirected' in response).toBe(false)
+    expect(isResponseLike(response)).toBe(true)
+  })
+
   it('rejects things that are not responses', () => {
     expect(isResponseLike(null)).toBe(false)
     expect(isResponseLike(new Error('boom'))).toBe(false)

package/src/utils/response_error.ts

@@ -18,7 +18,9 @@ export class ResponseError extends Error {
 
 // Detect a fetch Response by shape, not `instanceof`: Expo's winter runtime
 // swaps in a `fetch` whose `FetchResponse` isn't an instance of the global
-// `Response`, so `instanceof` silently misses it under Expo.
+// `Response`, so `instanceof` silently misses it under Expo. We avoid checking
+// `redirected` because React Native's whatwg-fetch polyfill never assigns it,
+// which would reject every real response under RN's fetch.
 export const isResponseLike = (value: unknown): value is Response => {
   if (typeof value !== 'object' || value === null) return false
 
@@ -27,7 +29,6 @@ export const isResponseLike = (value: unknown): value is Response => {
     typeof candidate.status === 'number' &&
     typeof candidate.statusText === 'string' &&
     typeof candidate.ok === 'boolean' &&
-    typeof candidate.redirected === 'boolean' &&
     typeof candidate.url === 'string' &&
     typeof candidate.headers === 'object' &&
     candidate.headers !== null &&

package/src/utils/theme.ts

@@ -28,6 +28,9 @@ export interface DefaultTheme {
   button: {
     borderRadius: number
   }
+  chip: {
+    hslLightnessChipSelected: number
+  }
   showBadgeProductLogo: boolean
 }
 
@@ -44,6 +47,9 @@ export const defaultTheme = (colorScheme: ColorSchemeName | null): ChatTheme =>
     button: {
       borderRadius: 40,
     },
+    chip: {
+      hslLightnessChipSelected: scheme === 'dark' ? 12 : 92,
+    },
     showBadgeProductLogo: true, // Overrides visibility of the product logo in `src/display/badge.tsx`
   }
 }
@@ -91,6 +97,22 @@ interface ChatColors {
   statusNeutralComposedIcon: string
   statusNeutralComposedText: string
   statusNeutralComposedBackground: string
+  // borderColorChip / textColorChip match the alias tokens
+  // `borderColorDefaultBase` / `textColorDefaultSecondary` the unselected
+  // `ToggleButton` state used before dedicated chip tokens existed.
+  borderColorChip: string
+  fillColorChip: string
+  textColorChip: string
+  /**
+   * Selected-chip colors (border/fill/text). Never assign a static default
+   * directly — these stay optional so they always fall back to
+   * `colors.interaction` via `??` at the read site. Every current consumer
+   * overrides `interaction` at runtime, and a seeded default here could win
+   * over that override depending on merge order.
+   */
+  borderColorChipSelected?: string
+  fillColorChipSelected?: string
+  textColorChipSelected?: string
 }
 
 // 'link' is an iOS-only semantic color name — constructing it on Android is
@@ -138,6 +160,9 @@ const colorsChatLight: ChatColors = {
   statusNeutralComposedIcon: tokens.iconColorStatusNeutralPrimary,
   statusNeutralComposedText: tokens.textColorStatusNeutral,
   statusNeutralComposedBackground: tokens.fillColorStatusNeutralGhost,
+  borderColorChip: tokens.colorNeutral88,
+  fillColorChip: 'transparent',
+  textColorChip: tokens.colorNeutral45,
 }
 
 const colorsChatDark: ChatColors = {
@@ -183,6 +208,9 @@ const colorsChatDark: ChatColors = {
   statusNeutralComposedIcon: tokens.iconColorStatusNeutralPrimaryDark,
   statusNeutralComposedText: tokens.textColorStatusNeutralDark,
   statusNeutralComposedBackground: tokens.fillColorStatusNeutralGhostDark,
+  borderColorChip: tokens.colorNeutral24,
+  fillColorChip: 'transparent',
+  textColorChip: tokens.colorNeutral68,
 }
 
 const chatThemeColorMap = {

package/build/hooks/use_interaction_ghost_color.d.ts

@@ -1,2 +0,0 @@
-export declare function useInteractionGhostBackgroundColor(): string;
-//# sourceMappingURL=use_interaction_ghost_color.d.ts.map

package/build/hooks/use_interaction_ghost_color.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"use_interaction_ghost_color.d.ts","sourceRoot":"","sources":["../../src/hooks/use_interaction_ghost_color.ts"],"names":[],"mappings":"AAIA,wBAAgB,kCAAkC,WAUjD"}

package/build/hooks/use_interaction_ghost_color.js

@@ -1,14 +0,0 @@
-import colorFunction from 'color';
-import { useMemo } from 'react';
-import { useTheme } from './use_theme';
-export function useInteractionGhostBackgroundColor() {
-    const { colors } = useTheme();
-    const interactionGhostColor = useMemo(() => {
-        return colorFunction(colors.interaction)
-            .hsl()
-            .lightness(colors.name === 'dark' ? 12 : 92)
-            .string();
-    }, [colors.interaction, colors.name]);
-    return interactionGhostColor;
-}
-//# sourceMappingURL=use_interaction_ghost_color.js.map

package/build/hooks/use_interaction_ghost_color.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"use_interaction_ghost_color.js","sourceRoot":"","sources":["../../src/hooks/use_interaction_ghost_color.ts"],"names":[],"mappings":"AAAA,OAAO,aAAa,MAAM,OAAO,CAAA;AACjC,OAAO,EAAE,OAAO,EAAE,MAAM,OAAO,CAAA;AAC/B,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAA;AAEtC,MAAM,UAAU,kCAAkC;IAChD,MAAM,EAAE,MAAM,EAAE,GAAG,QAAQ,EAAE,CAAA;IAC7B,MAAM,qBAAqB,GAAG,OAAO,CAAC,GAAG,EAAE;QACzC,OAAO,aAAa,CAAC,MAAM,CAAC,WAAW,CAAC;aACrC,GAAG,EAAE;aACL,SAAS,CAAC,MAAM,CAAC,IAAI,KAAK,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC;aAC3C,MAAM,EAAE,CAAA;IACb,CAAC,EAAE,CAAC,MAAM,CAAC,WAAW,EAAE,MAAM,CAAC,IAAI,CAAC,CAAC,CAAA;IAErC,OAAO,qBAAqB,CAAA;AAC9B,CAAC","sourcesContent":["import colorFunction from 'color'\nimport { useMemo } from 'react'\nimport { useTheme } from './use_theme'\n\nexport function useInteractionGhostBackgroundColor() {\n  const { colors } = useTheme()\n  const interactionGhostColor = useMemo(() => {\n    return colorFunction(colors.interaction)\n      .hsl()\n      .lightness(colors.name === 'dark' ? 12 : 92)\n      .string()\n  }, [colors.interaction, colors.name])\n\n  return interactionGhostColor\n}\n"]}

package/src/hooks/use_interaction_ghost_color.ts

@@ -1,15 +0,0 @@
-import colorFunction from 'color'
-import { useMemo } from 'react'
-import { useTheme } from './use_theme'
-
-export function useInteractionGhostBackgroundColor() {
-  const { colors } = useTheme()
-  const interactionGhostColor = useMemo(() => {
-    return colorFunction(colors.interaction)
-      .hsl()
-      .lightness(colors.name === 'dark' ? 12 : 92)
-      .string()
-  }, [colors.interaction, colors.name])
-
-  return interactionGhostColor
-}