@ssa-ui-kit/core 2.16.2 → 2.16.3-canary-be61b75-20250507

package/dist/index.js

@@ -10551,9 +10551,10 @@ const DatesListWrapper = /*#__PURE__*/base_default()(Wrapper_Wrapper,  true ? {
 }) => theme.colors.greyLighter, ";}" + ( true ? "" : 0));
 ;// ./src/components/DateRangePicker/styles.ts
 
+function DateRangePicker_styles_EMOTION_STRINGIFIED_CSS_ERROR_() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
 
 const styles_DaysViewCell = /*#__PURE__*/base_default()(Wrapper_Wrapper,  true ? {
-  target: "e19l41fq2"
+  target: "e19l41fq3"
 } : 0)("position:relative;width:40px;height:40px;justify-content:center;font-size:14px;font-weight:500;border-radius:", ({
   isHighlighted
 }) => isHighlighted ? 0 : '6px', ";border:", ({
@@ -10589,7 +10590,7 @@ const styles_DaysViewCell = /*#__PURE__*/base_default()(Wrapper_Wrapper,  true ?
   isCalendarDateNow
 }) => isCalendarDateNow && `1px solid ${theme.colors.greyFocused}`, ";}" + ( true ? "" : 0));
 const styles_YearsViewCell = /*#__PURE__*/base_default()("div",  true ? {
-  target: "e19l41fq1"
+  target: "e19l41fq2"
 } : 0)("display:flex;justify-content:center;position:relative;align-items:center;width:70px;height:40px;border-radius:", ({
   isCalendarFirstDateSelected,
   isCalendarSecondDateSelected
@@ -10622,7 +10623,7 @@ const styles_YearsViewCell = /*#__PURE__*/base_default()("div",  true ? {
   theme
 }) => theme.colors.blueRoyal16, ";}" + ( true ? "" : 0));
 const styles_MonthsViewCell = /*#__PURE__*/base_default()("div",  true ? {
-  target: "e19l41fq0"
+  target: "e19l41fq1"
 } : 0)("display:flex;justify-content:center;position:relative;align-items:center;width:99px;height:40px;border-radius:", ({
   isCalendarFirstDateSelected,
   isCalendarSecondDateSelected
@@ -10659,6 +10660,12 @@ const styles_MonthsViewCell = /*#__PURE__*/base_default()("div",  true ? {
 }) => isCalendarFirstDateSelected ? '0' : 'auto', ";z-index:-1;background:", ({
   theme
 }) => theme.colors.blueRoyal16, ";}}" + ( true ? "" : 0));
+const TriggerWrapper = /*#__PURE__*/base_default()(Wrapper_Wrapper,  true ? {
+  target: "e19l41fq0"
+} : 0)( true ? {
+  name: "1utaypi",
+  styles: "padding:14px"
+} : 0);
 ;// ./src/components/DateRangePicker/utils/dates.ts
 
 const dates_getDaysForCalendarMonth = date => {
@@ -11384,7 +11391,7 @@ const FieldLabel = ({
 
 const FieldControlBase = /*#__PURE__*/base_default()("div",  true ? {
   target: "e1lr2tz0"
-} : 0)("display:flex;align-items:center;min-height:44px;height:auto;border-radius:8px;overflow:hidden;border:1px solid ", ({
+} : 0)("display:flex;align-items:center;min-height:44px;height:auto;border-radius:16px;overflow:hidden;border:1px solid ", ({
   status,
   theme
 }) => {
@@ -11577,6 +11584,7 @@ const TriggerInput = ({
       disabled: disabled,
       register: register,
       className: className,
+      wrapperClassName: /*#__PURE__*/(0,css_namespaceObject.css)("display:flex;padding-left:", datepickerType === 'from' ? 0 : 14, "px;" + ( true ? "" : 0),  true ? "" : 0),
       inputProps: {
         onBlur: handleBlur,
         onClick: handleOpen,
@@ -11585,8 +11593,8 @@ const TriggerInput = ({
         'data-testid': `daterangepicker-input-${datepickerType}`,
         autoComplete: 'off',
         className: [/*#__PURE__*/(0,css_namespaceObject.css)( true ? {
-          name: "150iz59",
-          styles: "border:none!important"
+          name: "15obm9d",
+          styles: "border:none!important;height:auto!important;padding:0!important;min-width:75px;line-height:16px;max-height:16px;letter-spacing:0.8px;border-radius:0!important;&::placeholder{letter-spacing:normal;}"
         } : 0), datepickerType === 'from' ? classNames?.trigger?.inputFrom : classNames?.trigger?.inputTo].filter(Boolean).join(' '),
         ...inputElementProps
       },
@@ -11613,9 +11621,10 @@ function Trigger_EMOTION_STRINGIFIED_CSS_ERROR_() { return "You have tried to st
 
 
 
+
 var Trigger_ref =  true ? {
-  name: "jpxugn",
-  styles: "margin:0 14px"
+  name: "1ldd2k6",
+  styles: "margin:0 3px"
 } : 0;
 var Trigger_ref2 =  true ? {
   name: "ud49p1",
@@ -11662,7 +11671,7 @@ const Trigger = () => {
       className: classNames?.label,
       children: label
     }), (0,jsx_runtime_namespaceObject.jsx)(FieldControl, {
-      children: (0,jsx_runtime_namespaceObject.jsxs)(Wrapper_Wrapper, {
+      children: (0,jsx_runtime_namespaceObject.jsxs)(TriggerWrapper, {
         ref: wrapperRef,
         className: classNames?.trigger?.controlsWrapper,
         children: [(0,jsx_runtime_namespaceObject.jsx)(TriggerInput, {
@@ -11676,8 +11685,8 @@ const Trigger = () => {
           }
         }), (0,jsx_runtime_namespaceObject.jsx)(Icon_Icon, {
           name: "carrot-right",
-          size: 18,
-          color: theme.colors.greyDarker80,
+          size: 16,
+          color: disabled ? theme.colors.grey : theme.colors.greyDarker,
           className: classNames?.trigger?.arrowIcon,
           css: Trigger_ref
         }), (0,jsx_runtime_namespaceObject.jsx)(TriggerInput, {
@@ -11702,7 +11711,8 @@ const Trigger = () => {
           className: classNames?.trigger?.calendarIcon,
           css: /*#__PURE__*/(0,react_namespaceObject.css)({
             padding: 0,
-            margin: '0 8px 0 14px',
+            margin: '0 0 0 10px',
+            height: 'auto',
             cursor: openCalendarMode === 'input' || disabled ? 'default' : 'pointer',
             '&:focus::before': {
               display: 'none'
@@ -17209,7 +17219,7 @@ const SearchBoxWrapper = /*#__PURE__*/base_default()("div",  true ? {
 
 const SearchBoxInput = /*#__PURE__*/base_default()(Input_Input,  true ? {
   target: "e1kaxfzq0"
-} : 0)("height:30px;font-size:12px;border-radius:5px;background-color:", ({
+} : 0)("height:30px;font-size:12px;border-radius:12px;background-color:", ({
   theme
 }) => theme.colors.greyLighter, ";border:1px solid #dee0e8;color:", ({
   theme
@@ -17523,6 +17533,7 @@ const TypeaheadContext = /*#__PURE__*/external_react_namespaceObject.createConte
   options: [],
   placeholder: '',
   useFormResult: {},
+  error: undefined,
   setValue: () => {
     /* no-op */
   },
@@ -17530,7 +17541,7 @@ const TypeaheadContext = /*#__PURE__*/external_react_namespaceObject.createConte
     /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
     return {};
   },
-  handleChange: () => {
+  onChange: () => {
     /* no-op */
   },
   handleClearAll: () => {
@@ -17550,9 +17561,6 @@ const TypeaheadContext = /*#__PURE__*/external_react_namespaceObject.createConte
   },
   handleRemoveSelectedClick: () => () => {
     /* no-op */
-  },
-  handleSelectedClick: () => {
-    /* no-op */
   }
 });
 const useTypeaheadContext = () => external_react_namespaceObject.useContext(TypeaheadContext);
@@ -17560,10 +17568,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,
+  selectedItems: providedSelectedItems,
+  defaultSelectedItems,
   isDisabled,
   isMultiple,
   children,
@@ -17576,8 +17592,8 @@ const useTypeahead = ({
   error,
   success,
   placeholder,
-  register,
-  setValue,
+  filterOptions = true,
+  autoSelect = true,
   onChange,
   onClearAll,
   onRemoveSelectedClick,
@@ -17585,271 +17601,263 @@ 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 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) {
-      setValue?.(name, selected, {
-        shouldDirty: !isFirstRender
-      });
-      setInputValue('');
-      setFirstSuggestion('');
-    } else {
-      setValue?.(name, selected.length ? selected[0] : [], {
-        shouldDirty: !isFirstRender
-      });
+  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;
     }
-    handleOnEmptyChange(!selected.length);
-  }, [selected]);
-  (0,external_react_namespaceObject.useEffect)(() => {
-    if (isDisabled && isOpen) {
-      setIsOpen(false);
+    // controlledValue should be undefined if defaultSelectedItems is provided
+    if (defaultSelectedItems) {
+      return;
     }
-  }, [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);
+    if (isMultiple) {
+      return Array.isArray(formFieldValue) ? formFieldValue : [];
     }
-  }, [error]);
-  (0,external_react_namespaceObject.useEffect)(() => {
-    processChildren({
-      selectedLocal: selected
+    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)({
+    control: form.control,
+    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;
+      }
     });
+    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('');
+    const validSelected = selectedItems.filter(item => optionsWithKey[item]);
+    if (validSelected.length !== selectedItems.length) {
+      setSelected(validSelected);
+      const fieldValue = isMultiple ? validSelected : undefined;
+      setValue?.(name, fieldValue);
+      setRawInput(null);
+      form.clearErrors(name);
+      form.trigger(name);
+      onEmptyChange?.(validSelected.length === 0);
     }
-    processChildren({
-      selectedLocal: selectedItems || []
+  }, [optionsWithKey, selectedItems]);
+  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);
     });
-  }, [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 = selectedItems.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]);
-      }
-    }
-  }, [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('');
+  }, [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);
       }
     }
-  }, [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 = 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 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 && selectedItems.length > 0) {
+      handleChange({
+        value: selectedItems[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
+        });
       }
-      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' && selectedItems.length && !inputValue) {
+      const lastSelected = selectedItems[selectedItems.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 && selectedItems.length > 0) {
+      const selectedValue = selectedItems[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,
     optionsWithKey,
-    selectedItems: selected,
+    selectedItems,
     inputRef,
     firstSuggestion,
     isMultiple,
@@ -17865,18 +17873,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
   };
 };
@@ -17940,7 +17948,7 @@ const TypeaheadInputsGroupWrapper = /*#__PURE__*/base_default()(Wrapper_Wrapper,
 }) => isOpen ? '50px' : 'auto', ";flex-direction:column!important;" + ( true ? "" : 0));
 const TypeaheadTrigger = /*#__PURE__*/base_default()(PopoverTrigger,  true ? {
   target: "e1vig1dw0"
-} : 0)("position:relative;border-radius:8px;border:1px solid ", ({
+} : 0)("position:relative;border-radius:12px;border:1px solid ", ({
   status,
   theme
 }) => status === 'basic' ? theme.colors.grey : status === 'error' ? theme.colors.red : theme.colors.greenLighter, ";min-height:44px;height:auto;background:#fff;gap:8px;padding:5px 28px 5px 8px;width:100%;flex-wrap:wrap;border-color:", ({
@@ -17990,7 +17998,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, {
@@ -17998,7 +18006,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,
@@ -18042,11 +18050,6 @@ 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",
@@ -18073,7 +18076,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, {
@@ -18102,11 +18105,6 @@ 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",
@@ -18213,6 +18211,7 @@ const Typeahead = ({
   name = 'typeahead-search',
   label,
   selectedItems,
+  defaultSelectedItems,
   isOpen,
   isDisabled,
   isMultiple,
@@ -18230,8 +18229,6 @@ const Typeahead = ({
   optionsClassName,
   wrapperClassName,
   width = 300,
-  setValue,
-  register,
   onChange,
   onEmptyChange,
   onClearAll,
@@ -18242,6 +18239,7 @@ const Typeahead = ({
   const hookResult = useTypeahead({
     name,
     selectedItems,
+    defaultSelectedItems,
     isOpen,
     isDisabled,
     isMultiple,
@@ -18255,8 +18253,6 @@ const Typeahead = ({
     success,
     validationSchema,
     placeholder,
-    setValue,
-    register,
     onChange,
     onEmptyChange,
     renderOption,
@@ -18304,7 +18300,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
       })]
     })
   });
@@ -19182,6 +19178,7 @@ const SelectWidget = props => {
     placeholder,
     onChange,
     onBlur,
+    onFocus,
     onChangeOverride,
     value
   } = props;
@@ -19196,43 +19193,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