Fix PageHeader type issues (#6896)

Author: liuliu-dev

.changeset/nasty-seals-carry.md

@@ -0,0 +1,6 @@
+---
+'@primer/styled-react': patch
+'@primer/react': patch
+---
+
+Fix typing issues in PageHeader exports.

packages/react/src/PageHeader/PageHeader.tsx

@@ -191,7 +191,7 @@ const ContextAreaActions: React.FC<React.PropsWithChildren<ChildrenPropTypes>> =
   )
 }
 
-type TitleAreaProps = {
+export type TitleAreaProps = {
   variant?: 'subtitle' | 'medium' | 'large' | ResponsiveValue<'subtitle' | 'medium' | 'large'>
 } & ChildrenPropTypes
 // PageHeader.TitleArea: The main title area of the page. Visible on all viewports.

packages/react/src/__tests__/__snapshots__/exports.test.ts.snap

@@ -105,7 +105,9 @@ exports[`@primer/react > should not update exports without a semver change 1`] =
   "type OverlayProps",
   "PageHeader",
   "type PageHeaderActionsProps",
+  "type PageHeaderChildrenPropTypes",
   "type PageHeaderProps",
+  "type PageHeaderTitleAreaProps",
   "type PageHeaderTitleProps",
   "PageLayout",
   "type PageLayoutContentProps",

packages/react/src/index.ts

@@ -211,6 +211,8 @@ export type {
   PageHeaderProps,
   TitleProps as PageHeaderTitleProps,
   ActionsProps as PageHeaderActionsProps,
+  TitleAreaProps as PageHeaderTitleAreaProps,
+  ChildrenPropTypes as PageHeaderChildrenPropTypes,
 } from './PageHeader'
 
 export {default as sx, merge} from './sx'

packages/styled-react/src/components/PageHeader.tsx

@@ -3,11 +3,13 @@ import {
   type PageHeaderProps as PrimerPageHeaderProps,
   type PageHeaderTitleProps as PrimerPageHeaderTitleProps,
   type PageHeaderActionsProps as PrimerPageHeaderActionsProps,
+  type PageHeaderTitleAreaProps as PrimerPageHeaderTitleAreaProps,
 } from '@primer/react'
 import styled from 'styled-components'
 import {sx, type SxProp} from '../sx'
 import type {ForwardRefComponent} from '../polymorphic'
 import {Box} from './Box'
+import type {PropsWithChildren} from 'react'
 
 type PageHeaderProps = PrimerPageHeaderProps & SxProp
 
@@ -35,7 +37,7 @@ function PageHeaderActions({sx, ...rest}: PageHeaderActionsProps) {
   return <Box {...rest} as={PrimerPageHeader.Actions} style={style} sx={sx} />
 }
 
-type PageHeaderTitleProps = PrimerPageHeaderTitleProps & SxProp
+type PageHeaderTitleProps = PropsWithChildren<PrimerPageHeaderTitleProps> & SxProp
 
 type CSSCustomProperties = {
   [key: `--${string}`]: string | number
@@ -63,9 +65,29 @@ function PageHeaderTitle({sx, ...rest}: PageHeaderTitleProps) {
   return <Box {...rest} as={PrimerPageHeader.Title} style={style} sx={sx} />
 }
 
+type PageHeaderTitleAreaProps = PropsWithChildren<PrimerPageHeaderTitleAreaProps> & SxProp
+
+const PageHeaderTitleArea: ForwardRefComponent<'div', PageHeaderTitleAreaProps> = styled(
+  PrimerPageHeader.TitleArea,
+).withConfig<PageHeaderTitleAreaProps>({
+  shouldForwardProp: prop => prop !== 'sx',
+})`
+  ${sx}
+`
+
 const PageHeader = Object.assign(PageHeaderImpl, {
   Actions: PageHeaderActions,
   Title: PageHeaderTitle,
+  TitleArea: PageHeaderTitleArea,
+  ContextArea: PrimerPageHeader.ContextArea,
+  ContextAreaActions: PrimerPageHeader.ContextAreaActions,
+  TrailingVisual: PrimerPageHeader.TrailingVisual,
+  Description: PrimerPageHeader.Description,
+  ContextBar: PrimerPageHeader.ContextBar,
+  LeadingAction: PrimerPageHeader.LeadingAction,
+  Breadcrumbs: PrimerPageHeader.Breadcrumbs,
+  LeadingVisual: PrimerPageHeader.LeadingVisual,
+  TrailingAction: PrimerPageHeader.TrailingAction,
 })
 
 export {PageHeader}