@hmlr/govuk-react-components-library 1.2.2 → 1.3.0

package/dist/index.cjs.js

@@ -249,7 +249,7 @@ const Button = (props) => {
         iconHtml = (jsxRuntime.jsx("svg", { className: "govuk-button__start-icon", xmlns: "http://www.w3.org/2000/svg", width: "17.5", height: "19", viewBox: "0 0 33 40", "aria-hidden": "true", focusable: "false", children: jsxRuntime.jsx("path", { fill: "currentColor", d: "M0 0h13l20 20-20 20H0l20-20z" }) }));
     }
     const commonAttributes = {
-        className: `govuk-button ${className || ""}${disabled ? " govuk-button--disabled" : ""} ${isStartButton ? "govuk-button--start" : ""}`,
+        className: `govuk-button ${className || ""} ${isStartButton ? "govuk-button--start" : ""}`,
         // ref: buttonRef,
     };
     if (preventDoubleClick) {
@@ -633,28 +633,36 @@ const defaultProps$1 = {
     name: "",
 };
 const Textarea = React.forwardRef((props = defaultProps$1, ref) => {
-    const { className, "aria-describedby": describedBy, errorMessage, formGroup, hint, label, id, ...attributes } = props;
+    const { className, "aria-describedby": describedBy, errorMessage, formGroup, hint, label, id, name, ...attributes } = props;
+    // Mirrors govuk-frontend's Nunjucks macro, which defaults id to name when
+    // id isn't given - without this the textarea has no id, so its <label for>
+    // (and hint/error aria-describedby) can never associate with it.
+    const resolvedId = id || name;
     let describedByValue = describedBy || "";
     let hintComponent = null;
     let errorMessageComponent = null;
     if (hint) {
-        const hintId = `${id}-hint`;
+        const hintId = `${resolvedId}-hint`;
         describedByValue += ` ${hintId}`;
         hintComponent = jsxRuntime.jsx(Hint, { ...hint, id: hintId });
     }
     if (errorMessage) {
-        const errorId = id ? `${id}-error` : "";
+        const errorId = resolvedId ? `${resolvedId}-error` : "";
         describedByValue += ` ${errorId}`;
         errorMessageComponent = jsxRuntime.jsx(ErrorMessage, { ...errorMessage, id: errorId });
     }
-    return (jsxRuntime.jsxs("div", { className: `govuk-form-group${errorMessage ? " govuk-form-group--error" : ""} ${formGroup?.className || ""}`, children: [jsxRuntime.jsx(Label, { ...label, htmlFor: id }), hintComponent, errorMessageComponent, jsxRuntime.jsx("textarea", { ...attributes, id: id, ref: ref, className: `govuk-textarea${errorMessage ? " govuk-textarea--error" : ""} ${className || ""}`, "aria-describedby": describedByValue?.trim() || undefined })] }));
+    return (jsxRuntime.jsxs("div", { className: `govuk-form-group${errorMessage ? " govuk-form-group--error" : ""} ${formGroup?.className || ""}`, children: [jsxRuntime.jsx(Label, { ...label, htmlFor: resolvedId }), hintComponent, errorMessageComponent, jsxRuntime.jsx("textarea", { name: name, ...attributes, id: resolvedId, ref: ref, className: `govuk-textarea${errorMessage ? " govuk-textarea--error" : ""} ${className || ""}`, "aria-describedby": describedByValue?.trim() || undefined })] }));
 });
 Textarea.displayName = "Textarea";
 
 const CharacterCount = (props) => {
-    const { id, className, maxlength, threshold, maxwords, errorMessage, countMessage, ...attributes } = props;
-    const characterCountInfoId = `${id}-info`;
-    return (jsxRuntime.jsxs("div", { className: "govuk-character-count", "data-module": "govuk-character-count", "data-maxlength": maxlength, "data-threshold": threshold, "data-maxwords": maxwords, children: [jsxRuntime.jsx(Textarea, { id: id, ...attributes, errorMessage: errorMessage, className: `govuk-js-character-count ${className || ""}${errorMessage ? " govuk-textarea--error" : ""}`, "aria-describedby": characterCountInfoId }), jsxRuntime.jsxs(Hint, { id: characterCountInfoId, className: `govuk-hint govuk-character-count__message ${countMessage?.className || ""}`, "aria-live": "polite", children: ["You have ", maxlength || maxwords, " ", maxwords ? "words" : "characters", " ", "remaining"] })] }));
+    const { id, name, className, maxlength, threshold, maxwords, errorMessage, countMessage, ...attributes } = props;
+    // Mirrors govuk-frontend's Nunjucks macro, which defaults id to name when
+    // id isn't given - without this the count message's id (referenced by the
+    // textarea's aria-describedby) would render as literally "undefined-info".
+    const resolvedId = id || name;
+    const characterCountInfoId = `${resolvedId}-info`;
+    return (jsxRuntime.jsxs("div", { className: "govuk-character-count", "data-module": "govuk-character-count", "data-maxlength": maxlength, "data-threshold": threshold, "data-maxwords": maxwords, children: [jsxRuntime.jsx(Textarea, { id: resolvedId, name: name, ...attributes, errorMessage: errorMessage, className: `govuk-js-character-count ${className || ""}${errorMessage ? " govuk-textarea--error" : ""}`, "aria-describedby": characterCountInfoId }), jsxRuntime.jsxs(Hint, { id: characterCountInfoId, className: `govuk-hint govuk-character-count__message ${countMessage?.className || ""}`, "aria-live": "polite", children: ["You have ", maxlength || maxwords, " ", maxwords ? "words" : "characters", " ", "remaining"] })] }));
 };
 CharacterCount.displayName = "CharacterCount";
 
@@ -702,21 +710,25 @@ const defaultProps = {
 };
 const Input = React.forwardRef((props = defaultProps, ref) => {
     const { className, "aria-describedby": describedBy, errorMessage, formGroup, hint, label, name, id, prefix, suffix, ...attributes } = props;
+    // Mirrors govuk-frontend's Nunjucks macro, which defaults id to name when
+    // id isn't given - without this the input has no id, so its <label for>
+    // (and hint/error aria-describedby) can never associate with it.
+    const resolvedId = id || name;
     let describedByValue = describedBy || "";
     let hintComponent = null;
     let errorMessageComponent = null;
     if (hint) {
-        const hintId = `${id}-hint`;
+        const hintId = `${resolvedId}-hint`;
         describedByValue += ` ${hintId}`;
         hintComponent = jsxRuntime.jsx(Hint, { ...hint, id: hintId });
     }
     if (errorMessage) {
-        const errorId = id ? `${id}-error` : "";
+        const errorId = resolvedId ? `${resolvedId}-error` : "";
         describedByValue += ` ${errorId}`;
         errorMessageComponent = jsxRuntime.jsx(ErrorMessage, { ...errorMessage, id: errorId });
     }
-    const input = (jsxRuntime.jsx("input", { ref: ref, id: id, className: `govuk-input ${className || ""} ${errorMessage ? " govuk-input--error" : ""}`, name: name || id, "aria-describedby": describedByValue || undefined, ...attributes }));
-    return (jsxRuntime.jsxs("div", { className: `govuk-form-group ${formGroup?.className || ""} ${errorMessage ? "govuk-form-group--error" : ""}`, children: [jsxRuntime.jsx(Label, { ...label, htmlFor: id }), hintComponent, errorMessageComponent, prefix || suffix ? (jsxRuntime.jsxs("div", { className: "govuk-input__wrapper", children: [prefix ? (jsxRuntime.jsx("div", { "aria-hidden": "true", ...prefix,
+    const input = (jsxRuntime.jsx("input", { ref: ref, id: resolvedId, className: `govuk-input ${className || ""} ${errorMessage ? " govuk-input--error" : ""}`, name: name || resolvedId, "aria-describedby": describedByValue || undefined, ...attributes }));
+    return (jsxRuntime.jsxs("div", { className: `govuk-form-group ${formGroup?.className || ""} ${errorMessage ? "govuk-form-group--error" : ""}`, children: [jsxRuntime.jsx(Label, { ...label, htmlFor: resolvedId }), hintComponent, errorMessageComponent, prefix || suffix ? (jsxRuntime.jsxs("div", { className: "govuk-input__wrapper", children: [prefix ? (jsxRuntime.jsx("div", { "aria-hidden": "true", ...prefix,
                         className: `govuk-input__prefix ${prefix.className ? prefix.className : ""}` })) : null, input, suffix ? (jsxRuntime.jsx("div", { "aria-hidden": "true", ...suffix,
                         className: `govuk-input__suffix ${suffix.className ? suffix.className : ""}` })) : null] })) : (input)] }));
 });
@@ -897,21 +909,25 @@ function ConfigureOverallExitThisPage($scope) {
 }
 
 const FileUpload = (props) => {
-    const { className, errorMessage, formGroup, hint, label, "aria-describedby": describedBy, id, ...attributes } = props;
+    const { className, errorMessage, formGroup, hint, label, "aria-describedby": describedBy, id, name, ...attributes } = props;
+    // Mirrors govuk-frontend's Nunjucks macro, which defaults id to name when
+    // id isn't given - without this the input has no id, so its <label for>
+    // (and hint/error aria-describedby) can never associate with it.
+    const resolvedId = id || name;
     let hintComponent;
     let errorMessageComponent;
     let describedByValue = describedBy || "";
     if (hint) {
-        const hintId = `${props.id}-hint`;
+        const hintId = `${resolvedId}-hint`;
         describedByValue += ` ${hintId}`;
-        hintComponent = jsxRuntime.jsx(Hint, { ...props.hint, id: hintId });
+        hintComponent = jsxRuntime.jsx(Hint, { ...hint, id: hintId });
     }
     if (errorMessage) {
-        const errorId = `${id}-error`;
+        const errorId = `${resolvedId}-error`;
         describedByValue += ` ${errorId}`;
         errorMessageComponent = jsxRuntime.jsx(ErrorMessage, { ...errorMessage, id: errorId });
     }
-    return (jsxRuntime.jsxs("div", { className: `govuk-form-group${errorMessage ? " govuk-form-group--error" : ""} ${formGroup?.className || ""}`, children: [jsxRuntime.jsx(Label, { ...label, htmlFor: id }), hintComponent, errorMessageComponent, jsxRuntime.jsx("input", { ...attributes, id: id, className: `govuk-file-upload ${className || ""}${errorMessage ? " govuk-file-upload--error" : ""}`, type: "file", "aria-describedby": describedByValue || undefined })] }));
+    return (jsxRuntime.jsxs("div", { className: `govuk-form-group${errorMessage ? " govuk-form-group--error" : ""} ${formGroup?.className || ""}`, children: [jsxRuntime.jsx(Label, { ...label, htmlFor: resolvedId }), hintComponent, errorMessageComponent, jsxRuntime.jsx("input", { name: name, ...attributes, id: resolvedId, className: `govuk-file-upload ${className || ""}${errorMessage ? " govuk-file-upload--error" : ""}`, type: "file", "aria-describedby": describedByValue || undefined })] }));
 };
 FileUpload.displayName = "FileUpload";
 
@@ -1072,7 +1088,7 @@ const Pagination = ({ previous, next, items, className, }) => {
     // Block layout is used when there are no numbered page items — govuk renders
     // the nav with an extra class and the link title with --decorated modifier.
     const isBlockLayout = !items || items.length === 0;
-    return (jsxRuntime.jsxs("nav", { className: `govuk-pagination${isBlockLayout ? " govuk-pagination--block" : ""}${className ? ` ${className}` : ""}`, role: "navigation", "aria-label": "Pagination", children: [previous && (jsxRuntime.jsx("div", { className: "govuk-pagination__prev", children: jsxRuntime.jsx(NavigationButton, { type: "previous", ...previous }) })), items && items.length > 0 && (jsxRuntime.jsx("ul", { className: "govuk-pagination__list", children: items.map((item, index) => item.ellipsis ? (jsxRuntime.jsx("li", { className: "govuk-pagination__item govuk-pagination__item--ellipses", children: DOTS }, index)) : (jsxRuntime.jsx("li", { className: `govuk-pagination__item${item.current ? " govuk-pagination__item--current" : ""}`, children: jsxRuntime.jsx("a", { className: "govuk-link govuk-pagination__link", href: item.href ?? "#", "aria-label": `Page ${item.number}`, ...(item.current ? { "aria-current": "page" } : {}), children: item.number }) }, index))) })), next && (jsxRuntime.jsx("div", { className: "govuk-pagination__next", children: jsxRuntime.jsx(NavigationButton, { type: "next", ...next }) }))] }));
+    return (jsxRuntime.jsxs("nav", { className: `govuk-pagination${isBlockLayout ? " govuk-pagination--block" : ""}${className ? ` ${className}` : ""}`, role: "navigation", "aria-label": "Pagination", children: [previous && (jsxRuntime.jsx("div", { className: "govuk-pagination__prev", children: jsxRuntime.jsx(NavigationButton, { type: "previous", ...previous }) })), items && items.length > 0 && (jsxRuntime.jsx("ul", { className: "govuk-pagination__list", children: items.map((item, index) => item.ellipsis ? (jsxRuntime.jsx("li", { className: "govuk-pagination__item govuk-pagination__item--ellipsis", children: DOTS }, index)) : (jsxRuntime.jsx("li", { className: `govuk-pagination__item${item.current ? " govuk-pagination__item--current" : ""}`, children: jsxRuntime.jsx("a", { className: "govuk-link govuk-pagination__link", href: item.href ?? "#", "aria-label": `Page ${item.number}`, ...(item.current ? { "aria-current": "page" } : {}), children: item.number }) }, index))) })), next && (jsxRuntime.jsx("div", { className: "govuk-pagination__next", children: jsxRuntime.jsx(NavigationButton, { type: "next", ...next }) }))] }));
 };
 
 const Panel = (props) => {
@@ -1083,16 +1099,21 @@ const Panel = (props) => {
 
 const PasswordInput = React.forwardRef((props, ref) => {
     const { className, "aria-describedby": describedBy, errorMessage, formGroup, hint, label, name, id, autoComplete = "current-password", showPasswordText = "Show", hidePasswordText = "Hide", showPasswordAriaLabelText = "Show password", hidePasswordAriaLabelText = "Hide password", passwordShownAnnouncementText, passwordHiddenAnnouncementText, ...attributes } = props;
+    // Mirrors govuk-frontend's Nunjucks macro, which defaults id to name
+    // when id isn't given - without this the input has no id, so its
+    // <label for> (and hint/error aria-describedby) can never associate
+    // with it.
+    const resolvedId = id || name;
     let describedByValue = describedBy || "";
     let hintComponent = null;
     let errorMessageComponent = null;
     if (hint) {
-        const hintId = `${id}-hint`;
+        const hintId = `${resolvedId}-hint`;
         describedByValue += ` ${hintId}`;
         hintComponent = jsxRuntime.jsx(Hint, { ...hint, id: hintId });
     }
     if (errorMessage) {
-        const errorId = id ? `${id}-error` : "";
+        const errorId = resolvedId ? `${resolvedId}-error` : "";
         describedByValue += ` ${errorId}`;
         errorMessageComponent = jsxRuntime.jsx(ErrorMessage, { ...errorMessage, id: errorId });
     }
@@ -1115,8 +1136,8 @@ const PasswordInput = React.forwardRef((props, ref) => {
         i18nProps["data-i18n.password-hidden-announcement"] =
             passwordHiddenAnnouncementText;
     // Label handles isPageHeading internally — no extra wrapper needed here
-    const labelEl = jsxRuntime.jsx(Label, { ...label, htmlFor: id });
-    return (jsxRuntime.jsxs("div", { className: `govuk-form-group${formGroup?.className ? ` ${formGroup.className}` : ""}${errorMessage ? " govuk-form-group--error" : ""} govuk-password-input`, "data-module": "govuk-password-input", ...i18nProps, children: [labelEl, hintComponent, errorMessageComponent, jsxRuntime.jsxs("div", { className: "govuk-input__wrapper govuk-password-input__wrapper", children: [jsxRuntime.jsx("input", { ref: ref, id: id, className: `govuk-input govuk-password-input__input govuk-js-password-input-input${className ? ` ${className}` : ""}${errorMessage ? " govuk-input--error" : ""}`, name: name || id, type: "password", spellCheck: false, autoComplete: autoComplete, autoCapitalize: "none", "aria-describedby": describedByValue.trim() || undefined, ...attributes }), jsxRuntime.jsx("button", { type: "button", className: "govuk-button govuk-button--secondary govuk-password-input__toggle govuk-js-password-input-toggle", "data-module": "govuk-button", "aria-controls": id, "aria-label": showPasswordAriaLabelText, hidden: true, children: showPasswordText })] })] }));
+    const labelEl = jsxRuntime.jsx(Label, { ...label, htmlFor: resolvedId });
+    return (jsxRuntime.jsxs("div", { className: `govuk-form-group${formGroup?.className ? ` ${formGroup.className}` : ""}${errorMessage ? " govuk-form-group--error" : ""} govuk-password-input`, "data-module": "govuk-password-input", ...i18nProps, children: [labelEl, hintComponent, errorMessageComponent, jsxRuntime.jsxs("div", { className: "govuk-input__wrapper govuk-password-input__wrapper", children: [jsxRuntime.jsx("input", { ref: ref, id: resolvedId, className: `govuk-input govuk-password-input__input govuk-js-password-input-input${className ? ` ${className}` : ""}${errorMessage ? " govuk-input--error" : ""}`, name: name || resolvedId, type: "password", spellCheck: false, autoComplete: autoComplete, autoCapitalize: "none", "aria-describedby": describedByValue.trim() || undefined, ...attributes }), jsxRuntime.jsx("button", { type: "button", className: "govuk-button govuk-button--secondary govuk-password-input__toggle govuk-js-password-input-toggle", "data-module": "govuk-button", "aria-controls": resolvedId, "aria-label": showPasswordAriaLabelText, hidden: true, children: showPasswordText })] })] }));
 });
 PasswordInput.displayName = "PasswordInput";
 
@@ -1492,17 +1513,21 @@ function ConfigureOverallRadios($scope) {
 }
 
 const Select = (props) => {
-    const { className, "aria-describedby": describedBy, errorMessage, formGroup, hint, id, items, label, ...attributes } = props;
+    const { className, "aria-describedby": describedBy, errorMessage, formGroup, hint, id, name, items, label, ...attributes } = props;
+    // Mirrors govuk-frontend's Nunjucks macro, which defaults id to name when
+    // id isn't given - without this the select has no id, so its <label for>
+    // (and hint/error aria-describedby) can never associate with it.
+    const resolvedId = id || name;
     let describedByValue = describedBy || "";
     let hintComponent;
     let errorMessageComponent;
     if (hint) {
-        const hintId = `${id}-hint`;
+        const hintId = `${resolvedId}-hint`;
         describedByValue += ` ${hintId}`;
         hintComponent = jsxRuntime.jsx(Hint, { ...hint, id: hintId });
     }
     if (errorMessage) {
-        const errorId = id ? `${id}-error` : "";
+        const errorId = resolvedId ? `${resolvedId}-error` : "";
         describedByValue += ` ${errorId}`;
         errorMessageComponent = jsxRuntime.jsx(ErrorMessage, { ...errorMessage, id: errorId });
     }
@@ -1514,12 +1539,12 @@ const Select = (props) => {
             return (React.createElement("option", { ...optionAttributes, key: reactListKey || index }, children));
         })
         : null;
-    return (jsxRuntime.jsxs("div", { className: `govuk-form-group${errorMessage ? " govuk-form-group--error" : ""} ${formGroup?.className || ""}`, children: [jsxRuntime.jsx(Label, { ...label, htmlFor: id }), hintComponent, errorMessageComponent, jsxRuntime.jsx("select", { className: `govuk-select ${className || ""}${errorMessage ? " govuk-select--error" : ""}`, id: id, "aria-describedby": describedByValue || undefined, ...attributes, children: options })] }));
+    return (jsxRuntime.jsxs("div", { className: `govuk-form-group${errorMessage ? " govuk-form-group--error" : ""} ${formGroup?.className || ""}`, children: [jsxRuntime.jsx(Label, { ...label, htmlFor: resolvedId }), hintComponent, errorMessageComponent, jsxRuntime.jsx("select", { className: `govuk-select ${className || ""}${errorMessage ? " govuk-select--error" : ""}`, id: resolvedId, name: name, "aria-describedby": describedByValue || undefined, ...attributes, children: options })] }));
 };
 
 const ServiceNavigation = (props) => {
     const { className, containerClassName = "govuk-width-container", menuButtonLabel = "Show or hide menu", navigation, navigationClassName, navigationLabel = "Menu", serviceName, serviceUrlHref, serviceUrlTo, ...attributes } = props;
-    return (jsxRuntime.jsx("section", { "aria-label": "Service information", className: `govuk-service-navigation ${className || ""}`, "data-module": "govuk-service-navigation", ...attributes, children: jsxRuntime.jsx("div", { className: `govuk-width-container ${containerClassName}`, children: jsxRuntime.jsxs("div", { className: "govuk-service-navigation__container", children: [serviceName ? (jsxRuntime.jsx("span", { className: "govuk-service-navigation__service-name", children: jsxRuntime.jsx(LinkWithRef, { href: serviceUrlHref, to: serviceUrlTo, className: "govuk-header__link govuk-header__link--service-name", children: serviceName }) })) : null, navigation ? (jsxRuntime.jsxs("nav", { "aria-label": navigationLabel, className: `govuk-service-navigation__wrapper ${navigationClassName || ""}`, children: [jsxRuntime.jsx("button", { type: "button", className: "govuk-service-navigation__toggle govuk-js-service-navigation-toggle", "aria-controls": "navigation", "aria-label": menuButtonLabel, hidden: true, children: "Menu" }), jsxRuntime.jsx("ul", { className: "govuk-service-navigation__list", id: "navigation", children: navigation.map((item, index) => {
+    return (jsxRuntime.jsx("section", { "aria-label": "Service information", className: `govuk-service-navigation ${className || ""}`, "data-module": "govuk-service-navigation", ...attributes, children: jsxRuntime.jsx("div", { className: `govuk-width-container ${containerClassName}`, children: jsxRuntime.jsxs("div", { className: "govuk-service-navigation__container", children: [serviceName ? (jsxRuntime.jsx("span", { className: "govuk-service-navigation__service-name", children: jsxRuntime.jsx(LinkWithRef, { href: serviceUrlHref, to: serviceUrlTo, className: "govuk-service-navigation__link", children: serviceName }) })) : null, navigation ? (jsxRuntime.jsxs("nav", { "aria-label": navigationLabel, className: `govuk-service-navigation__wrapper ${navigationClassName || ""}`, children: [jsxRuntime.jsx("button", { type: "button", className: "govuk-service-navigation__toggle govuk-js-service-navigation-toggle", "aria-controls": "navigation", "aria-label": menuButtonLabel, hidden: true, children: "Menu" }), jsxRuntime.jsx("ul", { className: "govuk-service-navigation__list", id: "navigation", children: navigation.map((item, index) => {
                                     const { active: itemActive, className: itemClassName, children: itemChildren, reactListKey, ...itemAttributes } = item;
                                     return itemChildren ? (jsxRuntime.jsx("li", { className: `govuk-service-navigation__item${itemActive
                                             ? " govuk-service-navigation__item--active"