@ssa-ui-kit/core 2.15.0-canary-3fd3271-20250501 → 2.15.0-canary-9a56baa-20250506

package/dist/index.js

@@ -11611,10 +11611,14 @@ 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_ref2 =  true ? {
+var Trigger_ref3 =  true ? {
   name: "ud49p1",
   styles: "color:inherit;&::first-letter{text-transform:uppercase;}"
 } : 0;
@@ -11654,8 +11658,9 @@ const Trigger = () => {
     disabled: disabled,
     "data-testid": "daterangepicker",
     className: triggerClassname,
-    children: [(0,jsx_runtime_namespaceObject.jsx)(FieldLabel, {
+    children: [label && (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, {
@@ -11672,7 +11677,7 @@ const Trigger = () => {
           name: "carrot-right",
           size: 18,
           color: theme.colors.greyDarker80,
-          css: Trigger_ref
+          css: Trigger_ref2
         }), (0,jsx_runtime_namespaceObject.jsx)(TriggerInput, {
           datepickerType: "to",
           onClick: () => {
@@ -11705,7 +11710,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_ref2,
+        css: Trigger_ref3,
         children: error
       }, `error-${index}`)) : helperText
     }), (0,jsx_runtime_namespaceObject.jsx)(FieldSuccess, {
@@ -11812,7 +11817,7 @@ const useDateRangePicker = ({
     setValue,
     resetField,
     setFocus
-  } = (0,external_react_hook_form_namespaceObject.useFormContext)();
+  } = (0,external_react_hook_form_namespaceObject.useFormContext)() || (0,external_react_hook_form_namespaceObject.useForm)();
   const nameFrom = `${_name}From`;
   const nameTo = `${_name}To`;
   const inputValueFrom = (0,external_react_hook_form_namespaceObject.useWatch)({
@@ -17514,7 +17519,6 @@ const TypeaheadContext = /*#__PURE__*/external_react_namespaceObject.createConte
   options: [],
   placeholder: '',
   useFormResult: {},
-  error: undefined,
   setValue: () => {
     /* no-op */
   },
@@ -17522,7 +17526,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 +17546,9 @@ const TypeaheadContext = /*#__PURE__*/external_react_namespaceObject.createConte
   },
   handleRemoveSelectedClick: () => () => {
     /* no-op */
+  },
+  handleSelectedClick: () => {
+    /* no-op */
   }
 });
 const useTypeaheadContext = () => external_react_namespaceObject.useContext(TypeaheadContext);
@@ -17549,18 +17556,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,
-  defaultSelectedItems,
   isDisabled,
   isMultiple,
   children,
@@ -17573,8 +17572,8 @@ const useTypeahead = ({
   error,
   success,
   placeholder,
-  filterOptions = true,
-  autoSelect = true,
+  register,
+  setValue,
   onChange,
   onClearAll,
   onRemoveSelectedClick,
@@ -17582,240 +17581,266 @@ const useTypeahead = ({
   renderOption
 }) => {
   const inputName = `${name}-text`;
-  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 [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 defaultForm = (0,external_react_hook_form_namespaceObject.useForm)();
-  const form = (0,external_react_hook_form_namespaceObject.useFormContext)() ?? defaultForm;
-  const {
-    register,
-    setValue
-  } = form;
+  const useFormResult = (0,external_react_hook_form_namespaceObject.useForm)();
   (0,external_react_namespaceObject.useEffect)(() => {
-    if (!selected.length) {
-      return;
+    if (!register) {
+      console.warn('Typeahead component must be used within a Form component');
     }
+  }, []);
+  (0,external_react_namespaceObject.useEffect)(() => {
     if (isMultiple) {
       setValue?.(name, selected, {
-        shouldDirty: false
+        shouldDirty: !isFirstRender
       });
+      setInputValue('');
+      setFirstSuggestion('');
     } else {
-      setValue?.(name, selected[0], {
-        shouldDirty: false
+      setValue?.(name, selected.length ? selected[0] : [], {
+        shouldDirty: !isFirstRender
       });
     }
-  }, []);
-  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 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);
+  (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 = selected.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, 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);
+    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();
+  }, [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 = 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 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 && selected.length > 0) {
-      handleChange({
-        value: selected[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,
-          shouldClose: false
-        });
+  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' && selected.length && !inputValue) {
-      const lastSelected = selected[selected.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 && selected.length > 0) {
-      const selectedValue = selected[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,
@@ -17836,18 +17861,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
   };
 };
@@ -17961,7 +17986,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, {
@@ -17969,7 +17994,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,
@@ -18044,7 +18069,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, {
@@ -18184,7 +18209,6 @@ const Typeahead = ({
   name = 'typeahead-search',
   label,
   selectedItems,
-  defaultSelectedItems,
   isOpen,
   isDisabled,
   isMultiple,
@@ -18202,6 +18226,8 @@ const Typeahead = ({
   optionsClassName,
   wrapperClassName,
   width = 300,
+  setValue,
+  register,
   onChange,
   onEmptyChange,
   onClearAll,
@@ -18212,7 +18238,6 @@ const Typeahead = ({
   const hookResult = useTypeahead({
     name,
     selectedItems,
-    defaultSelectedItems,
     isOpen,
     isDisabled,
     isMultiple,
@@ -18226,6 +18251,8 @@ const Typeahead = ({
     success,
     validationSchema,
     placeholder,
+    setValue,
+    register,
     onChange,
     onEmptyChange,
     renderOption,
@@ -18273,7 +18300,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
       })]
     })
   });
@@ -19151,7 +19178,6 @@ const SelectWidget = props => {
     placeholder,
     onChange,
     onBlur,
-    onFocus,
     onChangeOverride,
     value
   } = props;
@@ -19166,44 +19192,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