Make type guards compatible with server components

Author: colinrotherham

CHANGELOG.md

@@ -2,7 +2,7 @@
 
 ## Unreleased
 
-This version provides support for NHS.UK frontend v10.x and fixes a Rollup `'use client'` directive issue.
+This version provides support for NHS.UK frontend v10.x, React Server Components (RSC) and fixes a Rollup `'use client'` directive issue.
 
 For a full list of changes in this release please refer to the [migration doc](https://github.com/NHSDigital/nhsuk-react-components/blob/main/docs/upgrade-to-6.0.md).
 

src/components/content-presentation/panel/Panel.tsx

@@ -9,7 +9,7 @@ const PanelComponent = forwardRef<HTMLDivElement, PanelProps>(
   ({ children, className, ...rest }, forwardedRef) => {
     const items = Children.toArray(children);
     const title = items.find((child) => childIsOfComponentType(child, PanelTitle));
-    const bodyItems = items.filter((child) => !childIsOfComponentType(child, PanelTitle));
+    const bodyItems = items.filter((child) => child !== title);
 
     return (
       <div className={classNames('nhsuk-panel', className)} ref={forwardedRef} {...rest}>

src/components/form-elements/error-summary/ErrorSummary.tsx

@@ -34,8 +34,12 @@ const ErrorSummaryComponent = forwardRef<HTMLDivElement, ErrorSummaryProps>(
     }, [moduleRef, instance]);
 
     const items = Children.toArray(children);
-    const title = items.find((child) => childIsOfComponentType(child, ErrorSummaryTitle));
-    const bodyItems = items.filter((child) => !childIsOfComponentType(child, ErrorSummaryTitle));
+
+    const title = items.find((child) =>
+      childIsOfComponentType(child, ErrorSummaryTitle, { className: 'nhsuk-error-summary__title' }),
+    );
+
+    const bodyItems = items.filter((child) => child !== title);
 
     if (instanceError) {
       throw instanceError;

src/components/navigation/header/Header.tsx

@@ -68,9 +68,16 @@ const HeaderComponent = forwardRef<HTMLElement, HeaderProps>((props, forwardedRe
   }, [menuOpen]);
 
   const items = Children.toArray(children);
-  const childSearch = items.find((child) => childIsOfComponentType(child, HeaderSearch));
-  const childNavigation = items.find((child) => childIsOfComponentType(child, HeaderNavigation));
-  const childAccount = items.find((child) => childIsOfComponentType(child, HeaderAccount));
+
+  const childSearch = items.find((child) =>
+    childIsOfComponentType(child, HeaderSearch, { className: 'nhsuk-header__search' }),
+  );
+
+  const childAccount = items.find((child) =>
+    childIsOfComponentType(child, HeaderAccount, { className: 'nhsuk-header__account' }),
+  );
+
+  const childNavigation = items.find((child) => child !== childSearch && child !== childAccount);
 
   if (instanceError) {
     throw instanceError;

src/util/types/TypeGuards.ts

@@ -7,14 +7,40 @@ import {
 } from 'react';
 import { type CardType, type CareCardType } from './NHSUKTypes.js';
 
+type WithProps<T extends ReactElement> = T & {
+  props: HTMLAttributes<T>;
+};
+
 /**
- * Assert that a child item is of the given component type.
+ * Assert that a child item is a valid component with props.
+ */
+const isValidComponent = <T extends ReactNode>(
+  child: T,
+): child is WithProps<Extract<T, ReactElement>> =>
+  isValidElement(child) && !!child.props && typeof child.props === 'object';
+
+/**
+ * Assert that a child item is of the given component type, optionally
+ * checking via props for lazy or deferred server components.
  */
 export const childIsOfComponentType = <T extends HTMLElement, P extends HTMLAttributes<T>>(
   child: ReactNode,
   component: FC<P>,
+  fallback?: Required<Pick<P, 'className'>>,
 ): child is ReactElement<P, typeof component> => {
-  return isValidElement<typeof component>(child) && child.type === component;
+  if (!isValidComponent(child)) {
+    return false;
+  }
+
+  // Check type for client only components
+  if (child.type === component) {
+    return true;
+  }
+
+  // Check props for lazy or deferred server components
+  return child.props.className && fallback?.className
+    ? child.props.className.split(' ').includes(fallback.className)
+    : false;
 };
 
 /**