@ssa-ui-kit/core 2.15.0-canary-8972259-20250507 → 2.16.0

package/dist/index.js

@@ -11307,11 +11307,11 @@ const Calendar_DatePickerCalendar = () => {
   };
   const {
     calendarType,
-    calendarClassname
+    classNames
   } = useDateRangePickerContext();
   const Component = components[calendarType];
   return (0,jsx_runtime_namespaceObject.jsxs)(PopoverContent, {
-    className: ['popover', calendarClassname].filter(Boolean).join(' '),
+    className: ['popover', classNames?.calendar].filter(Boolean).join(' '),
     "data-testid": "daterangepicker-calendar",
     css: /*#__PURE__*/(0,react_namespaceObject.css)({
       background: theme.colors.white,
@@ -11529,6 +11529,7 @@ const WithTriggerPopover = ({
 const TriggerInput = ({
   datepickerType,
   withPopover = false,
+  className,
   onClick
 }) => {
   const {
@@ -11574,6 +11575,7 @@ const TriggerInput = ({
       ref: datepickerType === 'from' ? inputFromRef : inputToRef,
       disabled: disabled,
       register: register,
+      className: className,
       inputProps: {
         onBlur: handleBlur,
         onClick: handleOpen,
@@ -11630,7 +11632,7 @@ const Trigger = () => {
     openCalendarMode,
     isOpen,
     showCalendarIcon,
-    triggerClassname,
+    classNames,
     setIsOpen,
     handleToggleOpen
   } = useDateRangePickerContext();
@@ -11653,16 +11655,19 @@ const Trigger = () => {
     status: status,
     disabled: disabled,
     "data-testid": "daterangepicker",
-    className: triggerClassname,
+    className: classNames?.trigger?.root,
     children: [(0,jsx_runtime_namespaceObject.jsx)(FieldLabel, {
       htmlFor: lastFocusedElement === 'from' ? nameFrom : nameTo,
+      className: classNames?.label,
       children: label
     }), (0,jsx_runtime_namespaceObject.jsx)(FieldControl, {
       children: (0,jsx_runtime_namespaceObject.jsxs)(Wrapper_Wrapper, {
         ref: wrapperRef,
+        className: classNames?.trigger?.controlsWrapper,
         children: [(0,jsx_runtime_namespaceObject.jsx)(TriggerInput, {
           withPopover: true,
           datepickerType: "from",
+          className: classNames?.trigger?.inputFrom,
           onClick: () => {
             if (!isOpen) {
               setIsOpen(true);
@@ -11672,9 +11677,11 @@ const Trigger = () => {
           name: "carrot-right",
           size: 18,
           color: theme.colors.greyDarker80,
+          className: classNames?.trigger?.icon,
           css: Trigger_ref
         }), (0,jsx_runtime_namespaceObject.jsx)(TriggerInput, {
           datepickerType: "to",
+          className: classNames?.trigger?.inputTo,
           onClick: () => {
             if (!isOpen) {
               setIsOpen(true);
@@ -17514,7 +17521,6 @@ const TypeaheadContext = /*#__PURE__*/external_react_namespaceObject.createConte
   options: [],
   placeholder: '',
   useFormResult: {},
-  error: undefined,
   setValue: () => {
     /* no-op */
   },
@@ -17522,7 +17528,7 @@ const TypeaheadContext = /*#__PURE__*/external_react_namespaceObject.createConte
     /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
     return {};
   },
-  onChange: () => {
+  handleChange: () => {
     /* no-op */
   },
   handleClearAll: () => {
@@ -17542,6 +17548,9 @@ const TypeaheadContext = /*#__PURE__*/external_react_namespaceObject.createConte
   },
   handleRemoveSelectedClick: () => () => {
     /* no-op */
+  },
+  handleSelectedClick: () => {
+    /* no-op */
   }
 });
 const useTypeaheadContext = () => external_react_namespaceObject.useContext(TypeaheadContext);
@@ -17549,18 +17558,10 @@ const useTypeaheadContext = () => external_react_namespaceObject.useContext(Type
 
 
 
-const findExactMatch = (input, options) => {
-  const normalizedInput = input.toLowerCase();
-  return Object.values(options).find(opt => {
-    const labelText = (opt.label ?? opt.value).toString().toLowerCase();
-    return labelText === normalizedInput;
-  });
-};
 const useTypeahead = ({
   name = 'typeahead-input',
   isOpen: isInitOpen,
-  selectedItems: providedSelectedItems,
-  defaultSelectedItems,
+  selectedItems,
   isDisabled,
   isMultiple,
   children,
@@ -17573,8 +17574,8 @@ const useTypeahead = ({
   error,
   success,
   placeholder,
-  filterOptions = true,
-  autoSelect = true,
+  register,
+  setValue,
   onChange,
   onClearAll,
   onRemoveSelectedClick,
@@ -17582,250 +17583,271 @@ const useTypeahead = ({
   renderOption
 }) => {
   const inputName = `${name}-text`;
-  const defaultForm = (0,external_react_hook_form_namespaceObject.useForm)();
-  const form = (0,external_react_hook_form_namespaceObject.useFormContext)() ?? defaultForm;
-  const {
-    register,
-    setValue,
-    watch
-  } = form;
-  const formFieldValue = watch(name);
-  const controlledValue = (() => {
-    if (providedSelectedItems) {
-      return providedSelectedItems;
-    }
-    // controlledValue should be undefined if defaultSelectedItems is provided
-    if (defaultSelectedItems) {
-      return;
+  const [isOpen, setIsOpen] = (0,external_react_namespaceObject.useState)(isInitOpen || false);
+  const [selected, setSelected] = (0,external_react_namespaceObject.useState)(selectedItems || []);
+  const [optionsWithKey, setOptionsWithKey] = (0,external_react_namespaceObject.useState)({});
+  const [isEmpty, setIsEmpty] = (0,external_react_namespaceObject.useState)(true);
+  const [isFirstRender, setFirstRender] = (0,external_react_namespaceObject.useState)(true);
+  const [items, setItems] = (0,external_react_namespaceObject.useState)();
+  const [inputValue, setInputValue] = (0,external_react_namespaceObject.useState)('');
+  const [status, setStatus] = (0,external_react_namespaceObject.useState)('basic');
+  const [firstSuggestion, setFirstSuggestion] = (0,external_react_namespaceObject.useState)('');
+  const inputRef = (0,external_react_namespaceObject.useRef)(null);
+  const typeaheadId = (0,external_react_namespaceObject.useId)();
+  const triggerRef = (0,external_react_namespaceObject.useRef)(null);
+  const useFormResult = (0,external_react_hook_form_namespaceObject.useForm)();
+  (0,external_react_namespaceObject.useEffect)(() => {
+    if (!register) {
+      console.warn('Typeahead component must be used within a Form component');
     }
+  }, []);
+  (0,external_react_namespaceObject.useEffect)(() => {
     if (isMultiple) {
-      return Array.isArray(formFieldValue) ? formFieldValue : [];
+      setValue?.(name, selected, {
+        shouldDirty: !isFirstRender
+      });
+      setInputValue('');
+      setFirstSuggestion('');
+    } else {
+      setValue?.(name, selected.length ? selected[0] : [], {
+        shouldDirty: !isFirstRender
+      });
     }
-    return ['number', 'string'].includes(typeof formFieldValue) ? [formFieldValue] : [];
-  })();
-  const [isOpen, _setIsOpen] = (0,hooks_namespaceObject.useUncontrolled)({
-    defaultValue: isInitOpen,
-    finalValue: false
-  });
-  const [selectedItems, setSelected] = (0,hooks_namespaceObject.useUncontrolled)({
-    value: controlledValue,
-    defaultValue: defaultSelectedItems,
-    finalValue: []
-  });
-  const [rawInput, setRawInput] = (0,external_react_namespaceObject.useState)(null);
-  const {
-    ref: inputRef
-  } = (0,hooks_namespaceObject.useElementSize)();
-  const triggerRef = (0,external_react_namespaceObject.useRef)(null);
-  (0,external_react_hook_form_namespaceObject.useController)({
-    name,
-    rules: validationSchema,
-    defaultValue: isMultiple ? selectedItems : selectedItems[0]
-  });
-  const typeaheadId = (0,external_react_namespaceObject.useId)();
-  const optionsWithKey = (0,external_react_namespaceObject.useMemo)(() => {
-    const opts = {};
-    external_react_default().Children.forEach(children, child => {
-      if (/*#__PURE__*/external_react_default().isValidElement(child)) {
-        opts[child.props.value] = child.props;
-      }
+    handleOnEmptyChange(!selected.length);
+  }, [selected]);
+  (0,external_react_namespaceObject.useEffect)(() => {
+    if (isDisabled && isOpen) {
+      setIsOpen(false);
+    }
+  }, [isDisabled]);
+  (0,external_react_namespaceObject.useEffect)(() => {
+    const status = success ? 'success' : useFormResult.formState.errors[name] ? 'error' : 'basic';
+    setStatus(status);
+  }, [useFormResult.formState.errors[name], success]);
+  (0,external_react_namespaceObject.useEffect)(() => {
+    if (error) {
+      useFormResult.setError(name, error);
+    } else {
+      setStatus('basic');
+      useFormResult.resetField(name);
+    }
+  }, [error]);
+  (0,external_react_namespaceObject.useEffect)(() => {
+    processChildren({
+      selectedLocal: selected
     });
-    return opts;
   }, [children]);
-  const inputValue = (0,external_react_namespaceObject.useMemo)(() => {
-    if (isMultiple) return rawInput ?? '';
-    if (rawInput != null) return rawInput;
-    return selectedItems.length === 1 ? optionsWithKey[selectedItems[0]]?.label?.toString() || '' : '';
-  }, [isMultiple, rawInput, selectedItems, optionsWithKey]);
-  const filteredChildren = (0,external_react_namespaceObject.useMemo)(() => {
-    // if filtering is disabled, or there's no input, show all
-    if (!filterOptions || !inputValue) return external_react_default().Children.toArray(children);
-    const needle = inputValue.toLowerCase();
-    return external_react_default().Children.toArray(children).filter(child => {
-      if (! /*#__PURE__*/external_react_default().isValidElement(child)) return false;
-      const {
-        label,
-        value
-      } = child.props;
-      const text = (label ?? value)?.toString().toLowerCase() || '';
-      return text.includes(needle);
+  (0,external_react_namespaceObject.useEffect)(() => {
+    setSelected(selectedItems || []);
+    if (selectedItems?.length) {
+      if (!isMultiple) {
+        const currentOption = optionsWithKey[selectedItems[0]];
+        const optionText = currentOption && (currentOption.children || currentOption.label || currentOption.value);
+        setInputValue(`${optionText}`);
+      }
+    } else {
+      setInputValue('');
+      setFirstSuggestion('');
+    }
+    processChildren({
+      selectedLocal: selectedItems || []
     });
-  }, [children, inputValue]);
-  const items = (0,external_react_namespaceObject.useMemo)(() => {
-    return filteredChildren.map((child, index) => {
-      if (! /*#__PURE__*/external_react_default().isValidElement(child)) return null;
-      const isActive = selectedItems.includes(child.props.value);
+  }, [selectedItems]);
+  (0,external_react_namespaceObject.useEffect)(() => {
+    const childrenArray = external_react_default().Children.toArray(children).filter(Boolean);
+    const filteredOptions = [...childrenArray];
+    const childItems = filteredOptions.map((child, index) => {
       const {
+        id,
         value,
         label,
-        id,
         isDisabled
       } = child.props;
+      const isActive = selected.includes(child.props.value);
       return /*#__PURE__*/external_react_default().cloneElement(child, {
-        ...child.props,
         index,
+        ...child.props,
         isActive,
         isDisabled,
-        role: 'option',
+        id,
         'aria-selected': isActive,
         'aria-labelledby': `typeahead-label-${name}`,
-        onClick: e => {
-          e.preventDefault();
+        role: 'option',
+        onClick: event => {
+          event.preventDefault();
           if (!isDisabled) {
-            const shouldClose = !isMultiple;
-            handleChange({
-              value,
-              shouldClose
-            });
+            handleChange(child.props.value);
           }
         },
-        children: renderOption?.({
+        children: renderOption ? renderOption({
           value: id || value,
-          input: inputValue,
+          input: inputValue || '',
           label
-        }) ?? child.props.children ?? label ?? value
+        }) : child.props.children || child.props.label || child.props.value
       });
     });
-  }, [children, selectedItems, inputValue]);
-  const firstSuggestion = (0,external_react_namespaceObject.useMemo)(() => {
-    if (!inputValue) return '';
-    const needle = inputValue.toLowerCase();
-    for (const child of filteredChildren) {
-      if (! /*#__PURE__*/external_react_default().isValidElement(child)) continue;
-      const labelText = (child.props.label ?? child.props.value).toString();
-      if (labelText.toLowerCase().startsWith(needle)) {
-        return inputValue + labelText.slice(inputValue.length);
+    setItems(childItems);
+  }, [inputValue, optionsWithKey, selected]);
+  (0,external_react_namespaceObject.useEffect)(() => {
+    if (!isMultiple && Object.keys(optionsWithKey).length) {
+      const foundItem = Object.values(optionsWithKey).find(item => item.label === inputValue);
+      if (!foundItem && selected.length) {
+        setSelected([]);
+      }
+      if (foundItem && !selected.includes(foundItem?.value)) {
+        setSelected([foundItem.value]);
+      }
+    }
+  }, [optionsWithKey, inputValue]);
+  (0,external_react_namespaceObject.useEffect)(() => {
+    processSingleSelected({
+      optionsWithKeyLocal: optionsWithKey,
+      selectedLocal: selected
+    });
+  }, [selected]);
+  (0,external_react_namespaceObject.useEffect)(() => {
+    if (inputValue) {
+      const newFirstSuggestion = Object.values(optionsWithKey)?.find(item => {
+        const label = (0,utils_namespaceObject.propOr)('', 'label')(item);
+        return label.toLowerCase().startsWith(inputValue.toLowerCase());
+      });
+      const firstSuggestionLabel = (0,utils_namespaceObject.propOr)('', 'label')(newFirstSuggestion);
+      const humanSuggestionLabel = inputValue.concat(firstSuggestionLabel.slice(inputValue.length));
+      setFirstSuggestion(humanSuggestionLabel);
+    } else {
+      setFirstSuggestion('');
+      if (isMultiple) {
+        setInputValue('');
       }
     }
-    return '';
-  }, [inputValue, filteredChildren]);
-  const setIsOpen = open => {
-    if (!open) {
-      form.trigger(name);
+  }, [inputValue, items, selected]);
+  const processSingleSelected = ({
+    optionsWithKeyLocal = {},
+    selectedLocal = []
+  }) => {
+    if (!isMultiple && selectedLocal.length && Object.keys(optionsWithKeyLocal).length) {
+      const currentOption = optionsWithKeyLocal[selectedLocal[0]];
+      const optionText = currentOption && (currentOption.children || currentOption.label || currentOption.value);
+      setInputValue(`${optionText}`);
     }
-    _setIsOpen(open);
   };
-  const handleChange = ({
-    value,
-    shouldClose = true,
-    resetInput = true
+  const processChildren = ({
+    selectedLocal
   }) => {
-    if (isDisabled || value == null) return;
-    const alreadySelected = selectedItems.includes(value);
-    const updatedSelected = isMultiple ? alreadySelected ? selectedItems.filter(item => item !== value) : [...selectedItems, value] : alreadySelected ? [] : [value];
-    const fieldValue = isMultiple ? updatedSelected : updatedSelected[0];
-    setSelected(updatedSelected);
-    setValue?.(name, fieldValue);
-    form.clearErrors(name);
-    if (resetInput) {
-      const rawInputValue = isMultiple ? null : updatedSelected.length ? String(optionsWithKey[value]?.label) : null;
-      setRawInput(rawInputValue);
+    const keyedOptions = {};
+    const childItems = external_react_default().Children.toArray(children).filter(Boolean).map((child, index) => {
+      keyedOptions[child.props.value] = {
+        ...child.props
+      };
+      return /*#__PURE__*/external_react_default().cloneElement(child, {
+        index,
+        ...child.props
+      });
+    });
+    setOptionsWithKey(keyedOptions);
+    setItems(childItems);
+    processSingleSelected({
+      optionsWithKeyLocal: keyedOptions,
+      selectedLocal
+    });
+    setFirstRender(false);
+  };
+  const handleOnEmptyChange = newIsEmptyValue => {
+    if (newIsEmptyValue !== isEmpty) {
+      setIsEmpty(newIsEmptyValue);
+      onEmptyChange?.(newIsEmptyValue);
     }
-    if (shouldClose) {
-      setIsOpen(false);
+  };
+  const handleOpenChange = open => {
+    if (!isDisabled) {
+      setIsOpen(open);
     }
-    onChange?.(value, !alreadySelected);
-    onEmptyChange?.(updatedSelected.length === 0);
   };
-  const handleClearAll = e => {
-    if (isDisabled) return;
-    e.preventDefault();
-    e.stopPropagation();
-    setSelected([]);
-    setRawInput(null);
+  const handleChange = changingValue => {
+    if (isDisabled || changingValue === undefined) {
+      return;
+    }
+    const isNewSelected = true;
+    const isChangingItemSelected = selected.includes(changingValue);
+    if (isMultiple) {
+      setSelected(currentSelected => isChangingItemSelected ? currentSelected.filter(current => current !== changingValue) : [...currentSelected, changingValue]);
+      setInputValue('');
+    } else {
+      if (selected[0] === changingValue) {
+        setSelected([]);
+        setInputValue('');
+      } else {
+        setSelected([changingValue]);
+      }
+    }
     setIsOpen(false);
-    setValue?.(name, undefined);
-    form.trigger(name);
+    setFirstSuggestion('');
     inputRef.current?.focus();
-    onClearAll?.();
-    onEmptyChange?.(true);
+    setStatus('basic');
+    useFormResult.clearErrors(name);
+    useFormResult.trigger(name);
+    onChange?.(changingValue, isNewSelected);
   };
-  const handleInputChange = e => {
-    const input = e.target.value;
-    setRawInput(input);
-    if (!autoSelect || !filterOptions) return;
-    const match = findExactMatch(input, optionsWithKey);
-    if (match) {
-      handleChange({
-        value: match.value,
-        shouldClose: false
-      });
+  const handleClearAll = event => {
+    if (isDisabled) {
       return;
     }
-    // unset selected value if not fully matched
-    if (!isMultiple && selectedItems.length > 0) {
-      handleChange({
-        value: selectedItems[0],
-        shouldClose: false,
-        resetInput: false
-      });
-    }
+    event.stopPropagation();
+    event.preventDefault();
+    setSelected([]);
+    setInputValue('');
+    setIsOpen(false);
+    setFirstSuggestion('');
+    useFormResult.trigger(name);
+    inputRef.current?.focus();
+    onClearAll?.();
   };
-  const handleInputClick = e => {
-    e.stopPropagation();
-    e.preventDefault();
+  const handleInputClick = event => {
     if (!isDisabled) {
       inputRef.current?.focus();
       setIsOpen(true);
     }
+    event.stopPropagation();
+    event.preventDefault();
   };
-  const handleInputKeyDown = e => {
-    const isEnterOrTab = ['Enter', 'Tab'].includes(e.code);
-    if (isEnterOrTab && firstSuggestion && firstSuggestion !== inputValue) {
-      const match = findExactMatch(firstSuggestion, optionsWithKey);
-      if (match) {
-        handleChange({
-          value: match.value
-        });
+  const handleInputKeyDown = event => {
+    if (['Space'].includes(event.code) && !firstSuggestion) {
+      setIsOpen(true);
+      inputRef.current?.focus();
+      event.stopPropagation();
+      event.preventDefault();
+    } else if (['Tab', 'Enter'].includes(event.code) && firstSuggestion && firstSuggestion !== inputValue) {
+      const foundItem = Object.values(optionsWithKey).find(item => `${item.label}`.toLowerCase() === firstSuggestion.toLowerCase());
+      handleChange(foundItem?.value);
+      if (foundItem) {
+        setInputValue(`${foundItem?.label}`);
       }
-      e.preventDefault();
-      return;
-    }
-    if (isMultiple && e.code === 'Backspace' && selectedItems.length && !inputValue) {
-      const lastSelected = selectedItems[selectedItems.length - 1];
-      handleChange({
-        value: lastSelected,
-        shouldClose: false
-      });
-      e.preventDefault();
-      return;
-    }
-    if (!isOpen && firstSuggestion !== inputValue) {
+      event.preventDefault();
+      return false;
+    } else if (isMultiple && event.code === 'Backspace' && selected.length > 0 && !firstSuggestion) {
+      handleChange(selected[selected.length - 1]);
+      event.preventDefault();
+      return false;
+    } else if (!isOpen && firstSuggestion !== inputValue) {
       setIsOpen(true);
     }
   };
-  const handleRemoveSelectedClick = value => e => {
-    e.stopPropagation();
-    handleChange({
-      value
-    });
-    onRemoveSelectedClick?.(value);
-    form.trigger(name);
+  const handleInputChange = event => {
+    setInputValue(event.target.value);
   };
-  const handleOpenChange = (open, event, reason) => {
-    if (isDisabled || reason === 'reference-press') {
-      return;
-    }
-    setIsOpen(open);
-    if (!isMultiple && selectedItems.length > 0) {
-      const selectedValue = selectedItems[0];
-      const label = optionsWithKey[selectedValue]?.label;
-      setRawInput(label ? String(label) : null);
-      return;
-    }
-    setRawInput(null);
+  const handleSelectedClick = event => {
+    event.stopPropagation();
+  };
+  const handleRemoveSelectedClick = selectedItem => event => {
+    event.stopPropagation();
+    handleChange(selectedItem);
+    onRemoveSelectedClick?.(selectedItem);
   };
-  const status = (() => {
-    if (form.formState.errors[name]) return 'error';
-    if (error) return 'error';
-    if (success) return 'success';
-    return 'basic';
-  })();
   return {
     isOpen,
     isDisabled,
     optionsWithKey,
-    selectedItems,
+    selectedItems: selected,
     inputRef,
     firstSuggestion,
     isMultiple,
@@ -17841,18 +17863,18 @@ const useTypeahead = ({
     inputValue,
     validationSchema,
     status,
-    error: error ?? form.formState.errors[name],
     placeholder,
     options: items,
-    useFormResult: form,
+    useFormResult,
     register,
     setValue,
-    onChange,
+    handleChange,
     handleClearAll,
     handleOpenChange,
     handleInputChange,
     handleInputClick,
     handleInputKeyDown,
+    handleSelectedClick,
     handleRemoveSelectedClick
   };
 };
@@ -17966,7 +17988,7 @@ const MultipleTrigger = () => {
   const theme = (0,react_namespaceObject.useTheme)();
   const context = useTypeaheadContext();
   const typeaheadInputAdditionalProps = {};
-  if (!context.selectedItems.length && !context.inputValue && !!context.placeholder) {
+  if (!context.selectedItems.length && !!context.placeholder) {
     typeaheadInputAdditionalProps.placeholder = context.placeholder;
   }
   return (0,jsx_runtime_namespaceObject.jsxs)((external_react_default()).Fragment, {
@@ -17974,7 +17996,7 @@ const MultipleTrigger = () => {
       const currentOption = context.optionsWithKey[selectedItem];
       const optionText = currentOption ? currentOption.children || currentOption.label || currentOption.value : '';
       return (0,jsx_runtime_namespaceObject.jsxs)(TypeaheadItem, {
-        onClick: e => e.stopPropagation(),
+        onClick: context.handleSelectedClick,
         isDisabled: context.isDisabled,
         children: [(0,jsx_runtime_namespaceObject.jsx)(TypeaheadItemLabel, {
           isDisabled: context.isDisabled,
@@ -18018,6 +18040,11 @@ const MultipleTrigger = () => {
         disabled: context.isDisabled,
         className: ['typeahead-input', TypeaheadInput(theme), TypeaheadInputPlaceholder].join(' '),
         ...typeaheadInputAdditionalProps
+      }), (0,jsx_runtime_namespaceObject.jsx)("input", {
+        type: "hidden",
+        readOnly: true,
+        value: context.selectedItems,
+        ...context.register?.(context.name, context.validationSchema)
       })]
     }), !context.isDisabled && context.selectedItems.length ? (0,jsx_runtime_namespaceObject.jsx)(Button_Button, {
       variant: "tertiary",
@@ -18044,7 +18071,7 @@ const SingleTrigger = () => {
   const context = useTypeaheadContext();
   const theme = (0,react_namespaceObject.useTheme)();
   const typeaheadInputAdditionalProps = {};
-  if (!context.selectedItems.length && !context.inputValue && !!context.placeholder) {
+  if (!context.selectedItems.length && !!context.placeholder) {
     typeaheadInputAdditionalProps.placeholder = context.placeholder;
   }
   return (0,jsx_runtime_namespaceObject.jsxs)(TypeaheadInputsGroupWrapper, {
@@ -18073,6 +18100,11 @@ const SingleTrigger = () => {
       tabIndex: -1,
       className: ['typeahead-input', TypeaheadInput(theme), TypeaheadInputPlaceholder].join(' '),
       ...typeaheadInputAdditionalProps
+    }), (0,jsx_runtime_namespaceObject.jsx)("input", {
+      type: "hidden",
+      readOnly: true,
+      value: context.selectedItems[0] || '',
+      ...context.register?.(context.name, context.validationSchema)
     }), !context.isDisabled && context.selectedItems.length ? (0,jsx_runtime_namespaceObject.jsx)(Button_Button, {
       variant: "tertiary",
       "data-testid": "remove-all-button",
@@ -18179,7 +18211,6 @@ const Typeahead = ({
   name = 'typeahead-search',
   label,
   selectedItems,
-  defaultSelectedItems,
   isOpen,
   isDisabled,
   isMultiple,
@@ -18197,6 +18228,8 @@ const Typeahead = ({
   optionsClassName,
   wrapperClassName,
   width = 300,
+  setValue,
+  register,
   onChange,
   onEmptyChange,
   onClearAll,
@@ -18207,7 +18240,6 @@ const Typeahead = ({
   const hookResult = useTypeahead({
     name,
     selectedItems,
-    defaultSelectedItems,
     isOpen,
     isDisabled,
     isMultiple,
@@ -18221,6 +18253,8 @@ const Typeahead = ({
     success,
     validationSchema,
     placeholder,
+    setValue,
+    register,
     onChange,
     onEmptyChange,
     renderOption,
@@ -18268,7 +18302,7 @@ const Typeahead = ({
         status: hookResult.status,
         disabled: isDisabled,
         "data-testid": "helper-text",
-        children: hookResult.error ? hookResult.error?.message?.toString() : helperText
+        children: error ? error?.message : helperText
       })]
     })
   });
@@ -19146,7 +19180,6 @@ const SelectWidget = props => {
     placeholder,
     onChange,
     onBlur,
-    onFocus,
     onChangeOverride,
     value
   } = props;
@@ -19161,44 +19194,43 @@ const SelectWidget = props => {
   const handleBlur = ({
     target
   }) => onBlur(id, target && target.value);
-  const handleFocus = ({
-    target
-  }) => onFocus(id, target && target.value);
   const onEmptyChange = isEmpty => {
     if (isEmpty) {
       handleChange();
     }
   };
+  const register = fieldName => ({
+    onBlur: handleBlur,
+    onChange: handleChange,
+    name: fieldName,
+    ref: () => {}
+  });
   const items = Array.isArray(enumOptions) ? enumOptions : [];
   const selectedItems = selectedIndex ? [items[Number(selectedIndex)].value] : [];
-  return (0,jsx_runtime_namespaceObject.jsx)("div", {
-    id: id,
-    onBlur: handleBlur,
-    onFocus: handleFocus,
-    children: (0,jsx_runtime_namespaceObject.jsx)(Typeahead, {
-      width: "100%",
-      selectedItems: selectedItems,
-      isDisabled: disabled,
-      name: name
-      // RJSF provides placeholder as empty string
-      ,
-      placeholder: placeholder || undefined,
-      onChange: handleChange,
-      onEmptyChange: onEmptyChange,
-      renderOption: ({
-        label,
-        input
-      }) => highlightInputMatch(label, input),
-      children: items.map(({
-        label,
-        value
-      }) => (0,jsx_runtime_namespaceObject.jsx)(TypeaheadOption_TypeaheadOption, {
-        value: value,
-        label: label || value,
-        isDisabled: disabled || Array.isArray(enumDisabled) && enumDisabled.includes(value),
-        children: label || value
-      }, value))
-    })
+  return (0,jsx_runtime_namespaceObject.jsx)(Typeahead, {
+    width: "100%",
+    selectedItems: selectedItems,
+    isDisabled: disabled,
+    name: name
+    // RJSF provides placeholder as empty string
+    ,
+    placeholder: placeholder || undefined,
+    onChange: handleChange,
+    register: register,
+    onEmptyChange: onEmptyChange,
+    renderOption: ({
+      label,
+      input
+    }) => highlightInputMatch(label, input),
+    children: items.map(({
+      label,
+      value
+    }) => (0,jsx_runtime_namespaceObject.jsx)(TypeaheadOption_TypeaheadOption, {
+      value: value,
+      label: label || value,
+      isDisabled: disabled || Array.isArray(enumDisabled) && enumDisabled.includes(value),
+      children: label || value
+    }, value))
   });
 };
 ;// ./src/components/JsonSchemaForm/widgets/PasswordWidget.tsx