@x15ventures/x15-ui-library 3.14.0 → 3.15.1

package/dist/esm/components/design/skeleton/skeleton.css

@@ -0,0 +1,86 @@
+.skeleton {
+  display: inline-flex;
+  flex-direction: column;
+  align-items: stretch;
+  gap: var(--skeletonLineGap, 8px);
+  vertical-align: middle;
+  inline-size: var(--skeletonWidth, 100%);
+  max-inline-size: 100%;
+}
+
+.skeletonBar {
+  inline-size: 100%;
+  block-size: var(--skeletonHeight, var(--skeletonLineHeight, 1em));
+  background-color: var(--skeletonBg, #eef2f4);
+  border-radius: var(--skeletonBorderRadius, 3px);
+}
+
+/* Variants */
+.skeleton_text .skeletonBar:last-child:not(:only-child) {
+  inline-size: var(--skeletonLastLineWidth, 60%);
+}
+
+.skeleton_block .skeletonBar {
+  block-size: var(--skeletonHeight, var(--skeletonBlockHeight, 120px));
+  border-radius: 0;
+}
+
+.skeleton_rounded .skeletonBar {
+  block-size: var(--skeletonHeight, var(--skeletonBlockHeight, 120px));
+  border-radius: var(--skeletonRoundedBorderRadius, 8px);
+}
+
+.skeleton_circle {
+  inline-size: var(--skeletonWidth, var(--skeletonCircleSize, 40px));
+}
+.skeleton_circle .skeletonBar {
+  block-size: auto;
+  aspect-ratio: 1;
+  border-radius: 50%;
+}
+
+/* Appearance */
+.skeleton_opaque .skeletonBar {
+  background-color: var(--skeletonOpaqueBg, #d3dee4);
+}
+
+.skeleton_wave .skeletonBar {
+  position: relative;
+  overflow: hidden;
+}
+.skeleton_wave .skeletonBar::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  transform: translateX(-100%);
+  background-image: linear-gradient(90deg, transparent, var(--skeletonHighlight, #f6f8fa), transparent);
+  animation: skeletonWave var(--skeletonAnimationDuration, 1.6s) linear infinite;
+}
+
+.skeleton_pulse .skeletonBar {
+  opacity: 1;
+  animation: skeletonPulse var(--skeletonAnimationDuration, 1.6s) ease-in-out infinite alternate;
+}
+
+@keyframes skeletonWave {
+  to {
+    transform: translateX(100%);
+  }
+}
+@keyframes skeletonPulse {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0.3;
+  }
+}
+@media (prefers-reduced-motion: reduce) {
+  .skeleton_wave .skeletonBar::after {
+    display: none;
+  }
+  .skeleton_pulse .skeletonBar {
+    animation: none;
+    opacity: 1;
+  }
+}

package/dist/esm/components/form/formFields/formFieldWrapper/FormField.js

@@ -19,7 +19,8 @@ export const FormField = ({
   validation,
   customContent,
   customCssClasses,
-  separateLabelAndField = false
+  separateLabelAndField = false,
+  formContext
 }) => {
   const [isTouched, setIsTouched] = useState(false);
   const wrapperCssClass = `
@@ -64,9 +65,9 @@ export const FormField = ({
       case 'select':
         return /*#__PURE__*/React.createElement(Select, fieldProps);
       case 'checkbox':
-        return new Error('Checkboxes require special handling. Please use the InputCheckbox component instead.');
+        throw new Error('Checkboxes require special handling. Please use the InputCheckbox component instead.');
       case 'file':
-        return new Error('File inputs require special handling. Please use the DragAndDropFileUpload component instead.');
+        throw new Error('File inputs require special handling. Please use the DragAndDropFileUpload component instead.');
       case 'password':
         return /*#__PURE__*/React.createElement(InputText, fieldProps);
       case 'date':
@@ -85,7 +86,9 @@ export const FormField = ({
     isRequired: validation && typeof validation.required !== 'undefined',
     customContent
   };
-  return /*#__PURE__*/React.createElement(HookFormWrapper, null, /*#__PURE__*/React.createElement("div", {
+  return /*#__PURE__*/React.createElement(HookFormWrapper, {
+    formContext: formContext
+  }, /*#__PURE__*/React.createElement("div", {
     className: wrapperCssClass,
     title: wrapperHoverText()
   }, /*#__PURE__*/React.createElement("label", {
@@ -94,7 +97,7 @@ export const FormField = ({
     htmlFor: field.id
   }, (!label?.position || label.position === 'left' || separateLabelAndField) && /*#__PURE__*/React.createElement(FormFieldLabel, labelProps), !separateLabelAndField && /*#__PURE__*/React.createElement("span", {
     className: "inputContainer"
-  }, getFieldElement(), label?.position === 'inset' && /*#__PURE__*/React.createElement(FormFieldLabel, labelProps)), label?.position === 'right' && /*#__PURE__*/React.createElement(FormFieldLabel, labelProps), showSpinner && /*#__PURE__*/React.createElement(Spinner, null), field.type !== 'textarea' && /*#__PURE__*/React.createElement(ValidationMessages, {
+  }, getFieldElement(), label?.position === 'inset' && /*#__PURE__*/React.createElement(FormFieldLabel, labelProps)), label?.position === 'right' && /*#__PURE__*/React.createElement(FormFieldLabel, labelProps), showSpinner && /*#__PURE__*/React.createElement(Spinner, null), /*#__PURE__*/React.createElement(ValidationMessages, {
     name: field.name,
     validation: validation
   })), separateLabelAndField && /*#__PURE__*/React.createElement("div", {

package/dist/esm/components/form/formFields/formFieldWrapper/FormField.js.map

@@ -1 +1 @@
-{"version":3,"file":"FormField.js","names":["React","useState","HookFormWrapper","FormFieldLabel","InputText","ValidationMessages","Spinner","InputSearch","InputDate","Select","Textarea","Autocomplete","FormField","label","field","layout","showSpinner","validation","customContent","customCssClasses","separateLabelAndField","isTouched","setIsTouched","wrapperCssClass","type","wrapper","position","wrapperHoverText","hide","undefined","placeholder","text","getFieldElement","fieldType","toLowerCase","fieldProps","defaultValue","onTouched","createElement","Error","labelProps","inputId","id","isRequired","required","className","title","labelId","htmlFor","name"],"sources":["../../../../../../src/components/form/formFields/formFieldWrapper/FormField.tsx"],"sourcesContent":["'use client';\n\nimport React, { ReactNode, useState } from 'react';\nimport { HookFormWrapper } from '../../hookFormWrapper/HookFormWrapper';\nimport { FormFieldLabel } from '../subComponents/labels/FormFieldLabel';\nimport { FormFieldProps } from './formFieldProps';\nimport { InputText } from '../subComponents/inputs/text/InputText';\nimport { ValidationMessages } from '../../validation/ValidationMessages';\nimport { Spinner } from '../../../design/spinner/Spinner';\nimport { InputSearch } from '../subComponents/inputs/search/InputSearch';\nimport { InputDate } from '../subComponents/inputs/date/InputDate';\nimport { Select } from '../subComponents/select/Select';\nimport { Textarea } from '../subComponents/textarea/Textarea';\nimport { Autocomplete } from '../subComponents/inputs/autocomplete/Autocomplete';\n\nexport const FormField: React.FC<FormFieldProps> = (\n  {\n    label,\n    field,\n    layout = 'stacked',\n    showSpinner,\n    validation,\n    customContent,\n    customCssClasses,\n    separateLabelAndField = false\n  }\n) => {\n  const [isTouched, setIsTouched] = useState(false);\n\n  const wrapperCssClass = `\n    formField \n    ${ layout } \n    ${ field.type }_Field \n    ${ customCssClasses?.wrapper || '' } \n    ${ isTouched ? 'touched' : '' } \n    ${ typeof validation !== 'undefined' ? 'withValidation' : '' } \n    ${ label?.position === 'inset' ? 'insetLabel' : '' }\n  `;\n\n  const wrapperHoverText = (): string | undefined => {\n    if (!label.hide) {\n      return undefined;\n    }\n\n    if (field.placeholder) {\n      return field.placeholder;\n    }\n\n    if (typeof label.text === 'string') {\n      return label.text;\n    }\n\n    return undefined;\n  };\n\n  const getFieldElement = () => {\n    const fieldType = field.type.toLowerCase();\n    const fieldProps = {\n      field: {\n        ...field,\n        ...(fieldType !== 'checkbox' ? { defaultValue: field.defaultValue || '' } : {}),\n        onTouched: () => setIsTouched(true)\n      },\n      label,\n      showSpinner,\n      validation,\n      customContent\n    };\n\n    switch (fieldType) {\n    case 'textarea':\n      return <Textarea { ...fieldProps } />;\n    case 'select':\n      return <Select { ...fieldProps } />;\n    case 'checkbox':\n      return new Error('Checkboxes require special handling. Please use the InputCheckbox component instead.');\n    case 'file':\n      return new Error('File inputs require special handling. Please use the DragAndDropFileUpload component instead.');\n    case 'password':\n      return <InputText { ...fieldProps } />;\n    case 'date':\n      return <InputDate { ...fieldProps } />;\n    case 'search':\n      return <InputSearch { ...fieldProps } />;\n    case 'combobox':\n      return <Autocomplete { ...fieldProps } />;\n    default:\n      return <InputText { ...fieldProps } />;\n    }\n  };\n\n  const labelProps = {\n    ...label,\n    inputId: field.id,\n    isRequired: validation && typeof validation.required !== 'undefined',\n    customContent\n  };\n\n  return (\n    <HookFormWrapper>\n      <div\n        className={ wrapperCssClass }\n        title={ wrapperHoverText() }\n      >\n        <label\n          id={ label.labelId || `${ field.id }_label` }\n          className={ `${ customCssClasses?.label || '' } ${ showSpinner ? 'withSpinner' : '' } ${ label.hide ? 'hiddenLabel' : '' }` }\n          htmlFor={ field.id }\n        >\n\n          { (!label?.position || label.position === 'left' || separateLabelAndField)\n            && <FormFieldLabel { ...labelProps } /> }\n\n          {\n            !separateLabelAndField && (\n              <span className=\"inputContainer\">\n                {\n                getFieldElement() as ReactNode\n                }\n                { label?.position === 'inset'\n                && <FormFieldLabel { ...labelProps } /> }\n              </span>\n            )\n          }\n\n          { label?.position === 'right'\n            && <FormFieldLabel { ...labelProps } /> }\n\n          {\n            showSpinner && <Spinner />\n          }\n\n          { field.type !== 'textarea' && <ValidationMessages name={ field.name } validation={ validation } /> }\n        </label>\n\n        {\n          separateLabelAndField && (\n            <div className=\"inputContainer\">\n              {\n                getFieldElement() as ReactNode\n              }\n            </div>\n          )\n        }\n      </div>\n    </HookFormWrapper>\n  );\n};\n\nexport default FormField;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"FormField.js","names":["React","useState","HookFormWrapper","FormFieldLabel","InputText","ValidationMessages","Spinner","InputSearch","InputDate","Select","Textarea","Autocomplete","FormField","label","field","layout","showSpinner","validation","customContent","customCssClasses","separateLabelAndField","formContext","isTouched","setIsTouched","wrapperCssClass","type","wrapper","position","wrapperHoverText","hide","undefined","placeholder","text","getFieldElement","fieldType","toLowerCase","fieldProps","defaultValue","onTouched","createElement","Error","labelProps","inputId","id","isRequired","required","className","title","labelId","htmlFor","name"],"sources":["../../../../../../src/components/form/formFields/formFieldWrapper/FormField.tsx"],"sourcesContent":["'use client';\n\nimport React, { useState } from 'react';\nimport { HookFormWrapper } from '../../hookFormWrapper/HookFormWrapper';\nimport { FormFieldLabel } from '../subComponents/labels/FormFieldLabel';\nimport { FormFieldProps } from './formFieldProps';\nimport { InputText } from '../subComponents/inputs/text/InputText';\nimport { ValidationMessages } from '../../validation/ValidationMessages';\nimport { Spinner } from '../../../design/spinner/Spinner';\nimport { InputSearch } from '../subComponents/inputs/search/InputSearch';\nimport { InputDate } from '../subComponents/inputs/date/InputDate';\nimport { Select } from '../subComponents/select/Select';\nimport { Textarea } from '../subComponents/textarea/Textarea';\nimport { Autocomplete } from '../subComponents/inputs/autocomplete/Autocomplete';\n\nexport const FormField: React.FC<FormFieldProps> = (\n  {\n    label,\n    field,\n    layout = 'stacked',\n    showSpinner,\n    validation,\n    customContent,\n    customCssClasses,\n    separateLabelAndField = false,\n    formContext\n  }\n) => {\n  const [isTouched, setIsTouched] = useState(false);\n\n  const wrapperCssClass = `\n    formField \n    ${ layout } \n    ${ field.type }_Field \n    ${ customCssClasses?.wrapper || '' } \n    ${ isTouched ? 'touched' : '' } \n    ${ typeof validation !== 'undefined' ? 'withValidation' : '' } \n    ${ label?.position === 'inset' ? 'insetLabel' : '' }\n  `;\n\n  const wrapperHoverText = (): string | undefined => {\n    if (!label.hide) {\n      return undefined;\n    }\n\n    if (field.placeholder) {\n      return field.placeholder;\n    }\n\n    if (typeof label.text === 'string') {\n      return label.text;\n    }\n\n    return undefined;\n  };\n\n  const getFieldElement = () => {\n    const fieldType = field.type.toLowerCase();\n    const fieldProps = {\n      field: {\n        ...field,\n        ...(fieldType !== 'checkbox' ? { defaultValue: field.defaultValue || '' } : {}),\n        onTouched: () => setIsTouched(true)\n      },\n      label,\n      showSpinner,\n      validation,\n      customContent\n    };\n\n    switch (fieldType) {\n    case 'textarea':\n      return <Textarea { ...fieldProps } />;\n    case 'select':\n      return <Select { ...fieldProps } />;\n    case 'checkbox':\n      throw new Error('Checkboxes require special handling. Please use the InputCheckbox component instead.');\n    case 'file':\n      throw new Error('File inputs require special handling. Please use the DragAndDropFileUpload component instead.');\n    case 'password':\n      return <InputText { ...fieldProps } />;\n    case 'date':\n      return <InputDate { ...fieldProps } />;\n    case 'search':\n      return <InputSearch { ...fieldProps } />;\n    case 'combobox':\n      return <Autocomplete { ...fieldProps } />;\n    default:\n      return <InputText { ...fieldProps } />;\n    }\n  };\n\n  const labelProps = {\n    ...label,\n    inputId: field.id,\n    isRequired: validation && typeof validation.required !== 'undefined',\n    customContent\n  };\n\n  return (\n    <HookFormWrapper formContext={ formContext }>\n      <div\n        className={ wrapperCssClass }\n        title={ wrapperHoverText() }\n      >\n        <label\n          id={ label.labelId || `${ field.id }_label` }\n          className={ `${ customCssClasses?.label || '' } ${ showSpinner ? 'withSpinner' : '' } ${ label.hide ? 'hiddenLabel' : '' }` }\n          htmlFor={ field.id }\n        >\n\n          { (!label?.position || label.position === 'left' || separateLabelAndField)\n            && <FormFieldLabel { ...labelProps } /> }\n\n          {\n            !separateLabelAndField && (\n              <span className=\"inputContainer\">\n                {\n                  getFieldElement()\n                }\n                { label?.position === 'inset'\n                && <FormFieldLabel { ...labelProps } /> }\n              </span>\n            )\n          }\n\n          { label?.position === 'right'\n            && <FormFieldLabel { ...labelProps } /> }\n\n          {\n            showSpinner && <Spinner />\n          }\n\n          <ValidationMessages name={ field.name } validation={ validation } />\n        </label>\n\n        {\n          separateLabelAndField && (\n            <div className=\"inputContainer\">\n              {\n                getFieldElement()\n              }\n            </div>\n          )\n        }\n      </div>\n    </HookFormWrapper>\n  );\n};\n\nexport default FormField;\n"],"mappings":"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","ignoreList":[]}

package/dist/esm/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/esm/components/form/formFields/subComponents/inputs/autocomplete/Autocomplete.js

@@ -1,6 +1,6 @@
 'use client';
 
-import React, { useState, useRef, useMemo } from 'react';
+import React, { useState, useRef, useMemo, useCallback } from 'react';
 import { useFormContext } from 'react-hook-form';
 import { useDebouncedCallback } from 'use-debounce';
 import { useOnClickOutside, usePopupKeys } from '../../../../../../hooks';
@@ -24,7 +24,7 @@ export const Autocomplete = ({
   const [isOpen, setIsOpen] = useState(false);
   const [filteredOptions, setFilteredOptions] = useState(field.options || []);
   const [selectedOption, setSelectedOption] = useState(null);
-  const [inputValue, setInputValue] = useState('');
+  const inputElement = useRef(null);
   useOnClickOutside(wrapperElement, () => setIsOpen(false));
   usePopupKeys(wrapperElement, () => setIsOpen(false));
   const filterOptions = useDebouncedCallback(searchTerm => {
@@ -43,15 +43,20 @@ export const Autocomplete = ({
     setIsOpen(true);
     onInputChange(searchTerm);
   }, debounceTime);
-  const handleInputChange = event => {
-    const newValue = event.target.value;
-    setInputValue(newValue);
-    filterOptions(newValue.toLowerCase());
-  };
+  const handleInputChange = 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);
@@ -68,8 +73,7 @@ export const Autocomplete = ({
         'aria-haspopup': 'listbox',
         role: 'combobox',
         onFocus: () => setIsOpen(true),
-        onChange: handleInputChange,
-        defaultValue: inputValue
+        onChange: handleInputChange
       },
       label,
       validation,
@@ -77,7 +81,7 @@ export 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.createElement("div", {
     ref: wrapperElement,
     className: `autocompleteWrapper ${isOpen ? 'open' : 'closed'}`

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

@@ -1 +1 @@
-{"version":3,"file":"Autocomplete.js","names":["React","useState","useRef","useMemo","useFormContext","useDebouncedCallback","useOnClickOutside","usePopupKeys","InputText","Autocomplete","field","label","validation","showSpinner","customCssClasses","customContent","onOptionSelect","onInputChange","debounceTime","setValue","wrapperElement","isOpen","setIsOpen","filteredOptions","setFilteredOptions","options","selectedOption","setSelectedOption","inputValue","setInputValue","filterOptions","searchTerm","matchingOptions","filter","option","toLowerCase","includes","JSON","stringify","handleInputChange","event","newValue","target","value","handleOptionSelect","displayValue","name","optionsContainerId","id","comboBoxFieldProps","type","role","onFocus","onChange","defaultValue","createElement","ref","className","tabIndex","length","map","optionId","key","onClick"],"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":["React","useState","useRef","useMemo","useCallback","useFormContext","useDebouncedCallback","useOnClickOutside","usePopupKeys","InputText","Autocomplete","field","label","validation","showSpinner","customCssClasses","customContent","onOptionSelect","onInputChange","debounceTime","setValue","wrapperElement","isOpen","setIsOpen","filteredOptions","setFilteredOptions","options","selectedOption","setSelectedOption","inputElement","filterOptions","searchTerm","matchingOptions","filter","option","toLowerCase","includes","JSON","stringify","handleInputChange","event","current","target","value","handleOptionSelect","displayValue","name","shouldValidate","shouldDirty","optionsContainerId","id","comboBoxFieldProps","type","role","onFocus","onChange","createElement","ref","className","tabIndex","length","map","optionId","key","onClick"],"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/esm/components/form/formFields/subComponents/inputs/checkbox/InputCheckbox.js

@@ -1,19 +1,22 @@
 'use client';
 
-import React, { useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import { useFormContext } from 'react-hook-form';
-import { NoHookFormContext } from '../../../utilities/formUtilities';
 import { HookFormWrapper } from '../../../../hookFormWrapper/HookFormWrapper';
 import { FormFieldLabel } from '../../labels/FormFieldLabel';
 import { ValidationMessages } from '../../../../validation/ValidationMessages';
 import { Spinner } from '../../../../../design/spinner/Spinner';
 import { Icon } from '../../../../../design/icons/basicIcon/Icon';
 import './inputCheckbox.css';
-export const InputCheckbox = ({
+export const InputCheckbox = props => /*#__PURE__*/React.createElement(HookFormWrapper, {
+  formContext: props.formContext
+}, /*#__PURE__*/React.createElement(InputCheckboxField, props));
+const InputCheckboxField = ({
   label,
   field: {
     id,
     name,
+    value,
     defaultChecked,
     onBlur = () => {},
     onChange = () => {},
@@ -21,16 +24,27 @@ export const InputCheckbox = ({
   },
   validation,
   showSpinner,
+  icons,
   customCssClasses,
   customContent
 }) => {
   const [isTouched, setIsTouched] = useState(false);
   const {
     register,
-    getFieldState
-  } = useFormContext() || NoHookFormContext;
-  ;
+    getFieldState,
+    setValue
+  } = useFormContext();
   const fieldState = getFieldState(name);
+
+  // Initialize the form value with defaultChecked on mount
+  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';
@@ -50,19 +64,26 @@ export const InputCheckbox = ({
     isRequired,
     customContent
   };
+  const checkedIcon = icons?.checked ?? /*#__PURE__*/React.createElement(Icon, {
+    icon: "checkbox-checked"
+  });
+  const uncheckedIcon = icons?.unchecked ?? /*#__PURE__*/React.createElement(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.createElement(HookFormWrapper, null, /*#__PURE__*/React.createElement("div", {
+  return /*#__PURE__*/React.createElement("div", {
     className: wrapperCssClass
   }, /*#__PURE__*/React.createElement("label", {
     id: label.labelId || `${id}_label`,
@@ -71,15 +92,16 @@ export const InputCheckbox = ({
   }, label.position === 'left' && /*#__PURE__*/React.createElement(FormFieldLabel, labelProps), /*#__PURE__*/React.createElement("div", {
     className: "inputContainer"
   }, /*#__PURE__*/React.createElement("input", inputProps), /*#__PURE__*/React.createElement("span", {
-    className: "checkboxIcons"
-  }, /*#__PURE__*/React.createElement(Icon, {
-    icon: "checkbox-unchecked"
-  }), /*#__PURE__*/React.createElement(Icon, {
-    icon: "checkbox-checked"
-  }))), (!label?.position || label?.position === 'right') && /*#__PURE__*/React.createElement(FormFieldLabel, labelProps), showSpinner && /*#__PURE__*/React.createElement(Spinner, null), /*#__PURE__*/React.createElement(ValidationMessages, {
+    className: "checkboxIcons",
+    "aria-hidden": "true"
+  }, /*#__PURE__*/React.createElement("span", {
+    className: "checkboxIcon checkboxIconUnchecked"
+  }, uncheckedIcon), /*#__PURE__*/React.createElement("span", {
+    className: "checkboxIcon checkboxIconChecked"
+  }, checkedIcon))), (!label?.position || label?.position === 'right') && /*#__PURE__*/React.createElement(FormFieldLabel, labelProps), showSpinner && /*#__PURE__*/React.createElement(Spinner, null), /*#__PURE__*/React.createElement(ValidationMessages, {
     name: name,
     validation: validation
-  }))));
+  })));
 };
 export const CheckboxInput = props => /*#__PURE__*/React.createElement(InputCheckbox, props);
 //# sourceMappingURL=InputCheckbox.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"InputCheckbox.js","names":["React","useState","useFormContext","NoHookFormContext","HookFormWrapper","FormFieldLabel","ValidationMessages","Spinner","Icon","InputCheckbox","label","field","id","name","defaultChecked","onBlur","onChange","onTouched","validation","showSpinner","customCssClasses","customContent","isTouched","setIsTouched","register","getFieldState","fieldState","wrapperCssClass","wrapper","inputCssClass","input","invalid","isRequired","required","HandleOnBlur","event","target","labelProps","inputId","inputProps","type","className","createElement","labelId","htmlFor","position","icon","CheckboxInput","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":["React","useEffect","useState","useFormContext","HookFormWrapper","FormFieldLabel","ValidationMessages","Spinner","Icon","InputCheckbox","props","createElement","formContext","InputCheckboxField","label","field","id","name","value","defaultChecked","onBlur","onChange","onTouched","validation","showSpinner","icons","customCssClasses","customContent","isTouched","setIsTouched","register","getFieldState","setValue","fieldState","shouldValidate","shouldDirty","wrapperCssClass","wrapper","inputCssClass","input","invalid","isRequired","required","HandleOnBlur","event","target","labelProps","inputId","checkedIcon","checked","icon","uncheckedIcon","unchecked","inputProps","type","String","className","labelId","htmlFor","position","CheckboxInput"],"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/esm/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/esm/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/esm/components/form/formFields/subComponents/inputs/file/dragAndDrop/DragAndDropFileUpload.js

@@ -1,6 +1,5 @@
 'use client';
 
-/* eslint-disable no-unused-vars */
 import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { arrowUpFromBracket } from '@x15ventures/x15-ui-library-icons/iconDefinitions';
 import { SvgIcon } from '@x15ventures/x15-ui-library-icons/svgIcon/SvgIcon';
@@ -10,12 +9,14 @@ import { Spinner } from '../../../../../../design/spinner/Spinner';
 import { FormFieldLabel } from '../../../../subComponents/labels/FormFieldLabel';
 import { InputFile } from '../../../../subComponents/inputs/file/InputFile';
 import { ValidationMessages } from '../../../../../validation/ValidationMessages';
-import { NoHookFormContext } from '../../../../utilities/formUtilities';
 import { generateButtonClass } from '../../../../../buttons/button.helpers';
 import { FileAttachmentsList } from '../fileAttachmentList/FileAttachmentsList';
 import { DEFAULT_UPLOAD_FILE_EXTENSIONS, DEFAULT_UPLOAD_FILE_TYPES, BLACKLISTED_FILE_TYPES } from '../../../../../../../constants';
 import './dragAndDropFileUpload.css';
-export const DragAndDropFileUpload = ({
+export const DragAndDropFileUpload = props => /*#__PURE__*/React.createElement(HookFormWrapper, {
+  formContext: props.formContext
+}, /*#__PURE__*/React.createElement(DragAndDropFileUploadField, props));
+const DragAndDropFileUploadField = ({
   label,
   field,
   showSpinner,
@@ -45,9 +46,8 @@ export const DragAndDropFileUpload = ({
 }) => {
   const {
     setValue,
-    trigger,
-    setError
-  } = useFormContext() || NoHookFormContext;
+    trigger
+  } = useFormContext();
   const [activeFileList, setFileList] = useState(fileList || []);
   const [isTouched, setIsTouched] = useState(false);
   const [isDragActive, setIsDragActive] = useState(false);
@@ -144,7 +144,7 @@ export const DragAndDropFileUpload = ({
     ${showSpinner ? 'withSpinner' : ''} 
     ${label.hide ? 'hiddenLabel' : ''}
   `;
-  return /*#__PURE__*/React.createElement(HookFormWrapper, null, /*#__PURE__*/React.createElement("div", {
+  return /*#__PURE__*/React.createElement("div", {
     className: wrapperCssClass,
     onDragOver: e => {
       e.preventDefault();
@@ -203,7 +203,7 @@ export const DragAndDropFileUpload = ({
     files: activeFileList,
     onFilesRemoved: handleFilesEdited,
     onFilesEdited: handleFilesEdited
-  })));
+  }));
 };
 export default {
   DragAndDropFileUpload