@x15ventures/x15-ui-library 3.13.5 → 3.14.0

package/dist/esm/components/form/formFields/subComponents/textarea/Textarea.js

@@ -1,19 +1,49 @@
 'use client';
 
-import React from 'react';
+import React, { useMemo, useState } from 'react';
 import { useFormContext } from 'react-hook-form';
 import { HookFormWrapper } from '../../../hookFormWrapper/HookFormWrapper';
 import { NoHookFormContext } from '../../utilities/formUtilities';
+import { extractError, ValidationMessages } from '../../../validation/ValidationMessages';
+/**
+* Counts user-perceived characters (grapheme clusters).
+* Treats emojis and composed characters (e.g. accented letters) as a single character.
+* Falls back to basic code-point counting if Intl.Segmenter is not available.
+*/
+function getCharacterCount(value) {
+  if (typeof Intl !== 'undefined' && 'Segmenter' in Intl) {
+    const segmenter = new Intl.Segmenter(undefined, {
+      granularity: 'grapheme'
+    });
+    return Array.from(segmenter.segment(value)).length;
+  }
+  return Array.from(value).length;
+}
+function clampToGraphemeMax(value, maxAllowed) {
+  if (getCharacterCount(value) <= maxAllowed) {
+    return value;
+  }
+  if (typeof Intl !== 'undefined' && 'Segmenter' in Intl) {
+    const segmenter = new Intl.Segmenter(undefined, {
+      granularity: 'grapheme'
+    });
+    return Array.from(segmenter.segment(value)).slice(0, maxAllowed).map(segment => segment.segment).join('');
+  }
+  return Array.from(value).slice(0, maxAllowed).join('');
+}
 export const Textarea = ({
   field: {
     id,
     name,
     placeholder,
     defaultValue,
+    maxLength,
+    enforceMaxLength,
     onBlur = () => {},
     onChange = () => {},
     onKeyDown = () => {},
-    onTouched = () => {}
+    onTouched = () => {},
+    ...htmlNativeDomProps
   },
   validation,
   showSpinner,
@@ -22,17 +52,101 @@ export const Textarea = ({
 }) => {
   const {
     register,
-    getFieldState
+    getFieldState,
+    formState: {
+      errors
+    }
   } = useFormContext() || NoHookFormContext;
   const fieldState = getFieldState(name);
-  const HandleAutoFill = event => {
+  const hasFieldError = Boolean(extractError(errors, name));
+  // Combine fieldState.invalid with a direct errors lookup so this component re-renders
+  // whenever formState.errors changes (getFieldState alone does not subscribe to errors).
+  const isInvalid = Boolean(fieldState?.invalid ?? hasFieldError);
+  const [count, setCount] = useState(() => getCharacterCount(defaultValue?.toString() || ''));
+  const [hasStartedTyping, setHasStartedTyping] = useState(false);
+  const hasMaxLength = typeof maxLength === 'number';
+  const isAtLimit = hasMaxLength ? count >= maxLength : false;
+  // Only hide counter for 'required' error. All other errors (maxLength, pattern, etc)
+  // should show counter instead of error message.
+  const isRequiredError = fieldState?.error?.type === 'required';
+  const characterCounter = !hasStartedTyping || !hasMaxLength || isRequiredError ? undefined : `${count}/${maxLength}`;
+  const cssClass = `${customCssClasses?.input || ''}${isInvalid ? ' invalidField' : ''}`;
+  const normalizedValidation = useMemo(() => {
+    if (!validation || typeof validation.maxLength === 'undefined') {
+      return validation;
+    }
+    const maxLengthRule = validation.maxLength;
+    const maxLengthValue = typeof maxLengthRule === 'number' ? maxLengthRule : typeof maxLengthRule === 'object' && maxLengthRule && 'value' in maxLengthRule ? Number(maxLengthRule.value) : undefined;
+    if (typeof maxLengthValue !== 'number' || Number.isNaN(maxLengthValue)) {
+      return validation;
+    }
+    const maxLengthMessage = `Maximum length is ${maxLengthValue}`;
+    const graphemeMaxLengthValidator = value => getCharacterCount(value || '') <= maxLengthValue || maxLengthMessage;
+
+    // eslint-disable-next-line no-unused-vars
     const {
-      target
-    } = event;
-    if (target) {
-      onChange(event);
+      maxLength: _maxLength,
+      validate,
+      ...restValidation
+    } = validation;
+    if (typeof validate === 'function') {
+      return {
+        ...restValidation,
+        validate: async (value, formValues) => {
+          const validationResult = await validate(value, formValues);
+          if (validationResult !== true) {
+            return validationResult;
+          }
+          return graphemeMaxLengthValidator(value);
+        }
+      };
+    }
+    if (validate && typeof validate === 'object') {
+      return {
+        ...restValidation,
+        validate: {
+          ...validate,
+          graphemeMaxLength: graphemeMaxLengthValidator
+        }
+      };
+    }
+    return {
+      ...restValidation,
+      validate: graphemeMaxLengthValidator
+    };
+  }, [validation]);
+  const registered = register(name, normalizedValidation);
+
+  /**
+   * Prevents input that would exceed the maxLength when counting grapheme clusters.
+   * Native <textarea maxLength> counts UTF-16 units, so emojis and composed characters
+   * can be treated as multiple characters. We avoid using native maxLength and enforce
+   * the limit here instead.
+   */
+  const HandleBeforeInput = event => {
+    if (enforceMaxLength !== true || !hasMaxLength) return;
+    const nativeEvent = event.nativeEvent;
+    const inserted = nativeEvent.data ?? '';
+    if (!inserted) return;
+    const target = event.currentTarget;
+    const start = target.selectionStart ?? target.value.length;
+    const end = target.selectionEnd ?? target.value.length;
+    const nextValue = target.value.slice(0, start) + inserted + target.value.slice(end);
+    if (getCharacterCount(nextValue) > maxLength) {
+      event.preventDefault();
     }
   };
+  const HandleChange = event => {
+    const rawValue = event.target.value || '';
+    const newValue = enforceMaxLength === true && hasMaxLength ? clampToGraphemeMax(rawValue, maxLength) : rawValue;
+    if (newValue !== rawValue) {
+      event.target.value = newValue;
+    }
+    setHasStartedTyping(true);
+    setCount(getCharacterCount(newValue));
+    const onTextareaChange = onChange;
+    onTextareaChange?.(event);
+  };
   const HandleOnBlur = event => {
     const {
       target
@@ -44,9 +158,14 @@ export const Textarea = ({
   };
   const HandleKeyEvent = event => {
     onTouched();
-    onKeyDown(event);
+    const onTextareaKeyDown = onKeyDown;
+    onTextareaKeyDown?.(event);
   };
-  const cssClass = `${customCssClasses?.input || ''}${fieldState && fieldState?.invalid ? ' invalidField' : ''}`;
+  const characterCounterId = `${id}_characterCount`;
+  const errorsId = `${name}_errors`;
+  const existingDescribedBy = typeof htmlNativeDomProps['aria-describedby'] === 'string' ? htmlNativeDomProps['aria-describedby'] : undefined;
+  const showsRequiredError = isInvalid && isRequiredError;
+  const mergedDescribedBy = showsRequiredError ? [existingDescribedBy, errorsId].filter(Boolean).join(' ') : characterCounter !== undefined ? [existingDescribedBy, characterCounterId].filter(Boolean).join(' ') : existingDescribedBy;
   const textareaProps = {
     id,
     className: cssClass,
@@ -58,16 +177,38 @@ export const Textarea = ({
     ...(validation && typeof validation.required !== 'undefined' ? {
       required: true
     } : {}),
-    ...register(name, {
-      onChange: HandleAutoFill,
-      onBlur: HandleOnBlur,
-      ...validation
-    }),
-    onKeyDown: HandleKeyEvent
+    ...registered,
+    onBeforeInput: HandleBeforeInput,
+    onChange: event => {
+      HandleChange(event);
+      registered?.onChange?.(event);
+    },
+    onBlur: event => {
+      HandleOnBlur(event);
+      registered?.onBlur?.(event);
+    },
+    onKeyDown: HandleKeyEvent,
+    ...htmlNativeDomProps,
+    'aria-describedby': mergedDescribedBy
   };
   return /*#__PURE__*/React.createElement(HookFormWrapper, null, customContent?.preField && /*#__PURE__*/React.createElement("span", {
     className: "preField"
-  }, customContent?.preField), /*#__PURE__*/React.createElement("textarea", textareaProps), customContent?.postField && /*#__PURE__*/React.createElement("span", {
+  }, customContent?.preField), /*#__PURE__*/React.createElement("div", {
+    className: "textareaFieldContainer"
+  }, /*#__PURE__*/React.createElement("textarea", textareaProps), /*#__PURE__*/React.createElement("div", {
+    className: "textareaFooter"
+  }, isInvalid && isRequiredError ? /*#__PURE__*/React.createElement(ValidationMessages, {
+    name: name,
+    validation: {
+      required: validation?.required
+    }
+  }) : /*#__PURE__*/React.createElement("div", {
+    id: characterCounterId,
+    className: `textareaCharacterCount ${isAtLimit ? 'textareaCharacterCountExceeded' : ''}`,
+    role: isAtLimit ? 'status' : undefined,
+    "aria-live": isAtLimit ? 'polite' : undefined,
+    "aria-atomic": isAtLimit ? 'true' : undefined
+  }, characterCounter))), customContent?.postField && /*#__PURE__*/React.createElement("span", {
     className: "postField"
   }, customContent?.postField));
 };

package/dist/esm/components/form/formFields/subComponents/textarea/Textarea.js.map

@@ -1 +1 @@
-{"version":3,"file":"Textarea.js","names":["React","useFormContext","HookFormWrapper","NoHookFormContext","Textarea","field","id","name","placeholder","defaultValue","onBlur","onChange","onKeyDown","onTouched","validation","showSpinner","customCssClasses","customContent","register","getFieldState","fieldState","HandleAutoFill","event","target","HandleOnBlur","HandleKeyEvent","cssClass","input","invalid","textareaProps","className","disabled","required","createElement","preField","postField"],"sources":["../../../../../../../src/components/form/formFields/subComponents/textarea/Textarea.tsx"],"sourcesContent":["'use client';\n\nimport React from 'react';\nimport { useFormContext } from 'react-hook-form';\nimport { HookFormWrapper } from '../../../hookFormWrapper/HookFormWrapper';\nimport { FormFieldProps } from '../../formFieldWrapper/formFieldProps';\nimport { NoHookFormContext } from '../../utilities/formUtilities';\n\ninterface TextareaProps extends FormFieldProps, React.TextareaHTMLAttributes<HTMLTextAreaElement> {}\n\nexport const Textarea: React.FC<TextareaProps> = (\n  {\n    field: {\n      id,\n      name,\n      placeholder,\n      defaultValue,\n      onBlur = () => {},\n      onChange = () => {},\n      onKeyDown = () => {},\n      onTouched = () => {}\n    },\n    validation,\n    showSpinner,\n    customCssClasses,\n    customContent\n  }\n) => {\n  const { register, getFieldState } = useFormContext() || NoHookFormContext;\n  const fieldState = getFieldState(name);\n\n  const HandleAutoFill = (event: React.FocusEvent<HTMLInputElement>) => {\n    const { target } = event;\n    if (target) {\n      onChange(event);\n    }\n  };\n\n  const HandleOnBlur = (event: React.FocusEvent<HTMLInputElement>) => {\n    const { target } = event;\n    if (target) {\n      onTouched();\n      onBlur(event);\n    }\n  };\n\n  const HandleKeyEvent = (\n    event: React.KeyboardEvent<HTMLInputElement> &\n      React.KeyboardEvent<HTMLSelectElement> &\n      React.KeyboardEvent<HTMLTextAreaElement>\n  ) => {\n    onTouched();\n    onKeyDown(event);\n  };\n\n  const cssClass = `${ customCssClasses?.input || '' }${ fieldState && fieldState?.invalid ? ' invalidField' : '' }`;\n\n  const textareaProps = {\n    id,\n    className: cssClass,\n    placeholder,\n    defaultValue,\n    ...(showSpinner ? { disabled: true } : {}),\n    ...(validation && typeof validation.required !== 'undefined' ? { required: true } : {}),\n    ...register(\n      name,\n      {\n        onChange: HandleAutoFill,\n        onBlur: HandleOnBlur,\n        ...validation\n      }\n    ),\n    onKeyDown: HandleKeyEvent\n  };\n\n  return (\n    <HookFormWrapper>\n      { customContent?.preField && <span className=\"preField\">{ customContent?.preField }</span> }\n\n      <textarea { ...textareaProps } />\n\n      { customContent?.postField && <span className=\"postField\">{ customContent?.postField }</span> }\n    </HookFormWrapper>\n  );\n};\n"],"mappings":"AAAA,YAAY;;AAEZ,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,cAAc,QAAQ,iBAAiB;AAChD,SAASC,eAAe,QAAQ,0CAA0C;AAE1E,SAASC,iBAAiB,QAAQ,+BAA+B;AAIjE,OAAO,MAAMC,QAAiC,GAAGA,CAC/C;EACEC,KAAK,EAAE;IACLC,EAAE;IACFC,IAAI;IACJC,WAAW;IACXC,YAAY;IACZC,MAAM,GAAGA,CAAA,KAAM,CAAC,CAAC;IACjBC,QAAQ,GAAGA,CAAA,KAAM,CAAC,CAAC;IACnBC,SAAS,GAAGA,CAAA,KAAM,CAAC,CAAC;IACpBC,SAAS,GAAGA,CAAA,KAAM,CAAC;EACrB,CAAC;EACDC,UAAU;EACVC,WAAW;EACXC,gBAAgB;EAChBC;AACF,CAAC,KACE;EACH,MAAM;IAAEC,QAAQ;IAAEC;EAAc,CAAC,GAAGlB,cAAc,CAAC,CAAC,IAAIE,iBAAiB;EACzE,MAAMiB,UAAU,GAAGD,aAAa,CAACZ,IAAI,CAAC;EAEtC,MAAMc,cAAc,GAAIC,KAAyC,IAAK;IACpE,MAAM;MAAEC;IAAO,CAAC,GAAGD,KAAK;IACxB,IAAIC,MAAM,EAAE;MACVZ,QAAQ,CAACW,KAAK,CAAC;IACjB;EACF,CAAC;EAED,MAAME,YAAY,GAAIF,KAAyC,IAAK;IAClE,MAAM;MAAEC;IAAO,CAAC,GAAGD,KAAK;IACxB,IAAIC,MAAM,EAAE;MACVV,SAAS,CAAC,CAAC;MACXH,MAAM,CAACY,KAAK,CAAC;IACf;EACF,CAAC;EAED,MAAMG,cAAc,GAClBH,KAE0C,IACvC;IACHT,SAAS,CAAC,CAAC;IACXD,SAAS,CAACU,KAAK,CAAC;EAClB,CAAC;EAED,MAAMI,QAAQ,GAAG,GAAIV,gBAAgB,EAAEW,KAAK,IAAI,EAAE,GAAKP,UAAU,IAAIA,UAAU,EAAEQ,OAAO,GAAG,eAAe,GAAG,EAAE,EAAG;EAElH,MAAMC,aAAa,GAAG;IACpBvB,EAAE;IACFwB,SAAS,EAAEJ,QAAQ;IACnBlB,WAAW;IACXC,YAAY;IACZ,IAAIM,WAAW,GAAG;MAAEgB,QAAQ,EAAE;IAAK,CAAC,GAAG,CAAC,CAAC,CAAC;IAC1C,IAAIjB,UAAU,IAAI,OAAOA,UAAU,CAACkB,QAAQ,KAAK,WAAW,GAAG;MAAEA,QAAQ,EAAE;IAAK,CAAC,GAAG,CAAC,CAAC,CAAC;IACvF,GAAGd,QAAQ,CACTX,IAAI,EACJ;MACEI,QAAQ,EAAEU,cAAc;MACxBX,MAAM,EAAEc,YAAY;MACpB,GAAGV;IACL,CACF,CAAC;IACDF,SAAS,EAAEa;EACb,CAAC;EAED,oBACEzB,KAAA,CAAAiC,aAAA,CAAC/B,eAAe,QACZe,aAAa,EAAEiB,QAAQ,iBAAIlC,KAAA,CAAAiC,aAAA;IAAMH,SAAS,EAAC;EAAU,GAAGb,aAAa,EAAEiB,QAAgB,CAAC,eAE1FlC,KAAA,CAAAiC,aAAA,aAAeJ,aAAiB,CAAC,EAE/BZ,aAAa,EAAEkB,SAAS,iBAAInC,KAAA,CAAAiC,aAAA;IAAMH,SAAS,EAAC;EAAW,GAAGb,aAAa,EAAEkB,SAAiB,CAC7E,CAAC;AAEtB,CAAC","ignoreList":[]}
+{"version":3,"file":"Textarea.js","names":["React","useMemo","useState","useFormContext","HookFormWrapper","NoHookFormContext","extractError","ValidationMessages","getCharacterCount","value","Intl","segmenter","Segmenter","undefined","granularity","Array","from","segment","length","clampToGraphemeMax","maxAllowed","slice","map","join","Textarea","field","id","name","placeholder","defaultValue","maxLength","enforceMaxLength","onBlur","onChange","onKeyDown","onTouched","htmlNativeDomProps","validation","showSpinner","customCssClasses","customContent","register","getFieldState","formState","errors","fieldState","hasFieldError","Boolean","isInvalid","invalid","count","setCount","toString","hasStartedTyping","setHasStartedTyping","hasMaxLength","isAtLimit","isRequiredError","error","type","characterCounter","cssClass","input","normalizedValidation","maxLengthRule","maxLengthValue","Number","isNaN","maxLengthMessage","graphemeMaxLengthValidator","_maxLength","validate","restValidation","formValues","validationResult","graphemeMaxLength","registered","HandleBeforeInput","event","nativeEvent","inserted","data","target","currentTarget","start","selectionStart","end","selectionEnd","nextValue","preventDefault","HandleChange","rawValue","newValue","onTextareaChange","HandleOnBlur","HandleKeyEvent","onTextareaKeyDown","characterCounterId","errorsId","existingDescribedBy","showsRequiredError","mergedDescribedBy","filter","textareaProps","className","disabled","required","onBeforeInput","createElement","preField","role","postField"],"sources":["../../../../../../../src/components/form/formFields/subComponents/textarea/Textarea.tsx"],"sourcesContent":["'use client';\n\nimport React, { useMemo, useState } from 'react';\nimport { useFormContext } from 'react-hook-form';\nimport { HookFormWrapper } from '../../../hookFormWrapper/HookFormWrapper';\nimport { FormFieldProps } from '../../formFieldWrapper/formFieldProps';\nimport { NoHookFormContext } from '../../utilities/formUtilities';\nimport { extractError, ValidationMessages } from '../../../validation/ValidationMessages';\n\ninterface TextareaProps extends FormFieldProps, React.TextareaHTMLAttributes<HTMLTextAreaElement> {}\n\n/**\n* Counts user-perceived characters (grapheme clusters).\n* Treats emojis and composed characters (e.g. accented letters) as a single character.\n* Falls back to basic code-point counting if Intl.Segmenter is not available.\n*/\nfunction getCharacterCount(value: string): number {\n  if (typeof Intl !== 'undefined' && 'Segmenter' in Intl) {\n    const segmenter = new Intl.Segmenter(undefined, {\n      granularity: 'grapheme',\n    });\n    return Array.from(segmenter.segment(value)).length;\n  }\n  return Array.from(value).length;\n}\n\nfunction clampToGraphemeMax(value: string, maxAllowed: number): string {\n  if (getCharacterCount(value) <= maxAllowed) {\n    return value;\n  }\n\n  if (typeof Intl !== 'undefined' && 'Segmenter' in Intl) {\n    const segmenter = new Intl.Segmenter(undefined, {\n      granularity: 'grapheme',\n    });\n\n    return Array.from(segmenter.segment(value))\n      .slice(0, maxAllowed)\n      .map((segment) => segment.segment)\n      .join('');\n  }\n\n  return Array.from(value).slice(0, maxAllowed).join('');\n}\n\nexport const Textarea: React.FC<TextareaProps> = (\n  {\n    field: {\n      id,\n      name,\n      placeholder,\n      defaultValue,\n      maxLength,\n      enforceMaxLength,\n      onBlur = () => {},\n      onChange = () => {},\n      onKeyDown = () => {},\n      onTouched = () => {},\n      ...htmlNativeDomProps\n    },\n    validation,\n    showSpinner,\n    customCssClasses,\n    customContent\n  }\n) => {\n  const { register, getFieldState, formState: { errors } } = useFormContext() || NoHookFormContext;\n  const fieldState = getFieldState(name);\n  const hasFieldError = Boolean(extractError(errors, name));\n  // Combine fieldState.invalid with a direct errors lookup so this component re-renders\n  // whenever formState.errors changes (getFieldState alone does not subscribe to errors).\n  const isInvalid = Boolean(fieldState?.invalid ?? hasFieldError);\n  const [count, setCount] = useState<number>(() =>\n    getCharacterCount(defaultValue?.toString() || '')\n  );\n  const [hasStartedTyping, setHasStartedTyping] = useState(false);\n  const hasMaxLength = typeof maxLength === 'number';\n  const isAtLimit = hasMaxLength ? count >= maxLength : false;\n  // Only hide counter for 'required' error. All other errors (maxLength, pattern, etc)\n  // should show counter instead of error message.\n  const isRequiredError = fieldState?.error?.type === 'required';\n  const characterCounter =\n    !hasStartedTyping || !hasMaxLength || isRequiredError\n      ? undefined\n      : `${ count }/${ maxLength }`;\n  const cssClass = `${ customCssClasses?.input || '' }${ isInvalid ? ' invalidField' : '' }`;\n\n  const normalizedValidation = useMemo(() => {\n    if (!validation || typeof validation.maxLength === 'undefined') {\n      return validation;\n    }\n\n    const maxLengthRule = validation.maxLength;\n    const maxLengthValue =\n      typeof maxLengthRule === 'number'\n        ? maxLengthRule\n        : typeof maxLengthRule === 'object' && maxLengthRule && 'value' in maxLengthRule\n          ? Number(maxLengthRule.value)\n          : undefined;\n\n    if (typeof maxLengthValue !== 'number' || Number.isNaN(maxLengthValue)) {\n      return validation;\n    }\n\n    const maxLengthMessage = `Maximum length is ${ maxLengthValue }`;\n\n    const graphemeMaxLengthValidator = (value: string) =>\n      getCharacterCount(value || '') <= maxLengthValue || maxLengthMessage;\n\n    // eslint-disable-next-line no-unused-vars\n    const { maxLength: _maxLength, validate, ...restValidation } = validation;\n\n    if (typeof validate === 'function') {\n      return {\n        ...restValidation,\n        validate: async (value: string, formValues?: unknown) => {\n          const validationResult = await validate(value, formValues);\n          if (validationResult !== true) {\n            return validationResult;\n          }\n          return graphemeMaxLengthValidator(value);\n        },\n      };\n    }\n\n    if (validate && typeof validate === 'object') {\n      return {\n        ...restValidation,\n        validate: {\n          ...validate,\n          graphemeMaxLength: graphemeMaxLengthValidator,\n        },\n      };\n    }\n\n    return {\n      ...restValidation,\n      validate: graphemeMaxLengthValidator,\n    };\n  }, [validation]);\n\n  const registered = register(name, normalizedValidation);\n\n  /**\n   * Prevents input that would exceed the maxLength when counting grapheme clusters.\n   * Native <textarea maxLength> counts UTF-16 units, so emojis and composed characters\n   * can be treated as multiple characters. We avoid using native maxLength and enforce\n   * the limit here instead.\n   */\n  const HandleBeforeInput = (event: React.FormEvent<HTMLTextAreaElement>) => {\n    if (enforceMaxLength !== true || !hasMaxLength) return;\n\n    const nativeEvent = event.nativeEvent as InputEvent;\n    const inserted = nativeEvent.data ?? '';\n\n    if (!inserted) return;\n\n    const target = event.currentTarget;\n    const start = target.selectionStart ?? target.value.length;\n    const end = target.selectionEnd ?? target.value.length;\n\n    const nextValue =\n      target.value.slice(0, start) +\n      inserted +\n      target.value.slice(end);\n\n    if (getCharacterCount(nextValue) > maxLength) {\n      event.preventDefault();\n    }\n  };\n\n  const HandleChange = (event: React.ChangeEvent<HTMLTextAreaElement>) => {\n    const rawValue = event.target.value || '';\n    const newValue =\n      enforceMaxLength === true && hasMaxLength\n        ? clampToGraphemeMax(rawValue, maxLength)\n        : rawValue;\n\n    if (newValue !== rawValue) {\n      event.target.value = newValue;\n    }\n\n    setHasStartedTyping(true);\n    setCount(getCharacterCount(newValue));\n    const onTextareaChange = onChange as\n      | React.ChangeEventHandler<HTMLTextAreaElement>\n      | undefined;\n    onTextareaChange?.(event);\n  };\n\n  const HandleOnBlur = (event: React.FocusEvent<HTMLTextAreaElement>) => {\n    const { target } = event;\n    if (target) {\n      onTouched();\n      onBlur(event);\n    }\n  };\n\n  const HandleKeyEvent = (event: React.KeyboardEvent<HTMLTextAreaElement>) => {\n    onTouched();\n    const onTextareaKeyDown = onKeyDown as\n      | React.KeyboardEventHandler<HTMLTextAreaElement>\n      | undefined;\n    onTextareaKeyDown?.(event);\n  };\n\n  const characterCounterId = `${ id }_characterCount`;\n  const errorsId = `${ name }_errors`;\n  const existingDescribedBy =\n    typeof htmlNativeDomProps['aria-describedby'] === 'string'\n      ? htmlNativeDomProps['aria-describedby']\n      : undefined;\n  const showsRequiredError = isInvalid && isRequiredError;\n  const mergedDescribedBy = showsRequiredError\n    ? [existingDescribedBy, errorsId].filter(Boolean).join(' ')\n    : characterCounter !== undefined\n      ? [existingDescribedBy, characterCounterId].filter(Boolean).join(' ')\n      : existingDescribedBy;\n  \n  const textareaProps = {\n    id,\n    className: cssClass,\n    placeholder,\n    defaultValue,\n    ...(showSpinner ? { disabled: true } : {}),\n    ...(validation && typeof validation.required !== 'undefined' ? { required: true } : {}),\n    ...registered,\n    onBeforeInput: HandleBeforeInput,\n    onChange: (event: React.ChangeEvent<HTMLTextAreaElement>) => {\n      HandleChange(event);\n      registered?.onChange?.(event);\n    },\n    onBlur: (event: React.FocusEvent<HTMLTextAreaElement>) => {\n      HandleOnBlur(event);\n      registered?.onBlur?.(event);\n    },\n    onKeyDown: HandleKeyEvent,\n    ...htmlNativeDomProps,\n    'aria-describedby': mergedDescribedBy,\n  };\n\n  return (\n    <HookFormWrapper>\n      { customContent?.preField && <span className=\"preField\">{ customContent?.preField }</span> }\n\n      <div className=\"textareaFieldContainer\">\n        <textarea { ...textareaProps } />  \n\n        <div className=\"textareaFooter\">\n          { isInvalid && isRequiredError\n            ? <ValidationMessages name={ name } validation={ { required: validation?.required } } />\n            : (\n              <div\n                id={ characterCounterId }\n                className={ `textareaCharacterCount ${\n                  isAtLimit\n                    ? 'textareaCharacterCountExceeded'\n                    : ''\n                }` }\n                role={ isAtLimit ? 'status' : undefined }\n                aria-live={ isAtLimit ? 'polite' : undefined }\n                aria-atomic={ isAtLimit ? 'true' : undefined }\n              >\n                { characterCounter }\n              </div>\n            )\n          }\n        </div>\n      </div>\n\n      { customContent?.postField && <span className=\"postField\">{ customContent?.postField }</span> }\n    </HookFormWrapper>\n  );\n};\n"],"mappings":"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","ignoreList":[]}

package/dist/esm/components/form/validation/ValidationMessages.js

@@ -17,7 +17,7 @@ export const GenericErrorMessages = {
 };
 
 // Helper function to extract nested errors
-const extractError = (errors, fieldName) => {
+export const extractError = (errors, fieldName) => {
   if (!errors) {
     return undefined;
   }

package/dist/esm/components/form/validation/ValidationMessages.js.map

@@ -1 +1 @@
-{"version":3,"file":"ValidationMessages.js","names":["React","ErrorMessage","useFormContext","NoHookFormContext","GenericErrorMessages","required","minLength","value","maxLength","min","max","unknown","extractError","errors","fieldName","undefined","pathComponents","split","reduce","accumulator","pathComponent","ValidationMessages","name","validation","formState","fieldError","Object","entries","forEach","validatorKey","validator","type","types","message","createElement","className","id","render"],"sources":["../../../../../src/components/form/validation/ValidationMessages.tsx"],"sourcesContent":["/* eslint-disable no-unused-vars */\n\n'use client';\n\nimport React from 'react';\nimport { ErrorMessage } from '@hookform/error-message';\nimport {\n  FieldError,\n  FieldErrors,\n  FieldErrorsImpl,\n  Merge, useFormContext\n} from 'react-hook-form';\nimport {\n  ValidationProps\n} from '../formFields/formFieldWrapper/formFieldProps';\nimport { NoHookFormContext } from '../formFields/utilities/formUtilities';\nimport { InputCheckboxValidationProps } from '../formFields/subComponents/inputs/checkbox/inputCheckboxProps';\n\n// Type for generic error messages\nexport const GenericErrorMessages: Record<string, (value?: never) => string> = {\n  required: () => 'This field is required. Please enter a value.',\n  minLength: (value) => `Please provide a minimum of ${ value } characters.`,\n  maxLength: (value) => `Please provide a maximum of ${ value } characters.`,\n  min: (value) => `The value must be a minimum of ${ value }.`,\n  max: (value) => `The value must be a maximum of ${ value }.`,\n  unknown: () => 'An unknown error has occurred.'\n};\n\n// Helper function to extract nested errors\nconst extractError = (\n  errors: FieldErrors,\n  fieldName: string\n): FieldError | Merge<FieldError, FieldErrorsImpl<never>> | undefined => {\n  if (!errors) {\n    return undefined;\n  }\n\n  const pathComponents = fieldName.split('.');\n\n  return pathComponents.reduce<FieldError | Merge<FieldError, FieldErrorsImpl<never>> | undefined>(\n    (accumulator, pathComponent) => {\n      if (!accumulator) {\n        return undefined;\n      }\n\n      return (accumulator as never)[pathComponent];\n    },\n    errors as never\n  );\n};\n\ninterface ValidationMessagesProps {\n  name: string;\n  validation?: ValidationProps | InputCheckboxValidationProps\n}\n\nexport const ValidationMessages: React.FC<ValidationMessagesProps> = (\n  {\n    name,\n    validation\n  }\n) => {\n  const { formState: { errors } } = useFormContext() || NoHookFormContext;\n\n  const fieldError = extractError(errors, name);\n\n  if (!fieldError) {\n    return null;\n  }\n\n  // Check all the validators have a message\n  if (validation) {\n    Object.entries(validation).forEach(([validatorKey, validator]) => {\n      if (GenericErrorMessages[validatorKey]) {\n        if (typeof validator === 'boolean') {\n          if (\n            fieldError.type &&\n            fieldError.types &&\n            typeof fieldError.types[fieldError.type] === 'string'\n          ) {\n            fieldError.message = fieldError.types[fieldError.type] as string;\n          } else {\n            fieldError.message = GenericErrorMessages[validatorKey]();\n          }\n        } else if (typeof validator === 'object' && 'value' in validator) {\n          // @ts-ignore The hook form types don't seem to cater for versions with value properties properly\n          fieldError.message = GenericErrorMessages[validatorKey](validator.value || undefined);\n        }\n      }\n    });\n  }\n\n  return (\n    <span className=\"validation\" id={ `${ name }_errors` }>\n      <span className=\"message\">\n        { !fieldError?.message && (\n          <span className=\"error\">{ GenericErrorMessages.unknown() }</span>\n        ) }\n\n        <ErrorMessage\n          errors={ errors }\n          name={ name }\n          render={ ({ message }) => <span className=\"error\">{ message }</span> }\n        />\n      </span>\n    </span>\n  );\n};\n\nexport default ValidationMessages;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"ValidationMessages.js","names":["React","ErrorMessage","useFormContext","NoHookFormContext","GenericErrorMessages","required","minLength","value","maxLength","min","max","unknown","extractError","errors","fieldName","undefined","pathComponents","split","reduce","accumulator","pathComponent","ValidationMessages","name","validation","formState","fieldError","Object","entries","forEach","validatorKey","validator","type","types","message","createElement","className","id","render"],"sources":["../../../../../src/components/form/validation/ValidationMessages.tsx"],"sourcesContent":["/* eslint-disable no-unused-vars */\n\n'use client';\n\nimport React from 'react';\nimport { ErrorMessage } from '@hookform/error-message';\nimport {\n  FieldError,\n  FieldErrors,\n  FieldErrorsImpl,\n  Merge, useFormContext\n} from 'react-hook-form';\nimport {\n  ValidationProps\n} from '../formFields/formFieldWrapper/formFieldProps';\nimport { NoHookFormContext } from '../formFields/utilities/formUtilities';\nimport { InputCheckboxValidationProps } from '../formFields/subComponents/inputs/checkbox/inputCheckboxProps';\n\n// Type for generic error messages\nexport const GenericErrorMessages: Record<string, (value?: never) => string> = {\n  required: () => 'This field is required. Please enter a value.',\n  minLength: (value) => `Please provide a minimum of ${ value } characters.`,\n  maxLength: (value) => `Please provide a maximum of ${ value } characters.`,\n  min: (value) => `The value must be a minimum of ${ value }.`,\n  max: (value) => `The value must be a maximum of ${ value }.`,\n  unknown: () => 'An unknown error has occurred.'\n};\n\n// Helper function to extract nested errors\nexport const extractError = (\n  errors: FieldErrors,\n  fieldName: string\n): FieldError | Merge<FieldError, FieldErrorsImpl<never>> | undefined => {\n  if (!errors) {\n    return undefined;\n  }\n\n  const pathComponents = fieldName.split('.');\n\n  return pathComponents.reduce<FieldError | Merge<FieldError, FieldErrorsImpl<never>> | undefined>(\n    (accumulator, pathComponent) => {\n      if (!accumulator) {\n        return undefined;\n      }\n\n      return (accumulator as never)[pathComponent];\n    },\n    errors as never\n  );\n};\n\ninterface ValidationMessagesProps {\n  name: string;\n  validation?: ValidationProps | InputCheckboxValidationProps\n}\n\nexport const ValidationMessages: React.FC<ValidationMessagesProps> = (\n  {\n    name,\n    validation\n  }\n) => {\n  const { formState: { errors } } = useFormContext() || NoHookFormContext;\n\n  const fieldError = extractError(errors, name);\n\n  if (!fieldError) {\n    return null;\n  }\n\n  // Check all the validators have a message\n  if (validation) {\n    Object.entries(validation).forEach(([validatorKey, validator]) => {\n      if (GenericErrorMessages[validatorKey]) {\n        if (typeof validator === 'boolean') {\n          if (\n            fieldError.type &&\n            fieldError.types &&\n            typeof fieldError.types[fieldError.type] === 'string'\n          ) {\n            fieldError.message = fieldError.types[fieldError.type] as string;\n          } else {\n            fieldError.message = GenericErrorMessages[validatorKey]();\n          }\n        } else if (typeof validator === 'object' && 'value' in validator) {\n          // @ts-ignore The hook form types don't seem to cater for versions with value properties properly\n          fieldError.message = GenericErrorMessages[validatorKey](validator.value || undefined);\n        }\n      }\n    });\n  }\n\n  return (\n    <span className=\"validation\" id={ `${ name }_errors` }>\n      <span className=\"message\">\n        { !fieldError?.message && (\n          <span className=\"error\">{ GenericErrorMessages.unknown() }</span>\n        ) }\n\n        <ErrorMessage\n          errors={ errors }\n          name={ name }\n          render={ ({ message }) => <span className=\"error\">{ message }</span> }\n        />\n      </span>\n    </span>\n  );\n};\n\nexport default ValidationMessages;\n"],"mappings":"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","ignoreList":[]}

package/dist/esm/package.json

@@ -137,7 +137,7 @@
   "files": [
     "dist"
   ],
-  "version": "3.13.4",
+  "version": "3.13.5",
   "packageManager": "pnpm@10.11.0",
   "repository": {
     "type": "git",

package/dist/esm/styles/index.css

@@ -1914,6 +1914,31 @@ form select:placeholder-shown {
   font-weight: 200;
   font-family: var(--bodyFont);
 }
+form .textareaFieldContainer {
+  display: flex;
+  flex-direction: column;
+  row-gap: 5px;
+  align-items: stretch;
+  justify-content: flex-start;
+  width: 100%;
+}
+form .textareaFooter {
+  min-height: 1.5em;
+}
+form .textarea_Field.stacked label .textareaFooter .validation {
+  position: static;
+  height: auto;
+}
+form .textarea_Field.withValidation label {
+  padding-bottom: 0;
+}
+form .textareaCharacterCount {
+  line-height: 1.5;
+  color: var(--inputLabelColor);
+}
+form .textareaCharacterCountExceeded {
+  color: var(--inputErrorColor);
+}
 form input[type=number] {
   padding-right: 0;
 }

package/dist/esm/styles/shared/_allPartials.css

@@ -1262,6 +1262,31 @@ form select:placeholder-shown {
   font-weight: 200;
   font-family: var(--bodyFont);
 }
+form .textareaFieldContainer {
+  display: flex;
+  flex-direction: column;
+  row-gap: 5px;
+  align-items: stretch;
+  justify-content: flex-start;
+  width: 100%;
+}
+form .textareaFooter {
+  min-height: 1.5em;
+}
+form .textarea_Field.stacked label .textareaFooter .validation {
+  position: static;
+  height: auto;
+}
+form .textarea_Field.withValidation label {
+  padding-bottom: 0;
+}
+form .textareaCharacterCount {
+  line-height: 1.5;
+  color: var(--inputLabelColor);
+}
+form .textareaCharacterCountExceeded {
+  color: var(--inputErrorColor);
+}
 form input[type=number] {
   padding-right: 0;
 }

package/dist/esm/styles/shared/forms/_forms.css

@@ -261,6 +261,31 @@ form select:placeholder-shown {
   font-weight: 200;
   font-family: var(--bodyFont);
 }
+form .textareaFieldContainer {
+  display: flex;
+  flex-direction: column;
+  row-gap: 5px;
+  align-items: stretch;
+  justify-content: flex-start;
+  width: 100%;
+}
+form .textareaFooter {
+  min-height: 1.5em;
+}
+form .textarea_Field.stacked label .textareaFooter .validation {
+  position: static;
+  height: auto;
+}
+form .textarea_Field.withValidation label {
+  padding-bottom: 0;
+}
+form .textareaCharacterCount {
+  line-height: 1.5;
+  color: var(--inputLabelColor);
+}
+form .textareaCharacterCountExceeded {
+  color: var(--inputErrorColor);
+}
 form input[type=number] {
   padding-right: 0;
 }

package/dist/package.json

@@ -137,7 +137,7 @@
   "files": [
     "dist"
   ],
-  "version": "3.13.4",
+  "version": "3.13.5",
   "packageManager": "pnpm@10.11.0",
   "repository": {
     "type": "git",

package/package.json

@@ -137,7 +137,7 @@
   "files": [
     "dist"
   ],
-  "version": "3.13.5",
+  "version": "3.14.0",
   "packageManager": "pnpm@10.11.0",
   "repository": {
     "type": "git",

package/readme.md

@@ -205,3 +205,4 @@ PORT=3300
 ```
 It will treat the dist file as a static site and serve the css files and other static assets as absolute URLs. You will need to make sure you build the library first to generate the dist files.
 ```
+