@x15ventures/x15-ui-library 3.15.0 → 3.16.0

package/dist/cjs/components/form/formFields/subComponents/inputs/radio/styled/StyledRadioGroup.js.map

@@ -1 +1 @@
-{"version":3,"file":"StyledRadioGroup.js","names":["_interopRequireDefault","require","Object","defineProperty","exports","value","default","StyledRadioGroup","_extends2","_react","_interopRequireWildcard","_reactHookForm","_hooks","_FormFieldLabel","_StyledRadioInput","_ValidationMessages","_Spinner","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","has","get","set","hasOwnProperty","call","getOwnPropertyDescriptor","group","id","name","groupName","defaultGroupValue","label","layout","validation","showSpinner","customCssClasses","customContent","onChange","radioInputs","isTouched","setIsTouched","useState","getValues","setValue","useFormContext","groupValue","setGroupValue","radioInputsGroup","useRef","useTabbableInputGroup","groupWrappingElementRef","HandleOnChange","event","target","newValue","wrapperCssClass","wrapper","position","labelProps","isRequired","required","createElement","onBlur","className","hide","FormFieldLabel","ref","length","map","radioInput","StyledRadioInput","key","field","isChecked","defaultChecked","Spinner","ValidationMessages","_default"],"sources":["../../../../../../../../../src/components/form/formFields/subComponents/inputs/radio/styled/StyledRadioGroup.tsx"],"sourcesContent":["'use client';\n\nimport React, { useRef, useState } from 'react';\nimport { useFormContext } from 'react-hook-form';\nimport { StyledRadioGroupProps } from '../radioInputsProps';\nimport { useTabbableInputGroup } from '../../../../../../../hooks';\nimport { FormFieldLabel } from '../../../labels/FormFieldLabel';\nimport { StyledRadioInput } from './StyledRadioInput';\nimport { ValidationMessages } from '../../../../../validation/ValidationMessages';\nimport { Spinner } from '../../../../../../design/spinner/Spinner';\n\nimport './styledRadioGroup.scss';\n\nexport const StyledRadioGroup: React.FC<StyledRadioGroupProps> = (\n  {\n    group: {\n      id,\n      name: groupName,\n      value: defaultGroupValue,\n      label,\n      layout,\n      validation,\n      showSpinner,\n      customCssClasses,\n      customContent,\n      onChange = () => {}\n    },\n    radioInputs\n  }\n) => {\n  const [isTouched, setIsTouched] = useState(false);\n  const { getValues, setValue } = useFormContext();\n  const [groupValue, setGroupValue] = useState(typeof defaultGroupValue !== 'undefined' ? defaultGroupValue : getValues(groupName));\n  const radioInputsGroup = useRef(null);\n\n  useTabbableInputGroup({ groupWrappingElementRef: radioInputsGroup });\n\n  const HandleOnChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n    const { target } = event;\n    const newValue = target.value;\n    setValue(groupName, newValue);\n    setGroupValue(newValue);\n    setIsTouched(true);\n    onChange(newValue);\n  };\n\n  const wrapperCssClass = `formField styledRadiosGroup ${ layout || '' } ${ isTouched ? 'touched' : '' } ${ customCssClasses?.wrapper || '' } ${ label?.position || '' }`;\n\n  const labelProps = {\n    ...label,\n    isRequired: validation && typeof validation.required !== 'undefined',\n    customContent\n  };\n\n  return (\n    <fieldset id={ id } onBlur={ () => setIsTouched(true) } className={ wrapperCssClass }>\n      <span className=\"sr-only\">\n        Screen reader users are advised that this radio group supports\n        custom keyboard navigation between radio options via tabbing.\n      </span>\n\n      <legend className={ label.hide ? 'sr-only' : '' }><FormFieldLabel { ...labelProps } /></legend>\n\n      <div ref={ radioInputsGroup } className={ `radioInputs radioInputs_${ radioInputs.length }` }>\n        {\n          radioInputs.map((radioInput) => (\n            <StyledRadioInput\n              key={ radioInput.field.id }\n              {\n                ...{\n                  ...radioInput,\n                  label: {\n                    ...radioInput.label,\n                    isChecked: groupValue === radioInput.field.value\n                  },\n                  field: {\n                    ...radioInput.field,\n                    defaultChecked: groupValue === radioInput.field.value,\n                    groupName,\n                    onChange: HandleOnChange\n                  }\n                }\n              }\n            />\n          ))\n        }\n      </div>\n\n      {\n        showSpinner && <Spinner />\n      }\n\n      <ValidationMessages name={ groupName } validation={ validation } />\n    </fieldset>\n  );\n};\n\nexport default StyledRadioGroup;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"StyledRadioGroup.js","names":["_interopRequireDefault","require","Object","defineProperty","exports","value","default","StyledRadioGroup","_extends2","_react","_interopRequireWildcard","_reactHookForm","_hooks","_FormFieldLabel","_StyledRadioInput","_ValidationMessages","_Spinner","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","has","get","set","hasOwnProperty","call","getOwnPropertyDescriptor","group","id","name","groupName","defaultGroupValue","label","layout","validation","showSpinner","customCssClasses","customContent","onChange","radioInputs","isTouched","setIsTouched","useState","control","setValue","useFormContext","groupValue","useWatch","radioInputsGroup","useRef","useEffect","useTabbableInputGroup","groupWrappingElementRef","HandleOnChange","event","target","newValue","shouldValidate","shouldDirty","wrapperCssClass","wrapper","position","labelProps","isRequired","required","createElement","onBlur","className","hide","FormFieldLabel","ref","length","map","radioInput","StyledRadioInput","key","field","isChecked","defaultChecked","Spinner","ValidationMessages","_default"],"sources":["../../../../../../../../../src/components/form/formFields/subComponents/inputs/radio/styled/StyledRadioGroup.tsx"],"sourcesContent":["'use client';\n\nimport React, { useEffect, useRef, useState } from 'react';\nimport { useFormContext, useWatch } from 'react-hook-form';\nimport { StyledRadioGroupProps } from '../radioInputsProps';\nimport { useTabbableInputGroup } from '../../../../../../../hooks';\nimport { FormFieldLabel } from '../../../labels/FormFieldLabel';\nimport { StyledRadioInput } from './StyledRadioInput';\nimport { ValidationMessages } from '../../../../../validation/ValidationMessages';\nimport { Spinner } from '../../../../../../design/spinner/Spinner';\n\nimport './styledRadioGroup.scss';\n\nexport const StyledRadioGroup: React.FC<StyledRadioGroupProps> = (\n  {\n    group: {\n      id,\n      name: groupName,\n      value: defaultGroupValue,\n      label,\n      layout,\n      validation,\n      showSpinner,\n      customCssClasses,\n      customContent,\n      onChange = () => {}\n    },\n    radioInputs\n  }\n) => {\n  const [isTouched, setIsTouched] = useState(false);\n  const { control, setValue } = useFormContext();\n  const groupValue = useWatch({ control, name: groupName });\n  const radioInputsGroup = useRef(null);\n\n  useEffect(() => {\n    if (typeof defaultGroupValue !== 'undefined') {\n      setValue(groupName, defaultGroupValue);\n    }\n  }, [defaultGroupValue, groupName, setValue]);\n\n  useTabbableInputGroup({ groupWrappingElementRef: radioInputsGroup });\n\n  const HandleOnChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n    const { target } = event;\n    const newValue = target.value;\n    setValue(groupName, newValue, { shouldValidate: true, shouldDirty: true });\n    setIsTouched(true);\n    onChange(newValue);\n  };\n\n  const wrapperCssClass = `formField styledRadiosGroup ${ layout || '' } ${ isTouched ? 'touched' : '' } ${ customCssClasses?.wrapper || '' } ${ label?.position || '' }`;\n\n  const labelProps = {\n    ...label,\n    isRequired: validation && typeof validation.required !== 'undefined',\n    customContent\n  };\n\n  return (\n    <fieldset id={ id } onBlur={ () => setIsTouched(true) } className={ wrapperCssClass }>\n      <span className=\"sr-only\">\n        Screen reader users are advised that this radio group supports\n        custom keyboard navigation between radio options via tabbing.\n      </span>\n\n      <legend className={ label.hide ? 'sr-only' : '' }><FormFieldLabel { ...labelProps } /></legend>\n\n      <div ref={ radioInputsGroup } className={ `radioInputs radioInputs_${ radioInputs.length }` }>\n        {\n          radioInputs.map((radioInput) => (\n            <StyledRadioInput\n              key={ radioInput.field.id }\n              {\n                ...{\n                  ...radioInput,\n                  label: {\n                    ...radioInput.label,\n                    isChecked: groupValue === radioInput.field.value\n                  },\n                  field: {\n                    ...radioInput.field,\n                    defaultChecked: groupValue === radioInput.field.value,\n                    groupName,\n                    onChange: HandleOnChange\n                  }\n                }\n              }\n            />\n          ))\n        }\n      </div>\n\n      {\n        showSpinner && <Spinner />\n      }\n\n      <ValidationMessages name={ groupName } validation={ validation } />\n    </fieldset>\n  );\n};\n\nexport default StyledRadioGroup;\n"],"mappings":"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","ignoreList":[]}

package/dist/cjs/components/form/formFields/subComponents/inputs/text/InputText.js

@@ -8,7 +8,6 @@ Object.defineProperty(exports, "__esModule", {
 exports.InputText = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _reactHookForm = require("react-hook-form");
-var _formUtilities = require("../../../utilities/formUtilities");
 var _validationHelpers = require("../../../../../../helpers/validationHelpers");
 const InputText = ({
   field: {
@@ -33,18 +32,19 @@ const InputText = ({
     register,
     getFieldState,
     setValue
-  } = (0, _reactHookForm.useFormContext)() || _formUtilities.NoHookFormContext;
+  } = (0, _reactHookForm.useFormContext)();
   const fieldState = getFieldState(name);
   const HandleAutoFill = event => {
-    const {
-      target
-    } = event;
-    if (target) {
-      const newValue = target.value;
-      if (type !== 'number' && type !== 'date') {
-        setValue(name, newValue);
-      }
-      onChange(event);
+    // Some browsers trigger onAnimationStart when autofill happens.
+    // We need to notify react-hook-form of the new value.
+    if (event.animationName === 'onAutoFill') {
+      setValue(name, event.currentTarget.value, {
+        shouldValidate: true,
+        shouldDirty: true
+      });
+      onChange({
+        target: event.currentTarget
+      });
     }
   };
   const HandleOnBlur = event => {
@@ -52,9 +52,14 @@ const InputText = ({
       target
     } = event;
     if (target) {
-      const newValue = target.value;
-      if (type === 'text') {
-        setValue(name, newValue.trim());
+      if (type === 'text' && target.value !== target.value.trim()) {
+        const trimmedValue = target.value.trim();
+        // Keep the uncontrolled input in step with the trimmed value held in form state.
+        target.value = trimmedValue;
+        setValue(name, trimmedValue, {
+          shouldValidate: true,
+          shouldDirty: true
+        });
       }
       onTouched();
       onBlur(event);
@@ -73,6 +78,7 @@ const InputText = ({
     return {};
   };
   const inputProps = {
+    ...htmlNativeDomProps,
     type,
     id,
     className: cssClass,
@@ -90,12 +96,12 @@ const InputText = ({
     ...addLengthValidatorProps('max'),
     ...addLengthValidatorProps('min'),
     ...register(name, {
-      onChange: HandleAutoFill,
+      onChange,
       onBlur: HandleOnBlur,
       ...validation
     }),
-    onKeyDown: HandleKeyEvent,
-    ...htmlNativeDomProps
+    onAnimationStart: HandleAutoFill,
+    onKeyDown: HandleKeyEvent
   };
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, customContent?.preField && /*#__PURE__*/_react.default.createElement("span", {
     className: `preField preField_${type}Input`

package/dist/cjs/components/form/formFields/subComponents/inputs/text/InputText.js.map

@@ -1 +1 @@
-{"version":3,"file":"InputText.js","names":["_interopRequireDefault","require","Object","defineProperty","exports","value","InputText","_react","_reactHookForm","_formUtilities","_validationHelpers","field","type","id","name","placeholder","defaultValue","disabled","onBlur","onChange","onKeyDown","onTouched","htmlNativeDomProps","validation","showSpinner","customCssClasses","customContent","register","getFieldState","setValue","useFormContext","NoHookFormContext","fieldState","HandleAutoFill","event","target","newValue","HandleOnBlur","trim","HandleKeyEvent","cssClass","input","invalid","addLengthValidatorProps","validatorKey","isValidationRuleWithValue","inputProps","className","required","default","createElement","Fragment","preField","postField"],"sources":["../../../../../../../../src/components/form/formFields/subComponents/inputs/text/InputText.tsx"],"sourcesContent":["'use client';\n\nimport React from 'react';\nimport { useFormContext } from 'react-hook-form';\nimport { FormFieldProps, ValidationKey } from '../../../formFieldWrapper/formFieldProps';\nimport { NoHookFormContext } from '../../../utilities/formUtilities';\nimport { isValidationRuleWithValue } from '../../../../../../helpers/validationHelpers';\n\nexport interface InputTextProps extends FormFieldProps, React.InputHTMLAttributes<HTMLInputElement> { }\n\nexport const InputText: React.FC<InputTextProps> = (\n  {\n    field: {\n      type = 'text',\n      id,\n      name,\n      placeholder,\n      defaultValue,\n      disabled,\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, setValue } = useFormContext() || NoHookFormContext;\n  const fieldState = getFieldState(name);\n\n  const HandleAutoFill = (event: React.FocusEvent<HTMLInputElement>) => {\n    const { target } = event;\n    if (target) {\n      const newValue = target.value;\n      if (type !== 'number' && type !== 'date') {\n        setValue(name, newValue);\n      }\n      onChange(event);\n    }\n  };\n\n  const HandleOnBlur = (event: React.FocusEvent<HTMLInputElement>) => {\n    const { target } = event;\n    if (target) {\n      const newValue = target.value;\n      if (type === 'text') {\n        setValue(name, newValue.trim());\n      }\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    onKeyDown(event);\n  };\n\n  const cssClass = `${ customCssClasses?.input || '' }${ fieldState && fieldState?.invalid ? ' invalidField' : '' }`;\n\n  const addLengthValidatorProps = (validatorKey: ValidationKey) => {\n    if (\n      validation\n      && typeof validation[validatorKey] !== 'undefined'\n      && isValidationRuleWithValue(validation[validatorKey])\n    ) {\n      return {\n        [validatorKey]: validation[validatorKey]?.value\n      };\n    }\n    return {};\n  };\n\n  const inputProps = {\n    type,\n    id,\n    className: cssClass,\n    placeholder,\n    defaultValue,\n    disabled,\n    ...(showSpinner ? { disabled: true } : {}),\n    ...(validation && typeof validation.required !== 'undefined' ? { required: true } : {}),\n    ...(addLengthValidatorProps('maxLength')),\n    ...(addLengthValidatorProps('minLength')),\n    ...(addLengthValidatorProps('max')),\n    ...(addLengthValidatorProps('min')),\n    ...register(\n      name,\n      {\n        onChange: HandleAutoFill,\n        onBlur: HandleOnBlur,\n        ...validation\n      }\n    ),\n    onKeyDown: HandleKeyEvent,\n    ...htmlNativeDomProps\n  };\n\n  return (\n    <>\n      {\n        customContent?.preField\n        && <span className={ `preField preField_${ type }Input` }>{ customContent?.preField }</span>\n      }\n\n      <input { ...inputProps } />\n\n      {\n        customContent?.postField\n        && <span className={ `postField postField_${ type }Input` }>{ customContent?.postField }</span>\n      }\n    </>\n  );\n};\n"],"mappings":";AAAA,YAAY;;AAAC,IAAAA,sBAAA,GAAAC,OAAA;AAAAC,MAAA,CAAAC,cAAA,CAAAC,OAAA;EAAAC,KAAA;AAAA;AAAAD,OAAA,CAAAE,SAAA;AAEb,IAAAC,MAAA,GAAAP,sBAAA,CAAAC,OAAA;AACA,IAAAO,cAAA,GAAAP,OAAA;AAEA,IAAAQ,cAAA,GAAAR,OAAA;AACA,IAAAS,kBAAA,GAAAT,OAAA;AAIO,MAAMK,SAAmC,GAAGA,CACjD;EACEK,KAAK,EAAE;IACLC,IAAI,GAAG,MAAM;IACbC,EAAE;IACFC,IAAI;IACJC,WAAW;IACXC,YAAY;IACZC,QAAQ;IACRC,MAAM,GAAGA,CAAA,KAAM,CAAE,CAAC;IAClBC,QAAQ,GAAGA,CAAA,KAAM,CAAE,CAAC;IACpBC,SAAS,GAAGA,CAAA,KAAM,CAAE,CAAC;IACrBC,SAAS,GAAGA,CAAA,KAAM,CAAE,CAAC;IACrB,GAAGC;EACL,CAAC;EACDC,UAAU;EACVC,WAAW;EACXC,gBAAgB;EAChBC;AACF,CAAC,KACE;EACH,MAAM;IAAEC,QAAQ;IAAEC,aAAa;IAAEC;EAAS,CAAC,GAAG,IAAAC,6BAAc,EAAC,CAAC,IAAIC,gCAAiB;EACnF,MAAMC,UAAU,GAAGJ,aAAa,CAACd,IAAI,CAAC;EAEtC,MAAMmB,cAAc,GAAIC,KAAyC,IAAK;IACpE,MAAM;MAAEC;IAAO,CAAC,GAAGD,KAAK;IACxB,IAAIC,MAAM,EAAE;MACV,MAAMC,QAAQ,GAAGD,MAAM,CAAC9B,KAAK;MAC7B,IAAIO,IAAI,KAAK,QAAQ,IAAIA,IAAI,KAAK,MAAM,EAAE;QACxCiB,QAAQ,CAACf,IAAI,EAAEsB,QAAQ,CAAC;MAC1B;MACAjB,QAAQ,CAACe,KAAK,CAAC;IACjB;EACF,CAAC;EAED,MAAMG,YAAY,GAAIH,KAAyC,IAAK;IAClE,MAAM;MAAEC;IAAO,CAAC,GAAGD,KAAK;IACxB,IAAIC,MAAM,EAAE;MACV,MAAMC,QAAQ,GAAGD,MAAM,CAAC9B,KAAK;MAC7B,IAAIO,IAAI,KAAK,MAAM,EAAE;QACnBiB,QAAQ,CAACf,IAAI,EAAEsB,QAAQ,CAACE,IAAI,CAAC,CAAC,CAAC;MACjC;MACAjB,SAAS,CAAC,CAAC;MACXH,MAAM,CAACgB,KAAK,CAAC;IACf;EACF,CAAC;EAED,MAAMK,cAAc,GAClBL,KAE0C,IACvC;IACHd,SAAS,CAACc,KAAK,CAAC;EAClB,CAAC;EAED,MAAMM,QAAQ,GAAG,GAAIf,gBAAgB,EAAEgB,KAAK,IAAI,EAAE,GAAKT,UAAU,IAAIA,UAAU,EAAEU,OAAO,GAAG,eAAe,GAAG,EAAE,EAAG;EAElH,MAAMC,uBAAuB,GAAIC,YAA2B,IAAK;IAC/D,IACErB,UAAU,IACP,OAAOA,UAAU,CAACqB,YAAY,CAAC,KAAK,WAAW,IAC/C,IAAAC,4CAAyB,EAACtB,UAAU,CAACqB,YAAY,CAAC,CAAC,EACtD;MACA,OAAO;QACL,CAACA,YAAY,GAAGrB,UAAU,CAACqB,YAAY,CAAC,EAAEvC;MAC5C,CAAC;IACH;IACA,OAAO,CAAC,CAAC;EACX,CAAC;EAED,MAAMyC,UAAU,GAAG;IACjBlC,IAAI;IACJC,EAAE;IACFkC,SAAS,EAAEP,QAAQ;IACnBzB,WAAW;IACXC,YAAY;IACZC,QAAQ;IACR,IAAIO,WAAW,GAAG;MAAEP,QAAQ,EAAE;IAAK,CAAC,GAAG,CAAC,CAAC,CAAC;IAC1C,IAAIM,UAAU,IAAI,OAAOA,UAAU,CAACyB,QAAQ,KAAK,WAAW,GAAG;MAAEA,QAAQ,EAAE;IAAK,CAAC,GAAG,CAAC,CAAC,CAAC;IACvF,GAAIL,uBAAuB,CAAC,WAAW,CAAE;IACzC,GAAIA,uBAAuB,CAAC,WAAW,CAAE;IACzC,GAAIA,uBAAuB,CAAC,KAAK,CAAE;IACnC,GAAIA,uBAAuB,CAAC,KAAK,CAAE;IACnC,GAAGhB,QAAQ,CACTb,IAAI,EACJ;MACEK,QAAQ,EAAEc,cAAc;MACxBf,MAAM,EAAEmB,YAAY;MACpB,GAAGd;IACL,CACF,CAAC;IACDH,SAAS,EAAEmB,cAAc;IACzB,GAAGjB;EACL,CAAC;EAED,oBACEf,MAAA,CAAA0C,OAAA,CAAAC,aAAA,CAAA3C,MAAA,CAAA0C,OAAA,CAAAE,QAAA,QAEIzB,aAAa,EAAE0B,QAAQ,iBACpB7C,MAAA,CAAA0C,OAAA,CAAAC,aAAA;IAAMH,SAAS,EAAG,qBAAsBnC,IAAI;EAAU,GAAGc,aAAa,EAAE0B,QAAgB,CAAC,eAG9F7C,MAAA,CAAA0C,OAAA,CAAAC,aAAA,UAAYJ,UAAc,CAAC,EAGzBpB,aAAa,EAAE2B,SAAS,iBACrB9C,MAAA,CAAA0C,OAAA,CAAAC,aAAA;IAAMH,SAAS,EAAG,uBAAwBnC,IAAI;EAAU,GAAGc,aAAa,EAAE2B,SAAiB,CAEhG,CAAC;AAEP,CAAC;AAACjD,OAAA,CAAAE,SAAA,GAAAA,SAAA","ignoreList":[]}
+{"version":3,"file":"InputText.js","names":["_interopRequireDefault","require","Object","defineProperty","exports","value","InputText","_react","_reactHookForm","_validationHelpers","field","type","id","name","placeholder","defaultValue","disabled","onBlur","onChange","onKeyDown","onTouched","htmlNativeDomProps","validation","showSpinner","customCssClasses","customContent","register","getFieldState","setValue","useFormContext","fieldState","HandleAutoFill","event","animationName","currentTarget","shouldValidate","shouldDirty","target","HandleOnBlur","trim","trimmedValue","HandleKeyEvent","cssClass","input","invalid","addLengthValidatorProps","validatorKey","isValidationRuleWithValue","inputProps","className","required","onAnimationStart","default","createElement","Fragment","preField","postField"],"sources":["../../../../../../../../src/components/form/formFields/subComponents/inputs/text/InputText.tsx"],"sourcesContent":["'use client';\n\nimport React from 'react';\nimport { useFormContext } from 'react-hook-form';\nimport { FormFieldProps, ValidationKey } from '../../../formFieldWrapper/formFieldProps';\nimport { isValidationRuleWithValue } from '../../../../../../helpers/validationHelpers';\n\nexport interface InputTextProps extends FormFieldProps, React.InputHTMLAttributes<HTMLInputElement> { }\n\nexport const InputText: React.FC<InputTextProps> = (\n  {\n    field: {\n      type = 'text',\n      id,\n      name,\n      placeholder,\n      defaultValue,\n      disabled,\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, setValue } = useFormContext();\n  const fieldState = getFieldState(name);\n\n  const HandleAutoFill = (event: React.AnimationEvent<HTMLInputElement>) => {\n    // Some browsers trigger onAnimationStart when autofill happens.\n    // We need to notify react-hook-form of the new value.\n    if (event.animationName === 'onAutoFill') {\n      setValue(name, event.currentTarget.value, { shouldValidate: true, shouldDirty: true });\n      onChange({ target: event.currentTarget } as unknown as React.ChangeEvent<HTMLInputElement>);\n    }\n  };\n\n  const HandleOnBlur = (event: React.FocusEvent<HTMLInputElement>) => {\n    const { target } = event;\n    if (target) {\n      if (type === 'text' && target.value !== target.value.trim()) {\n        const trimmedValue = target.value.trim();\n        // Keep the uncontrolled input in step with the trimmed value held in form state.\n        target.value = trimmedValue;\n        setValue(name, trimmedValue, { shouldValidate: true, shouldDirty: true });\n      }\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    onKeyDown(event);\n  };\n\n  const cssClass = `${ customCssClasses?.input || '' }${ fieldState && fieldState?.invalid ? ' invalidField' : '' }`;\n\n  const addLengthValidatorProps = (validatorKey: ValidationKey) => {\n    if (\n      validation\n      && typeof validation[validatorKey] !== 'undefined'\n      && isValidationRuleWithValue(validation[validatorKey])\n    ) {\n      return {\n        [validatorKey]: validation[validatorKey]?.value\n      };\n    }\n    return {};\n  };\n\n  const inputProps = {\n    ...htmlNativeDomProps,\n    type,\n    id,\n    className: cssClass,\n    placeholder,\n    defaultValue,\n    disabled,\n    ...(showSpinner ? { disabled: true } : {}),\n    ...(validation && typeof validation.required !== 'undefined' ? { required: true } : {}),\n    ...(addLengthValidatorProps('maxLength')),\n    ...(addLengthValidatorProps('minLength')),\n    ...(addLengthValidatorProps('max')),\n    ...(addLengthValidatorProps('min')),\n    ...register(\n      name,\n      {\n        onChange,\n        onBlur: HandleOnBlur,\n        ...validation\n      }\n    ),\n    onAnimationStart: HandleAutoFill,\n    onKeyDown: HandleKeyEvent\n  };\n\n  return (\n    <>\n      {\n        customContent?.preField\n        && <span className={ `preField preField_${ type }Input` }>{ customContent?.preField }</span>\n      }\n\n      <input { ...inputProps } />\n\n      {\n        customContent?.postField\n        && <span className={ `postField postField_${ type }Input` }>{ customContent?.postField }</span>\n      }\n    </>\n  );\n};\n"],"mappings":"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","ignoreList":[]}

package/dist/cjs/components/form/formFields/subComponents/select/Select.js

@@ -10,8 +10,7 @@ var _react = _interopRequireDefault(require("react"));
 var _reactHookForm = require("react-hook-form");
 var _HookFormWrapper = require("../../../hookFormWrapper/HookFormWrapper");
 var _objectHelpers = require("../../../../../helpers/objectHelpers");
-var _formUtilities = require("../../utilities/formUtilities");
-const Select = ({
+const SelectField = ({
   field: {
     id,
     name,
@@ -33,7 +32,7 @@ const Select = ({
   const {
     register,
     getFieldState
-  } = (0, _reactHookForm.useFormContext)() || _formUtilities.NoHookFormContext;
+  } = (0, _reactHookForm.useFormContext)();
   const fieldState = getFieldState(name);
   const HandleAutoFill = event => {
     const {
@@ -53,7 +52,6 @@ const Select = ({
     }
   };
   const HandleKeyEvent = event => {
-    onTouched();
     onKeyDown(event);
   };
   const cssClass = `${customCssClasses?.input || ''}${fieldState && fieldState?.invalid ? ' invalidField' : ''}`;
@@ -90,7 +88,7 @@ const Select = ({
       value: option
     }, option);
   };
-  return /*#__PURE__*/_react.default.createElement(_HookFormWrapper.HookFormWrapper, null, customContent?.preField && /*#__PURE__*/_react.default.createElement("span", {
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, customContent?.preField && /*#__PURE__*/_react.default.createElement("span", {
     className: "preField"
   }, customContent?.preField), /*#__PURE__*/_react.default.createElement("select", selectProps, includeEmptyOption && /*#__PURE__*/_react.default.createElement("option", {
     value: ""
@@ -98,5 +96,8 @@ const Select = ({
     className: "postField"
   }, customContent?.postField));
 };
+const Select = props => /*#__PURE__*/_react.default.createElement(_HookFormWrapper.HookFormWrapper, {
+  formContext: props.formContext
+}, /*#__PURE__*/_react.default.createElement(SelectField, props));
 exports.Select = Select;
 //# sourceMappingURL=Select.js.map

package/dist/cjs/components/form/formFields/subComponents/select/Select.js.map

@@ -1 +1 @@
-{"version":3,"file":"Select.js","names":["_interopRequireDefault","require","Object","defineProperty","exports","value","Select","_react","_reactHookForm","_HookFormWrapper","_objectHelpers","_formUtilities","field","id","name","placeholder","defaultValue","onBlur","onChange","onKeyDown","onTouched","includeEmptyOption","emptyOptionLabel","options","validation","showSpinner","customCssClasses","customContent","register","getFieldState","useFormContext","NoHookFormContext","fieldState","HandleAutoFill","event","target","HandleOnBlur","HandleKeyEvent","cssClass","input","invalid","selectProps","className","disabled","required","renderOption","option","isAnObject","typedOption","default","createElement","key","JSON","stringify","label","HookFormWrapper","preField","map","postField"],"sources":["../../../../../../../src/components/form/formFields/subComponents/select/Select.tsx"],"sourcesContent":["'use client';\n\nimport React from 'react';\nimport { useFormContext } from 'react-hook-form';\nimport { HookFormWrapper } from '../../../hookFormWrapper/HookFormWrapper';\nimport { isAnObject } from '../../../../../helpers/objectHelpers';\nimport {\n  FieldProps,\n  FormFieldProps,\n  SelectOptionObjectType,\n  SelectOptionType,\n} from '../../formFieldWrapper/formFieldProps';\nimport { NoHookFormContext } from '../../utilities/formUtilities';\n\nexport interface SelectProps extends React.SelectHTMLAttributes<HTMLSelectElement>, Omit<FormFieldProps, 'field'> {\n  field: Omit<FieldProps, 'type'>;\n}\n\nexport const Select: React.FC<SelectProps> = (\n  {\n    field: {\n      id,\n      name,\n      placeholder,\n      defaultValue,\n      onBlur = () => {},\n      onChange = () => {},\n      onKeyDown = () => {},\n      onTouched = () => {},\n      includeEmptyOption = true,\n      emptyOptionLabel = 'Please select',\n      options\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 selectProps = {\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  const renderOption = (option: SelectOptionType) => {\n    if (isAnObject(option)) {\n      const typedOption = option as SelectOptionObjectType;\n      return (\n        <option key={ `${ id }_${ typedOption.value }` } data-option={ JSON.stringify(typedOption) } value={ typedOption.value as string }>\n          { typedOption.label }\n        </option>\n      );\n    }\n    return (\n      <option key={ `${ id }_${ option }` } data-option={ JSON.stringify(option) } value={ option as string }>\n        { option as string }\n      </option>\n    );\n  };\n\n  return (\n    <HookFormWrapper>\n      { customContent?.preField && <span className=\"preField\">{ customContent?.preField }</span> }\n\n      <select { ...selectProps }>\n        { includeEmptyOption && <option value=\"\">{ emptyOptionLabel }</option> }\n        { (options as SelectOptionType[])?.map(renderOption) }\n      </select>\n\n      { customContent?.postField && <span className=\"postField\">{ customContent?.postField }</span> }\n    </HookFormWrapper>\n  );\n};\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"Select.js","names":["_interopRequireDefault","require","Object","defineProperty","exports","value","Select","_react","_reactHookForm","_HookFormWrapper","_objectHelpers","SelectField","field","id","name","placeholder","defaultValue","onBlur","onChange","onKeyDown","onTouched","includeEmptyOption","emptyOptionLabel","options","validation","showSpinner","customCssClasses","customContent","register","getFieldState","useFormContext","fieldState","HandleAutoFill","event","target","HandleOnBlur","HandleKeyEvent","cssClass","input","invalid","selectProps","className","disabled","required","renderOption","option","isAnObject","typedOption","default","createElement","key","JSON","stringify","label","Fragment","preField","map","postField","props","HookFormWrapper","formContext"],"sources":["../../../../../../../src/components/form/formFields/subComponents/select/Select.tsx"],"sourcesContent":["'use client';\n\nimport React from 'react';\nimport { useFormContext } from 'react-hook-form';\nimport { HookFormWrapper } from '../../../hookFormWrapper/HookFormWrapper';\nimport { isAnObject } from '../../../../../helpers/objectHelpers';\nimport {\n  FieldProps,\n  FormFieldProps,\n  SelectOptionObjectType,\n  SelectOptionType,\n} from '../../formFieldWrapper/formFieldProps';\n\nexport interface SelectProps extends React.SelectHTMLAttributes<HTMLSelectElement>, Omit<FormFieldProps, 'field'> {\n  field: Omit<FieldProps, 'type'>;\n}\n\nconst SelectField: React.FC<SelectProps> = (\n  {\n    field: {\n      id,\n      name,\n      placeholder,\n      defaultValue,\n      onBlur = () => {},\n      onChange = () => {},\n      onKeyDown = () => {},\n      onTouched = () => {},\n      includeEmptyOption = true,\n      emptyOptionLabel = 'Please select',\n      options\n    },\n    validation,\n    showSpinner,\n    customCssClasses,\n    customContent\n  }\n) => {\n  const { register, getFieldState } = useFormContext();\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    onKeyDown(event);\n  };\n\n  const cssClass = `${ customCssClasses?.input || '' }${ fieldState && fieldState?.invalid ? ' invalidField' : '' }`;\n\n  const selectProps = {\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  const renderOption = (option: SelectOptionType) => {\n    if (isAnObject(option)) {\n      const typedOption = option as SelectOptionObjectType;\n      return (\n        <option key={ `${ id }_${ typedOption.value }` } data-option={ JSON.stringify(typedOption) } value={ typedOption.value as string }>\n          { typedOption.label }\n        </option>\n      );\n    }\n    return (\n      <option key={ `${ id }_${ option }` } data-option={ JSON.stringify(option) } value={ option as string }>\n        { option as string }\n      </option>\n    );\n  };\n\n  return (\n    <>\n      { customContent?.preField && <span className=\"preField\">{ customContent?.preField }</span> }\n\n      <select { ...selectProps }>\n        { includeEmptyOption && <option value=\"\">{ emptyOptionLabel }</option> }\n        { (options as SelectOptionType[])?.map(renderOption) }\n      </select>\n\n      { customContent?.postField && <span className=\"postField\">{ customContent?.postField }</span> }\n    </>\n  );\n};\n\nexport const Select: React.FC<SelectProps> = (props) => (\n  <HookFormWrapper formContext={ props.formContext }>\n    <SelectField { ...props } />\n  </HookFormWrapper>\n);\n"],"mappings":"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","ignoreList":[]}

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

@@ -8,36 +8,15 @@ exports.Textarea = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _reactHookForm = require("react-hook-form");
 var _HookFormWrapper = require("../../../hookFormWrapper/HookFormWrapper");
-var _formUtilities = require("../../utilities/formUtilities");
 var _ValidationMessages = require("../../../validation/ValidationMessages");
+var _stringHelpers = require("../../../../../helpers/stringHelpers");
+require("./textarea.css");
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
-/**
-* 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('');
-}
-const Textarea = ({
+const Textarea = props => /*#__PURE__*/_react.default.createElement(_HookFormWrapper.HookFormWrapper, {
+  formContext: props.formContext
+}, /*#__PURE__*/_react.default.createElement(TextareaField, props));
+exports.Textarea = Textarea;
+const TextareaField = ({
   field: {
     id,
     name,
@@ -62,20 +41,16 @@ const Textarea = ({
     formState: {
       errors
     }
-  } = (0, _reactHookForm.useFormContext)() || _formUtilities.NoHookFormContext;
+  } = (0, _reactHookForm.useFormContext)();
   const fieldState = getFieldState(name);
-  const hasFieldError = Boolean((0, _ValidationMessages.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] = (0, _react.useState)(() => getCharacterCount(defaultValue?.toString() || ''));
+  // getFieldState alone does not subscribe to errors, so the direct lookup keeps this in sync.
+  const isInvalid = Boolean(fieldState?.invalid || (0, _ValidationMessages.extractError)(errors, name));
+  const isRequiredError = fieldState?.error?.type === 'required';
+  const [count, setCount] = (0, _react.useState)(() => (0, _stringHelpers.getCharacterCount)(defaultValue?.toString() || ''));
   const [hasStartedTyping, setHasStartedTyping] = (0, _react.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 showsCharacterCount = hasStartedTyping && hasMaxLength && !isRequiredError;
   const cssClass = `${customCssClasses?.input || ''}${isInvalid ? ' invalidField' : ''}`;
   const normalizedValidation = (0, _react.useMemo)(() => {
     if (!validation || typeof validation.maxLength === 'undefined') {
@@ -87,7 +62,7 @@ const Textarea = ({
       return validation;
     }
     const maxLengthMessage = `Maximum length is ${maxLengthValue}`;
-    const graphemeMaxLengthValidator = value => getCharacterCount(value || '') <= maxLengthValue || maxLengthMessage;
+    const graphemeMaxLengthValidator = value => (0, _stringHelpers.getCharacterCount)(value || '') <= maxLengthValue || maxLengthMessage;
 
     // eslint-disable-next-line no-unused-vars
     const {
@@ -121,37 +96,53 @@ const Textarea = ({
       validate: graphemeMaxLengthValidator
     };
   }, [validation]);
-  const registered = register(name, normalizedValidation);
+  const fieldRegistration = 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.
+   * Native maxLength counts UTF-16 units, so emojis and composed characters are treated as
+   * several characters. The limit is enforced here against grapheme clusters instead.
    */
   const HandleBeforeInput = event => {
-    if (enforceMaxLength !== true || !hasMaxLength) return;
+    if (enforceMaxLength !== true || !hasMaxLength) {
+      return;
+    }
     const nativeEvent = event.nativeEvent;
     const inserted = nativeEvent.data ?? '';
-    if (!inserted) return;
+    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) {
+    if ((0, _stringHelpers.getCharacterCount)(nextValue) > maxLength) {
       event.preventDefault();
     }
   };
   const HandleChange = event => {
     const rawValue = event.target.value || '';
-    const newValue = enforceMaxLength === true && hasMaxLength ? clampToGraphemeMax(rawValue, maxLength) : rawValue;
+    const newValue = enforceMaxLength === true && hasMaxLength ? (0, _stringHelpers.clampToGraphemeMax)(rawValue, maxLength) : rawValue;
     if (newValue !== rawValue) {
       event.target.value = newValue;
     }
     setHasStartedTyping(true);
-    setCount(getCharacterCount(newValue));
-    const onTextareaChange = onChange;
-    onTextareaChange?.(event);
+    setCount((0, _stringHelpers.getCharacterCount)(newValue));
+    onChange(event);
+    fieldRegistration?.onChange?.(event);
+  };
+  const HandleAutoFill = event => {
+    // Browsers trigger onAnimationStart when autofill happens.
+    // We need to notify react-hook-form of the new value.
+    if (event.animationName === 'onAutoFill') {
+      const {
+        value
+      } = event.currentTarget;
+      setHasStartedTyping(true);
+      setCount((0, _stringHelpers.getCharacterCount)(value || ''));
+      HandleChange({
+        target: event.currentTarget
+      });
+    }
   };
   const HandleOnBlur = event => {
     const {
@@ -161,17 +152,12 @@ const Textarea = ({
       onTouched();
       onBlur(event);
     }
+    fieldRegistration?.onBlur?.(event);
   };
   const HandleKeyEvent = event => {
     onTouched();
-    const onTextareaKeyDown = onKeyDown;
-    onTextareaKeyDown?.(event);
+    onKeyDown(event);
   };
-  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,
@@ -183,40 +169,26 @@ const Textarea = ({
     ...(validation && typeof validation.required !== 'undefined' ? {
       required: true
     } : {}),
-    ...registered,
+    ...htmlNativeDomProps,
+    ...fieldRegistration,
     onBeforeInput: HandleBeforeInput,
-    onChange: event => {
-      HandleChange(event);
-      registered?.onChange?.(event);
-    },
-    onBlur: event => {
-      HandleOnBlur(event);
-      registered?.onBlur?.(event);
-    },
+    onChange: HandleChange,
+    onBlur: HandleOnBlur,
     onKeyDown: HandleKeyEvent,
-    ...htmlNativeDomProps,
-    'aria-describedby': mergedDescribedBy
+    onAnimationStart: HandleAutoFill
   };
-  return /*#__PURE__*/_react.default.createElement(_HookFormWrapper.HookFormWrapper, null, customContent?.preField && /*#__PURE__*/_react.default.createElement("span", {
+  const containerCssClass = `textareaFieldContainer${showsCharacterCount ? ' withCharacterCount' : ''}`;
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, customContent?.preField && /*#__PURE__*/_react.default.createElement("span", {
     className: "preField"
-  }, customContent?.preField), /*#__PURE__*/_react.default.createElement("div", {
-    className: "textareaFieldContainer"
-  }, /*#__PURE__*/_react.default.createElement("textarea", textareaProps), /*#__PURE__*/_react.default.createElement("div", {
-    className: "textareaFooter"
-  }, isInvalid && isRequiredError ? /*#__PURE__*/_react.default.createElement(_ValidationMessages.ValidationMessages, {
-    name: name,
-    validation: {
-      required: validation?.required
-    }
-  }) : /*#__PURE__*/_react.default.createElement("div", {
-    id: characterCounterId,
+  }, customContent?.preField), /*#__PURE__*/_react.default.createElement("span", {
+    className: containerCssClass
+  }, /*#__PURE__*/_react.default.createElement("textarea", textareaProps), showsCharacterCount && /*#__PURE__*/_react.default.createElement("span", {
     className: `textareaCharacterCount ${isAtLimit ? 'textareaCharacterCountExceeded' : ''}`,
     role: isAtLimit ? 'status' : undefined,
     "aria-live": isAtLimit ? 'polite' : undefined,
     "aria-atomic": isAtLimit ? 'true' : undefined
-  }, characterCounter))), customContent?.postField && /*#__PURE__*/_react.default.createElement("span", {
+  }, `${count}/${maxLength}`)), customContent?.postField && /*#__PURE__*/_react.default.createElement("span", {
     className: "postField"
   }, customContent?.postField));
 };
-exports.Textarea = Textarea;
 //# sourceMappingURL=Textarea.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Textarea.js","names":["Object","defineProperty","exports","value","Textarea","_react","_interopRequireWildcard","require","_reactHookForm","_HookFormWrapper","_formUtilities","_ValidationMessages","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","getOwnPropertyDescriptor","getCharacterCount","Intl","segmenter","Segmenter","undefined","granularity","Array","from","segment","length","clampToGraphemeMax","maxAllowed","slice","map","join","field","id","name","placeholder","defaultValue","maxLength","enforceMaxLength","onBlur","onChange","onKeyDown","onTouched","htmlNativeDomProps","validation","showSpinner","customCssClasses","customContent","register","getFieldState","formState","errors","useFormContext","NoHookFormContext","fieldState","hasFieldError","Boolean","extractError","isInvalid","invalid","count","setCount","useState","toString","hasStartedTyping","setHasStartedTyping","hasMaxLength","isAtLimit","isRequiredError","error","type","characterCounter","cssClass","input","normalizedValidation","useMemo","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","HookFormWrapper","preField","ValidationMessages","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":[]}
+{"version":3,"file":"Textarea.js","names":["Object","defineProperty","exports","value","Textarea","_react","_interopRequireWildcard","require","_reactHookForm","_HookFormWrapper","_ValidationMessages","_stringHelpers","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","getOwnPropertyDescriptor","props","createElement","HookFormWrapper","formContext","TextareaField","field","id","name","placeholder","defaultValue","maxLength","enforceMaxLength","onBlur","onChange","onKeyDown","onTouched","htmlNativeDomProps","validation","showSpinner","customCssClasses","customContent","register","getFieldState","formState","errors","useFormContext","fieldState","isInvalid","Boolean","invalid","extractError","isRequiredError","error","type","count","setCount","useState","getCharacterCount","toString","hasStartedTyping","setHasStartedTyping","hasMaxLength","isAtLimit","showsCharacterCount","cssClass","input","normalizedValidation","useMemo","maxLengthRule","maxLengthValue","Number","undefined","isNaN","maxLengthMessage","graphemeMaxLengthValidator","_maxLength","validate","restValidation","formValues","validationResult","graphemeMaxLength","fieldRegistration","HandleBeforeInput","event","nativeEvent","inserted","data","target","currentTarget","start","selectionStart","length","end","selectionEnd","nextValue","slice","preventDefault","HandleChange","rawValue","newValue","clampToGraphemeMax","HandleAutoFill","animationName","HandleOnBlur","HandleKeyEvent","textareaProps","className","disabled","required","onBeforeInput","onAnimationStart","containerCssClass","Fragment","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 {\n  FormFieldProps,\n  TextareaFieldProps,\n} from '../../formFieldWrapper/formFieldProps';\nimport { extractError } from '../../../validation/ValidationMessages';\nimport { clampToGraphemeMax, getCharacterCount } from '../../../../../helpers/stringHelpers';\n\nimport './textarea.scss';\n\nexport interface TextareaProps extends Omit<FormFieldProps, 'field'> {\n  field: Omit<TextareaFieldProps, 'type'>;\n}\n\nexport const Textarea: React.FC<TextareaProps> = (props) => (\n  <HookFormWrapper formContext={ props.formContext }>\n    <TextareaField { ...props } />\n  </HookFormWrapper>\n);\n\nconst TextareaField: 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();\n  const fieldState = getFieldState(name);\n  // getFieldState alone does not subscribe to errors, so the direct lookup keeps this in sync.\n  const isInvalid = Boolean(fieldState?.invalid || extractError(errors, name));\n  const isRequiredError = fieldState?.error?.type === 'required';\n\n  const [count, setCount] = useState<number>(() => getCharacterCount(defaultValue?.toString() || ''));\n  const [hasStartedTyping, setHasStartedTyping] = useState(false);\n\n  const hasMaxLength = typeof maxLength === 'number';\n  const isAtLimit = hasMaxLength ? count >= maxLength : false;\n  const showsCharacterCount = hasStartedTyping && hasMaxLength && !isRequiredError;\n\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\n          if (validationResult !== true) {\n            return validationResult;\n          }\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 fieldRegistration = register(name, normalizedValidation);\n\n  /**\n   * Native maxLength counts UTF-16 units, so emojis and composed characters are treated as\n   * several characters. The limit is enforced here against grapheme clusters instead.\n   */\n  const HandleBeforeInput = (event: React.FormEvent<HTMLTextAreaElement>) => {\n    if (enforceMaxLength !== true || !hasMaxLength) {\n      return;\n    }\n\n    const nativeEvent = event.nativeEvent as InputEvent;\n    const inserted = nativeEvent.data ?? '';\n\n    if (!inserted) {\n      return;\n    }\n\n    const target = event.currentTarget;\n    const start = target.selectionStart ?? target.value.length;\n    const end = target.selectionEnd ?? target.value.length;\n    const nextValue = target.value.slice(0, start) + inserted + 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 = 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\n    (onChange as React.ChangeEventHandler<HTMLTextAreaElement>)(event);\n    fieldRegistration?.onChange?.(event);\n  };\n\n  const HandleAutoFill = (event: React.AnimationEvent<HTMLTextAreaElement>) => {\n    // Browsers trigger onAnimationStart when autofill happens.\n    // We need to notify react-hook-form of the new value.\n    if (event.animationName === 'onAutoFill') {\n      const { value } = event.currentTarget;\n      setHasStartedTyping(true);\n      setCount(getCharacterCount(value || ''));\n      HandleChange({ target: event.currentTarget } as unknown as React.ChangeEvent<HTMLTextAreaElement>);\n    }\n  };\n\n  const HandleOnBlur = (event: React.FocusEvent<HTMLTextAreaElement>) => {\n    const { target } = event;\n\n    if (target) {\n      onTouched();\n      (onBlur as React.FocusEventHandler<HTMLTextAreaElement>)(event);\n    }\n\n    fieldRegistration?.onBlur?.(event);\n  };\n\n  const HandleKeyEvent = (event: React.KeyboardEvent<HTMLTextAreaElement>) => {\n    onTouched();\n    (onKeyDown as React.KeyboardEventHandler<HTMLTextAreaElement>)(event);\n  };\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    ...htmlNativeDomProps,\n    ...fieldRegistration,\n    onBeforeInput: HandleBeforeInput,\n    onChange: HandleChange,\n    onBlur: HandleOnBlur,\n    onKeyDown: HandleKeyEvent,\n    onAnimationStart: HandleAutoFill,\n  };\n\n  const containerCssClass = `textareaFieldContainer${ showsCharacterCount ? ' withCharacterCount' : '' }`;\n\n  return (\n    <>\n      { customContent?.preField && <span className=\"preField\">{ customContent?.preField }</span> }\n\n      <span className={ containerCssClass }>\n        <textarea { ...textareaProps } />\n\n        {\n          showsCharacterCount && (\n            <span\n              className={ `textareaCharacterCount ${ isAtLimit ? 'textareaCharacterCountExceeded' : '' }` }\n              role={ isAtLimit ? 'status' : undefined }\n              aria-live={ isAtLimit ? 'polite' : undefined }\n              aria-atomic={ isAtLimit ? 'true' : undefined }\n            >\n              { `${ count }/${ maxLength }` }\n            </span>\n          )\n        }\n      </span>\n\n      { customContent?.postField && <span className=\"postField\">{ customContent?.postField }</span> }\n    </>\n  );\n};\n"],"mappings":"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","ignoreList":[]}

package/dist/cjs/components/form/formFields/subComponents/textarea/textarea.css

@@ -0,0 +1,20 @@
+.textareaFieldContainer {
+  position: relative;
+  width: 100%;
+}
+.textareaFieldContainer.withCharacterCount textarea {
+  padding-bottom: 26px;
+}
+
+.textareaCharacterCount {
+  line-height: 15px;
+  font-size: 13px;
+  color: var(--inputLabelColor);
+  position: absolute;
+  right: 10px;
+  bottom: 10px;
+  pointer-events: none;
+}
+.textareaCharacterCount.textareaCharacterCountExceeded {
+  color: var(--inputErrorColor);
+}