From 8d9671216bbc01c046de96aeaff4ab27c3efe835 Mon Sep 17 00:00:00 2001
From: Rowell Heria <rowell+dev@heria.uk>
Date: Thu, 5 Sep 2024 10:14:44 +0100
Subject: [PATCH 1/3] style(nhsuk-frontend-react): format Tag source code

---
 .../src/components/content-presentation/tag/Tag.tsx        | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/packages/nhsuk-frontend-react/src/components/content-presentation/tag/Tag.tsx b/packages/nhsuk-frontend-react/src/components/content-presentation/tag/Tag.tsx
index dc9ca36..a6e8e1d 100644
--- a/packages/nhsuk-frontend-react/src/components/content-presentation/tag/Tag.tsx
+++ b/packages/nhsuk-frontend-react/src/components/content-presentation/tag/Tag.tsx
@@ -20,7 +20,12 @@ export type TagProps = {
 } & ElementProps<'strong'>;
 
 const Tag = ({ variant = 'grey', className, ...props }: TagProps) => {
-  return <strong className={clsx('nhsuk-tag', `nhsuk-tag--${variant}`, className)} {...props} />;
+  return (
+    <strong
+      className={clsx('nhsuk-tag', `nhsuk-tag--${variant}`, className)}
+      {...props}
+    />
+  );
 };
 
 Tag.displayName = 'Tag';

From 9fbb5677579d790643b70129637551cdeb9f9a61 Mon Sep 17 00:00:00 2001
From: Rowell Heria <rowell+dev@heria.uk>
Date: Thu, 5 Sep 2024 10:17:12 +0100
Subject: [PATCH 2/3] fix(nhsuk-frontend-react): update useEffect to trigger
 when NavList children update

This moves the invocation of the header script into NavList so it can react to the changes to the children. Useful for when the links are dynamically rendred.
---
 .../navigation/header/Header.stories.tsx      | 57 ++++++++++++++++++-
 .../components/navigation/header/Header.tsx   | 55 ++++++++++--------
 2 files changed, 86 insertions(+), 26 deletions(-)

diff --git a/packages/nhsuk-frontend-react/src/components/navigation/header/Header.stories.tsx b/packages/nhsuk-frontend-react/src/components/navigation/header/Header.stories.tsx
index 167ea08..151a70f 100644
--- a/packages/nhsuk-frontend-react/src/components/navigation/header/Header.stories.tsx
+++ b/packages/nhsuk-frontend-react/src/components/navigation/header/Header.stories.tsx
@@ -1,6 +1,6 @@
-import React from 'react';
+import React, { useEffect, useState } from 'react';
 import type { Meta, StoryObj } from '@storybook/react';
-import { Header } from './Header';
+import { Header, HeaderProps } from './Header';
 
 /**
  * Use the appropriate header at the top of every page to show users they are on an NHS service and help them get started in finding what they need.
@@ -157,3 +157,56 @@ export const WithOrgansation: Story = {
     </Header>
   ),
 };
+
+const SampleNav = (props: HeaderProps) => {
+  const [isVisible, setIsVisible] = useState(false);
+
+  useEffect(() => {
+    setTimeout(() => {
+      setIsVisible(true);
+    }, 2000);
+  }, []);
+
+  return (
+    <Header {...props}>
+      <Header.Container>
+        <Header.Logo href="#" aria-label="NHS homepage" />
+        <Header.Content>
+          <Header.Search
+            inputProps={{ visuallyHiddenText: 'Search the NHS website' }}
+            buttonProps={{ visuallyHiddenText: 'Search' }}
+          />
+        </Header.Content>
+      </Header.Container>
+      <Header.Nav>
+        <Header.NavList>
+          {isVisible ? (
+            <>
+              <Header.NavItem href="#">Health A-Z</Header.NavItem>
+              <Header.NavItem href="#">Live Well</Header.NavItem>
+              <Header.NavItem href="#">Mental health</Header.NavItem>
+              <Header.NavItem href="#">Care and support</Header.NavItem>
+              <Header.NavItem href="#">Pregnancy</Header.NavItem>
+              <Header.NavItem href="#">NHS services</Header.NavItem>
+              <Header.NavItem href="#" variant="home-link">
+                Home
+              </Header.NavItem>
+              <Header.MobileMenu />
+            </>
+          ) : (
+            <Header.NavItem href="#">Health A-Z</Header.NavItem>
+          )}
+        </Header.NavList>
+      </Header.Nav>
+    </Header>
+  );
+};
+
+export const WithDelayedNav: Story = {
+  args: {
+    organisationName: 'Anytown Anyplace',
+    organisationSplit: 'Anywhere',
+    organisationDescriptor: 'NHS Foundation Trust',
+  },
+  render: (args) => <SampleNav {...args} />,
+};
diff --git a/packages/nhsuk-frontend-react/src/components/navigation/header/Header.tsx b/packages/nhsuk-frontend-react/src/components/navigation/header/Header.tsx
index f6d7d57..2a6b589 100644
--- a/packages/nhsuk-frontend-react/src/components/navigation/header/Header.tsx
+++ b/packages/nhsuk-frontend-react/src/components/navigation/header/Header.tsx
@@ -106,18 +106,6 @@ const Header = factory<HeaderFactory>(
       [],
     );
 
-    const internalRef = useRef<HTMLDivElement>(null);
-
-    useImperativeHandle(ref, () => internalRef.current as HTMLDivElement);
-
-    useEffect(() => {
-      if (!internalRef.current) {
-        return;
-      }
-
-      initHeader();
-    }, [internalRef]);
-
     return (
       <HeaderContextProvider value={value}>
         <header
@@ -133,7 +121,7 @@ const Header = factory<HeaderFactory>(
           )}
           role="banner"
           {...props}
-          ref={internalRef}
+          ref={ref}
         >
           {children}
         </header>
@@ -306,17 +294,36 @@ const HeaderNav = ({ children, className, ...props }: HeaderNavProps) => {
 
 export type HeaderNavListProps = ElementProps<'ul'>;
 
-const HeaderNavList = ({
-  children,
-  className,
-  ...props
-}: HeaderNavListProps) => {
-  return (
-    <ul className={clsx('nhsuk-header__navigation-list', className)} {...props}>
-      {children}
-    </ul>
-  );
-};
+type HeaderNavListFactory = Factory<{
+  props: HeaderNavListProps;
+  ref: HTMLUListElement;
+}>;
+
+const HeaderNavList = factory<HeaderNavListFactory>(
+  ({ children, className, ...props }: HeaderNavListProps, ref) => {
+    const internalRef = useRef<HTMLUListElement>(null);
+
+    useImperativeHandle(ref, () => internalRef.current as HTMLUListElement);
+
+    useEffect(() => {
+      if (!internalRef.current) {
+        return;
+      }
+
+      initHeader();
+    }, [internalRef, children]);
+
+    return (
+      <ul
+        className={clsx('nhsuk-header__navigation-list', className)}
+        {...props}
+        ref={internalRef}
+      >
+        {children}
+      </ul>
+    );
+  },
+);
 
 export type HeaderNavItemProps = { variant?: 'home-link' } & BaseProps;
 

From 247d225f751b10e34cdde895eaffbde6d981ca16 Mon Sep 17 00:00:00 2001
From: Rowell Heria <rowell+dev@heria.uk>
Date: Thu, 5 Sep 2024 12:27:52 +0100
Subject: [PATCH 3/3] chore: generate changeset

---
 .changeset/bright-owls-clean.md | 5 +++++
 .changeset/late-masks-stare.md  | 7 +++++++
 2 files changed, 12 insertions(+)
 create mode 100644 .changeset/bright-owls-clean.md
 create mode 100644 .changeset/late-masks-stare.md

diff --git a/.changeset/bright-owls-clean.md b/.changeset/bright-owls-clean.md
new file mode 100644
index 0000000..5531d74
--- /dev/null
+++ b/.changeset/bright-owls-clean.md
@@ -0,0 +1,5 @@
+---
+"nhsuk-frontend-react": patch
+---
+
+style(nhsuk-frontend-react): format Tag source code
diff --git a/.changeset/late-masks-stare.md b/.changeset/late-masks-stare.md
new file mode 100644
index 0000000..99f8db4
--- /dev/null
+++ b/.changeset/late-masks-stare.md
@@ -0,0 +1,7 @@
+---
+"nhsuk-frontend-react": patch
+---
+
+fix(nhsuk-frontend-react): update useEffect to trigger when NavList children update
+
+This moves the invocation of the header script into NavList so it can react to the changes to the children. Useful for when the links are dynamically rendred.