npm - @x15ventures/x15-ui-library - Versions diffs - 3.15.0 → 3.16.0 - Mend

@x15ventures/x15-ui-library 3.15.0 → 3.16.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (145) hide show

package/dist/esm/components/form/formFields/subComponents/inputs/file/dragAndDrop/DragAndDropFileUpload.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"DragAndDropFileUpload.js","names":["React","useCallback","useEffect","useMemo","useRef","useState","arrowUpFromBracket","SvgIcon","useFormContext","HookFormWrapper","Spinner","FormFieldLabel","InputFile","ValidationMessages","NoHookFormContext","generateButtonClass","FileAttachmentsList","DEFAULT_UPLOAD_FILE_EXTENSIONS","DEFAULT_UPLOAD_FILE_TYPES","BLACKLISTED_FILE_TYPES","DragAndDropFileUpload","label","field","showSpinner","fileDisplayStyle","fileListSettings","fileList","validation","customContent","customCssClasses","labelStyle","labelAsButtonStyles","color","variant","labelUploadIcon","createElement","svgDefinition","multiple","restrictionsTxt","validFiles","extensions","fileTypes","maxFileCount","maxFileSize","onFilesChange","setValue","trigger","setError","activeFileList","setFileList","isTouched","setIsTouched","isDragActive","setIsDragActive","inputId","id","inputElRef","dialogOpenRef","current","document","getElementById","onFocus","noneSelected","files","length","name","window","addEventListener","removeEventListener","supportedFileTypes","join","validateAndCommit","validated","filter","file","ext","split","pop","toLowerCase","isBlacklisted","includes","isValidExt","isValidSize","size","clipped","slice","shouldValidate","shouldDirty","shouldTouch","handleFileInputChange","event","target","Array","from","handleDrop","dropped","handleFilesEdited","wrapperCssClass","wrapper","position","labelProps","isRequired","required","labelStyleAsButtonClasses","cssClass","buttonStyle","hideLabel","hide","labelCssClass","className","onDragOver","e","preventDefault","onDragLeave","currentTarget","onDrop","dataTransfer","labelId","htmlFor","onClick","type","defaultValue","accept","onInput","map","index","key","customFileListSettings","onFilesRemoved","onFilesEdited"],"sources":["../../../../../../../../../src/components/form/formFields/subComponents/inputs/file/dragAndDrop/DragAndDropFileUpload.tsx"],"sourcesContent":["'use client';\n\n/* eslint-disable no-unused-vars */\nimport React, { FormEvent, useCallback, useEffect, useMemo, useRef, useState } from 'react';\nimport { arrowUpFromBracket } from '@x15ventures/x15-ui-library-icons/iconDefinitions';\nimport { SvgIcon } from '@x15ventures/x15-ui-library-icons/svgIcon/SvgIcon';\nimport { useFormContext } from 'react-hook-form';\nimport { HookFormWrapper } from '../../../../../hookFormWrapper/HookFormWrapper';\nimport { Spinner } from '../../../../../../design/spinner/Spinner';\nimport { FormFieldLabel } from '../../../../subComponents/labels/FormFieldLabel';\nimport { InputFile } from '../../../../subComponents/inputs/file/InputFile';\nimport { ValidationMessages } from '../../../../../validation/ValidationMessages';\nimport { NoHookFormContext } from '../../../../utilities/formUtilities';\nimport { generateButtonClass } from '../../../../../buttons/button.helpers';\nimport { FileAttachmentsList } from '../fileAttachmentList/FileAttachmentsList';\nimport { DragAndDropFileUploadProps } from '../fileInputProps';\nimport {\n DEFAULT_UPLOAD_FILE_EXTENSIONS,\n DEFAULT_UPLOAD_FILE_TYPES,\n BLACKLISTED_FILE_TYPES\n} from '../../../../../../../constants';\n\nimport './dragAndDropFileUpload.scss';\n\nexport const DragAndDropFileUpload: React.FC<DragAndDropFileUploadProps> = (\n {\n label,\n field,\n showSpinner,\n fileDisplayStyle = 'names',\n fileListSettings,\n fileList,\n validation,\n customContent,\n customCssClasses,\n labelStyle = 'dragArea',\n labelAsButtonStyles = { color: 'primary', variant: 'outline' },\n labelUploadIcon = <SvgIcon svgDefinition={ arrowUpFromBracket } />,\n multiple = false,\n restrictionsTxt = '',\n validFiles = {\n extensions: DEFAULT_UPLOAD_FILE_EXTENSIONS,\n fileTypes: DEFAULT_UPLOAD_FILE_TYPES,\n maxFileCount: 5,\n maxFileSize: 52428800 // 50 MB\n },\n onFilesChange = () => {}\n }\n) => {\n const { setValue, trigger, setError } = useFormContext() \|\| NoHookFormContext;\n\n const [activeFileList, setFileList] = useState<File[]>(fileList \|\| []);\n const [isTouched, setIsTouched] = useState(false);\n const [isDragActive, setIsDragActive] = useState(false);\n\n const inputId = field.id;\n const inputElRef = useRef<HTMLInputElement \| null>(null);\n const dialogOpenRef = useRef(false);\n\n useEffect(() => {\n inputElRef.current = document.getElementById(inputId) as HTMLInputElement \| null;\n }, [inputId]);\n\n // Detect “Cancel” -> dialog closes, window regains focus, but input had no change.\n useEffect(() => {\n const onFocus = () => {\n if (!dialogOpenRef.current) { return; }\n dialogOpenRef.current = false;\n const noneSelected = !inputElRef.current?.files?.length;\n if (noneSelected) {\n // Trigger React Hook Form validators (e.g., required)\n trigger(field.name);\n }\n };\n window.addEventListener('focus', onFocus);\n return () => window.removeEventListener('focus', onFocus);\n }, [trigger, field.name]);\n\n const supportedFileTypes = useMemo(\n () => validFiles?.fileTypes?.join(', ') \|\| '',\n [validFiles?.fileTypes]\n );\n\n const validateAndCommit = useCallback(\n (files: File[]) => {\n // basic validations\n const validated = files.filter((file) => {\n const ext = file.name.split('.').pop()?.toLowerCase() \|\| '';\n const isBlacklisted = BLACKLISTED_FILE_TYPES.includes(ext);\n const isValidExt = validFiles.extensions ? validFiles.extensions.includes(ext) : true;\n const isValidSize = validFiles.maxFileSize ? file.size <= validFiles.maxFileSize : true;\n return !isBlacklisted && isValidExt && isValidSize;\n });\n\n const clipped = validFiles.maxFileCount\n ? validated.slice(0, validFiles.maxFileCount)\n : validated;\n\n setFileList(clipped);\n setIsTouched(true);\n\n setValue(field.name, clipped.length ? clipped : null, {\n shouldValidate: true,\n shouldDirty: true,\n shouldTouch: true\n });\n\n onFilesChange(clipped);\n },\n [field.name, onFilesChange, setValue, fileDisplayStyle, validFiles]\n );\n\n const handleFileInputChange = useCallback((event: FormEvent<HTMLInputElement>) => {\n const target = event.target as HTMLInputElement;\n const files = Array.from(target.files ?? []);\n validateAndCommit(files);\n trigger(field.name);\n dialogOpenRef.current = false;\n }, [trigger, field.name, validateAndCommit]);\n\n const handleDrop = useCallback((dropped: File[]) => {\n validateAndCommit(dropped);\n trigger(field.name);\n }, [trigger, field.name, validateAndCommit]);\n\n const handleFilesEdited = useCallback((files: File[]) => {\n // No need to validate again as they were already validated\n // Changes may include renaming or removing files\n setFileList(files);\n setValue(field.name, files.length > 0 ? files : null, {\n shouldValidate: true,\n shouldDirty: true,\n shouldTouch: true\n });\n onFilesChange(files);\n }, [field.name, setValue, onFilesChange]);\n\n const wrapperCssClass = `\n formField \n dragAndDropFileUpload \n ${ fileDisplayStyle === 'list' ? 'withFileList' : '' } \n ${ labelStyle \|\| '' }Style \n ${ customCssClasses?.wrapper \|\| '' } \n ${ isTouched ? 'touched' : '' } \n ${ typeof validation !== 'undefined' ? 'withValidation' : '' } \n ${ label?.position === 'inset' ? 'insetLabel' : '' } \n ${ isDragActive ? 'isDragActive' : '' }\n `;\n\n const labelProps = {\n ...label,\n inputId: inputId,\n isRequired: validation && typeof validation.required !== 'undefined',\n customContent\n };\n\n const labelStyleAsButtonClasses = generateButtonClass({\n cssClass: 'button dragAndDropFileUploadButtonLabel',\n buttonStyle: labelAsButtonStyles,\n hideLabel: label.hide\n });\n\n const labelCssClass = `\n ${ labelStyle === 'button' ? labelStyleAsButtonClasses : '' }\n ${ customCssClasses?.label \|\| '' } \n ${ showSpinner ? 'withSpinner' : '' } \n ${ label.hide ? 'hiddenLabel' : '' }\n `;\n\n return (\n <HookFormWrapper>\n <div\n className={ wrapperCssClass }\n onDragOver={ (e) => {\n e.preventDefault();\n if (!isDragActive) setIsDragActive(true);\n } }\n onDragLeave={ (e) => {\n if (e.currentTarget === e.target) setIsDragActive(false);\n } }\n onDrop={ (e) => {\n e.preventDefault();\n setIsDragActive(false);\n const files = Array.from(e.dataTransfer?.files ?? []);\n handleDrop(files);\n } }\n >\n <label\n id={ label.labelId \|\| `${ inputId }_label` }\n className={ labelCssClass }\n htmlFor={ inputId }\n onClick={ () => { dialogOpenRef.current = true; } }\n >\n <span className=\"dragAndDropFileUploadLabel\">\n { labelUploadIcon \|\| null }\n <FormFieldLabel { ...labelProps } />\n { restrictionsTxt && <span className=\"fileRestrictionsText\">{ restrictionsTxt }</span> }\n </span>\n\n <span className=\"inputContainer\">\n <InputFile\n {\n ...{\n label,\n field: {\n ...field,\n type: 'file',\n id: inputId, // ensure we can query it by id\n defaultValue: '',\n multiple,\n accept: supportedFileTypes,\n onInput: (event: FormEvent<HTMLInputElement>) => {\n handleFileInputChange(event);\n }\n },\n validation,\n showSpinner,\n customCssClasses,\n customContent\n }\n }\n />\n </span>\n\n { showSpinner && <Spinner /> }\n\n { fileDisplayStyle === 'names' && activeFileList.length > 0 && (\n <span className=\"uploadedFileNames\">\n { activeFileList.map((file, index) => (\n <small key={ index } className=\"uploadedFileName\">\n { file.name }{ index < activeFileList.length - 1 ? ', ' : '' }\n </small>\n )) }\n </span>\n ) }\n\n <ValidationMessages name={ field.name } validation={ validation } />\n </label>\n\n { fileDisplayStyle === 'list' && activeFileList.length > 0 && (\n <FileAttachmentsList\n customFileListSettings={ fileListSettings }\n files={ activeFileList }\n onFilesRemoved={ handleFilesEdited }\n onFilesEdited={ handleFilesEdited }\n />\n ) }\n </div>\n </HookFormWrapper>\n );\n};\n\nexport default { DragAndDropFileUpload };\n"],"mappings":"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","ignoreList":[]}
1	+ {"version":3,"file":"DragAndDropFileUpload.js","names":["React","useCallback","useEffect","useMemo","useRef","useState","arrowUpFromBracket","SvgIcon","useFormContext","HookFormWrapper","Spinner","FormFieldLabel","InputFile","ValidationMessages","generateButtonClass","FileAttachmentsList","DEFAULT_UPLOAD_FILE_EXTENSIONS","DEFAULT_UPLOAD_FILE_TYPES","BLACKLISTED_FILE_TYPES","DragAndDropFileUpload","props","createElement","formContext","DragAndDropFileUploadField","label","field","showSpinner","fileDisplayStyle","fileListSettings","fileList","validation","customContent","customCssClasses","labelStyle","labelAsButtonStyles","color","variant","labelUploadIcon","svgDefinition","multiple","restrictionsTxt","validFiles","extensions","fileTypes","maxFileCount","maxFileSize","onFilesChange","setValue","trigger","activeFileList","setFileList","isTouched","setIsTouched","isDragActive","setIsDragActive","inputId","id","inputElRef","dialogOpenRef","current","document","getElementById","onFocus","noneSelected","files","length","name","window","addEventListener","removeEventListener","supportedFileTypes","join","validateAndCommit","validated","filter","file","ext","split","pop","toLowerCase","isBlacklisted","includes","isValidExt","isValidSize","size","clipped","slice","shouldValidate","shouldDirty","shouldTouch","handleFileInputChange","event","target","Array","from","handleDrop","dropped","handleFilesEdited","wrapperCssClass","wrapper","position","labelProps","isRequired","required","labelStyleAsButtonClasses","cssClass","buttonStyle","hideLabel","hide","labelCssClass","className","onDragOver","e","preventDefault","onDragLeave","currentTarget","onDrop","dataTransfer","labelId","htmlFor","onClick","type","defaultValue","accept","onInput","map","index","key","customFileListSettings","onFilesRemoved","onFilesEdited"],"sources":["../../../../../../../../../src/components/form/formFields/subComponents/inputs/file/dragAndDrop/DragAndDropFileUpload.tsx"],"sourcesContent":["'use client';\n\nimport React, { FormEvent, useCallback, useEffect, useMemo, useRef, useState } from 'react';\nimport { arrowUpFromBracket } from '@x15ventures/x15-ui-library-icons/iconDefinitions';\nimport { SvgIcon } from '@x15ventures/x15-ui-library-icons/svgIcon/SvgIcon';\nimport { useFormContext } from 'react-hook-form';\nimport { HookFormWrapper } from '../../../../../hookFormWrapper/HookFormWrapper';\nimport { Spinner } from '../../../../../../design/spinner/Spinner';\nimport { FormFieldLabel } from '../../../../subComponents/labels/FormFieldLabel';\nimport { InputFile } from '../../../../subComponents/inputs/file/InputFile';\nimport { ValidationMessages } from '../../../../../validation/ValidationMessages';\nimport { generateButtonClass } from '../../../../../buttons/button.helpers';\nimport { FileAttachmentsList } from '../fileAttachmentList/FileAttachmentsList';\nimport { DragAndDropFileUploadProps } from '../fileInputProps';\nimport {\n DEFAULT_UPLOAD_FILE_EXTENSIONS,\n DEFAULT_UPLOAD_FILE_TYPES,\n BLACKLISTED_FILE_TYPES\n} from '../../../../../../../constants';\n\nimport './dragAndDropFileUpload.scss';\n\nexport const DragAndDropFileUpload: React.FC<DragAndDropFileUploadProps> = (props) => (\n <HookFormWrapper formContext={ props.formContext }>\n <DragAndDropFileUploadField { ...props } />\n </HookFormWrapper>\n);\n\nconst DragAndDropFileUploadField: React.FC<DragAndDropFileUploadProps> = (\n {\n label,\n field,\n showSpinner,\n fileDisplayStyle = 'names',\n fileListSettings,\n fileList,\n validation,\n customContent,\n customCssClasses,\n labelStyle = 'dragArea',\n labelAsButtonStyles = { color: 'primary', variant: 'outline' },\n labelUploadIcon = <SvgIcon svgDefinition={ arrowUpFromBracket } />,\n multiple = false,\n restrictionsTxt = '',\n validFiles = {\n extensions: DEFAULT_UPLOAD_FILE_EXTENSIONS,\n fileTypes: DEFAULT_UPLOAD_FILE_TYPES,\n maxFileCount: 5,\n maxFileSize: 52428800 // 50 MB\n },\n onFilesChange = () => {}\n }\n) => {\n const { setValue, trigger } = useFormContext();\n\n const [activeFileList, setFileList] = useState<File[]>(fileList \|\| []);\n const [isTouched, setIsTouched] = useState(false);\n const [isDragActive, setIsDragActive] = useState(false);\n\n const inputId = field.id;\n const inputElRef = useRef<HTMLInputElement \| null>(null);\n const dialogOpenRef = useRef(false);\n\n useEffect(() => {\n inputElRef.current = document.getElementById(inputId) as HTMLInputElement \| null;\n }, [inputId]);\n\n // Detect “Cancel” -> dialog closes, window regains focus, but input had no change.\n useEffect(() => {\n const onFocus = () => {\n if (!dialogOpenRef.current) { return; }\n dialogOpenRef.current = false;\n const noneSelected = !inputElRef.current?.files?.length;\n if (noneSelected) {\n // Trigger React Hook Form validators (e.g., required)\n trigger(field.name);\n }\n };\n window.addEventListener('focus', onFocus);\n return () => window.removeEventListener('focus', onFocus);\n }, [trigger, field.name]);\n\n const supportedFileTypes = useMemo(\n () => validFiles?.fileTypes?.join(', ') \|\| '',\n [validFiles?.fileTypes]\n );\n\n const validateAndCommit = useCallback(\n (files: File[]) => {\n // basic validations\n const validated = files.filter((file) => {\n const ext = file.name.split('.').pop()?.toLowerCase() \|\| '';\n const isBlacklisted = BLACKLISTED_FILE_TYPES.includes(ext);\n const isValidExt = validFiles.extensions ? validFiles.extensions.includes(ext) : true;\n const isValidSize = validFiles.maxFileSize ? file.size <= validFiles.maxFileSize : true;\n return !isBlacklisted && isValidExt && isValidSize;\n });\n\n const clipped = validFiles.maxFileCount\n ? validated.slice(0, validFiles.maxFileCount)\n : validated;\n\n setFileList(clipped);\n setIsTouched(true);\n\n setValue(field.name, clipped.length ? clipped : null, {\n shouldValidate: true,\n shouldDirty: true,\n shouldTouch: true\n });\n\n onFilesChange(clipped);\n },\n [field.name, onFilesChange, setValue, fileDisplayStyle, validFiles]\n );\n\n const handleFileInputChange = useCallback((event: FormEvent<HTMLInputElement>) => {\n const target = event.target as HTMLInputElement;\n const files = Array.from(target.files ?? []);\n validateAndCommit(files);\n trigger(field.name);\n dialogOpenRef.current = false;\n }, [trigger, field.name, validateAndCommit]);\n\n const handleDrop = useCallback((dropped: File[]) => {\n validateAndCommit(dropped);\n trigger(field.name);\n }, [trigger, field.name, validateAndCommit]);\n\n const handleFilesEdited = useCallback((files: File[]) => {\n // No need to validate again as they were already validated\n // Changes may include renaming or removing files\n setFileList(files);\n setValue(field.name, files.length > 0 ? files : null, {\n shouldValidate: true,\n shouldDirty: true,\n shouldTouch: true\n });\n onFilesChange(files);\n }, [field.name, setValue, onFilesChange]);\n\n const wrapperCssClass = `\n formField \n dragAndDropFileUpload \n ${ fileDisplayStyle === 'list' ? 'withFileList' : '' } \n ${ labelStyle \|\| '' }Style \n ${ customCssClasses?.wrapper \|\| '' } \n ${ isTouched ? 'touched' : '' } \n ${ typeof validation !== 'undefined' ? 'withValidation' : '' } \n ${ label?.position === 'inset' ? 'insetLabel' : '' } \n ${ isDragActive ? 'isDragActive' : '' }\n `;\n\n const labelProps = {\n ...label,\n inputId: inputId,\n isRequired: validation && typeof validation.required !== 'undefined',\n customContent\n };\n\n const labelStyleAsButtonClasses = generateButtonClass({\n cssClass: 'button dragAndDropFileUploadButtonLabel',\n buttonStyle: labelAsButtonStyles,\n hideLabel: label.hide\n });\n\n const labelCssClass = `\n ${ labelStyle === 'button' ? labelStyleAsButtonClasses : '' }\n ${ customCssClasses?.label \|\| '' } \n ${ showSpinner ? 'withSpinner' : '' } \n ${ label.hide ? 'hiddenLabel' : '' }\n `;\n\n return (\n <div\n className={ wrapperCssClass }\n onDragOver={ (e) => {\n e.preventDefault();\n if (!isDragActive) setIsDragActive(true);\n } }\n onDragLeave={ (e) => {\n if (e.currentTarget === e.target) setIsDragActive(false);\n } }\n onDrop={ (e) => {\n e.preventDefault();\n setIsDragActive(false);\n const files = Array.from(e.dataTransfer?.files ?? []);\n handleDrop(files);\n } }\n >\n <label\n id={ label.labelId \|\| `${ inputId }_label` }\n className={ labelCssClass }\n htmlFor={ inputId }\n onClick={ () => { dialogOpenRef.current = true; } }\n >\n <span className=\"dragAndDropFileUploadLabel\">\n { labelUploadIcon \|\| null }\n <FormFieldLabel { ...labelProps } />\n { restrictionsTxt && <span className=\"fileRestrictionsText\">{ restrictionsTxt }</span> }\n </span>\n\n <span className=\"inputContainer\">\n <InputFile\n {\n ...{\n label,\n field: {\n ...field,\n type: 'file',\n id: inputId, // ensure we can query it by id\n defaultValue: '',\n multiple,\n accept: supportedFileTypes,\n onInput: (event: FormEvent<HTMLInputElement>) => {\n handleFileInputChange(event);\n }\n },\n validation,\n showSpinner,\n customCssClasses,\n customContent\n }\n }\n />\n </span>\n\n { showSpinner && <Spinner /> }\n\n { fileDisplayStyle === 'names' && activeFileList.length > 0 && (\n <span className=\"uploadedFileNames\">\n { activeFileList.map((file, index) => (\n <small key={ index } className=\"uploadedFileName\">\n { file.name }{ index < activeFileList.length - 1 ? ', ' : '' }\n </small>\n )) }\n </span>\n ) }\n\n <ValidationMessages name={ field.name } validation={ validation } />\n </label>\n\n { fileDisplayStyle === 'list' && activeFileList.length > 0 && (\n <FileAttachmentsList\n customFileListSettings={ fileListSettings }\n files={ activeFileList }\n onFilesRemoved={ handleFilesEdited }\n onFilesEdited={ handleFilesEdited }\n />\n ) }\n </div>\n );\n};\n\nexport default { DragAndDropFileUpload };\n"],"mappings":"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","ignoreList":[]}

package/dist/esm/components/form/formFields/subComponents/inputs/radio/styled/StyledRadioGroup.js CHANGED Viewed

@@ -1,8 +1,8 @@
 'use client';
 import _extends from "@babel/runtime/helpers/extends";
-import React, { useRef, useState } from 'react';
-import { useFormContext } from 'react-hook-form';
+import React, { useEffect, useRef, useState } from 'react';
+import { useFormContext, useWatch } from 'react-hook-form';
 import { useTabbableInputGroup } from '../../../../../../../hooks';
 import { FormFieldLabel } from '../../../labels/FormFieldLabel';
 import { StyledRadioInput } from './StyledRadioInput';
@@ -26,11 +26,19 @@ export const StyledRadioGroup = ({
 }) => {
   const [isTouched, setIsTouched] = useState(false);
   const {
-    getValues,
+    control,
     setValue
   } = useFormContext();
-  const [groupValue, setGroupValue] = useState(typeof defaultGroupValue !== 'undefined' ? defaultGroupValue : getValues(groupName));
+  const groupValue = useWatch({
+    control,
+    name: groupName
+  });
   const radioInputsGroup = useRef(null);
+  useEffect(() => {
+    if (typeof defaultGroupValue !== 'undefined') {
+      setValue(groupName, defaultGroupValue);
+    }
+  }, [defaultGroupValue, groupName, setValue]);
   useTabbableInputGroup({
     groupWrappingElementRef: radioInputsGroup
   });
@@ -39,8 +47,10 @@ export const StyledRadioGroup = ({
       target
     } = event;
     const newValue = target.value;
-    setValue(groupName, newValue);
-    setGroupValue(newValue);
+    setValue(groupName, newValue, {
+      shouldValidate: true,
+      shouldDirty: true
+    });
     setIsTouched(true);
     onChange(newValue);
   };

package/dist/esm/components/form/formFields/subComponents/inputs/radio/styled/StyledRadioGroup.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"StyledRadioGroup.js","names":["_extends","React","useRef","useState","useFormContext","useTabbableInputGroup","FormFieldLabel","StyledRadioInput","ValidationMessages","Spinner","StyledRadioGroup","group","id","name","groupName","value","defaultGroupValue","label","layout","validation","showSpinner","customCssClasses","customContent","onChange","radioInputs","isTouched","setIsTouched","~~getValues~~","setValue","groupValue","~~setGroupValue","~~radioInputsGroup","groupWrappingElementRef","HandleOnChange","event","target","newValue","wrapperCssClass","wrapper","position","labelProps","isRequired","required","createElement","onBlur","className","hide","ref","length","map","radioInput","key","field","isChecked","defaultChecked"],"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":"AAAA,YAAY;;AAAC,OAAAA,QAAA;AAEb,OAAOC,KAAK,IAAIC,MAAM,EAAEC,QAAQ,QAAQ,OAAO;~~AAC/C~~,SAASC,cAAc,QAAQ,iBAAiB;~~AAEhD~~,SAASC,qBAAqB,QAAQ,4BAA4B;AAClE,SAASC,cAAc,QAAQ,gCAAgC;AAC/D,SAASC,gBAAgB,QAAQ,oBAAoB;AACrD,SAASC,kBAAkB,QAAQ,8CAA8C;AACjF,SAASC,OAAO,QAAQ,0CAA0C;AAElE,OAAO,yBAAyB;AAEhC,OAAO,MAAMC,gBAAiD,GAAGA,CAC/D;EACEC,KAAK,EAAE;IACLC,EAAE;IACFC,IAAI,EAAEC,SAAS;IACfC,KAAK,EAAEC,iBAAiB;IACxBC,KAAK;IACLC,MAAM;IACNC,UAAU;IACVC,WAAW;IACXC,gBAAgB;IAChBC,aAAa;IACbC,QAAQ,GAAGA,CAAA,KAAM,CAAC;EACpB,CAAC;EACDC;AACF,CAAC,KACE;EACH,MAAM,CAACC,SAAS,EAAEC,YAAY,CAAC,~~GAAGvB~~,QAAQ,CAAC,KAAK,CAAC;EACjD,MAAM;~~IAAEwB~~,~~SAAS~~;IAAEC;EAAS,CAAC,~~GAAGxB~~,cAAc,CAAC,CAAC;~~EAChD~~,~~MAAM~~,~~CAACyB,~~UAAU,EAAEC,~~aAAa~~,CAAC,~~GAAG3B~~,~~QAAQ~~,CAAC,~~OAAOa~~,iBAAiB,KAAK,WAAW,~~GAAGA~~,~~iBAAiB~~,~~GAAGW~~,SAAS,~~CAACb~~,~~SAAS~~,CAAC,CAAC~~;EACjI~~,~~MAAMiB~~,~~gBAAgB~~,~~GAAG7B~~,~~MAAM~~,~~CAAC~~,~~IAAI~~,CAAC;~~EAErCG~~,qBAAqB,CAAC;~~IAAE2B~~,uBAAuB,EAAED;EAAiB,CAAC,CAAC;EAEpE,MAAME,cAAc,GAAIC,KAA0C,IAAK;IACrE,MAAM;MAAEC;IAAO,CAAC,GAAGD,KAAK;IACxB,MAAME,QAAQ,GAAGD,MAAM,~~CAACpB~~,KAAK;IAC7Ba,QAAQ,CAACd,SAAS,~~EAAEsB~~,QAAQ,~~CAAC~~;~~IAC7BN~~,~~aAAa~~,~~CAACM~~,~~QAAQ~~,CAAC;~~IACvBV~~,YAAY,CAAC,IAAI,CAAC;IAClBH,QAAQ,~~CAACa~~,QAAQ,CAAC;EACpB,CAAC;EAED,~~MAAMC~~,eAAe,GAAG,+~~BAAgCnB~~,MAAM,IAAI,EAAE,IAAMO,SAAS,GAAG,SAAS,GAAG,EAAE,IAAMJ,gBAAgB,~~EAAEiB~~,OAAO,IAAI,EAAE,~~IAAMrB~~,KAAK,~~EAAEsB~~,QAAQ,IAAI,EAAE,EAAG;EAEvK,MAAMC,UAAU,GAAG;IACjB,~~GAAGvB~~,KAAK;~~IACRwB~~,UAAU,~~EAAEtB~~,UAAU,IAAI,OAAOA,UAAU,~~CAACuB~~,QAAQ,KAAK,WAAW;~~IACpEpB~~;EACF,CAAC;EAED,~~oBACErB~~,KAAA,~~CAAA0C~~,aAAA;~~IAAU/B~~,EAAE,EAAGA,EAAI;~~IAACgC~~,MAAM,EAAGA,CAAA,~~KAAMlB~~,YAAY,CAAC,IAAI,CAAG;~~IAACmB~~,SAAS,EAAGR;EAAiB,~~gBACnFpC~~,KAAA,~~CAAA0C~~,aAAA;IAAME,SAAS,EAAC;EAAS,GAAC,8HAGpB,CAAC,~~eAEP5C~~,KAAA,~~CAAA0C~~,aAAA;IAAQE,SAAS,~~EAAG5B~~,KAAK,~~CAAC6B~~,IAAI,GAAG,SAAS,GAAG;EAAI,~~gBAAC7C~~,KAAA,~~CAAA0C~~,aAAA,~~CAACrC~~,cAAc,~~EAAMkC~~,UAAc,CAAS,CAAC,eAE/~~FvC~~,KAAA,~~CAAA0C~~,aAAA;IAAKI,GAAG,~~EAAGhB~~,gBAAkB;~~IAACc~~,SAAS,EAAG,~~2BAA4BrB~~,WAAW,~~CAACwB~~,MAAM;EAAK,~~GAEzFxB~~,WAAW,~~CAACyB~~,GAAG,CAAEC,UAAU,~~iBACzBjD~~,KAAA,~~CAAA0C~~,aAAA,~~CAACpC~~,gBAAgB,~~EAAAP~~,QAAA;~~IACfmD~~,GAAG,EAAGD,UAAU,CAACE,KAAK,~~CAACxC~~;EAAI,~~GAGpBsC~~,UAAU;~~IACbjC~~,KAAK,EAAE;MACL,~~GAAGiC~~,UAAU,~~CAACjC~~,KAAK;~~MACnBoC~~,SAAS,~~EAAExB~~,UAAU,~~KAAKqB~~,UAAU,CAACE,KAAK,~~CAACrC~~;IAC7C,CAAC;~~IACDqC~~,KAAK,EAAE;MACL,GAAGF,UAAU,CAACE,KAAK;MACnBE,cAAc,~~EAAEzB~~,UAAU,~~KAAKqB~~,UAAU,CAACE,KAAK,~~CAACrC~~,KAAK;MACrDD,SAAS;MACTS,QAAQ,~~EAAEU~~;IACZ;EAAC,EAGN,CACF,CAEA,CAAC,~~EAGJb~~,WAAW,~~iBAAInB~~,KAAA,~~CAAA0C~~,aAAA,~~CAAClC~~,OAAO,MAAE,CAAC,~~eAG5BR~~,KAAA,~~CAAA0C~~,aAAA,~~CAACnC~~,kBAAkB;IAACK,IAAI,EAAGC,SAAW;IAACK,UAAU,EAAGA;EAAY,CAAE,CAC1D,CAAC;AAEf,CAAC;AAED,eAAeT,gBAAgB","ignoreList":[]}
1	+ {"version":3,"file":"StyledRadioGroup.js","names":["_extends","React","useEffect","useRef","useState","useFormContext","useWatch","useTabbableInputGroup","FormFieldLabel","StyledRadioInput","ValidationMessages","Spinner","StyledRadioGroup","group","id","name","groupName","value","defaultGroupValue","label","layout","validation","showSpinner","customCssClasses","customContent","onChange","radioInputs","isTouched","setIsTouched","control","setValue","groupValue","radioInputsGroup","groupWrappingElementRef","HandleOnChange","event","target","newValue","shouldValidate","shouldDirty","wrapperCssClass","wrapper","position","labelProps","isRequired","required","createElement","onBlur","className","hide","ref","length","map","radioInput","key","field","isChecked","defaultChecked"],"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/esm/components/form/formFields/subComponents/inputs/text/InputText.js CHANGED Viewed

@@ -2,7 +2,6 @@
 import React from 'react';
 import { useFormContext } from 'react-hook-form';
-import { NoHookFormContext } from '../../../utilities/formUtilities';
 import { isValidationRuleWithValue } from '../../../../../../helpers/validationHelpers';
 export const InputText = ({
   field: {
@@ -27,18 +26,19 @@ export const InputText = ({
     register,
     getFieldState,
     setValue
-  } = useFormContext() || NoHookFormContext;
+  } = 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 => {
@@ -46,9 +46,14 @@ export 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);
@@ -67,6 +72,7 @@ export const InputText = ({
     return {};
   };
   const inputProps = {
+    ...htmlNativeDomProps,
     type,
     id,
     className: cssClass,
@@ -84,12 +90,12 @@ export const InputText = ({
     ...addLengthValidatorProps('max'),
     ...addLengthValidatorProps('min'),
     ...register(name, {
-      onChange: HandleAutoFill,
+      onChange,
       onBlur: HandleOnBlur,
       ...validation
     }),
-    onKeyDown: HandleKeyEvent,
-    ...htmlNativeDomProps
+    onAnimationStart: HandleAutoFill,
+    onKeyDown: HandleKeyEvent
   };
   return /*#__PURE__*/React.createElement(React.Fragment, null, customContent?.preField && /*#__PURE__*/React.createElement("span", {
     className: `preField preField_${type}Input`

package/dist/esm/components/form/formFields/subComponents/inputs/text/InputText.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"InputText.js","names":["React","useFormContext","~~NoHookFormContext","~~isValidationRuleWithValue","InputText","field","type","id","name","placeholder","defaultValue","disabled","onBlur","onChange","onKeyDown","onTouched","htmlNativeDomProps","validation","showSpinner","customCssClasses","customContent","register","getFieldState","setValue","fieldState","HandleAutoFill","event","~~target~~","~~newValue~~","value","HandleOnBlur","trim","HandleKeyEvent","cssClass","input","invalid","addLengthValidatorProps","validatorKey","inputProps","className","required","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;;AAEZ,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,cAAc,QAAQ,iBAAiB;AAEhD,SAASC,~~iBAAiB,QAAQ,kCAAkC;AACpE,SAASC,~~yBAAyB,QAAQ,6CAA6C;AAIvF,OAAO,MAAMC,SAAmC,GAAGA,CACjD;EACEC,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,~~GAAGtB~~,cAAc,CAAC,CAAC~~,IAAIC,iBAAiB~~;~~EACnF~~,MAAMsB,UAAU,GAAGF,aAAa,CAACd,IAAI,CAAC;EAEtC,MAAMiB,cAAc,GAAIC,~~KAAyC~~,IAAK;~~IACpE,MAAM~~;~~MAAEC~~;~~IAAO~~,~~CAAC~~,~~GAAGD~~,KAAK~~;IACxB~~,~~IAAIC~~,~~MAAM,~~EAAE;~~MACV~~,~~MAAMC,~~QAAQ,~~GAAGD~~,~~MAAM~~,~~CAACE~~,KAAK~~;MAC7B~~,~~IAAIvB~~,~~IAAI~~,KAAK,~~QAAQ~~,~~IAAIA~~,IAAI,~~KAAK~~,~~MAAM,~~EAAE;~~QACxCiB~~,~~QAAQ~~,~~CAACf~~,~~IAAI,EAAEoB,~~QAAQ,CAAC;~~MAC1B;MACAf~~,~~QAAQ~~,~~CAACa~~,KAAK,CAAC;~~IACjB~~;EACF,CAAC;EAED,~~MAAMI~~,YAAY,~~GAAIJ~~,KAAyC,IAAK;IAClE,MAAM;~~MAAEC~~;IAAO,CAAC,~~GAAGD~~,KAAK;IACxB,~~IAAIC~~,MAAM,EAAE;MACV,~~MAAMC~~,~~QAAQ~~,~~GAAGD~~,MAAM,~~CAACE~~,KAAK~~;MAC7B~~,~~IAAIvB~~,IAAI,KAAK,MAAM,~~EAAE~~;~~QACnBiB~~,QAAQ,CAACf,IAAI,~~EAAEoB~~,~~QAAQ~~,~~CAACG~~,IAAI,~~CAAC~~,CAAC,CAAC;~~MACjC~~;MACAhB,SAAS,CAAC,CAAC;MACXH,MAAM,CAACc,KAAK,CAAC;IACf;EACF,CAAC;EAED,~~MAAMM~~,cAAc,~~GAClBN~~,KAE0C,IACvC;IACHZ,SAAS,CAACY,KAAK,CAAC;EAClB,CAAC;EAED,~~MAAMO~~,QAAQ,GAAG,~~GAAId~~,gBAAgB,~~EAAEe~~,KAAK,IAAI,EAAE,~~GAAKV~~,UAAU,IAAIA,UAAU,~~EAAEW~~,OAAO,GAAG,eAAe,GAAG,EAAE,EAAG;EAElH,MAAMC,uBAAuB,GAAIC,YAA2B,IAAK;IAC/D,~~IACEpB~~,UAAU,IACP,OAAOA,UAAU,~~CAACoB~~,YAAY,CAAC,KAAK,WAAW,IAC/~~ClC~~,yBAAyB,CAACc,UAAU,~~CAACoB~~,YAAY,CAAC,CAAC,EACtD;MACA,OAAO;QACL,CAACA,YAAY,~~GAAGpB~~,UAAU,~~CAACoB~~,YAAY,CAAC,~~EAAER~~;MAC5C,CAAC;IACH;IACA,OAAO,CAAC,CAAC;EACX,CAAC;EAED,~~MAAMS~~,UAAU,GAAG;~~IACjBhC~~,IAAI;IACJC,EAAE;~~IACFgC~~,SAAS,EAAEN,QAAQ;~~IACnBxB~~,WAAW;IACXC,YAAY;IACZC,QAAQ;IACR,IAAIO,WAAW,GAAG;MAAEP,QAAQ,EAAE;IAAK,CAAC,GAAG,CAAC,CAAC,CAAC;IAC1C,IAAIM,UAAU,IAAI,OAAOA,UAAU,~~CAACuB~~,QAAQ,KAAK,WAAW,GAAG;MAAEA,QAAQ,EAAE;IAAK,CAAC,GAAG,CAAC,CAAC,CAAC;IACvF,GAAIJ,uBAAuB,CAAC,WAAW,CAAE;IACzC,GAAIA,uBAAuB,CAAC,WAAW,CAAE;IACzC,GAAIA,uBAAuB,CAAC,KAAK,CAAE;IACnC,GAAIA,uBAAuB,CAAC,KAAK,CAAE;IACnC,~~GAAGf~~,QAAQ,CACTb,IAAI,EACJ;MACEK,QAAQ~~,EAAEY,cAAc~~;~~MACxBb~~,MAAM,~~EAAEkB~~,YAAY;MACpB,~~GAAGb~~;IACL,CACF,CAAC;~~IACDH~~,~~SAAS~~,~~EAAEkB~~,cAAc;~~IACzB~~,~~GAAGhB~~;~~EACL~~,CAAC;EAED,~~oBACEhB~~,KAAA,~~CAAAyC~~,aAAA,~~CAAAzC~~,KAAA,~~CAAA0C~~,QAAA,~~QAEItB~~,aAAa,~~EAAEuB~~,QAAQ,~~iBACpB3C~~,KAAA,~~CAAAyC~~,aAAA;~~IAAMF~~,SAAS,EAAG,~~qBAAsBjC~~,IAAI;EAAU,GAAGc,aAAa,~~EAAEuB~~,QAAgB,CAAC,~~eAG9F3C~~,KAAA,~~CAAAyC~~,aAAA,~~UAAYH~~,UAAc,CAAC,~~EAGzBlB~~,aAAa,~~EAAEwB~~,SAAS,~~iBACrB5C~~,KAAA,~~CAAAyC~~,aAAA;~~IAAMF~~,SAAS,EAAG,~~uBAAwBjC~~,IAAI;EAAU,GAAGc,aAAa,~~EAAEwB~~,SAAiB,CAEhG,CAAC;AAEP,CAAC","ignoreList":[]}
1	+ {"version":3,"file":"InputText.js","names":["React","useFormContext","isValidationRuleWithValue","InputText","field","type","id","name","placeholder","defaultValue","disabled","onBlur","onChange","onKeyDown","onTouched","htmlNativeDomProps","validation","showSpinner","customCssClasses","customContent","register","getFieldState","setValue","fieldState","HandleAutoFill","event","animationName","currentTarget","value","shouldValidate","shouldDirty","target","HandleOnBlur","trim","trimmedValue","HandleKeyEvent","cssClass","input","invalid","addLengthValidatorProps","validatorKey","inputProps","className","required","onAnimationStart","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/esm/components/form/formFields/subComponents/select/Select.js CHANGED Viewed

@@ -4,8 +4,7 @@ import React from 'react';
 import { useFormContext } from 'react-hook-form';
 import { HookFormWrapper } from '../../../hookFormWrapper/HookFormWrapper';
 import { isAnObject } from '../../../../../helpers/objectHelpers';
-import { NoHookFormContext } from '../../utilities/formUtilities';
-export const Select = ({
+const SelectField = ({
   field: {
     id,
     name,
@@ -27,7 +26,7 @@ export const Select = ({
   const {
     register,
     getFieldState
-  } = useFormContext() || NoHookFormContext;
+  } = useFormContext();
   const fieldState = getFieldState(name);
   const HandleAutoFill = event => {
     const {
@@ -47,7 +46,6 @@ export const Select = ({
     }
   };
   const HandleKeyEvent = event => {
-    onTouched();
     onKeyDown(event);
   };
   const cssClass = `${customCssClasses?.input || ''}${fieldState && fieldState?.invalid ? ' invalidField' : ''}`;
@@ -84,7 +82,7 @@ export const Select = ({
       value: option
     }, option);
   };
-  return /*#__PURE__*/React.createElement(HookFormWrapper, null, customContent?.preField && /*#__PURE__*/React.createElement("span", {
+  return /*#__PURE__*/React.createElement(React.Fragment, null, customContent?.preField && /*#__PURE__*/React.createElement("span", {
     className: "preField"
   }, customContent?.preField), /*#__PURE__*/React.createElement("select", selectProps, includeEmptyOption && /*#__PURE__*/React.createElement("option", {
     value: ""
@@ -92,4 +90,7 @@ export const Select = ({
     className: "postField"
   }, customContent?.postField));
 };
+export const Select = props => /*#__PURE__*/React.createElement(HookFormWrapper, {
+  formContext: props.formContext
+}, /*#__PURE__*/React.createElement(SelectField, props));
 //# sourceMappingURL=Select.js.map

package/dist/esm/components/form/formFields/subComponents/select/Select.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Select.js","names":["React","useFormContext","HookFormWrapper","isAnObject","~~NoHookFormContext~~","~~Select","~~field","id","name","placeholder","defaultValue","onBlur","onChange","onKeyDown","onTouched","includeEmptyOption","emptyOptionLabel","options","validation","showSpinner","customCssClasses","customContent","register","getFieldState","fieldState","HandleAutoFill","event","target","HandleOnBlur","HandleKeyEvent","cssClass","input","invalid","selectProps","className","disabled","required","renderOption","option","typedOption","createElement","key","value","JSON","stringify","label","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":"AAAA,YAAY;;AAEZ,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,cAAc,QAAQ,iBAAiB;AAChD,SAASC,eAAe,QAAQ,0CAA0C;AAC1E,SAASC,UAAU,QAAQ,sCAAsC;~~AAOjE~~,~~SAASC,iBAAiB,QAAQ,+BAA+B;AAMjE,OAAO,~~MAAMC,~~MAA6B~~,GAAGA,~~CAC3C~~;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,CAAC;IACpBC,kBAAkB,GAAG,IAAI;IACzBC,gBAAgB,GAAG,eAAe;IAClCC;EACF,CAAC;EACDC,UAAU;EACVC,WAAW;EACXC,gBAAgB;EAChBC;AACF,CAAC,KACE;EACH,MAAM;IAAEC,QAAQ;IAAEC;EAAc,CAAC,~~GAAGtB~~,cAAc,CAAC,CAAC~~,IAAIG,iBAAiB~~;~~EACzE~~,~~MAAMoB~~,UAAU,GAAGD,aAAa,CAACf,IAAI,CAAC;EAEtC,MAAMiB,cAAc,GAAIC,KAAyC,IAAK;IACpE,MAAM;MAAEC;IAAO,CAAC,GAAGD,KAAK;IACxB,IAAIC,MAAM,EAAE;MACVf,QAAQ,CAACc,KAAK,CAAC;IACjB;EACF,CAAC;EAED,MAAME,YAAY,GAAIF,KAAyC,IAAK;IAClE,MAAM;MAAEC;IAAO,CAAC,GAAGD,KAAK;IACxB,IAAIC,MAAM,EAAE;MACVb,SAAS,CAAC,CAAC;MACXH,MAAM,CAACe,KAAK,CAAC;IACf;EACF,CAAC;EAED,MAAMG,cAAc,GAClBH,KAE0C,IACvC;~~IACHZ~~,SAAS,~~CAAC,CAAC;IACXD,SAAS,~~CAACa,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,WAAW,GAAG;IAClB1B,EAAE;IACF2B,SAAS,EAAEJ,QAAQ;IACnBrB,WAAW;IACXC,YAAY;IACZ,IAAIS,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,CACTd,IAAI,EACJ;MACEI,QAAQ,EAAEa,cAAc;MACxBd,MAAM,EAAEiB,YAAY;MACpB,GAAGV;IACL,CACF,CAAC;IACDL,SAAS,EAAEgB;EACb,CAAC;EAED,MAAMQ,YAAY,GAAIC,MAAwB,IAAK;IACjD,~~IAAInC~~,UAAU,~~CAACmC~~,MAAM,CAAC,EAAE;MACtB,MAAMC,WAAW,GAAGD,MAAgC;MACpD,~~oBACEtC~~,KAAA,~~CAAAwC~~,aAAA;QAAQC,GAAG,EAAG,GAAIlC,EAAE,IAAMgC,WAAW,CAACG,KAAK,EAAK;QAAC,eAAcC,IAAI,CAACC,SAAS,CAACL,WAAW,CAAG;QAACG,KAAK,EAAGH,WAAW,CAACG;MAAiB,GAC9HH,WAAW,CAACM,KACR,CAAC;IAEb;IACA,~~oBACE7C~~,KAAA,~~CAAAwC~~,aAAA;MAAQC,GAAG,EAAG,GAAIlC,EAAE,IAAM+B,MAAM,EAAK;MAAC,eAAcK,IAAI,CAACC,SAAS,CAACN,MAAM,CAAG;MAACI,KAAK,EAAGJ;IAAkB,GACnGA,MACI,CAAC;EAEb,CAAC;EAED,~~oBACEtC~~,KAAA,~~CAAAwC~~,aAAA,~~CAACtC~~,~~eAAe~~,~~QACZmB~~,aAAa,~~EAAEyB~~,QAAQ,iBAAI9C,KAAA,~~CAAAwC~~,aAAA;IAAMN,SAAS,EAAC;EAAU,GAAGb,aAAa,~~EAAEyB~~,QAAgB,CAAC,eAE1F9C,KAAA,~~CAAAwC~~,aAAA,WAAaP,WAAW,EACpBlB,kBAAkB,~~iBAAIf~~,KAAA,~~CAAAwC~~,aAAA;IAAQE,KAAK,EAAC;EAAE,GAAG1B,gBAA0B,CAAC,EACnEC,OAAO,~~EAAyB8B~~,GAAG,~~CAACV~~,YAAY,CAC7C,CAAC,EAEPhB,aAAa,~~EAAE2B~~,SAAS,iBAAIhD,KAAA,~~CAAAwC~~,aAAA;IAAMN,SAAS,EAAC;EAAW,GAAGb,aAAa,~~EAAE2B~~,SAAiB,~~CAC7E~~,CAAC;~~AAEtB~~,CAAC","ignoreList":[]}
1	+ {"version":3,"file":"Select.js","names":["React","useFormContext","HookFormWrapper","isAnObject","SelectField","field","id","name","placeholder","defaultValue","onBlur","onChange","onKeyDown","onTouched","includeEmptyOption","emptyOptionLabel","options","validation","showSpinner","customCssClasses","customContent","register","getFieldState","fieldState","HandleAutoFill","event","target","HandleOnBlur","HandleKeyEvent","cssClass","input","invalid","selectProps","className","disabled","required","renderOption","option","typedOption","createElement","key","value","JSON","stringify","label","Fragment","preField","map","postField","Select","props","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":"AAAA,YAAY;;AAEZ,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,cAAc,QAAQ,iBAAiB;AAChD,SAASC,eAAe,QAAQ,0CAA0C;AAC1E,SAASC,UAAU,QAAQ,sCAAsC;AAYjE,MAAMC,WAAkC,GAAGA,CACzC;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,CAAC;IACpBC,kBAAkB,GAAG,IAAI;IACzBC,gBAAgB,GAAG,eAAe;IAClCC;EACF,CAAC;EACDC,UAAU;EACVC,WAAW;EACXC,gBAAgB;EAChBC;AACF,CAAC,KACE;EACH,MAAM;IAAEC,QAAQ;IAAEC;EAAc,CAAC,GAAGrB,cAAc,CAAC,CAAC;EACpD,MAAMsB,UAAU,GAAGD,aAAa,CAACf,IAAI,CAAC;EAEtC,MAAMiB,cAAc,GAAIC,KAAyC,IAAK;IACpE,MAAM;MAAEC;IAAO,CAAC,GAAGD,KAAK;IACxB,IAAIC,MAAM,EAAE;MACVf,QAAQ,CAACc,KAAK,CAAC;IACjB;EACF,CAAC;EAED,MAAME,YAAY,GAAIF,KAAyC,IAAK;IAClE,MAAM;MAAEC;IAAO,CAAC,GAAGD,KAAK;IACxB,IAAIC,MAAM,EAAE;MACVb,SAAS,CAAC,CAAC;MACXH,MAAM,CAACe,KAAK,CAAC;IACf;EACF,CAAC;EAED,MAAMG,cAAc,GAClBH,KAE0C,IACvC;IACHb,SAAS,CAACa,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,WAAW,GAAG;IAClB1B,EAAE;IACF2B,SAAS,EAAEJ,QAAQ;IACnBrB,WAAW;IACXC,YAAY;IACZ,IAAIS,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,CACTd,IAAI,EACJ;MACEI,QAAQ,EAAEa,cAAc;MACxBd,MAAM,EAAEiB,YAAY;MACpB,GAAGV;IACL,CACF,CAAC;IACDL,SAAS,EAAEgB;EACb,CAAC;EAED,MAAMQ,YAAY,GAAIC,MAAwB,IAAK;IACjD,IAAIlC,UAAU,CAACkC,MAAM,CAAC,EAAE;MACtB,MAAMC,WAAW,GAAGD,MAAgC;MACpD,oBACErC,KAAA,CAAAuC,aAAA;QAAQC,GAAG,EAAG,GAAIlC,EAAE,IAAMgC,WAAW,CAACG,KAAK,EAAK;QAAC,eAAcC,IAAI,CAACC,SAAS,CAACL,WAAW,CAAG;QAACG,KAAK,EAAGH,WAAW,CAACG;MAAiB,GAC9HH,WAAW,CAACM,KACR,CAAC;IAEb;IACA,oBACE5C,KAAA,CAAAuC,aAAA;MAAQC,GAAG,EAAG,GAAIlC,EAAE,IAAM+B,MAAM,EAAK;MAAC,eAAcK,IAAI,CAACC,SAAS,CAACN,MAAM,CAAG;MAACI,KAAK,EAAGJ;IAAkB,GACnGA,MACI,CAAC;EAEb,CAAC;EAED,oBACErC,KAAA,CAAAuC,aAAA,CAAAvC,KAAA,CAAA6C,QAAA,QACIzB,aAAa,EAAE0B,QAAQ,iBAAI9C,KAAA,CAAAuC,aAAA;IAAMN,SAAS,EAAC;EAAU,GAAGb,aAAa,EAAE0B,QAAgB,CAAC,eAE1F9C,KAAA,CAAAuC,aAAA,WAAaP,WAAW,EACpBlB,kBAAkB,iBAAId,KAAA,CAAAuC,aAAA;IAAQE,KAAK,EAAC;EAAE,GAAG1B,gBAA0B,CAAC,EACnEC,OAAO,EAAyB+B,GAAG,CAACX,YAAY,CAC7C,CAAC,EAEPhB,aAAa,EAAE4B,SAAS,iBAAIhD,KAAA,CAAAuC,aAAA;IAAMN,SAAS,EAAC;EAAW,GAAGb,aAAa,EAAE4B,SAAiB,CAC5F,CAAC;AAEP,CAAC;AAED,OAAO,MAAMC,MAA6B,GAAIC,KAAK,iBACjDlD,KAAA,CAAAuC,aAAA,CAACrC,eAAe;EAACiD,WAAW,EAAGD,KAAK,CAACC;AAAa,gBAChDnD,KAAA,CAAAuC,aAAA,CAACnC,WAAW,EAAM8C,KAAS,CACZ,CAClB","ignoreList":[]}

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

@@ -3,35 +3,13 @@
 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 = ({
+import { extractError } from '../../../validation/ValidationMessages';
+import { clampToGraphemeMax, getCharacterCount } from '../../../../../helpers/stringHelpers';
+import './textarea.css';
+export const Textarea = props => /*#__PURE__*/React.createElement(HookFormWrapper, {
+  formContext: props.formContext
+}, /*#__PURE__*/React.createElement(TextareaField, props));
+const TextareaField = ({
   field: {
     id,
     name,
@@ -56,20 +34,16 @@ export const Textarea = ({
     formState: {
       errors
     }
-  } = useFormContext() || NoHookFormContext;
+  } = useFormContext();
   const fieldState = getFieldState(name);
-  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);
+  // getFieldState alone does not subscribe to errors, so the direct lookup keeps this in sync.
+  const isInvalid = Boolean(fieldState?.invalid || extractError(errors, name));
+  const isRequiredError = fieldState?.error?.type === 'required';
   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 showsCharacterCount = hasStartedTyping && hasMaxLength && !isRequiredError;
   const cssClass = `${customCssClasses?.input || ''}${isInvalid ? ' invalidField' : ''}`;
   const normalizedValidation = useMemo(() => {
     if (!validation || typeof validation.maxLength === 'undefined') {
@@ -115,19 +89,21 @@ export 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;
@@ -144,8 +120,22 @@ export const Textarea = ({
     }
     setHasStartedTyping(true);
     setCount(getCharacterCount(newValue));
-    const onTextareaChange = onChange;
-    onTextareaChange?.(event);
+    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(getCharacterCount(value || ''));
+      HandleChange({
+        target: event.currentTarget
+      });
+    }
   };
   const HandleOnBlur = event => {
     const {
@@ -155,17 +145,12 @@ export 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,
@@ -177,38 +162,25 @@ export 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.createElement(HookFormWrapper, null, customContent?.preField && /*#__PURE__*/React.createElement("span", {
+  const containerCssClass = `textareaFieldContainer${showsCharacterCount ? ' withCharacterCount' : ''}`;
+  return /*#__PURE__*/React.createElement(React.Fragment, null, customContent?.preField && /*#__PURE__*/React.createElement("span", {
     className: "preField"
-  }, 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,
+  }, customContent?.preField), /*#__PURE__*/React.createElement("span", {
+    className: containerCssClass
+  }, /*#__PURE__*/React.createElement("textarea", textareaProps), showsCharacterCount && /*#__PURE__*/React.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.createElement("span", {
+  }, `${count}/${maxLength}`)), customContent?.postField && /*#__PURE__*/React.createElement("span", {
     className: "postField"
   }, customContent?.postField));
 };