@x15ventures/x15-ui-library 3.15.0 → 3.16.0

package/dist/cjs/components/form/formFields/formFieldWrapper/formFieldProps.js.map

@@ -1 +1 @@
-{"version":3,"file":"formFieldProps.js","names":[],"sources":["../../../../../../src/components/form/formFields/formFieldWrapper/formFieldProps.ts"],"sourcesContent":["/* eslint-disable no-unused-vars */\n\nimport {\n  ChangeEvent, ChangeEventHandler, FormEventHandler,\n  KeyboardEvent,\n  ReactElement,\n  ReactNode,\n} from 'react';\n\nimport type {\n  InputHTMLAttributes,\n  SelectHTMLAttributes,\n  TextareaHTMLAttributes,\n} from 'react';\n\nimport {\n  Message,\n  Validate,\n  ValidationRule\n} from 'react-hook-form';\nimport { GenericFunction } from '../../../../interfaces';\nimport { KeyboardEventHandler } from '../../../../interfaces/generic.interface';\n\n/**\n * Custom content props for additional elements around the label or field.\n */\nexport interface CustomContentProps {\n  /** Element or text to display before the label. */\n  preLabel?: ReactElement | string;\n  /** Element or text to display after the label. */\n  postLabel?: ReactElement | string;\n  /** Element or text to display before the field. */\n  preField?: ReactElement | string;\n  /** Element or text to display after the field. */\n  postField?: ReactElement | string;\n}\n\n/**\n * Props for the label element.\n */\nexport interface LabelProps {\n  /** Text or element for the label. */\n  text: string | ReactNode | ReactElement;\n  /** The ID of the input the label is associated with. */\n  inputId?: string;\n  /** The ID of the label element. */\n  labelId?: string;\n  /** Whether to hide the label visually. */\n  hide?: boolean;\n  /** Position of the label relative to the field. */\n  position?: 'inset' | 'left' | 'right' | string;\n  /** Tooltip for the label. */\n  labelTooltip?: {\n    /** Text for the tooltip. */\n    text: string;\n    /** Optional icon for the tooltip. */\n    icon?: ReactElement | string;\n  };\n  /** Screen reader instructions for the label. */\n  srInstruction?: string;\n  /** Whether the field is required. */\n  isRequired?: boolean;\n  /** Custom content for the label. */\n  customContent?: CustomContentProps;\n}\n\n/**\n * Type for a single select option.\n */\nexport type SelectOptionObjectType = {\n  /** Label of the option. */\n  label: string;\n  /** Value of the option. */\n  value: string | number | boolean;\n};\n\n/**\n * Type for select options, which can be an object or string.\n */\nexport type SelectOptionType = SelectOptionObjectType | string;\n\n/**\n * Type for a single combobox (autocomplete) option.\n */\nexport type ComboboxOptionObjectType = {\n  /** Label of the option. */\n  label: string;\n  /** Value of the option. */\n  value: string | number | boolean;\n  /** Additional data associated with the option. */\n  data?: Record<string, unknown>;\n};\n\nexport type ComboboxOption = ComboboxOptionObjectType | string;\n\n// Everything we want to *override* with our own definitions in FieldProps\nexport type OverriddenKeys =\n  | 'type'\n  | 'id'\n  | 'name'\n  | 'placeholder'\n  | 'defaultValue'\n  | 'onChange'\n  | 'onBlur'\n  | 'onInput'\n  | 'onKeyDown'\n  | 'disabled'\n  | 'readOnly'\n  | 'min'\n  | 'max';\n\n// All the native props we want to mix in, minus the ones we override\nexport type NativeFieldProps =\n  & Omit<InputHTMLAttributes<HTMLInputElement>, OverriddenKeys>\n  & Omit<SelectHTMLAttributes<HTMLSelectElement>, OverriddenKeys>\n  & Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, OverriddenKeys>;\n\n/**\n * Props for the field element.\n */\nexport interface FieldProps extends NativeFieldProps {\n  /** The type of the input field. */\n  type: string;\n  /** The ID of the input field. */\n  id: string;\n  /** The name of the input field. */\n  name: string;\n  /** Placeholder text for the input field. */\n  placeholder?: string;\n  /** Default value for the input field. */\n  defaultValue?: string | number | readonly string[];\n  /** Handler for the change event. */\n  onChange?: ChangeEventHandler | ((\n    event: ChangeEvent<HTMLInputElement> | KeyboardEvent<HTMLSelectElement> | KeyboardEvent<HTMLTextAreaElement>\n  ) => void | GenericFunction);\n  /** Handler for the blur event. */\n  onBlur?: GenericFunction;\n  /** Handler for the input event. */\n  onInput?: FormEventHandler<\n    HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement\n  >;\n  /** Handler for the keydown event. */\n  onKeyDown?: KeyboardEventHandler | ((\n    event: KeyboardEvent<HTMLInputElement> | KeyboardEvent<HTMLSelectElement> | KeyboardEvent<HTMLTextAreaElement>\n  ) => void | GenericFunction);\n  /** Handler for marking the field as touched. */\n  onTouched?: GenericFunction;\n  /** Whether to include an empty option in a dropdown. */\n  includeEmptyOption?: boolean;\n  /** Label for the empty option. */\n  emptyOptionLabel?: string;\n  /** Options for a dropdown field. */\n  options?: SelectOptionType[] | ComboboxOption[];\n  /** Auto-complete behaviour for the field. */\n  autoComplete?: string;\n  /** Whether the field allows editing and interaction. Note: Setting this to true makes it invisible to screen reader users. */\n  disabled?: boolean;\n  /** Setting to true prevents editing and interaction whilst still making the value visible to screen reader users.  */\n  readonly?: boolean;\n  /** Minimum value or length. */\n  min?: string | number;\n  /** Maximum value or length. */\n  max?: string | number;\n  /**\n   * Whether to enforce grapheme-aware max-length handling (used by textarea).\n   * Uses `field.maxLength` (native field prop) as the source for the UI/input limit.\n   * Keep `field.maxLength` and `validation.maxLength` aligned to avoid mixed UX/validation behaviour.\n   */\n  enforceMaxLength?: boolean;\n}\n\n/**\n * Validation rules for fields.\n */\nexport type CustomValidate<TFieldValue> = (\n  value: TFieldValue,\n  formValues?: unknown\n) => boolean | string | Promise<boolean | string>;\n\n/**\n * Props for validation rules.\n */\n\nexport type MinMaxRule<T> = T extends boolean\n  ? ValidationRule<boolean>\n  : ValidationRule<number | string>;\n\nexport interface ValidationProps<\n  TFieldValue = unknown | string | boolean,\n  TFormValues = unknown\n> {\n  /** Whether the field is required. */\n  required?: Message | ValidationRule<boolean>;\n  /** Minimum value or length. */\n  min?: MinMaxRule<TFieldValue>;\n  /** Maximum value or length. */\n  max?: MinMaxRule<TFieldValue>;\n  /**\n   * Maximum length validation rule.\n   * Used for validation outcome/messages, while textarea UI/input limiting is driven by `field.maxLength`.\n   * If both are provided, keep them equal.\n   */\n  maxLength?: ValidationRule<number>;\n  /** Minimum length of the field. */\n  minLength?: ValidationRule<number>;\n  /** Regex pattern for validation. */\n  pattern?: ValidationRule<RegExp>;\n  /** Custom validation logic. */\n  validate?: CustomValidate<TFieldValue> | Record<string, CustomValidate<TFieldValue>> | Validate<TFieldValue, TFormValues>;\n}\n\nexport type ValidationKey = keyof ValidationProps<unknown, unknown>; // Restrict to known keys\n\n/**\n * Custom CSS classes for the field components.\n */\nexport interface CustomFieldCssClassesProps {\n  /** CSS class for the label. */\n  label?: string;\n  /** CSS class for the input field. */\n  input?: string;\n  /** CSS class for the wrapper. */\n  wrapper?: string;\n}\n\n/**\n * Props for a form field component.\n */\nexport interface FormFieldProps {\n  /** Props for the label. */\n  label: LabelProps;\n  /** Props for the field. */\n  field: FieldProps;\n  /** Layout style of the form field. */\n  layout?: 'stacked' | 'horizontal' | string;\n  /** Validation rules for the field. */\n  validation?: ValidationProps;\n  /** Whether to show a spinner. */\n  showSpinner?: boolean;\n  /** Custom CSS classes for the field. */\n  customCssClasses?: CustomFieldCssClassesProps;\n  /** Custom content for the field. */\n  customContent?: CustomContentProps;\n  /** Override the default nesting of the input inside the label. */\n  separateLabelAndField?: boolean;\n}\n"],"mappings":"","ignoreList":[]}
+{"version":3,"file":"formFieldProps.js","names":[],"sources":["../../../../../../src/components/form/formFields/formFieldWrapper/formFieldProps.ts"],"sourcesContent":["/* eslint-disable no-unused-vars */\n\nimport {\n  ChangeEvent,\n  ChangeEventHandler,\n  FormEventHandler,\n  KeyboardEvent,\n  ReactElement,\n  ReactEventHandler,\n  ReactNode,\n} from 'react';\n\nimport type {\n  InputHTMLAttributes,\n  SelectHTMLAttributes,\n  TextareaHTMLAttributes,\n} from 'react';\n\nimport {\n  FieldValues,\n  Message,\n  UseFormReturn,\n  Validate,\n  ValidationRule\n} from 'react-hook-form';\nimport { GenericFunction } from '../../../../interfaces';\nimport { KeyboardEventHandler } from '../../../../interfaces/generic.interface';\n\n/**\n * Custom content props for additional elements around the label or field.\n */\nexport interface CustomContentProps {\n  /** Element or text to display before the label. */\n  preLabel?: ReactElement | string;\n  /** Element or text to display after the label. */\n  postLabel?: ReactElement | string;\n  /** Element or text to display before the field. */\n  preField?: ReactElement | string;\n  /** Element or text to display after the field. */\n  postField?: ReactElement | string;\n}\n\n/**\n * Props for the label element.\n */\nexport interface LabelProps {\n  /** Text or element for the label. */\n  text: string | ReactNode | ReactElement;\n  /** The ID of the input the label is associated with. */\n  inputId?: string;\n  /** The ID of the label element. */\n  labelId?: string;\n  /** Whether to hide the label visually. */\n  hide?: boolean;\n  /** Position of the label relative to the field. */\n  position?: 'inset' | 'left' | 'right' | string;\n  /** Tooltip for the label. */\n  labelTooltip?: {\n    /** Text for the tooltip. */\n    text: string;\n    /** Optional icon for the tooltip. */\n    icon?: ReactElement | string;\n  };\n  /** Screen reader instructions for the label. */\n  srInstruction?: string;\n  /** Whether the field is required. */\n  isRequired?: boolean;\n  /** Custom content for the label. */\n  customContent?: CustomContentProps;\n}\n\n/**\n * Type for a single select option.\n */\nexport type SelectOptionObjectType = {\n  /** Label of the option. */\n  label: string;\n  /** Value of the option. */\n  value: string | number | boolean;\n};\n\n/**\n * Type for select options, which can be an object or string.\n */\nexport type SelectOptionType = SelectOptionObjectType | string;\n\n/**\n * Type for a single combobox (autocomplete) option.\n */\nexport type ComboboxOptionObjectType = {\n  /** Label of the option. */\n  label: string;\n  /** Value of the option. */\n  value: string | number | boolean;\n  /** Additional data associated with the option. */\n  data?: Record<string, unknown>;\n};\n\nexport type ComboboxOption = ComboboxOptionObjectType | string;\n\n// Everything we want to *override* with our own definitions in FieldProps\nexport type OverriddenKeys =\n  | 'type'\n  | 'id'\n  | 'name'\n  | 'placeholder'\n  | 'defaultValue'\n  | 'onChange'\n  | 'onBlur'\n  | 'onInput'\n  | 'onKeyDown'\n  | 'disabled'\n  | 'readOnly'\n  | 'min'\n  | 'max';\n\n// All the native props we want to mix in, minus the ones we override\nexport type NativeFieldProps =\n  & Omit<InputHTMLAttributes<HTMLInputElement>, OverriddenKeys>\n  & Omit<SelectHTMLAttributes<HTMLSelectElement>, OverriddenKeys>\n  & Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, OverriddenKeys>;\n\n/**\n * Props for the field element.\n */\nexport interface FieldProps extends NativeFieldProps {\n  /** The type of the input field. */\n  type: string;\n  /** The ID of the input field. */\n  id: string;\n  /** The name of the input field. */\n  name: string;\n  /** Placeholder text for the input field. */\n  placeholder?: string;\n  /** Default value for the input field. */\n  defaultValue?: string | number | readonly string[];\n  /** Handler for the change event. */\n  onChange?: ChangeEventHandler | ((\n    event: ChangeEvent<HTMLInputElement> | KeyboardEvent<HTMLSelectElement> | KeyboardEvent<HTMLTextAreaElement>\n  ) => void | GenericFunction);\n  /** Handler for the blur event. */\n  onBlur?: GenericFunction;\n  /** Handler for the input event. */\n  onInput?: FormEventHandler<\n    HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement\n  >;\n  /** Handler for the keydown event. */\n  onKeyDown?: KeyboardEventHandler | ((\n    event: KeyboardEvent<HTMLInputElement> | KeyboardEvent<HTMLSelectElement> | KeyboardEvent<HTMLTextAreaElement>\n  ) => void | GenericFunction);\n  /** Handler for marking the field as touched. */\n  onTouched?: GenericFunction;\n  /** Whether to include an empty option in a dropdown. */\n  includeEmptyOption?: boolean;\n  /** Label for the empty option. */\n  emptyOptionLabel?: string;\n  /** Options for a dropdown field. */\n  options?: SelectOptionType[] | ComboboxOption[];\n  /** Auto-complete behaviour for the field. */\n  autoComplete?: string;\n  /** Whether the field allows editing and interaction. Note: Setting this to true makes it invisible to screen reader users. */\n  disabled?: boolean;\n  /** Setting to true prevents editing and interaction whilst still making the value visible to screen reader users.  */\n  readonly?: boolean;\n  /** Minimum value or length. */\n  min?: string | number;\n  /** Maximum value or length. */\n  max?: string | number;\n  /**\n   * Whether to enforce grapheme-aware max-length handling (used by textarea).\n   * Uses `field.maxLength` (native field prop) as the source for the UI/input limit.\n   * Keep `field.maxLength` and `validation.maxLength` aligned to avoid mixed UX/validation behaviour.\n   */\n  enforceMaxLength?: boolean;\n}\n\n/**\n * Validation rules for fields.\n */\nexport type CustomValidate<TFieldValue> = (\n  value: TFieldValue,\n  formValues?: unknown\n) => boolean | string | Promise<boolean | string>;\n\n/**\n * Props for validation rules.\n */\n\nexport type MinMaxRule<T> = T extends boolean\n  ? ValidationRule<boolean>\n  : ValidationRule<number | string>;\n\nexport interface ValidationProps<\n  TFieldValue = unknown | string | boolean,\n  TFormValues = unknown\n> {\n  /** Whether the field is required. */\n  required?: Message | ValidationRule<boolean>;\n  /** Minimum value or length. */\n  min?: MinMaxRule<TFieldValue>;\n  /** Maximum value or length. */\n  max?: MinMaxRule<TFieldValue>;\n  /**\n   * Maximum length validation rule.\n   * Used for validation outcome/messages, while textarea UI/input limiting is driven by `field.maxLength`.\n   * If both are provided, keep them equal.\n   */\n  maxLength?: ValidationRule<number>;\n  /** Minimum length of the field. */\n  minLength?: ValidationRule<number>;\n  /** Regex pattern for validation. */\n  pattern?: ValidationRule<RegExp>;\n  /** Custom validation logic. */\n  validate?: CustomValidate<TFieldValue> | Record<string, CustomValidate<TFieldValue>> | Validate<TFieldValue, TFormValues>;\n}\n\nexport type ValidationKey = keyof ValidationProps<unknown, unknown>; // Restrict to known keys\n\n/**\n * Custom CSS classes for the field components.\n */\nexport interface CustomFieldCssClassesProps {\n  /** CSS class for the label. */\n  label?: string;\n  /** CSS class for the input field. */\n  input?: string;\n  /** CSS class for the wrapper. */\n  wrapper?: string;\n}\n\n/**\n * Props for a form field component.\n */\nexport interface FormFieldProps {\n  /** Props for the label. */\n  label: LabelProps;\n  /** Props for the field. */\n  field: FieldProps;\n  /** Layout style of the form field. */\n  layout?: 'stacked' | 'horizontal' | string;\n  /** Validation rules for the field. */\n  validation?: ValidationProps;\n  /** Whether to show a spinner. */\n  showSpinner?: boolean;\n  /** Custom CSS classes for the field. */\n  customCssClasses?: CustomFieldCssClassesProps;\n  /** Custom content for the field. */\n  customContent?: CustomContentProps;\n  /** Override the default nesting of the input inside the label. */\n  separateLabelAndField?: boolean;\n  /** An existing form context to use when React context cannot reach this field, e.g. across a Next.js client boundary. */\n  formContext?: UseFormReturn<FieldValues, any, FieldValues>;\n}\n\nexport type TextareaFieldProps = Omit<FieldProps, 'onSelect'> & {\n  onSelect?: ReactEventHandler<HTMLTextAreaElement>;\n};\n"],"mappings":"","ignoreList":[]}

package/dist/cjs/components/form/formFields/subComponents/inputs/autocomplete/Autocomplete.js

@@ -30,7 +30,7 @@ const Autocomplete = ({
   const [isOpen, setIsOpen] = (0, _react.useState)(false);
   const [filteredOptions, setFilteredOptions] = (0, _react.useState)(field.options || []);
   const [selectedOption, setSelectedOption] = (0, _react.useState)(null);
-  const [inputValue, setInputValue] = (0, _react.useState)('');
+  const inputElement = (0, _react.useRef)(null);
   (0, _hooks.useOnClickOutside)(wrapperElement, () => setIsOpen(false));
   (0, _hooks.usePopupKeys)(wrapperElement, () => setIsOpen(false));
   const filterOptions = (0, _useDebounce.useDebouncedCallback)(searchTerm => {
@@ -49,15 +49,20 @@ const Autocomplete = ({
     setIsOpen(true);
     onInputChange(searchTerm);
   }, debounceTime);
-  const handleInputChange = event => {
-    const newValue = event.target.value;
-    setInputValue(newValue);
-    filterOptions(newValue.toLowerCase());
-  };
+  const handleInputChange = (0, _react.useCallback)(event => {
+    inputElement.current = event.target;
+    filterOptions(event.target.value.toLowerCase());
+  }, [filterOptions]);
   const handleOptionSelect = option => {
     const displayValue = typeof option === 'string' ? option : JSON.stringify(option.label);
-    setInputValue(displayValue);
-    setValue(field.name, displayValue);
+    // The registered input is uncontrolled, so write to both the DOM and form state.
+    if (inputElement.current) {
+      inputElement.current.value = displayValue;
+    }
+    setValue(field.name, displayValue, {
+      shouldValidate: true,
+      shouldDirty: true
+    });
     setSelectedOption(option);
     setIsOpen(false);
     onOptionSelect(option);
@@ -74,8 +79,7 @@ const Autocomplete = ({
         'aria-haspopup': 'listbox',
         role: 'combobox',
         onFocus: () => setIsOpen(true),
-        onChange: handleInputChange,
-        defaultValue: inputValue
+        onChange: handleInputChange
       },
       label,
       validation,
@@ -83,7 +87,7 @@ const Autocomplete = ({
       customCssClasses,
       customContent
     };
-  }, [field, isOpen, optionsContainerId, validation, showSpinner, customCssClasses, customContent, handleInputChange, selectedOption]);
+  }, [field, isOpen, optionsContainerId, label, validation, showSpinner, customCssClasses, customContent, handleInputChange]);
   return /*#__PURE__*/_react.default.createElement("div", {
     ref: wrapperElement,
     className: `autocompleteWrapper ${isOpen ? 'open' : 'closed'}`

package/dist/cjs/components/form/formFields/subComponents/inputs/autocomplete/Autocomplete.js.map

@@ -1 +1 @@
-{"version":3,"file":"Autocomplete.js","names":["Object","defineProperty","exports","value","default","Autocomplete","_react","_interopRequireWildcard","require","_reactHookForm","_useDebounce","_hooks","_InputText","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","has","get","set","hasOwnProperty","call","getOwnPropertyDescriptor","field","label","validation","showSpinner","customCssClasses","customContent","onOptionSelect","onInputChange","debounceTime","setValue","useFormContext","wrapperElement","useRef","isOpen","setIsOpen","useState","filteredOptions","setFilteredOptions","options","selectedOption","setSelectedOption","inputValue","setInputValue","useOnClickOutside","usePopupKeys","filterOptions","useDebouncedCallback","searchTerm","matchingOptions","filter","option","toLowerCase","includes","JSON","stringify","handleInputChange","event","newValue","target","handleOptionSelect","displayValue","name","optionsContainerId","id","comboBoxFieldProps","useMemo","type","role","onFocus","onChange","defaultValue","createElement","ref","className","InputText","tabIndex","length","map","optionId","key","onClick","_default"],"sources":["../../../../../../../../src/components/form/formFields/subComponents/inputs/autocomplete/Autocomplete.tsx"],"sourcesContent":["'use client';\n\nimport React, { useState, useRef, useMemo } from 'react';\nimport { useFormContext } from 'react-hook-form';\nimport { useDebouncedCallback } from 'use-debounce';\nimport { ComboboxOption, FieldProps, FormFieldProps } from '../../../formFieldWrapper/formFieldProps';\nimport { useOnClickOutside, usePopupKeys } from '../../../../../../hooks';\n\nimport { InputText, InputTextProps } from '../text/InputText';\n\nimport './autocomplete.scss';\n\n\nexport interface ComboboxFieldProps extends React.InputHTMLAttributes<HTMLInputElement>, Omit<FormFieldProps, 'field'> {\n  field: Omit<FieldProps, 'type' | 'options'> & {\n    options?: ComboboxOption[] | string[];\n  };\n  /* eslint-disable-next-line no-unused-vars */\n  onOptionSelect?: (option: ComboboxOption | string) => void;\n  /* eslint-disable-next-line no-unused-vars */\n  onInputChange?: (inputValue: string) => void;\n  debounceTime?: number;\n}\n\nexport const Autocomplete: React.FC<ComboboxFieldProps> = (\n  {\n    field,\n    label,\n    validation,\n    showSpinner,\n    customCssClasses,\n    customContent,\n    onOptionSelect = () => {},\n    onInputChange = () => {},\n    debounceTime = 500,\n  }\n) => {\n  const { setValue } = useFormContext();\n\n  const wrapperElement = useRef<HTMLDivElement>(null);\n  const [isOpen, setIsOpen] = useState(false);\n  const [filteredOptions, setFilteredOptions] = useState<(string | ComboboxOption)[]>(field.options || []);\n  const [selectedOption, setSelectedOption] = useState<ComboboxOption | string | null>(null);\n  const [inputValue, setInputValue] = useState('');\n\n  useOnClickOutside(wrapperElement, () => setIsOpen(false));\n  usePopupKeys(wrapperElement, () => setIsOpen(false));\n\n  const filterOptions = useDebouncedCallback((searchTerm: string) => {\n    const matchingOptions: (string | ComboboxOption)[] = field.options ? field.options.filter((option) => {\n      if (typeof option === 'string') {\n        return option.toLowerCase().includes(searchTerm);\n      }\n      if (typeof option.label === 'string') {\n        return option.label.toLowerCase().includes(searchTerm);\n      }\n      // For non-string labels, convert to JSON string and check\n      return JSON.stringify(option.label).toLowerCase().includes(searchTerm);\n    }) : [];\n    setSelectedOption(null);\n    setFilteredOptions(matchingOptions);\n    setIsOpen(true);\n    onInputChange(searchTerm);\n  }, debounceTime);\n\n  const handleInputChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n    const newValue = event.target.value;\n    setInputValue(newValue);\n    filterOptions(newValue.toLowerCase());\n  };\n\n  const handleOptionSelect = (option: ComboboxOption | string) => {\n    const displayValue = typeof option === 'string' ? option : JSON.stringify(option.label);\n    setInputValue(displayValue);\n    setValue(field.name, displayValue);\n    setSelectedOption(option);\n    setIsOpen(false);\n    onOptionSelect(option);\n  };\n\n  const optionsContainerId = `${ field.id || field.name }Options`;\n\n  const comboBoxFieldProps: InputTextProps = useMemo(() => {\n    return {\n      field: {\n        ...field,\n        type: 'search',\n        'aria-autocomplete': 'both',\n        'aria-expanded': isOpen,\n        'aria-controls': optionsContainerId,\n        'aria-haspopup': 'listbox',\n        role: 'combobox',\n        onFocus: () => setIsOpen(true),\n        onChange: handleInputChange,\n        defaultValue: inputValue,\n      },\n      label,\n      validation,\n      showSpinner,\n      customCssClasses,\n      customContent,\n    };\n  }, [field, isOpen, optionsContainerId, validation, showSpinner, customCssClasses, customContent, handleInputChange, selectedOption]);\n  \n  return (\n    <div ref={ wrapperElement } className={ `autocompleteWrapper ${ isOpen ? 'open' : 'closed' }` }>\n      <InputText { ...comboBoxFieldProps } />\n\n      {\n        isOpen && filteredOptions && (\n          <div tabIndex={ -1 } className=\"autocompleteOptions\">\n            {\n              filteredOptions.length === 0 ?\n                (\n                  <div aria-selected=\"false\" role=\"listbox\" id={ optionsContainerId }>\n                    No results found\n                  </div>\n                )\n                :\n                (\n                  <ul className=\"noBullet\" role=\"listbox\" id={ optionsContainerId }>\n                    {\n                      filteredOptions.map((option) => {\n                        const optionId = `${ optionsContainerId }_${ option }`;\n\n                        return (\n                          <li\n                            key={ optionId }\n                            aria-selected={ option === selectedOption ? 'true' : 'false' }\n                            role=\"option\"\n                            data-option={ option }\n                          >\n                            <button className={ option === selectedOption ? 'selected' : '' } type=\"button\" id={ optionId } onClick={ () => handleOptionSelect(option) }>\n                              { typeof option === 'string' ? option : option.label }\n                            </button>\n                          </li>\n                        );\n                      })\n                    }\n                  </ul>\n                )\n            }\n          </div>\n        )\n      }\n    </div>\n  );\n};\n\nexport default Autocomplete;"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"Autocomplete.js","names":["Object","defineProperty","exports","value","default","Autocomplete","_react","_interopRequireWildcard","require","_reactHookForm","_useDebounce","_hooks","_InputText","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","has","get","set","hasOwnProperty","call","getOwnPropertyDescriptor","field","label","validation","showSpinner","customCssClasses","customContent","onOptionSelect","onInputChange","debounceTime","setValue","useFormContext","wrapperElement","useRef","isOpen","setIsOpen","useState","filteredOptions","setFilteredOptions","options","selectedOption","setSelectedOption","inputElement","useOnClickOutside","usePopupKeys","filterOptions","useDebouncedCallback","searchTerm","matchingOptions","filter","option","toLowerCase","includes","JSON","stringify","handleInputChange","useCallback","event","current","target","handleOptionSelect","displayValue","name","shouldValidate","shouldDirty","optionsContainerId","id","comboBoxFieldProps","useMemo","type","role","onFocus","onChange","createElement","ref","className","InputText","tabIndex","length","map","optionId","key","onClick","_default"],"sources":["../../../../../../../../src/components/form/formFields/subComponents/inputs/autocomplete/Autocomplete.tsx"],"sourcesContent":["'use client';\n\nimport React, { useState, useRef, useMemo, useCallback } from 'react';\nimport { useFormContext } from 'react-hook-form';\nimport { useDebouncedCallback } from 'use-debounce';\nimport { ComboboxOption, FieldProps, FormFieldProps } from '../../../formFieldWrapper/formFieldProps';\nimport { useOnClickOutside, usePopupKeys } from '../../../../../../hooks';\n\nimport { InputText, InputTextProps } from '../text/InputText';\n\nimport './autocomplete.scss';\n\n\nexport interface ComboboxFieldProps extends React.InputHTMLAttributes<HTMLInputElement>, Omit<FormFieldProps, 'field'> {\n  field: Omit<FieldProps, 'type' | 'options'> & {\n    options?: ComboboxOption[] | string[];\n  };\n  /* eslint-disable-next-line no-unused-vars */\n  onOptionSelect?: (option: ComboboxOption | string) => void;\n  /* eslint-disable-next-line no-unused-vars */\n  onInputChange?: (inputValue: string) => void;\n  debounceTime?: number;\n}\n\nexport const Autocomplete: React.FC<ComboboxFieldProps> = (\n  {\n    field,\n    label,\n    validation,\n    showSpinner,\n    customCssClasses,\n    customContent,\n    onOptionSelect = () => {},\n    onInputChange = () => {},\n    debounceTime = 500,\n  }\n) => {\n  const { setValue } = useFormContext();\n\n  const wrapperElement = useRef<HTMLDivElement>(null);\n  const [isOpen, setIsOpen] = useState(false);\n  const [filteredOptions, setFilteredOptions] = useState<(string | ComboboxOption)[]>(field.options || []);\n  const [selectedOption, setSelectedOption] = useState<ComboboxOption | string | null>(null);\n  const inputElement = useRef<HTMLInputElement | null>(null);\n\n  useOnClickOutside(wrapperElement, () => setIsOpen(false));\n  usePopupKeys(wrapperElement, () => setIsOpen(false));\n\n  const filterOptions = useDebouncedCallback((searchTerm: string) => {\n    const matchingOptions: (string | ComboboxOption)[] = field.options ? field.options.filter((option) => {\n      if (typeof option === 'string') {\n        return option.toLowerCase().includes(searchTerm);\n      }\n      if (typeof option.label === 'string') {\n        return option.label.toLowerCase().includes(searchTerm);\n      }\n      // For non-string labels, convert to JSON string and check\n      return JSON.stringify(option.label).toLowerCase().includes(searchTerm);\n    }) : [];\n    setSelectedOption(null);\n    setFilteredOptions(matchingOptions);\n    setIsOpen(true);\n    onInputChange(searchTerm);\n  }, debounceTime);\n\n  const handleInputChange = useCallback((event: React.ChangeEvent<HTMLInputElement>) => {\n    inputElement.current = event.target;\n    filterOptions(event.target.value.toLowerCase());\n  }, [filterOptions]);\n\n  const handleOptionSelect = (option: ComboboxOption | string) => {\n    const displayValue = typeof option === 'string' ? option : JSON.stringify(option.label);\n    // The registered input is uncontrolled, so write to both the DOM and form state.\n    if (inputElement.current) {\n      inputElement.current.value = displayValue;\n    }\n    setValue(field.name, displayValue, { shouldValidate: true, shouldDirty: true });\n    setSelectedOption(option);\n    setIsOpen(false);\n    onOptionSelect(option);\n  };\n\n  const optionsContainerId = `${ field.id || field.name }Options`;\n\n  const comboBoxFieldProps: InputTextProps = useMemo(() => {\n    return {\n      field: {\n        ...field,\n        type: 'search',\n        'aria-autocomplete': 'both',\n        'aria-expanded': isOpen,\n        'aria-controls': optionsContainerId,\n        'aria-haspopup': 'listbox',\n        role: 'combobox',\n        onFocus: () => setIsOpen(true),\n        onChange: handleInputChange,\n      },\n      label,\n      validation,\n      showSpinner,\n      customCssClasses,\n      customContent,\n    };\n  }, [field, isOpen, optionsContainerId, label, validation, showSpinner, customCssClasses, customContent, handleInputChange]);\n  \n  return (\n    <div ref={ wrapperElement } className={ `autocompleteWrapper ${ isOpen ? 'open' : 'closed' }` }>\n      <InputText { ...comboBoxFieldProps } />\n\n      {\n        isOpen && filteredOptions && (\n          <div tabIndex={ -1 } className=\"autocompleteOptions\">\n            {\n              filteredOptions.length === 0 ?\n                (\n                  <div aria-selected=\"false\" role=\"listbox\" id={ optionsContainerId }>\n                    No results found\n                  </div>\n                )\n                :\n                (\n                  <ul className=\"noBullet\" role=\"listbox\" id={ optionsContainerId }>\n                    {\n                      filteredOptions.map((option) => {\n                        const optionId = `${ optionsContainerId }_${ option }`;\n\n                        return (\n                          <li\n                            key={ optionId }\n                            aria-selected={ option === selectedOption ? 'true' : 'false' }\n                            role=\"option\"\n                            data-option={ option }\n                          >\n                            <button className={ option === selectedOption ? 'selected' : '' } type=\"button\" id={ optionId } onClick={ () => handleOptionSelect(option) }>\n                              { typeof option === 'string' ? option : option.label }\n                            </button>\n                          </li>\n                        );\n                      })\n                    }\n                  </ul>\n                )\n            }\n          </div>\n        )\n      }\n    </div>\n  );\n};\n\nexport default Autocomplete;"],"mappings":"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","ignoreList":[]}

package/dist/cjs/components/form/formFields/subComponents/inputs/checkbox/InputCheckbox.js

@@ -7,7 +7,6 @@ Object.defineProperty(exports, "__esModule", {
 exports.InputCheckbox = exports.CheckboxInput = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _reactHookForm = require("react-hook-form");
-var _formUtilities = require("../../../utilities/formUtilities");
 var _HookFormWrapper = require("../../../../hookFormWrapper/HookFormWrapper");
 var _FormFieldLabel = require("../../labels/FormFieldLabel");
 var _ValidationMessages = require("../../../../validation/ValidationMessages");
@@ -15,11 +14,16 @@ var _Spinner = require("../../../../../design/spinner/Spinner");
 var _Icon = require("../../../../../design/icons/basicIcon/Icon");
 require("./inputCheckbox.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); }
-const InputCheckbox = ({
+const InputCheckbox = props => /*#__PURE__*/_react.default.createElement(_HookFormWrapper.HookFormWrapper, {
+  formContext: props.formContext
+}, /*#__PURE__*/_react.default.createElement(InputCheckboxField, props));
+exports.InputCheckbox = InputCheckbox;
+const InputCheckboxField = ({
   label,
   field: {
     id,
     name,
+    value,
     defaultChecked,
     onBlur = () => {},
     onChange = () => {},
@@ -27,16 +31,27 @@ const InputCheckbox = ({
   },
   validation,
   showSpinner,
+  icons,
   customCssClasses,
   customContent
 }) => {
   const [isTouched, setIsTouched] = (0, _react.useState)(false);
   const {
     register,
-    getFieldState
-  } = (0, _reactHookForm.useFormContext)() || _formUtilities.NoHookFormContext;
-  ;
+    getFieldState,
+    setValue
+  } = (0, _reactHookForm.useFormContext)();
   const fieldState = getFieldState(name);
+
+  // Initialize the form value with defaultChecked on mount
+  (0, _react.useEffect)(() => {
+    if (defaultChecked) {
+      setValue(name, true, {
+        shouldValidate: false,
+        shouldDirty: false
+      });
+    }
+  }, [name, setValue, defaultChecked, value]);
   const wrapperCssClass = `formField checkBoxField ${customCssClasses?.wrapper || ''} ${isTouched ? 'touched' : ''}`;
   const inputCssClass = `${customCssClasses?.input || ''}${fieldState?.invalid ? ' invalidField' : ''}`;
   const isRequired = validation && typeof validation.required !== 'undefined';
@@ -56,19 +71,26 @@ const InputCheckbox = ({
     isRequired,
     customContent
   };
+  const checkedIcon = icons?.checked ?? /*#__PURE__*/_react.default.createElement(_Icon.Icon, {
+    icon: "checkbox-checked"
+  });
+  const uncheckedIcon = icons?.unchecked ?? /*#__PURE__*/_react.default.createElement(_Icon.Icon, {
+    icon: "checkbox-unchecked"
+  });
   const inputProps = {
     type: 'checkbox',
     id,
+    value: String(value),
     className: inputCssClass,
-    defaultChecked,
     'aria-required': isRequired,
     ...register(name, {
       onChange,
       onBlur: HandleOnBlur,
+      value: defaultChecked ? true : value,
       ...validation
     })
   };
-  return /*#__PURE__*/_react.default.createElement(_HookFormWrapper.HookFormWrapper, null, /*#__PURE__*/_react.default.createElement("div", {
+  return /*#__PURE__*/_react.default.createElement("div", {
     className: wrapperCssClass
   }, /*#__PURE__*/_react.default.createElement("label", {
     id: label.labelId || `${id}_label`,
@@ -77,17 +99,17 @@ const InputCheckbox = ({
   }, label.position === 'left' && /*#__PURE__*/_react.default.createElement(_FormFieldLabel.FormFieldLabel, labelProps), /*#__PURE__*/_react.default.createElement("div", {
     className: "inputContainer"
   }, /*#__PURE__*/_react.default.createElement("input", inputProps), /*#__PURE__*/_react.default.createElement("span", {
-    className: "checkboxIcons"
-  }, /*#__PURE__*/_react.default.createElement(_Icon.Icon, {
-    icon: "checkbox-unchecked"
-  }), /*#__PURE__*/_react.default.createElement(_Icon.Icon, {
-    icon: "checkbox-checked"
-  }))), (!label?.position || label?.position === 'right') && /*#__PURE__*/_react.default.createElement(_FormFieldLabel.FormFieldLabel, labelProps), showSpinner && /*#__PURE__*/_react.default.createElement(_Spinner.Spinner, null), /*#__PURE__*/_react.default.createElement(_ValidationMessages.ValidationMessages, {
+    className: "checkboxIcons",
+    "aria-hidden": "true"
+  }, /*#__PURE__*/_react.default.createElement("span", {
+    className: "checkboxIcon checkboxIconUnchecked"
+  }, uncheckedIcon), /*#__PURE__*/_react.default.createElement("span", {
+    className: "checkboxIcon checkboxIconChecked"
+  }, checkedIcon))), (!label?.position || label?.position === 'right') && /*#__PURE__*/_react.default.createElement(_FormFieldLabel.FormFieldLabel, labelProps), showSpinner && /*#__PURE__*/_react.default.createElement(_Spinner.Spinner, null), /*#__PURE__*/_react.default.createElement(_ValidationMessages.ValidationMessages, {
     name: name,
     validation: validation
-  }))));
+  })));
 };
-exports.InputCheckbox = InputCheckbox;
 const CheckboxInput = props => /*#__PURE__*/_react.default.createElement(InputCheckbox, props);
 exports.CheckboxInput = CheckboxInput;
 //# sourceMappingURL=InputCheckbox.js.map

package/dist/cjs/components/form/formFields/subComponents/inputs/checkbox/InputCheckbox.js.map

@@ -1 +1 @@
-{"version":3,"file":"InputCheckbox.js","names":["Object","defineProperty","exports","value","InputCheckbox","CheckboxInput","_react","_interopRequireWildcard","require","_reactHookForm","_formUtilities","_HookFormWrapper","_FormFieldLabel","_ValidationMessages","_Spinner","_Icon","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","getOwnPropertyDescriptor","label","field","id","name","defaultChecked","onBlur","onChange","onTouched","validation","showSpinner","customCssClasses","customContent","isTouched","setIsTouched","useState","register","getFieldState","useFormContext","NoHookFormContext","fieldState","wrapperCssClass","wrapper","inputCssClass","input","invalid","isRequired","required","HandleOnBlur","event","target","labelProps","inputId","inputProps","type","className","createElement","HookFormWrapper","labelId","htmlFor","position","FormFieldLabel","Icon","icon","Spinner","ValidationMessages","props"],"sources":["../../../../../../../../src/components/form/formFields/subComponents/inputs/checkbox/InputCheckbox.tsx"],"sourcesContent":["'use client';\n\nimport React, { useState } from 'react';\nimport { useFormContext } from 'react-hook-form';\nimport { NoHookFormContext } from '../../../utilities/formUtilities';\nimport { HookFormWrapper } from '../../../../hookFormWrapper/HookFormWrapper';\nimport { FormFieldLabel } from '../../labels/FormFieldLabel';\nimport { ValidationMessages } from '../../../../validation/ValidationMessages';\nimport { Spinner } from '../../../../../design/spinner/Spinner';\nimport { Icon } from '../../../../../design/icons/basicIcon/Icon';\n\nimport { InputCheckboxProps } from './inputCheckboxProps';\n\nimport './inputCheckbox.scss';\n\nexport const InputCheckbox: React.FC<InputCheckboxProps> = (\n  {\n    label,\n    field: {\n      id,\n      name,\n      defaultChecked,\n      onBlur = () => {},\n      onChange = () => {},\n      onTouched = () => {}\n    },\n    validation,\n    showSpinner,\n    customCssClasses,\n    customContent\n  }\n) => {\n  const [isTouched, setIsTouched] = useState(false);\n  const { register, getFieldState } = useFormContext() || NoHookFormContext;;\n  const fieldState = getFieldState(name);\n\n  const wrapperCssClass = `formField checkBoxField ${ customCssClasses?.wrapper || '' } ${ isTouched ? 'touched' : '' }`;\n\n  const inputCssClass = `${ customCssClasses?.input || '' }${ fieldState?.invalid ? ' invalidField' : '' }`;\n\n  const isRequired = validation && typeof validation.required !== 'undefined';\n\n  const HandleOnBlur = (event: React.FocusEvent<HTMLInputElement>) => {\n    const { target } = event;\n    setIsTouched(true);\n    if (target) {\n      onTouched();\n      onBlur(event);\n    }\n  };\n\n  const labelProps = {\n    ...label,\n    inputId: id,\n    isRequired,\n    customContent\n  };\n\n  const inputProps = {\n    type: 'checkbox',\n    id,\n    className: inputCssClass,\n    defaultChecked,\n    'aria-required': isRequired,\n    ...register(\n      name,\n      {\n        onChange,\n        onBlur: HandleOnBlur,\n        ...validation\n      }\n    )\n  };\n\n  return (\n    <HookFormWrapper>\n      <div\n        className={ wrapperCssClass }\n      >\n        <label\n          id={ label.labelId || `${ id }_label` }\n          className={ `${ customCssClasses?.label || '' } ${ showSpinner ? 'withSpinner' : '' }` }\n          htmlFor={ id }\n        >\n\n          { label.position === 'left'\n            && <FormFieldLabel { ...labelProps } /> }\n\n          <div className=\"inputContainer\">\n            <input { ...inputProps } />\n            <span className=\"checkboxIcons\">\n              <Icon icon=\"checkbox-unchecked\" />\n              <Icon icon=\"checkbox-checked\" />\n            </span>\n          </div>\n\n          { (!label?.position || label?.position === 'right')\n            && <FormFieldLabel { ...labelProps } /> }\n\n          {\n            showSpinner && <Spinner />\n          }\n\n          <ValidationMessages name={ name } validation={ validation } />\n        </label>\n      </div>\n    </HookFormWrapper>\n  );\n};\n\nexport const CheckboxInput: React.FC<InputCheckboxProps> = (props) => <InputCheckbox { ...props } />;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"InputCheckbox.js","names":["Object","defineProperty","exports","value","InputCheckbox","CheckboxInput","_react","_interopRequireWildcard","require","_reactHookForm","_HookFormWrapper","_FormFieldLabel","_ValidationMessages","_Spinner","_Icon","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","getOwnPropertyDescriptor","props","createElement","HookFormWrapper","formContext","InputCheckboxField","label","field","id","name","defaultChecked","onBlur","onChange","onTouched","validation","showSpinner","icons","customCssClasses","customContent","isTouched","setIsTouched","useState","register","getFieldState","setValue","useFormContext","fieldState","useEffect","shouldValidate","shouldDirty","wrapperCssClass","wrapper","inputCssClass","input","invalid","isRequired","required","HandleOnBlur","event","target","labelProps","inputId","checkedIcon","checked","Icon","icon","uncheckedIcon","unchecked","inputProps","type","String","className","labelId","htmlFor","position","FormFieldLabel","Spinner","ValidationMessages"],"sources":["../../../../../../../../src/components/form/formFields/subComponents/inputs/checkbox/InputCheckbox.tsx"],"sourcesContent":["'use client';\n\nimport React, { useEffect, useState } from 'react';\nimport { useFormContext } from 'react-hook-form';\nimport { HookFormWrapper } from '../../../../hookFormWrapper/HookFormWrapper';\nimport { FormFieldLabel } from '../../labels/FormFieldLabel';\nimport { ValidationMessages } from '../../../../validation/ValidationMessages';\nimport { Spinner } from '../../../../../design/spinner/Spinner';\nimport { Icon } from '../../../../../design/icons/basicIcon/Icon';\n\nimport { InputCheckboxProps } from './inputCheckboxProps';\n\nimport './inputCheckbox.scss';\n\nexport const InputCheckbox: React.FC<InputCheckboxProps> = (props) => (\n  <HookFormWrapper formContext={ props.formContext }>\n    <InputCheckboxField { ...props } />\n  </HookFormWrapper>\n);\n\nconst InputCheckboxField: React.FC<InputCheckboxProps> = (\n  {\n    label,\n    field: {\n      id,\n      name,\n      value,\n      defaultChecked,\n      onBlur = () => {},\n      onChange = () => {},\n      onTouched = () => {}\n    },\n    validation,\n    showSpinner,\n    icons,\n    customCssClasses,\n    customContent\n  }\n) => {\n  const [isTouched, setIsTouched] = useState(false);\n  const { register, getFieldState, setValue } = useFormContext();\n  const fieldState = getFieldState(name);\n\n  // Initialize the form value with defaultChecked on mount\n  useEffect(() => {\n    if (defaultChecked) {\n      setValue(name, true, { shouldValidate: false, shouldDirty: false });\n    }\n  }, [name, setValue, defaultChecked, value]);\n\n  const wrapperCssClass = `formField checkBoxField ${ customCssClasses?.wrapper || '' } ${ isTouched ? 'touched' : '' }`;\n\n  const inputCssClass = `${ customCssClasses?.input || '' }${ fieldState?.invalid ? ' invalidField' : '' }`;\n\n  const isRequired = validation && typeof validation.required !== 'undefined';\n\n  const HandleOnBlur = (event: React.FocusEvent<HTMLInputElement>) => {\n    const { target } = event;\n    setIsTouched(true);\n    if (target) {\n      onTouched();\n      onBlur(event);\n    }\n  };\n\n  const labelProps = {\n    ...label,\n    inputId: id,\n    isRequired,\n    customContent\n  };\n\n  const checkedIcon = icons?.checked ?? <Icon icon=\"checkbox-checked\" />;\n  const uncheckedIcon = icons?.unchecked ?? <Icon icon=\"checkbox-unchecked\" />;\n\n  const inputProps = {\n    type: 'checkbox',\n    id,\n    value: String(value),\n    className: inputCssClass,\n    'aria-required': isRequired,\n    ...register(\n      name,\n      {\n        onChange,\n        onBlur: HandleOnBlur,\n        value: defaultChecked ? true : value,\n        ...validation\n      }\n    )\n  };\n\n  return (\n    <div\n      className={ wrapperCssClass }\n    >\n      <label\n        id={ label.labelId || `${ id }_label` }\n        className={ `${ customCssClasses?.label || '' } ${ showSpinner ? 'withSpinner' : '' }` }\n        htmlFor={ id }\n      >\n\n        { label.position === 'left'\n          && <FormFieldLabel { ...labelProps } /> }\n\n        <div className=\"inputContainer\">\n          <input { ...inputProps } />\n          { /* The input conveys the checked state, so the icons are decorative. */ }\n          <span className=\"checkboxIcons\" aria-hidden=\"true\">\n            <span className=\"checkboxIcon checkboxIconUnchecked\">{ uncheckedIcon }</span>\n            <span className=\"checkboxIcon checkboxIconChecked\">{ checkedIcon }</span>\n          </span>\n        </div>\n\n        { (!label?.position || label?.position === 'right')\n          && <FormFieldLabel { ...labelProps } /> }\n\n        {\n          showSpinner && <Spinner />\n        }\n\n        <ValidationMessages name={ name } validation={ validation } />\n      </label>\n    </div>\n  );\n};\n\nexport const CheckboxInput: React.FC<InputCheckboxProps> = (props) => <InputCheckbox { ...props } />;\n"],"mappings":"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","ignoreList":[]}

package/dist/cjs/components/form/formFields/subComponents/inputs/checkbox/inputCheckbox.css

@@ -28,15 +28,15 @@
 .checkBoxField .inputContainer input[type=checkbox] ~ .checkboxIcons .icon {
   font-size: 24px;
 }
-.checkBoxField .inputContainer input[type=checkbox] ~ .checkboxIcons .icon-checkbox-unchecked {
+.checkBoxField .inputContainer input[type=checkbox] ~ .checkboxIcons .checkboxIconUnchecked {
   display: block;
 }
-.checkBoxField .inputContainer input[type=checkbox] ~ .checkboxIcons .icon-checkbox-checked {
+.checkBoxField .inputContainer input[type=checkbox] ~ .checkboxIcons .checkboxIconChecked {
   display: none;
 }
-.checkBoxField .inputContainer input[type=checkbox][checked] ~ .checkboxIcons .icon-checkbox-unchecked, .checkBoxField .inputContainer input[type=checkbox]:checked ~ .checkboxIcons .icon-checkbox-unchecked {
+.checkBoxField .inputContainer input[type=checkbox][checked] ~ .checkboxIcons .checkboxIconUnchecked, .checkBoxField .inputContainer input[type=checkbox]:checked ~ .checkboxIcons .checkboxIconUnchecked {
   display: none;
 }
-.checkBoxField .inputContainer input[type=checkbox][checked] ~ .checkboxIcons .icon-checkbox-checked, .checkBoxField .inputContainer input[type=checkbox]:checked ~ .checkboxIcons .icon-checkbox-checked {
+.checkBoxField .inputContainer input[type=checkbox][checked] ~ .checkboxIcons .checkboxIconChecked, .checkBoxField .inputContainer input[type=checkbox]:checked ~ .checkboxIcons .checkboxIconChecked {
   display: block;
 }

package/dist/cjs/components/form/formFields/subComponents/inputs/checkbox/inputCheckboxProps.js.map

@@ -1 +1 @@
-{"version":3,"file":"inputCheckboxProps.js","names":[],"sources":["../../../../../../../../src/components/form/formFields/subComponents/inputs/checkbox/inputCheckboxProps.ts"],"sourcesContent":["import { Message, Validate, ValidationRule } from 'react-hook-form';\nimport {\n  CustomContentProps,\n  CustomFieldCssClassesProps,\n  FieldProps,\n  FormFieldProps,\n  LabelProps\n} from '../../../formFieldWrapper/formFieldProps';\n\nexport interface InputCheckboxLabelProps extends Omit<LabelProps, 'hide' | 'position'> {\n  position?: 'left' | 'right';\n}\n\nexport interface InputCheckboxFieldProps extends Omit<FieldProps, 'type' | 'placeholder' | 'value' | 'defaultValue' | 'referenceDate' | 'includeEmptyOption' | 'options'> {\n  value: boolean | string;\n  defaultChecked?: boolean;\n  defaultValue?: boolean | string | number | readonly string[];\n}\n\nexport interface InputCheckboxValidationProps<TFieldValue = unknown, TFormValues = unknown> {\n  required?: Message | ValidationRule<boolean>;\n  validate?: Validate<TFieldValue, TFormValues> | Record<string, Validate<TFieldValue, TFormValues>>;\n  [key: string]:\n    | Message\n    | ValidationRule<RegExp>\n    | ValidationRule<number | string | boolean>\n    | Validate<TFieldValue, TFormValues>\n    | Record<string, Validate<TFieldValue, TFormValues>>\n    | undefined;\n}\n\nexport interface InputCheckboxProps extends Omit<FormFieldProps, 'label' | 'field' | 'layout' | 'validation'> {\n  label: InputCheckboxLabelProps,\n  field: InputCheckboxFieldProps,\n  validation?: InputCheckboxValidationProps;\n  showSpinner?: boolean;\n  customCssClasses?: CustomFieldCssClassesProps;\n  customContent?: CustomContentProps;\n}\n"],"mappings":"","ignoreList":[]}
+{"version":3,"file":"inputCheckboxProps.js","names":[],"sources":["../../../../../../../../src/components/form/formFields/subComponents/inputs/checkbox/inputCheckboxProps.ts"],"sourcesContent":["import { ReactElement, ReactNode } from 'react';\nimport {\n  CustomContentProps,\n  CustomFieldCssClassesProps,\n  FieldProps,\n  FormFieldProps,\n  LabelProps,\n  ValidationProps\n} from '../../../formFieldWrapper/formFieldProps';\n\nexport interface InputCheckboxLabelProps extends Omit<LabelProps, 'hide' | 'position'> {\n  position?: 'left' | 'right';\n}\n\nexport interface InputCheckboxIconsProps {\n  checked: string | ReactNode | ReactElement;\n  unchecked: string | ReactNode | ReactElement;\n}\n\nexport interface InputCheckboxFieldProps extends Omit<FieldProps, 'type' | 'placeholder' | 'value' | 'defaultValue' | 'referenceDate' | 'includeEmptyOption' | 'options'> {\n  value: boolean | string;\n  defaultChecked?: boolean;\n  defaultValue?: boolean | string | number | readonly string[];\n}\n\nexport interface InputCheckboxValidationProps<TFieldValue = unknown, TFormValues = unknown>\n  extends Omit<ValidationProps<TFieldValue, TFormValues>, 'validate'> {\n}\n\nexport interface InputCheckboxProps extends Omit<FormFieldProps, 'label' | 'field' | 'layout' | 'validation'> {\n  label: InputCheckboxLabelProps,\n  field: InputCheckboxFieldProps,\n  validation?: InputCheckboxValidationProps;\n  showSpinner?: boolean;\n  icons?: InputCheckboxIconsProps;\n  customCssClasses?: CustomFieldCssClassesProps;\n  customContent?: CustomContentProps;\n}\n"],"mappings":"","ignoreList":[]}

package/dist/cjs/components/form/formFields/subComponents/inputs/file/dragAndDrop/DragAndDropFileUpload.js

@@ -1,7 +1,6 @@
 "use strict";
 'use client';
 
-/* eslint-disable no-unused-vars */
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -15,13 +14,16 @@ var _Spinner = require("../../../../../../design/spinner/Spinner");
 var _FormFieldLabel = require("../../../../subComponents/labels/FormFieldLabel");
 var _InputFile = require("../../../../subComponents/inputs/file/InputFile");
 var _ValidationMessages = require("../../../../../validation/ValidationMessages");
-var _formUtilities = require("../../../../utilities/formUtilities");
 var _button = require("../../../../../buttons/button.helpers");
 var _FileAttachmentsList = require("../fileAttachmentList/FileAttachmentsList");
 var _constants = require("../../../../../../../constants");
 require("./dragAndDropFileUpload.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); }
-const DragAndDropFileUpload = ({
+const DragAndDropFileUpload = props => /*#__PURE__*/_react.default.createElement(_HookFormWrapper.HookFormWrapper, {
+  formContext: props.formContext
+}, /*#__PURE__*/_react.default.createElement(DragAndDropFileUploadField, props));
+exports.DragAndDropFileUpload = DragAndDropFileUpload;
+const DragAndDropFileUploadField = ({
   label,
   field,
   showSpinner,
@@ -51,9 +53,8 @@ const DragAndDropFileUpload = ({
 }) => {
   const {
     setValue,
-    trigger,
-    setError
-  } = (0, _reactHookForm.useFormContext)() || _formUtilities.NoHookFormContext;
+    trigger
+  } = (0, _reactHookForm.useFormContext)();
   const [activeFileList, setFileList] = (0, _react.useState)(fileList || []);
   const [isTouched, setIsTouched] = (0, _react.useState)(false);
   const [isDragActive, setIsDragActive] = (0, _react.useState)(false);
@@ -150,7 +151,7 @@ const DragAndDropFileUpload = ({
     ${showSpinner ? 'withSpinner' : ''} 
     ${label.hide ? 'hiddenLabel' : ''}
   `;
-  return /*#__PURE__*/_react.default.createElement(_HookFormWrapper.HookFormWrapper, null, /*#__PURE__*/_react.default.createElement("div", {
+  return /*#__PURE__*/_react.default.createElement("div", {
     className: wrapperCssClass,
     onDragOver: e => {
       e.preventDefault();
@@ -209,9 +210,8 @@ const DragAndDropFileUpload = ({
     files: activeFileList,
     onFilesRemoved: handleFilesEdited,
     onFilesEdited: handleFilesEdited
-  })));
+  }));
 };
-exports.DragAndDropFileUpload = DragAndDropFileUpload;
 var _default = exports.default = {
   DragAndDropFileUpload
 };

package/dist/cjs/components/form/formFields/subComponents/inputs/file/dragAndDrop/DragAndDropFileUpload.js.map

@@ -1 +1 @@
-{"version":3,"file":"DragAndDropFileUpload.js","names":["Object","defineProperty","exports","value","default","DragAndDropFileUpload","_react","_interopRequireWildcard","require","_iconDefinitions","_SvgIcon","_reactHookForm","_HookFormWrapper","_Spinner","_FormFieldLabel","_InputFile","_ValidationMessages","_formUtilities","_button","_FileAttachmentsList","_constants","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","has","get","set","hasOwnProperty","call","getOwnPropertyDescriptor","label","field","showSpinner","fileDisplayStyle","fileListSettings","fileList","validation","customContent","customCssClasses","labelStyle","labelAsButtonStyles","color","variant","labelUploadIcon","createElement","SvgIcon","svgDefinition","arrowUpFromBracket","multiple","restrictionsTxt","validFiles","extensions","DEFAULT_UPLOAD_FILE_EXTENSIONS","fileTypes","DEFAULT_UPLOAD_FILE_TYPES","maxFileCount","maxFileSize","onFilesChange","setValue","trigger","setError","useFormContext","NoHookFormContext","activeFileList","setFileList","useState","isTouched","setIsTouched","isDragActive","setIsDragActive","inputId","id","inputElRef","useRef","dialogOpenRef","useEffect","current","document","getElementById","onFocus","noneSelected","files","length","name","window","addEventListener","removeEventListener","supportedFileTypes","useMemo","join","validateAndCommit","useCallback","validated","filter","file","ext","split","pop","toLowerCase","isBlacklisted","BLACKLISTED_FILE_TYPES","includes","isValidExt","isValidSize","size","clipped","slice","shouldValidate","shouldDirty","shouldTouch","handleFileInputChange","event","target","Array","from","handleDrop","dropped","handleFilesEdited","wrapperCssClass","wrapper","position","labelProps","isRequired","required","labelStyleAsButtonClasses","generateButtonClass","cssClass","buttonStyle","hideLabel","hide","labelCssClass","HookFormWrapper","className","onDragOver","preventDefault","onDragLeave","currentTarget","onDrop","dataTransfer","labelId","htmlFor","onClick","FormFieldLabel","InputFile","type","defaultValue","accept","onInput","Spinner","map","index","key","ValidationMessages","FileAttachmentsList","customFileListSettings","onFilesRemoved","onFilesEdited","_default"],"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":[]}
+{"version":3,"file":"DragAndDropFileUpload.js","names":["Object","defineProperty","exports","value","default","DragAndDropFileUpload","_react","_interopRequireWildcard","require","_iconDefinitions","_SvgIcon","_reactHookForm","_HookFormWrapper","_Spinner","_FormFieldLabel","_InputFile","_ValidationMessages","_button","_FileAttachmentsList","_constants","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","has","get","set","hasOwnProperty","call","getOwnPropertyDescriptor","props","createElement","HookFormWrapper","formContext","DragAndDropFileUploadField","label","field","showSpinner","fileDisplayStyle","fileListSettings","fileList","validation","customContent","customCssClasses","labelStyle","labelAsButtonStyles","color","variant","labelUploadIcon","SvgIcon","svgDefinition","arrowUpFromBracket","multiple","restrictionsTxt","validFiles","extensions","DEFAULT_UPLOAD_FILE_EXTENSIONS","fileTypes","DEFAULT_UPLOAD_FILE_TYPES","maxFileCount","maxFileSize","onFilesChange","setValue","trigger","useFormContext","activeFileList","setFileList","useState","isTouched","setIsTouched","isDragActive","setIsDragActive","inputId","id","inputElRef","useRef","dialogOpenRef","useEffect","current","document","getElementById","onFocus","noneSelected","files","length","name","window","addEventListener","removeEventListener","supportedFileTypes","useMemo","join","validateAndCommit","useCallback","validated","filter","file","ext","split","pop","toLowerCase","isBlacklisted","BLACKLISTED_FILE_TYPES","includes","isValidExt","isValidSize","size","clipped","slice","shouldValidate","shouldDirty","shouldTouch","handleFileInputChange","event","target","Array","from","handleDrop","dropped","handleFilesEdited","wrapperCssClass","wrapper","position","labelProps","isRequired","required","labelStyleAsButtonClasses","generateButtonClass","cssClass","buttonStyle","hideLabel","hide","labelCssClass","className","onDragOver","preventDefault","onDragLeave","currentTarget","onDrop","dataTransfer","labelId","htmlFor","onClick","FormFieldLabel","InputFile","type","defaultValue","accept","onInput","Spinner","map","index","key","ValidationMessages","FileAttachmentsList","customFileListSettings","onFilesRemoved","onFilesEdited","_default"],"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/cjs/components/form/formFields/subComponents/inputs/radio/styled/StyledRadioGroup.js

@@ -33,11 +33,19 @@ const StyledRadioGroup = ({
 }) => {
   const [isTouched, setIsTouched] = (0, _react.useState)(false);
   const {
-    getValues,
+    control,
     setValue
   } = (0, _reactHookForm.useFormContext)();
-  const [groupValue, setGroupValue] = (0, _react.useState)(typeof defaultGroupValue !== 'undefined' ? defaultGroupValue : getValues(groupName));
+  const groupValue = (0, _reactHookForm.useWatch)({
+    control,
+    name: groupName
+  });
   const radioInputsGroup = (0, _react.useRef)(null);
+  (0, _react.useEffect)(() => {
+    if (typeof defaultGroupValue !== 'undefined') {
+      setValue(groupName, defaultGroupValue);
+    }
+  }, [defaultGroupValue, groupName, setValue]);
   (0, _hooks.useTabbableInputGroup)({
     groupWrappingElementRef: radioInputsGroup
   });
@@ -46,8 +54,10 @@ const StyledRadioGroup = ({
       target
     } = event;
     const newValue = target.value;
-    setValue(groupName, newValue);
-    setGroupValue(newValue);
+    setValue(groupName, newValue, {
+      shouldValidate: true,
+      shouldDirty: true
+    });
     setIsTouched(true);
     onChange(newValue);
   };