Merge branch 'main' into patch-1

Author: Peter-Hudson-G

CHANGELOG.md

@@ -1,5 +1,15 @@
 # NHS.UK React components
 
+## 6.0.0-beta.3 - 27 October 2025
+
+This version provides support for NHS.UK frontend v10.1 and includes:
+
+- [Smaller radios](https://service-manual.nhs.uk/design-system/components/radios#smaller-radios) and [smaller checkboxes](https://service-manual.nhs.uk/design-system/components/checkboxes#smaller-checkboxes)
+- [Numbered pagination](https://service-manual.nhs.uk/design-system/components/pagination#for-navigating-between-pages-of-items)
+- React strict mode support
+
+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).
+
 ## 6.0.0-beta.2 - 13 October 2025
 
 This version provides support for NHS.UK frontend v10.x, React Server Components (RSC) and fixes a Rollup `'use client'` directive issue.

docs/upgrade-to-6.0.md

@@ -18,19 +18,24 @@ The updated [header](https://service-manual.nhs.uk/design-system/components/head
 - update NHS logo in the header to have higher contrast when focused
 - refactor CSS classes and BEM naming, use hidden attributes instead of modifier classes, use generic search element
 
-### Panel component
+#### Smaller versions of radio buttons and checkboxes
 
-The [panel](https://service-manual.nhs.uk/design-system/components/panel) component from NHS.UK frontend v9.3.0 has been added:
+You can now use smaller versions of the [radios](https://service-manual.nhs.uk/design-system/components/radios) and [checkboxes](https://service-manual.nhs.uk/design-system/components/checkboxes) components by adding the `small` prop.
+
+### Numbered pagination component
+
+The [pagination](https://service-manual.nhs.uk/design-system/components/notification-banner) component from NHS.UK frontend v10.1 has been updated to support numbered pagination:
 
 ```jsx
-<Panel>
-  <Panel.Title>Booking complete</Panel.Title>
-  We have sent you a confirmation email
-</Panel>
+<Pagination>
+  <Pagination.Link href="/results?page=1" previous />
+  <Pagination.Item href="/results?page=1" number={1} />
+  <Pagination.Item href="/results?page=2" number={2} current />
+  <Pagination.Item href="/results?page=3" number={3} />
+  <Pagination.Link href="/results?page=3" next />
+</Pagination>
 ```
 
-This replaces the [list panel component](#list-panel) which was removed in NHS.UK frontend v6.0.0.
-
 ### Notification banner component
 
 The [notification banner](https://service-manual.nhs.uk/design-system/components/notification-banner) component from NHS.UK frontend v10 has been added:
@@ -42,23 +47,32 @@ The [notification banner](https://service-manual.nhs.uk/design-system/components
 </NotificationBanner>
 ```
 
+### Panel component
+
+The [panel](https://service-manual.nhs.uk/design-system/components/panel) component from NHS.UK frontend v9.3.0 has been added:
+
+```jsx
+<Panel>
+  <Panel.Title>Booking complete</Panel.Title>
+  We have sent you a confirmation email
+</Panel>
+```
+
+This replaces the [list panel component](#list-panel) which was removed in NHS.UK frontend v6.0.0.
+
 ### Support for React Server Components (RSC)
 
 All components have been tested as React Server Components (RSC) but due to [multipart namespace component limitations](https://ivicabatinic.from.hr/posts/multipart-namespace-components-addressing-rsc-and-dot-notation-issues) an alternative syntax (without dot notation) can be used as a workaround:
 
 ```patch
-  <Pagination>
--   <Pagination.Link href="/section/treatments" previous>
-+   <PaginationLink href="/section/treatments" previous>
-      Treatments
--   </Pagination.Link>
-+   </PaginationLink>
--   <Pagination.Link href="/section/symptoms" next>
-+   <PaginationLink href="/section/symptoms" next>
-      Symptoms
--   </Pagination.Link>
-+   </PaginationLink>
-  </Pagination>
+  <Breadcrumb>
+-   <Breadcrumb.Item href="#">Home</Breadcrumb.Item>
+-   <Breadcrumb.Item href="#">NHS services</Breadcrumb.Item>
+-   <Breadcrumb.Item href="#">Hospitals</Breadcrumb.Item>
++   <BreadcrumbItem href="#">Home</BreadcrumbItem>
++   <BreadcrumbItem href="#">NHS services</BreadcrumbItem>
++   <BreadcrumbItem href="#">Hospitals</BreadcrumbItem>
+  </Breadcrumb>
 ```
 
 ## Breaking changes
@@ -437,6 +451,26 @@ To align with NHS.UK frontend, the error summary component is automatically aler
   </ErrorSummary>
 ```
 
+### Pagination
+
+To align with NHS.UK frontend, the pagination link component automatically renders its own "Previous page" or "Next page" text, with "page" being visually hidden. You will need to make the following changes:
+
+- rename the `Pagination.Link` component to `Pagination.Item`
+- move text content (or the `children` prop) to the `labelText` prop
+
+```patch
+  <Pagination>
+-   <Pagination.Link href="/section/treatments" previous>
+-     Treatments
+-   </Pagination.Link>
+-   <Pagination.Link href="/section/symptoms" next>
+-     Symptoms
+-   </Pagination.Link>
++   <Pagination.Item labelText="Treatments" href="/section/treatments" previous />
++   <Pagination.Item labelText="Symptoms" href="/section/symptoms" next />
+  </Pagination>
+```
+
 ### Select
 
 You must rename the `Select` prop `selectRef` to `ref` for consistency with other components:

eslint.config.js

@@ -43,6 +43,17 @@ export default defineConfig([
       'import/no-named-as-default-member': 'off',
       'import/no-unresolved': 'off',
       'import/no-unused-modules': 'off',
+
+      // Prefer rules that are type aware
+      'no-unused-vars': 'off',
+      '@typescript-eslint/no-unused-vars': [
+        'error',
+        {
+          argsIgnorePattern: '^_',
+          varsIgnorePattern: '^_',
+          ignoreRestSiblings: true,
+        },
+      ],
     },
     settings: {
       'import/resolver': {

package.json

@@ -1,6 +1,6 @@
 {
   "name": "nhsuk-react-components",
-  "version": "6.0.0-beta.2",
+  "version": "6.0.0-beta.3",
   "license": "MIT",
   "author": {
     "name": "NHS England"
@@ -107,7 +107,7 @@
     "jest-axe": "^10.0.0",
     "jest-environment-jsdom": "^30.2.0",
     "lodash": "^4.17.21",
-    "nhsuk-frontend": "^10.0.0",
+    "nhsuk-frontend": "^10.1.0",
     "outdent": "^0.8.0",
     "prettier": "^3.6.2",
     "react": "^19.2.0",
@@ -124,7 +124,7 @@
   },
   "peerDependencies": {
     "classnames": ">=2.5.0",
-    "nhsuk-frontend": ">=10.0.0 <11.0.0",
+    "nhsuk-frontend": ">=10.1.0 <11.0.0",
     "react": ">=18.2.0",
     "react-dom": ">=18.2.0",
     "tslib": ">=2.8.0"

src/__tests__/index.test.ts

@@ -96,7 +96,9 @@ describe('Index', () => {
       'NotificationBannerLink',
       'NotificationBannerTitle',
       'Pagination',
+      'PaginationItem',
       'PaginationLink',
+      'PaginationLinkText',
       'Panel',
       'PanelTitle',
       'Radios',

src/components/content-presentation/notification-banner/NotificationBanner.tsx

@@ -2,9 +2,10 @@
 
 import {
   Children,
-  createRef,
   forwardRef,
   useEffect,
+  useImperativeHandle,
+  useRef,
   useState,
   type ComponentPropsWithoutRef,
 } from 'react';
@@ -27,19 +28,22 @@ const NotificationBannerComponent = forwardRef<HTMLDivElement, NotificationBanne
   (props, forwardedRef) => {
     const { children, className, title, titleId, success, role, disableAutoFocus, ...rest } = props;
 
-    const [moduleRef] = useState(() => forwardedRef || createRef<HTMLDivElement>());
+    const moduleRef = useRef<HTMLDivElement>(null);
+    const importRef = useRef<Promise<NotificationBannerModule | void>>(null);
     const [instanceError, setInstanceError] = useState<Error>();
     const [instance, setInstance] = useState<NotificationBannerModule>();
 
+    useImperativeHandle(forwardedRef, () => moduleRef.current!, [moduleRef]);
+
     useEffect(() => {
-      if (!('current' in moduleRef) || !moduleRef.current || instance) {
+      if (!moduleRef.current || importRef.current || instance) {
         return;
       }
 
-      import('nhsuk-frontend')
+      importRef.current = import('nhsuk-frontend')
         .then(({ NotificationBanner }) => setInstance(new NotificationBanner(moduleRef.current)))
         .catch(setInstanceError);
-    }, [moduleRef, instance]);
+    }, [moduleRef, importRef, instance]);
 
     const items = Children.toArray(children);
 

src/components/content-presentation/table/components/__tests__/TableCell.test.tsx

@@ -29,7 +29,7 @@ describe('Table.Cell', () => {
       </table>,
     );
 
-    expect(console.warn).toHaveBeenCalledTimes(1);
+    expect(console.warn).toHaveBeenCalled();
     expect(console.warn).toHaveBeenLastCalledWith(
       'Table.Cell used outside of a Table.Head or Table.Body component. Unable to determine section type from context.',
     );

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

@@ -3,9 +3,10 @@
 import classNames from 'classnames';
 import { type Tabs as TabsModule } from 'nhsuk-frontend';
 import {
-  createRef,
   forwardRef,
   useEffect,
+  useImperativeHandle,
+  useRef,
   useState,
   type ComponentPropsWithoutRef,
   type FC,
@@ -55,19 +56,22 @@ export const TabsContents: FC<TabsContentsProps> = ({ children, id, ...rest }) =
 const TabsComponent = forwardRef<HTMLDivElement, TabsProps>((props, forwardedRef) => {
   const { children, className, ...rest } = props;
 
-  const [moduleRef] = useState(() => forwardedRef || createRef<HTMLDivElement>());
+  const moduleRef = useRef<HTMLDivElement>(null);
+  const importRef = useRef<Promise<TabsModule | void>>(null);
   const [instanceError, setInstanceError] = useState<Error>();
   const [instance, setInstance] = useState<TabsModule>();
 
+  useImperativeHandle(forwardedRef, () => moduleRef.current!, [moduleRef]);
+
   useEffect(() => {
-    if (!('current' in moduleRef) || !moduleRef.current || instance) {
+    if (!moduleRef.current || importRef.current || instance) {
       return;
     }
 
-    import('nhsuk-frontend')
+    importRef.current = import('nhsuk-frontend')
       .then(({ Tabs }) => setInstance(new Tabs(moduleRef.current)))
       .catch(setInstanceError);
-  }, [moduleRef, instance]);
+  }, [moduleRef, importRef, instance]);
 
   if (instanceError) {
     throw instanceError;

src/components/form-elements/button/Button.tsx

@@ -3,9 +3,10 @@
 import classNames from 'classnames';
 import { type Button as ButtonModule } from 'nhsuk-frontend';
 import {
-  createRef,
   forwardRef,
   useEffect,
+  useImperativeHandle,
+  useRef,
   useState,
   type ForwardedRef,
   type MouseEvent,
@@ -45,19 +46,22 @@ const ButtonComponent = forwardRef<HTMLButtonElement, ButtonProps>((props, forwa
     ...rest
   } = props;
 
-  const [moduleRef] = useState(() => forwardedRef || createRef<HTMLButtonElement>());
+  const moduleRef = useRef<HTMLButtonElement>(null);
+  const importRef = useRef<Promise<ButtonModule | void>>(null);
   const [instanceError, setInstanceError] = useState<Error>();
   const [instance, setInstance] = useState<ButtonModule>();
 
+  useImperativeHandle(forwardedRef, () => moduleRef.current!, [moduleRef]);
+
   useEffect(() => {
-    if (!('current' in moduleRef) || !moduleRef.current || instance) {
+    if (!moduleRef.current || importRef.current || instance) {
       return;
     }
 
-    import('nhsuk-frontend')
+    importRef.current = import('nhsuk-frontend')
       .then(({ Button }) => setInstance(new Button(moduleRef.current)))
       .catch(setInstanceError);
-  }, [moduleRef, instance]);
+  }, [moduleRef, importRef, instance]);
 
   if (instanceError) {
     throw instanceError;
@@ -104,19 +108,22 @@ const ButtonLinkComponent = forwardRef<HTMLAnchorElement, ButtonLinkProps>(
       ...rest
     } = props;
 
-    const [moduleRef] = useState(() => forwardedRef || createRef<HTMLAnchorElement>());
+    const moduleRef = useRef<HTMLAnchorElement>(null);
+    const importRef = useRef<Promise<ButtonModule | void>>(null);
     const [instanceError, setInstanceError] = useState<Error>();
     const [instance, setInstance] = useState<ButtonModule>();
 
+    useImperativeHandle(forwardedRef, () => moduleRef.current!, [moduleRef]);
+
     useEffect(() => {
-      if (!('current' in moduleRef) || !moduleRef.current || instance) {
+      if (!moduleRef.current || importRef.current || instance) {
         return;
       }
 
-      import('nhsuk-frontend')
+      importRef.current = import('nhsuk-frontend')
         .then(({ Button }) => setInstance(new Button(moduleRef.current)))
         .catch(setInstanceError);
-    }, [moduleRef, instance]);
+    }, [moduleRef, importRef, instance]);
 
     if (instanceError) {
       throw instanceError;

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

@@ -2,7 +2,14 @@
 
 import classNames from 'classnames';
 import { type CharacterCount as CharacterCountModule } from 'nhsuk-frontend';
-import { createRef, forwardRef, useEffect, useState, type ComponentPropsWithoutRef } from 'react';
+import {
+  forwardRef,
+  useEffect,
+  useImperativeHandle,
+  useRef,
+  useState,
+  type ComponentPropsWithoutRef,
+} from 'react';
 import { FormGroup } from '#components/utils/index.js';
 import { type FormElementProps } from '#util/types/FormTypes.js';
 
@@ -16,19 +23,22 @@ export interface CharacterCountProps
 
 export const CharacterCount = forwardRef<HTMLTextAreaElement, CharacterCountProps>(
   ({ maxLength, maxWords, threshold, formGroupProps, ...rest }, forwardedRef) => {
-    const [moduleRef] = useState(() => formGroupProps?.ref || createRef<HTMLDivElement>());
+    const moduleRef = useRef<HTMLDivElement>(null);
+    const importRef = useRef<Promise<CharacterCountModule | void>>(null);
     const [instanceError, setInstanceError] = useState<Error>();
     const [instance, setInstance] = useState<CharacterCountModule>();
 
+    useImperativeHandle(formGroupProps?.ref, () => moduleRef.current!, [moduleRef]);
+
     useEffect(() => {
-      if (!('current' in moduleRef) || !moduleRef.current || instance) {
+      if (!moduleRef.current || importRef.current || instance) {
         return;
       }
 
-      import('nhsuk-frontend')
+      importRef.current = import('nhsuk-frontend')
         .then(({ CharacterCount }) => setInstance(new CharacterCount(moduleRef.current)))
         .catch(setInstanceError);
-    }, [moduleRef, instance]);
+    }, [moduleRef, importRef, instance]);
 
     if (instanceError) {
       throw instanceError;
@@ -41,9 +51,9 @@ export const CharacterCount = forwardRef<HTMLTextAreaElement, CharacterCountProp
           ...formGroupProps,
           'className': classNames('nhsuk-character-count', formGroupProps?.className),
           'data-module': 'nhsuk-character-count',
-          'data-maxlength': maxLength,
-          'data-maxwords': maxWords,
-          'data-threshold': threshold,
+          'data-maxlength': maxLength?.toString(),
+          'data-maxwords': maxWords?.toString(),
+          'data-threshold': threshold?.toString(),
           'ref': moduleRef,
         }}
         {...rest}