@ssa-ui-kit/core 2.15.0-canary-6d341b5-20250506 → 2.15.0-canary-6bf2bcc-20250506

package/dist/index.js

@@ -11543,8 +11543,10 @@ const TriggerInput = ({
     setLastFocusedElement,
     onBlur: handleBlur
   } = useDateRangePickerContext();
+  const formContext = (0,external_react_hook_form_namespaceObject.useFormContext)(); // Using FormProvider from react-hook-form
+  const useFormResult = (0,external_react_hook_form_namespaceObject.useForm)();
   const currentName = datepickerType === 'from' ? nameFrom : nameTo;
-  const hookFormResult = (0,external_react_hook_form_namespaceObject.useFormContext)() ?? (0,external_react_hook_form_namespaceObject.useForm)();
+  const hookFormResult = formContext ?? useFormResult;
   const {
     register,
     formState: {
@@ -11609,14 +11611,10 @@ function Trigger_EMOTION_STRINGIFIED_CSS_ERROR_() { return "You have tried to st
 
 
 var Trigger_ref =  true ? {
-  name: "5bhc30",
-  styles: "margin-bottom:8px"
-} : 0;
-var Trigger_ref2 =  true ? {
   name: "jpxugn",
   styles: "margin:0 14px"
 } : 0;
-var Trigger_ref3 =  true ? {
+var Trigger_ref2 =  true ? {
   name: "ud49p1",
   styles: "color:inherit;&::first-letter{text-transform:uppercase;}"
 } : 0;
@@ -11637,7 +11635,7 @@ const Trigger = () => {
     handleToggleOpen
   } = useDateRangePickerContext();
   const theme = (0,react_namespaceObject.useTheme)();
-  const hookFormResult = (0,external_react_hook_form_namespaceObject.useFormContext)() || (0,external_react_hook_form_namespaceObject.useForm)();
+  const formContext = (0,external_react_hook_form_namespaceObject.useFormContext)();
   const wrapperRef = (0,external_react_namespaceObject.useRef)(null);
   (0,hooks_namespaceObject.useClickOutside)(wrapperRef, event => {
     const {
@@ -11648,17 +11646,16 @@ const Trigger = () => {
       setIsOpen(false);
     }
   });
-  const errorsFrom = hookFormResult.formState.errors[nameFrom]?.message;
-  const errorsTo = hookFormResult.formState.errors[nameTo]?.message;
+  const errorsFrom = formContext.formState.errors[nameFrom]?.message;
+  const errorsTo = formContext.formState.errors[nameTo]?.message;
   const errorMessage = [errorsFrom, errorsTo].filter(Boolean);
   return (0,jsx_runtime_namespaceObject.jsxs)(FieldRoot, {
     status: status,
     disabled: disabled,
     "data-testid": "daterangepicker",
     className: triggerClassname,
-    children: [label && (0,jsx_runtime_namespaceObject.jsx)(FieldLabel, {
+    children: [(0,jsx_runtime_namespaceObject.jsx)(FieldLabel, {
       htmlFor: lastFocusedElement === 'from' ? nameFrom : nameTo,
-      css: Trigger_ref,
       children: label
     }), (0,jsx_runtime_namespaceObject.jsx)(FieldControl, {
       children: (0,jsx_runtime_namespaceObject.jsxs)(Wrapper_Wrapper, {
@@ -11675,7 +11672,7 @@ const Trigger = () => {
           name: "carrot-right",
           size: 18,
           color: theme.colors.greyDarker80,
-          css: Trigger_ref2
+          css: Trigger_ref
         }), (0,jsx_runtime_namespaceObject.jsx)(TriggerInput, {
           datepickerType: "to",
           onClick: () => {
@@ -11708,7 +11705,7 @@ const Trigger = () => {
       children: helperText
     }), (0,jsx_runtime_namespaceObject.jsx)(FieldError, {
       children: errorMessage ? errorMessage.map((error, index) => (0,jsx_runtime_namespaceObject.jsx)("span", {
-        css: Trigger_ref3,
+        css: Trigger_ref2,
         children: error
       }, `error-${index}`)) : helperText
     }), (0,jsx_runtime_namespaceObject.jsx)(FieldSuccess, {
@@ -11809,19 +11806,21 @@ const useDateRangePicker = ({
   const handleSetIsOpen = open => {
     setIsOpen(open);
   };
-  const hookFormResult = (0,external_react_hook_form_namespaceObject.useFormContext)() ?? (0,external_react_hook_form_namespaceObject.useForm)();
   const {
     clearErrors,
     setError,
     setValue,
     resetField,
-    setFocus,
-    watch
-  } = hookFormResult;
+    setFocus
+  } = (0,external_react_hook_form_namespaceObject.useFormContext)();
   const nameFrom = `${_name}From`;
   const nameTo = `${_name}To`;
-  const inputValueFrom = watch(nameFrom);
-  const inputValueTo = watch(nameTo);
+  const inputValueFrom = (0,external_react_hook_form_namespaceObject.useWatch)({
+    name: nameFrom
+  });
+  const inputValueTo = (0,external_react_hook_form_namespaceObject.useWatch)({
+    name: nameTo
+  });
   const [dateTime, setDateTime] = (0,external_react_namespaceObject.useState)([undefined, undefined]);
   const [lastChangedDate, setLastChangedDate] = (0,external_react_namespaceObject.useState)([undefined, undefined]);
   const [lastFocusedElement, setLastFocusedElement] = (0,external_react_namespaceObject.useState)('from');
@@ -17515,6 +17514,7 @@ const TypeaheadContext = /*#__PURE__*/external_react_namespaceObject.createConte
   options: [],
   placeholder: '',
   useFormResult: {},
+  error: undefined,
   setValue: () => {
     /* no-op */
   },
@@ -17522,7 +17522,7 @@ const TypeaheadContext = /*#__PURE__*/external_react_namespaceObject.createConte
     /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
     return {};
   },
-  handleChange: () => {
+  onChange: () => {
     /* no-op */
   },
   handleClearAll: () => {
@@ -17542,9 +17542,6 @@ const TypeaheadContext = /*#__PURE__*/external_react_namespaceObject.createConte
   },
   handleRemoveSelectedClick: () => () => {
     /* no-op */
-  },
-  handleSelectedClick: () => {
-    /* no-op */
   }
 });
 const useTypeaheadContext = () => external_react_namespaceObject.useContext(TypeaheadContext);
@@ -17552,10 +17549,18 @@ 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,
+  defaultSelectedItems,
   isDisabled,
   isMultiple,
   children,
@@ -17568,8 +17573,8 @@ const useTypeahead = ({
   error,
   success,
   placeholder,
-  register,
-  setValue,
+  filterOptions = true,
+  autoSelect = true,
   onChange,
   onClearAll,
   onRemoveSelectedClick,
@@ -17577,266 +17582,240 @@ const useTypeahead = ({
   renderOption
 }) => {
   const inputName = `${name}-text`;
-  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 [isOpen, _setIsOpen] = (0,hooks_namespaceObject.useUncontrolled)({
+    defaultValue: isInitOpen,
+    finalValue: false
+  });
+  const [selected, setSelected] = (0,hooks_namespaceObject.useUncontrolled)({
+    value: selectedItems,
+    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);
-  const useFormResult = (0,external_react_hook_form_namespaceObject.useForm)();
+  const defaultForm = (0,external_react_hook_form_namespaceObject.useForm)();
+  const form = (0,external_react_hook_form_namespaceObject.useFormContext)() ?? defaultForm;
+  const {
+    register,
+    setValue
+  } = form;
   (0,external_react_namespaceObject.useEffect)(() => {
-    if (!register) {
-      console.warn('Typeahead component must be used within a Form component');
+    if (!selected.length) {
+      return;
     }
-  }, []);
-  (0,external_react_namespaceObject.useEffect)(() => {
     if (isMultiple) {
       setValue?.(name, selected, {
-        shouldDirty: !isFirstRender
+        shouldDirty: false
       });
-      setInputValue('');
-      setFirstSuggestion('');
     } else {
-      setValue?.(name, selected.length ? selected[0] : [], {
-        shouldDirty: !isFirstRender
+      setValue?.(name, selected[0], {
+        shouldDirty: false
       });
     }
-    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
+  }, []);
+  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;
+      }
     });
+    return opts;
   }, [children]);
-  (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 || []
+  const inputValue = (0,external_react_namespaceObject.useMemo)(() => {
+    if (isMultiple) return rawInput ?? '';
+    if (rawInput != null) return rawInput;
+    return selected.length === 1 ? optionsWithKey[selected[0]]?.label?.toString() || '' : '';
+  }, [isMultiple, rawInput, selected, 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);
     });
-  }, [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) => {
+  }, [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 = selected.includes(child.props.value);
       const {
-        id,
         value,
         label,
+        id,
         isDisabled
       } = child.props;
-      const isActive = selected.includes(child.props.value);
       return /*#__PURE__*/external_react_default().cloneElement(child, {
-        index,
         ...child.props,
+        index,
         isActive,
         isDisabled,
-        id,
+        role: 'option',
         'aria-selected': isActive,
         'aria-labelledby': `typeahead-label-${name}`,
-        role: 'option',
-        onClick: event => {
-          event.preventDefault();
+        onClick: e => {
+          e.preventDefault();
           if (!isDisabled) {
-            handleChange(child.props.value);
+            const shouldClose = !isMultiple;
+            handleChange({
+              value,
+              shouldClose
+            });
           }
         },
-        children: renderOption ? renderOption({
+        children: renderOption?.({
           value: id || value,
-          input: inputValue || '',
+          input: inputValue,
           label
-        }) : child.props.children || child.props.label || child.props.value
+        }) ?? child.props.children ?? label ?? value
       });
     });
-    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]);
+  }, [children, selected, 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);
       }
     }
-  }, [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('');
-      }
-    }
-  }, [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}`);
+    return '';
+  }, [inputValue, filteredChildren]);
+  const setIsOpen = open => {
+    if (!open) {
+      form.trigger(name);
     }
+    _setIsOpen(open);
   };
-  const processChildren = ({
-    selectedLocal
+  const handleChange = ({
+    value,
+    shouldClose = true,
+    resetInput = true
   }) => {
-    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 (isDisabled || value == null) return;
+    const alreadySelected = selected.includes(value);
+    const updatedSelected = isMultiple ? alreadySelected ? selected.filter(item => item !== value) : [...selected, 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 handleOpenChange = open => {
-    if (!isDisabled) {
-      setIsOpen(open);
+    if (shouldClose) {
+      setIsOpen(false);
     }
+    onChange?.(value, !alreadySelected);
+    onEmptyChange?.(updatedSelected.length === 0);
   };
-  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]);
-      }
-    }
+  const handleClearAll = e => {
+    if (isDisabled) return;
+    e.preventDefault();
+    e.stopPropagation();
+    setSelected([]);
+    setRawInput(null);
     setIsOpen(false);
-    setFirstSuggestion('');
+    setValue?.(name, undefined);
+    form.trigger(name);
     inputRef.current?.focus();
-    setStatus('basic');
-    useFormResult.clearErrors(name);
-    useFormResult.trigger(name);
-    onChange?.(changingValue, isNewSelected);
+    onClearAll?.();
+    onEmptyChange?.(true);
   };
-  const handleClearAll = event => {
-    if (isDisabled) {
+  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
+      });
       return;
     }
-    event.stopPropagation();
-    event.preventDefault();
-    setSelected([]);
-    setInputValue('');
-    setIsOpen(false);
-    setFirstSuggestion('');
-    useFormResult.trigger(name);
-    inputRef.current?.focus();
-    onClearAll?.();
+    // unset selected value if not fully matched
+    if (!isMultiple && selected.length > 0) {
+      handleChange({
+        value: selected[0],
+        shouldClose: false,
+        resetInput: false
+      });
+    }
   };
-  const handleInputClick = event => {
+  const handleInputClick = e => {
+    e.stopPropagation();
+    e.preventDefault();
     if (!isDisabled) {
       inputRef.current?.focus();
       setIsOpen(true);
     }
-    event.stopPropagation();
-    event.preventDefault();
   };
-  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}`);
+  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,
+          shouldClose: false
+        });
       }
-      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) {
+      e.preventDefault();
+      return;
+    }
+    if (isMultiple && e.code === 'Backspace' && selected.length && !inputValue) {
+      const lastSelected = selected[selected.length - 1];
+      handleChange({
+        value: lastSelected,
+        shouldClose: false
+      });
+      e.preventDefault();
+      return;
+    }
+    if (!isOpen && firstSuggestion !== inputValue) {
       setIsOpen(true);
     }
   };
-  const handleInputChange = event => {
-    setInputValue(event.target.value);
-  };
-  const handleSelectedClick = event => {
-    event.stopPropagation();
+  const handleRemoveSelectedClick = value => e => {
+    e.stopPropagation();
+    handleChange({
+      value
+    });
+    onRemoveSelectedClick?.(value);
+    form.trigger(name);
   };
-  const handleRemoveSelectedClick = selectedItem => event => {
-    event.stopPropagation();
-    handleChange(selectedItem);
-    onRemoveSelectedClick?.(selectedItem);
+  const handleOpenChange = (open, event, reason) => {
+    if (isDisabled || reason === 'reference-press') {
+      return;
+    }
+    setIsOpen(open);
+    if (!isMultiple && selected.length > 0) {
+      const selectedValue = selected[0];
+      const label = optionsWithKey[selectedValue]?.label;
+      setRawInput(label ? String(label) : null);
+      return;
+    }
+    setRawInput(null);
   };
+  const status = (() => {
+    if (form.formState.errors[name]) return 'error';
+    if (error) return 'error';
+    if (success) return 'success';
+    return 'basic';
+  })();
   return {
     isOpen,
     isDisabled,
@@ -17857,18 +17836,18 @@ const useTypeahead = ({
     inputValue,
     validationSchema,
     status,
+    error: error ?? form.formState.errors[name],
     placeholder,
     options: items,
-    useFormResult,
+    useFormResult: form,
     register,
     setValue,
-    handleChange,
+    onChange,
     handleClearAll,
     handleOpenChange,
     handleInputChange,
     handleInputClick,
     handleInputKeyDown,
-    handleSelectedClick,
     handleRemoveSelectedClick
   };
 };
@@ -17982,7 +17961,7 @@ const MultipleTrigger = () => {
   const theme = (0,react_namespaceObject.useTheme)();
   const context = useTypeaheadContext();
   const typeaheadInputAdditionalProps = {};
-  if (!context.selectedItems.length && !!context.placeholder) {
+  if (!context.selectedItems.length && !context.inputValue && !!context.placeholder) {
     typeaheadInputAdditionalProps.placeholder = context.placeholder;
   }
   return (0,jsx_runtime_namespaceObject.jsxs)((external_react_default()).Fragment, {
@@ -17990,7 +17969,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: context.handleSelectedClick,
+        onClick: e => e.stopPropagation(),
         isDisabled: context.isDisabled,
         children: [(0,jsx_runtime_namespaceObject.jsx)(TypeaheadItemLabel, {
           isDisabled: context.isDisabled,
@@ -18065,7 +18044,7 @@ const SingleTrigger = () => {
   const context = useTypeaheadContext();
   const theme = (0,react_namespaceObject.useTheme)();
   const typeaheadInputAdditionalProps = {};
-  if (!context.selectedItems.length && !!context.placeholder) {
+  if (!context.selectedItems.length && !context.inputValue && !!context.placeholder) {
     typeaheadInputAdditionalProps.placeholder = context.placeholder;
   }
   return (0,jsx_runtime_namespaceObject.jsxs)(TypeaheadInputsGroupWrapper, {
@@ -18205,6 +18184,7 @@ const Typeahead = ({
   name = 'typeahead-search',
   label,
   selectedItems,
+  defaultSelectedItems,
   isOpen,
   isDisabled,
   isMultiple,
@@ -18222,8 +18202,6 @@ const Typeahead = ({
   optionsClassName,
   wrapperClassName,
   width = 300,
-  setValue,
-  register,
   onChange,
   onEmptyChange,
   onClearAll,
@@ -18234,6 +18212,7 @@ const Typeahead = ({
   const hookResult = useTypeahead({
     name,
     selectedItems,
+    defaultSelectedItems,
     isOpen,
     isDisabled,
     isMultiple,
@@ -18247,8 +18226,6 @@ const Typeahead = ({
     success,
     validationSchema,
     placeholder,
-    setValue,
-    register,
     onChange,
     onEmptyChange,
     renderOption,
@@ -18296,7 +18273,7 @@ const Typeahead = ({
         status: hookResult.status,
         disabled: isDisabled,
         "data-testid": "helper-text",
-        children: error ? error?.message : helperText
+        children: hookResult.error ? hookResult.error?.message?.toString() : helperText
       })]
     })
   });
@@ -19174,6 +19151,7 @@ const SelectWidget = props => {
     placeholder,
     onChange,
     onBlur,
+    onFocus,
     onChangeOverride,
     value
   } = props;
@@ -19188,43 +19166,44 @@ 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)(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))
+  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))
+    })
   });
 };
 ;// ./src/components/JsonSchemaForm/widgets/PasswordWidget.tsx