@uktrade/react-component-library 0.22.11 → 0.22.13

package/dist/components/ApiQuery/ApiCreateHooks.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ApiCreateHooks.d.ts","sourceRoot":"","sources":["../../../src/components/ApiQuery/ApiCreateHooks.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,4BAA4B,CAAC;AAElE,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AAKpD,wBAAgB,cAAc,CAAC,KAAK,SAAS,EAAE,EAC7C,MAAM,EAAE,UAAU,CAAC,OAAO,eAAe,CAAC,KAAK,CAAC,CAAC;UAQzC,CAAC,SAAS,eAAe,CAAC,KAAK,EAAE,KAAK,CAAC,QACrC,CAAC,UACC,GAAG;;;;;;;;;;WAYN,CAAC,SAAS,eAAe,CAAC,KAAK,EAAE,MAAM,CAAC,QACvC,CAAC,UACC,GAAG;;;;;;;;;;mBAaE,CAAC,SAAS,eAAe,CAAC,KAAK,EAAE,MAAM,CAAC,QAAQ,CAAC;;;;;;;;;;kBAQlD,CAAC,SAAS,eAAe,CAAC,KAAK,EAAE,KAAK,CAAC,QAAQ,CAAC;;;;;;;;;;oBAQ9C,CAAC,SAAS,eAAe,CAAC,KAAK,EAAE,OAAO,CAAC,QAAQ,CAAC;;;;;;;;;;qBAQjD,CAAC,SAAS,eAAe,CAAC,KAAK,EAAE,QAAQ,CAAC,QAAQ,CAAC;;;;;;;;;;EAQvE"}
+{"version":3,"file":"ApiCreateHooks.d.ts","sourceRoot":"","sources":["../../../src/components/ApiQuery/ApiCreateHooks.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,4BAA4B,CAAC;AAElE,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AAqBpD,wBAAgB,cAAc,CAAC,KAAK,SAAS,EAAE,EAC7C,MAAM,EAAE,UAAU,CAAC,OAAO,eAAe,CAAC,KAAK,CAAC,CAAC;UAQzC,CAAC,SAAS,eAAe,CAAC,KAAK,EAAE,KAAK,CAAC,QACrC,CAAC,UACC,GAAG;;;;;;;;;;WAQN,CAAC,SAAS,eAAe,CAAC,KAAK,EAAE,MAAM,CAAC,QACvC,CAAC,UACC,GAAG;;;;;;;;;;mBAUE,CAAC,SAAS,eAAe,CAAC,KAAK,EAAE,MAAM,CAAC,QAAQ,CAAC;;;;;;;;;;kBAKlD,CAAC,SAAS,eAAe,CAAC,KAAK,EAAE,KAAK,CAAC,QAAQ,CAAC;;;;;;;;;;oBAK9C,CAAC,SAAS,eAAe,CAAC,KAAK,EAAE,OAAO,CAAC,QAAQ,CAAC;;;;;;;;;;qBAKjD,CAAC,SAAS,eAAe,CAAC,KAAK,EAAE,QAAQ,CAAC,QAAQ,CAAC;;;;;;;;;;EAKvE"}

package/dist/components/ApiQuery/ApiCreateHooks.js

@@ -1,6 +1,15 @@
 "use client";
 import { createApiClient } from "./ApiCreateClient";
 import { useApi, useApiMutation } from "./ApiProvider";
+function unwrap(res) {
+    if (res.error) {
+        throw Object.assign(res.error, {
+            status: res.response.status,
+            response: res.response,
+        });
+    }
+    return res.data;
+}
 // API hook factory that converts a typed OpenAPI client into React hooks (`useApi` and `useApiMutation`) that the UI can use.
 // Provides a simple interface for making API calls and handling loading and error states in your React components.
 export function createApiHooks(client) {
@@ -10,53 +19,23 @@ export function createApiHooks(client) {
     // Using useQuery
     return {
         get: (path, input) => {
-            return useApi(["get", path, JSON.stringify(input ?? {})], async () => {
-                const res = await client.GET(path, input);
-                if (res.error)
-                    throw res.error;
-                return res.data;
-            });
+            return useApi(["get", path, JSON.stringify(input ?? {})], async () => unwrap(await client.GET(path, input)));
         },
         post: (path, input) => {
-            return useApi(["post", path, JSON.stringify(input ?? {})], async () => {
-                const res = await client.POST(path, input);
-                if (res.error)
-                    throw res.error;
-                return res.data;
-            });
+            return useApi(["post", path, JSON.stringify(input ?? {})], async () => unwrap(await client.POST(path, input)));
         },
         // Using useMutation
         postMutation: (path) => {
-            return useApiMutation(async (input) => {
-                const res = await client.POST(path, input);
-                if (res.error)
-                    throw res.error;
-                return res.data;
-            });
+            return useApiMutation(async (input) => unwrap(await client.POST(path, input)));
         },
         putMutation: (path) => {
-            return useApiMutation(async (input) => {
-                const res = await client.PUT(path, input);
-                if (res.error)
-                    throw res.error;
-                return res.data;
-            });
+            return useApiMutation(async (input) => unwrap(await client.PUT(path, input)));
         },
         patchMutation: (path) => {
-            return useApiMutation(async (input) => {
-                const res = await client.PATCH(path, input);
-                if (res.error)
-                    throw res.error;
-                return res.data;
-            });
+            return useApiMutation(async (input) => unwrap(await client.PATCH(path, input)));
         },
         deleteMutation: (path) => {
-            return useApiMutation(async (input) => {
-                const res = await client.DELETE(path, input);
-                if (res.error)
-                    throw res.error;
-                return res.data;
-            });
+            return useApiMutation(async (input) => unwrap(await client.DELETE(path, input)));
         },
     };
 }

package/dist/components/Inputs/TextAreaInput/TextAreaInput.d.ts

@@ -10,7 +10,8 @@ interface TextareaInputProps extends Omit<JSX.IntrinsicElements["textarea"], "id
     labelSize?: LabelSize;
     rows?: number;
     className?: string;
+    characterLimit?: number;
 }
-export declare const TextAreaInput: ({ id, label, hint, error, labelAs, labelSize, rows, className, ...props }: TextareaInputProps) => JSX.Element;
+export declare const TextAreaInput: ({ id, label, hint, error, labelAs, labelSize, rows, className, characterLimit, ...props }: TextareaInputProps) => JSX.Element;
 export {};
 //# sourceMappingURL=TextAreaInput.d.ts.map

package/dist/components/Inputs/TextAreaInput/TextAreaInput.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TextAreaInput.d.ts","sourceRoot":"","sources":["../../../../src/components/Inputs/TextAreaInput/TextAreaInput.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,SAAS,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAG5C,KAAK,OAAO,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AACzC,KAAK,SAAS,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,IAAI,CAAC;AAExC,UAAU,kBACN,SAAQ,IAAI,CAAC,GAAG,CAAC,iBAAiB,CAAC,UAAU,CAAC,EAAE,IAAI,CAAC;IACrD,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,SAAS,CAAC;IACjB,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,eAAO,MAAM,aAAa,GAAI,2EAU3B,kBAAkB,gBA6DpB,CAAC"}
+{"version":3,"file":"TextAreaInput.d.ts","sourceRoot":"","sources":["../../../../src/components/Inputs/TextAreaInput/TextAreaInput.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,SAAS,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAG5C,KAAK,OAAO,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AACzC,KAAK,SAAS,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,IAAI,CAAC;AAExC,UAAU,kBACN,SAAQ,IAAI,CAAC,GAAG,CAAC,iBAAiB,CAAC,UAAU,CAAC,EAAE,IAAI,CAAC;IACrD,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,SAAS,CAAC;IACjB,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,cAAc,CAAC,EAAE,MAAM,CAAC;CAC3B;AAED,eAAO,MAAM,aAAa,GAAI,2FAW3B,kBAAkB,gBA+FpB,CAAC"}

package/dist/components/Inputs/TextAreaInput/TextAreaInput.js

@@ -1,8 +1,8 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import clsx from "clsx";
-import { createElement } from "react";
-export const TextAreaInput = ({ id, label, hint, error, labelAs, labelSize = "l", rows = 5, className, ...props }) => {
+import { createElement, useState } from "react";
+export const TextAreaInput = ({ id, label, hint, error, labelAs, labelSize = "l", rows = 5, className, characterLimit, ...props }) => {
     const hasError = Boolean(error);
     const hintId = hint ? `${id}-hint` : undefined;
     const errorId = hasError ? `${id}-error` : undefined;
@@ -10,12 +10,25 @@ export const TextAreaInput = ({ id, label, hint, error, labelAs, labelSize = "l"
         hintId,
         errorId
     ].filter(Boolean).join(" ") || undefined;
+    const hasLimit = characterLimit !== undefined;
+    const [count, setCount] = useState(0);
     const labelElement = (_jsx("label", { htmlFor: id, className: clsx("govuk-label", {
             [`govuk-label--${labelSize}`]: true,
         }), children: label }));
+    const remaining = hasLimit ? characterLimit - count : undefined;
+    const isOverLimit = remaining !== undefined && remaining < 0;
+    const characterMessage = remaining !== undefined
+        ? (remaining < 0
+            ? `You have ${Math.abs(remaining)} character${Math.abs(remaining) === 1 ? "" : "s"} too many`
+            : `You have ${remaining} character${remaining === 1 ? "" : "s"} remaining`)
+        : undefined;
     return (_jsxs("div", { className: clsx("govuk-form-group", {
             "govuk-form-group--error": hasError,
-        }), children: [labelAs
+            "govuk-character-count": hasLimit
+        }), ...(hasLimit ? { "data-module": "govuk-character-count", "data-maxlength": characterLimit } : {}), children: [labelAs
                 ? createElement(labelAs, { className: "govuk-label-wrapper" }, labelElement)
-                : labelElement, hint && (_jsx("div", { id: hintId, className: "govuk-hint", children: hint })), hasError && (_jsxs("p", { id: errorId, className: "govuk-error-message", children: [_jsx("span", { className: "govuk-visually-hidden", children: "Error:" }), " ", error] })), _jsx("textarea", { id: id, rows: rows, className: clsx("govuk-textarea", { "govuk-textarea--error": hasError }, className), "aria-describedby": ariaDescribedBy, ...props })] }));
+                : labelElement, hint && (_jsx("div", { id: hintId, className: "govuk-hint", children: hint })), hasError && (_jsxs("p", { id: errorId, className: "govuk-error-message", children: [_jsx("span", { className: "govuk-visually-hidden", children: "Error:" }), " ", error] })), _jsx("textarea", { id: id, rows: rows, className: clsx("govuk-textarea", { "govuk-textarea--error": hasError,
+                    "govuk-js-character-count": hasLimit }, className), style: isOverLimit ? { borderColor: "#d4351c" } : {}, "aria-describedby": ariaDescribedBy, ...props, onChange: e => {
+                    setCount(e.target.value.length);
+                } }), hasLimit && (_jsx("div", { id: "with-hint-info", className: clsx("govuk-hint govuk-character-count__message", { "govuk-error-message": isOverLimit }), style: isOverLimit ? { color: "#d4351c", fontWeight: "bold" } : {}, children: characterMessage }))] }));
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uktrade/react-component-library",
-  "version": "0.22.11",
+  "version": "0.22.13",
   "description": "A collection of reusable React components following GOV.UK design patterns.",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
@@ -55,13 +55,13 @@
     "@types/react": "^19.2.9",
     "@types/react-dom": "^19.2.3",
     "@typescript-eslint/eslint-plugin": "^8.59.0",
-    "@typescript-eslint/parser": "^8.59.0",
+    "@typescript-eslint/parser": "^8.62.0",
     "@vitest/coverage-v8": "^4.0.18",
     "@vitest/ui": "^4.0.18",
     "eslint": "^9.39.2",
     "eslint-plugin-react": "^7.37.5",
     "globals": "^17.5.0",
-    "jsdom": "^27.4.0",
+    "jsdom": "^29.1.1",
     "openapi-typescript": "^7.13.0",
     "typescript": "^5.9.3",
     "typescript-eslint": "^8.59.0",

package/src/components/ApiQuery/ApiCreateHooks.tsx

@@ -5,6 +5,22 @@ import type { PathsWithMethod } from "openapi-typescript-helpers";
 import { createApiClient } from "./ApiCreateClient";
 import { useApi, useApiMutation } from "./ApiProvider";
 
+
+function unwrap<T>(res: {
+  data?: T;
+  error?: any;
+  response: Response;
+}): T {
+  if (res.error) {
+    throw Object.assign(res.error, {
+      status: res.response.status,
+      response: res.response,
+    });
+  }
+
+  return res.data as T;
+}
+
 // API hook factory that converts a typed OpenAPI client into React hooks (`useApi` and `useApiMutation`) that the UI can use.
 // Provides a simple interface for making API calls and handling loading and error states in your React components.
 export function createApiHooks<Paths extends {}>(
@@ -22,11 +38,7 @@ export function createApiHooks<Paths extends {}>(
     ) => {
       return useApi(
         ["get", path, JSON.stringify(input ?? {})],
-        async () => {
-          const res = await client.GET(path, input);
-          if (res.error) throw res.error;
-          return res.data;
-        }
+        async () => unwrap(await client.GET(path, input))
       );
     },
 
@@ -36,45 +48,30 @@ export function createApiHooks<Paths extends {}>(
     ) => {
       return useApi(
         ["post", path, JSON.stringify(input ?? {})],
-        async () => {
-          const res = await client.POST(path, input);
-          if (res.error) throw res.error;
-          return res.data;
-        }
+        async () => 
+          unwrap(await client.POST(path, input))
       );
     },
 
     // Using useMutation
     postMutation: <P extends PathsWithMethod<Paths, "post">>(path: P) => {
-      return useApiMutation(async (input: any) => {
-        const res = await client.POST(path, input);
-        if (res.error) throw res.error;
-        return res.data;
-      });
+      return useApiMutation(async (input: any) =>
+          unwrap(await client.POST(path, input)));
     },
 
     putMutation: <P extends PathsWithMethod<Paths, "put">>(path: P) => {
-      return useApiMutation(async (input: any) => {
-        const res = await client.PUT(path, input);
-        if (res.error) throw res.error;
-        return res.data;
-      });
+      return useApiMutation(async (input: any) => 
+          unwrap(await client.PUT(path, input)));
     },
 
     patchMutation: <P extends PathsWithMethod<Paths, "patch">>(path: P) => {
-      return useApiMutation(async (input: any) => {
-        const res = await client.PATCH(path, input);
-        if (res.error) throw res.error;
-        return res.data;
-      });
+      return useApiMutation(async (input: any)=> 
+          unwrap(await client.PATCH(path, input)));
     },
 
     deleteMutation: <P extends PathsWithMethod<Paths, "delete">>(path: P) => {
-      return useApiMutation(async (input: any) => {
-        const res = await client.DELETE(path, input);
-        if (res.error) throw res.error;
-        return res.data;
-      });
+      return useApiMutation(async (input: any) => 
+          unwrap(await client.DELETE(path, input)));
     },
   };
 }

package/src/components/Inputs/TextAreaInput/TextAreaInput.tsx

@@ -2,7 +2,7 @@
 
 import clsx from "clsx";
 import type { ReactNode, JSX } from "react";
-import { createElement } from "react";
+import { createElement, useState } from "react";
 
 type LabelAs = "h1" | "h2" | "h3" | "h4";
 type LabelSize = "s" | "m" | "l" | "xl";
@@ -17,6 +17,7 @@ interface TextareaInputProps
     labelSize?: LabelSize;
     rows?: number;
     className?: string;
+    characterLimit?: number; 
 }
 
 export const TextAreaInput = ({
@@ -28,9 +29,11 @@ export const TextAreaInput = ({
     labelSize = "l",
     rows = 5,
     className,
+    characterLimit,
     ...props
 }: TextareaInputProps) => {
     const hasError = Boolean(error);
+    
 
     const hintId = hint ? `${id}-hint` : undefined;
     const errorId = hasError ? `${id}-error` : undefined;
@@ -40,6 +43,11 @@ export const TextAreaInput = ({
         errorId
     ].filter(Boolean).join(" ") || undefined;
 
+    const hasLimit = characterLimit !== undefined;
+
+
+    const [count, setCount] = useState(0);
+
     const labelElement = (
         <label
             htmlFor={id}
@@ -51,11 +59,21 @@ export const TextAreaInput = ({
         </label>
     );
 
+    const remaining = hasLimit ? characterLimit - count : undefined;
+    const isOverLimit = remaining !== undefined && remaining < 0;
+    const characterMessage = remaining !== undefined
+        ? (remaining < 0
+            ? `You have ${Math.abs(remaining)} character${Math.abs(remaining) === 1 ? "" : "s"} too many`
+            : `You have ${remaining} character${remaining === 1 ? "" : "s"} remaining`)
+        : undefined;
+
     return (
         <div
             className={clsx("govuk-form-group", {
                 "govuk-form-group--error": hasError,
+                "govuk-character-count": hasLimit
             })}
+            {...(hasLimit ? { "data-module": "govuk-character-count", "data-maxlength": characterLimit } : {})}
         >
             {labelAs
                 ? createElement(
@@ -82,12 +100,30 @@ export const TextAreaInput = ({
                 rows={rows}
                 className={clsx(
                     "govuk-textarea",
-                    { "govuk-textarea--error": hasError },
+                    { "govuk-textarea--error": hasError ,
+                    "govuk-js-character-count": hasLimit},
                     className
                 )}
+                style={isOverLimit ? { borderColor: "#d4351c" }: {}}
                 aria-describedby={ariaDescribedBy}
                 {...props}
+                onChange={e => {
+                    setCount(e.target.value.length);
+                }}
             />
+            {hasLimit && (
+                <div 
+                id="with-hint-info" 
+                className={clsx(
+                    "govuk-hint govuk-character-count__message", 
+                    { "govuk-error-message": isOverLimit}
+                )}
+                style={isOverLimit ? { color: "#d4351c", fontWeight: "bold" }: {}}>
+                    {characterMessage}
+                </div>
+            )}
+
+
         </div>
     );
 };