Upgrade to NHS.UK frontend v9.6.3

bundle-base.tsconfig.json

@@ -23,8 +23,7 @@
       "@navigation/*": ["src/components/navigation/*"],
       "@typography/*": ["src/components/typography/*"],
       "@util/*": ["src/util/*"],
-      "@patterns/*": ["src/patterns/*"],
-      "@resources/*": ["src/resources/*"]
+      "@patterns/*": ["src/patterns/*"]
     }
   },
   "include": ["src"],

jest.config.js

@@ -19,7 +19,6 @@ const jestConfig = {
       },
     ],
   },
-  transformIgnorePatterns: ['node_modules/(?!nhsuk-frontend/packages)'],
 };
 
 module.exports = jestConfig;

package.json

@@ -66,7 +66,7 @@
     "jest": "^29.7.0",
     "jest-axe": "^8.0.0",
     "jest-environment-jsdom": "^29.7.0",
-    "nhsuk-frontend": "^9.0.1",
+    "nhsuk-frontend": "^9.6.3",
     "prettier": "^3.2.5",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",

src/components/content-presentation/tabs/Tabs.tsx

@@ -1,8 +1,9 @@
 'use client';
 import classNames from 'classnames';
-import React, { FC, HTMLAttributes, useEffect } from 'react';
+import React, { FC, HTMLAttributes, useEffect, useRef, useState } from 'react';
 import HeadingLevel, { HeadingLevelType } from '@components/utils/HeadingLevel';
-import TabsJs from '@resources/tabs';
+// @ts-expect-error -- No types available
+import initTabs from 'nhsuk-frontend/packages/components/tabs/tabs';
 
 type TabsProps = HTMLAttributes<HTMLDivElement>;
 
@@ -54,12 +55,25 @@ interface Tabs extends FC<TabsProps> {
 }
 
 const Tabs: Tabs = ({ className, children, ...rest }) => {
+  const moduleRef = useRef<HTMLDivElement>(null);
+  const [isInitialised, setIsInitialised] = useState<boolean>(false);
+
   useEffect(() => {
-    TabsJs();
-  }, []);
+    if (isInitialised || !moduleRef.current?.parentElement) {
+      return;
+    }
+
+    initTabs({ scope: moduleRef.current.parentElement });
+    setIsInitialised(true);
+  }, [isInitialised, moduleRef]);
 
   return (
-    <div className={classNames('nhsuk-tabs', className)} data-module="nhsuk-tabs" {...rest}>
+    <div
+      className={classNames('nhsuk-tabs', className)}
+      data-module="nhsuk-tabs"
+      ref={moduleRef}
+      {...rest}
+    >
       {children}
     </div>
   );

src/components/form-elements/character-count/CharacterCount.tsx

@@ -1,6 +1,7 @@
 'use client';
-import React, { FC, useEffect } from 'react';
-import CharacterCountJs from '@resources/character-count';
+import React, { FC, useEffect, useRef, useState } from 'react';
+// @ts-expect-error -- No types available
+import initCharacterCounts from 'nhsuk-frontend/packages/components/character-count/character-count';
 import { HTMLAttributesWithData } from '@util/types/NHSUKTypes';
 
 export enum CharacterCountType {
@@ -24,9 +25,17 @@ const CharacterCount: FC<CharacterCountProps> = ({
   thresholdPercent,
   ...rest
 }) => {
+  const moduleRef = useRef<HTMLDivElement>(null);
+  const [isInitialised, setIsInitialised] = useState<boolean>(false);
+
   useEffect(() => {
-    CharacterCountJs();
-  }, []);
+    if (isInitialised || !moduleRef.current?.parentElement) {
+      return;
+    }
+
+    initCharacterCounts({ scope: moduleRef.current.parentElement });
+    setIsInitialised(true);
+  }, [isInitialised, moduleRef]);
 
   const characterCountProps: HTMLAttributesWithData<HTMLDivElement> =
     countType === CharacterCountType.Characters
@@ -41,6 +50,7 @@ const CharacterCount: FC<CharacterCountProps> = ({
     <div
       className="nhsuk-character-count"
       data-module="nhsuk-character-count"
+      ref={moduleRef}
       {...characterCountProps}
     >
       <div className="nhsuk-form-group">{children}</div>

src/components/form-elements/checkboxes/Checkboxes.tsx

@@ -1,27 +1,36 @@
 'use client';
 
-import React, { HTMLProps, useEffect } from 'react';
+import React, { HTMLProps, useEffect, useRef, useState } from 'react';
 import classNames from 'classnames';
 import { FormElementProps } from '@util/types/FormTypes';
 import SingleInputFormGroup from '@components/utils/SingleInputFormGroup';
 import CheckboxContext, { ICheckboxContext } from './CheckboxContext';
 import Box from './components/Box';
 import Divider from './components/Divider';
 import { generateRandomName } from '@util/RandomID';
-import CheckboxJs from '@resources/checkboxes';
+// @ts-expect-error -- No types available
+import initCheckboxes from 'nhsuk-frontend/packages/components/checkboxes/checkboxes';
 
 interface CheckboxesProps extends HTMLProps<HTMLDivElement>, FormElementProps {
   idPrefix?: string;
 }
 
 const Checkboxes = ({ children, idPrefix, ...rest }: CheckboxesProps) => {
+  const moduleRef = useRef<HTMLDivElement>(null);
+  const [isInitialised, setIsInitialised] = useState<boolean>(false);
+
   const _boxReferences: string[] = [];
   let _boxCount: number = 0;
   let _boxIds: Record<string, string> = {};
 
   useEffect(() => {
-    CheckboxJs();
-  }, []);
+    if (isInitialised || !moduleRef.current?.parentElement) {
+      return;
+    }
+
+    initCheckboxes({ scope: moduleRef.current.parentElement });
+    setIsInitialised(true);
+  }, [isInitialised, moduleRef]);
 
   const getBoxId = (id: string, reference: string): string => {
     if (reference in _boxIds) {
@@ -64,7 +73,12 @@ const Checkboxes = ({ children, idPrefix, ...rest }: CheckboxesProps) => {
           unleaseReference,
         };
         return (
-          <div className={classNames('nhsuk-checkboxes', className)} id={id} {...restRenderProps}>
+          <div
+            className={classNames('nhsuk-checkboxes', className)}
+            id={id}
+            ref={moduleRef}
+            {...restRenderProps}
+          >
             <CheckboxContext.Provider value={contextValue}>{children}</CheckboxContext.Provider>
           </div>
         );

src/components/navigation/header/Header.tsx

@@ -1,5 +1,5 @@
 'use client';
-import React, { FC, HTMLProps, useContext, useState, useEffect, useMemo } from 'react';
+import React, { FC, HTMLProps, useContext, useState, useEffect, useMemo, useRef } from 'react';
 import classNames from 'classnames';
 import NHSLogo, { NHSLogoNavProps } from './components/NHSLogo';
 import OrganisationalLogo, { OrganisationalLogoProps } from './components/OrganisationalLogo';
@@ -11,7 +11,8 @@ import NavDropdownMenu from './components/NavDropdownMenu';
 import { Container } from '@components/layout';
 import Content from './components/Content';
 import TransactionalServiceName from './components/TransactionalServiceName';
-import HeaderJs from '@resources/header';
+// @ts-expect-error -- No types available
+import initHeader from 'nhsuk-frontend/packages/components/header/header';
 
 const BaseHeaderLogo: FC<OrganisationalLogoProps & NHSLogoNavProps> = (props) => {
   const { orgName } = useContext<IHeaderContext>(HeaderContext);
@@ -46,14 +47,22 @@ const Header = ({
   white,
   ...rest
 }: HeaderProps) => {
+  const moduleRef = useRef<HTMLElement>(null);
+
   const [hasMenuToggle, setHasMenuToggle] = useState(false);
   const [hasSearch, setHasSearch] = useState(false);
   const [hasServiceName, setHasServiceName] = useState(false);
+  const [isInitialised, setIsInitialised] = useState<boolean>(false);
   const [menuOpen, setMenuOpen] = useState(false);
 
   useEffect(() => {
-    HeaderJs();
-  }, []);
+    if (isInitialised || !moduleRef.current?.parentElement) {
+      return;
+    }
+
+    initHeader({ scope: moduleRef.current.parentElement });
+    setIsInitialised(true);
+  }, [isInitialised, moduleRef]);
 
   const setMenuToggle = (toggle: boolean): void => {
     setHasMenuToggle(toggle);
@@ -113,6 +122,7 @@ const Header = ({
         className,
       )}
       role={role}
+      ref={moduleRef}
       {...rest}
     >
       <HeaderContext.Provider value={contextValue}>{children}</HeaderContext.Provider>

src/components/navigation/header/__tests__/__snapshots__/Header.test.tsx.snap

@@ -174,7 +174,7 @@ exports[`The header component Matches the snapshot 1`] = `
           >
             <button
               aria-expanded="false"
-              class="nhsuk-header__menu-toggle nhsuk-header__navigation-link"
+              class="nhsuk-header__menu-toggle nhsuk-header__navigation-link "
             >
               <span
                 class="nhsuk-u-visually-hidden"
@@ -195,9 +195,6 @@ exports[`The header component Matches the snapshot 1`] = `
                 />
               </svg>
             </button>
-            <ul
-              class="nhsuk-header__drop-down nhsuk-header__drop-down--hidden"
-            />
           </li>
         </ul>
       </nav>