@ssa-ui-kit/core 2.14.0 → 2.15.0-canary-3fd3271-20250501

package/dist/index.js

@@ -520,6 +520,14 @@ __webpack_require__.d(Employee_namespaceObject, {
   ICON_NAME: () => (Employee_ICON_NAME)
 });
 
+// NAMESPACE OBJECT: ./src/components/Icon/icons/ExcelDownload.tsx
+var ExcelDownload_namespaceObject = {};
+__webpack_require__.r(ExcelDownload_namespaceObject);
+__webpack_require__.d(ExcelDownload_namespaceObject, {
+  ExcelDownload: () => (ExcelDownload),
+  ICON_NAME: () => (ExcelDownload_ICON_NAME)
+});
+
 // NAMESPACE OBJECT: ./src/components/Icon/icons/Expertise.tsx
 var Expertise_namespaceObject = {};
 __webpack_require__.r(Expertise_namespaceObject);
@@ -536,6 +544,14 @@ __webpack_require__.d(Filter_namespaceObject, {
   ICON_NAME: () => (Filter_ICON_NAME)
 });
 
+// NAMESPACE OBJECT: ./src/components/Icon/icons/FilterFunnel.tsx
+var FilterFunnel_namespaceObject = {};
+__webpack_require__.r(FilterFunnel_namespaceObject);
+__webpack_require__.d(FilterFunnel_namespaceObject, {
+  FilterFunnel: () => (FilterFunnel),
+  ICON_NAME: () => (FilterFunnel_ICON_NAME)
+});
+
 // NAMESPACE OBJECT: ./src/components/Icon/icons/Geography.tsx
 var Geography_namespaceObject = {};
 __webpack_require__.r(Geography_namespaceObject);
@@ -873,8 +889,10 @@ __webpack_require__.d(all_namespaceObject, {
   Edit: () => (Edit_namespaceObject),
   Email: () => (Email_namespaceObject),
   Employee: () => (Employee_namespaceObject),
+  ExcelDownload: () => (ExcelDownload_namespaceObject),
   Expertise: () => (Expertise_namespaceObject),
   Filter: () => (Filter_namespaceObject),
+  FilterFunnel: () => (FilterFunnel_namespaceObject),
   Geography: () => (Geography_namespaceObject),
   Home: () => (Home_namespaceObject),
   Import: () => (Import_namespaceObject),
@@ -2596,6 +2614,36 @@ const Employee = ({
   })]
 });
 const Employee_ICON_NAME = 'employee';
+;// ./src/components/Icon/icons/ExcelDownload.tsx
+
+const ExcelDownload = ({
+  fill = '#000',
+  size = 24,
+  tooltip = 'Excel download',
+  ...props
+}) => (0,jsx_runtime_namespaceObject.jsxs)("svg", {
+  xmlns: "http://www.w3.org/2000/svg",
+  width: `${size}px`,
+  height: `${size}px`,
+  viewBox: "0 0 24 24",
+  fill: "none",
+  ...props,
+  children: [(0,jsx_runtime_namespaceObject.jsx)("title", {
+    children: tooltip
+  }), (0,jsx_runtime_namespaceObject.jsx)("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M6.04815 2C4.81157 2 3.7998 3.01813 3.7998 4.2625V17.7375C3.7998 18.9819 4.81157 20 6.04815 20H14.0058C13.6986 19.7203 13.5334 19.34 13.5176 18.9524H6.04815C5.37634 18.9524 4.84083 18.4135 4.84083 17.7375V4.2625C4.84083 3.58646 5.37634 3.04757 6.04815 3.04757H11.986C11.9879 3.04857 11.9915 3.05051 11.9972 3.05405L11.9999 3.05572L12.007 3.06013V6.00121C12.007 6.47167 12.1866 6.90245 12.4801 7.22748C12.8131 7.59634 13.2929 7.82903 13.8234 7.82903H16.7549L16.7586 9.39603V11.686C17.008 11.3746 17.3791 11.1648 17.7997 11.1287L17.7998 7.32704L17.7976 7.29664C17.7953 7.26342 17.792 7.21583 17.7895 7.20309C17.7694 7.1015 17.7199 7.00816 17.6471 6.9349L13.2753 2.53554C12.9348 2.19237 12.4726 2 11.991 2H6.04815ZM3.7998 4.2625L3.88836 4.29517V4.29274L3.7998 4.2625ZM13.048 6.00121V3.78825L16.0225 6.78145H13.8234C13.39 6.78145 13.048 6.43738 13.048 6.00121Z",
+    fill: fill
+  }), (0,jsx_runtime_namespaceObject.jsx)("path", {
+    d: "M9.86867 12.4996L7.97338 9H9.74921L10.6803 11.0954C10.7534 11.2606 10.8189 11.4641 10.8757 11.6923H10.8862C10.9229 11.5562 10.9932 11.3425 11.0921 11.0718L12.121 9H13.7457L11.8068 12.4647L13.7998 16H12.0774L10.9516 13.717C10.9099 13.6323 10.8662 13.4775 10.8216 13.2492H10.8103C10.7888 13.3558 10.7377 13.5224 10.6593 13.7406L9.53276 15.9992H7.7998L9.86867 12.4996Z",
+    fill: fill
+  }), (0,jsx_runtime_namespaceObject.jsx)("path", {
+    d: "M17.9128 11.9231C18.2994 11.9231 18.6128 12.2365 18.6128 12.6231V19.8599L20.372 18.359C20.6661 18.108 21.1079 18.143 21.3589 18.4371C21.6098 18.7312 21.5748 19.1731 21.2807 19.424L18.3677 21.9094C18.2212 22.0344 18.036 22.0895 17.8553 22.0745C17.6994 22.0618 17.5579 21.998 17.4476 21.8999L14.5003 19.4278C14.2041 19.1794 14.1654 18.7378 14.4138 18.4416C14.6623 18.1454 15.1038 18.1067 15.4 18.3552L17.2128 19.8757V12.6231C17.2128 12.2365 17.5262 11.9231 17.9128 11.9231Z",
+    fill: fill
+  })]
+});
+const ExcelDownload_ICON_NAME = 'excel-download';
 ;// ./src/components/Icon/icons/Expertise.tsx
 
 const Expertise = ({
@@ -2647,6 +2695,33 @@ const Filter = ({
   })]
 });
 const Filter_ICON_NAME = 'filter';
+;// ./src/components/Icon/icons/FilterFunnel.tsx
+
+const FilterFunnel = ({
+  fill = '#000',
+  size = 24,
+  tooltip = 'Filter funnel',
+  ...props
+}) => (0,jsx_runtime_namespaceObject.jsxs)("svg", {
+  xmlns: "http://www.w3.org/2000/svg",
+  width: `${size}px`,
+  height: `${size}px`,
+  viewBox: "0 0 20 20",
+  fill: "none",
+  ...props,
+  children: [(0,jsx_runtime_namespaceObject.jsx)("title", {
+    children: tooltip
+  }), (0,jsx_runtime_namespaceObject.jsx)("path", {
+    d: "M2.73438 2.5C2.605 2.5 2.5 2.605 2.5 2.73438V4.60938C2.5 4.66281 2.51846 4.71461 2.55127 4.75586L8.125 11.723V15.9116C8.125 16.0067 8.182 16.0915 8.26965 16.1276L11.5509 17.4826C11.58 17.4943 11.6106 17.5 11.6406 17.5C11.6866 17.5 11.7313 17.4864 11.7706 17.4606C11.8358 17.417 11.875 17.3439 11.875 17.2656V11.723L17.4487 4.75586C17.4815 4.71461 17.5 4.66281 17.5 4.60938V2.73438C17.5 2.605 17.395 2.5 17.2656 2.5H2.73438ZM2.96875 2.96875H17.0312V4.52698L11.528 11.4062H8.47198L2.96875 4.52698V2.96875ZM8.59375 11.875H11.4062V16.9159L8.59375 15.755V11.875Z",
+    fill: fill
+  }), (0,jsx_runtime_namespaceObject.jsx)("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M2.73438 2.25C2.46693 2.25 2.25 2.46693 2.25 2.73438V4.60938C2.25 4.7201 2.28853 4.82714 2.35605 4.91203L7.875 11.8107V15.6701C7.875 15.6701 7.86214 16.0606 7.91666 16.1667C7.98574 16.3011 8.17447 16.3588 8.17447 16.3588L11.4555 17.7137L11.4574 17.7145C11.5169 17.7385 11.5794 17.75 11.6406 17.75C11.7368 17.75 11.8288 17.7214 11.9076 17.6698L11.9096 17.6684C12.0438 17.5786 12.125 17.4277 12.125 17.2656V11.8107L17.6444 4.91149C17.7119 4.8266 17.75 4.7201 17.75 4.60938V2.73438C17.75 2.46693 17.5331 2.25 17.2656 2.25H2.73438ZM16.7812 3.21875H3.21875V4.43928L8.59214 11.1562H11.4079L16.7812 4.43928V3.21875ZM8.84375 12.125V15.5877L11.1562 16.5422V12.125H8.84375Z",
+    fill: fill
+  })]
+});
+const FilterFunnel_ICON_NAME = 'filter-funnel';
 ;// ./src/components/Icon/icons/Geography.tsx
 
 const Geography = ({
@@ -3934,6 +4009,10 @@ const Warning_ICON_NAME = 'warning';
 
 
 
+
+
+
+
 
 
 
@@ -17435,6 +17514,7 @@ const TypeaheadContext = /*#__PURE__*/external_react_namespaceObject.createConte
   options: [],
   placeholder: '',
   useFormResult: {},
+  error: undefined,
   setValue: () => {
     /* no-op */
   },
@@ -17442,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: () => {
@@ -17462,9 +17542,6 @@ const TypeaheadContext = /*#__PURE__*/external_react_namespaceObject.createConte
   },
   handleRemoveSelectedClick: () => () => {
     /* no-op */
-  },
-  handleSelectedClick: () => {
-    /* no-op */
   }
 });
 const useTypeaheadContext = () => external_react_namespaceObject.useContext(TypeaheadContext);
@@ -17472,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,
@@ -17488,8 +17573,8 @@ const useTypeahead = ({
   error,
   success,
   placeholder,
-  register,
-  setValue,
+  filterOptions = true,
+  autoSelect = true,
   onChange,
   onClearAll,
   onRemoveSelectedClick,
@@ -17497,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();
     }
+    _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,
@@ -17777,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
   };
 };
@@ -17902,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, {
@@ -17910,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,
@@ -17985,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, {
@@ -18125,6 +18184,7 @@ const Typeahead = ({
   name = 'typeahead-search',
   label,
   selectedItems,
+  defaultSelectedItems,
   isOpen,
   isDisabled,
   isMultiple,
@@ -18142,8 +18202,6 @@ const Typeahead = ({
   optionsClassName,
   wrapperClassName,
   width = 300,
-  setValue,
-  register,
   onChange,
   onEmptyChange,
   onClearAll,
@@ -18154,6 +18212,7 @@ const Typeahead = ({
   const hookResult = useTypeahead({
     name,
     selectedItems,
+    defaultSelectedItems,
     isOpen,
     isDisabled,
     isMultiple,
@@ -18167,8 +18226,6 @@ const Typeahead = ({
     success,
     validationSchema,
     placeholder,
-    setValue,
-    register,
     onChange,
     onEmptyChange,
     renderOption,
@@ -18216,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
       })]
     })
   });
@@ -19094,6 +19151,7 @@ const SelectWidget = props => {
     placeholder,
     onChange,
     onBlur,
+    onFocus,
     onChangeOverride,
     value
   } = props;
@@ -19108,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