react-better-html 1.1.78 → 1.1.79

package/dist/index.js

@@ -4750,7 +4750,7 @@ var DropdownComponent = (0, import_react16.forwardRef)(function Dropdown({
   ...props
 }, ref) {
   const theme2 = useTheme();
-  const dropdownHolderRef = (0, import_react16.useRef)(null);
+  const inputFieldHolderRef = (0, import_react16.useRef)(null);
   const inputRef = (0, import_react16.useRef)(null);
   const [isOpen, setIsOpen] = useBooleanState();
   const [isOpenLate, setIsOpenLate] = useBooleanState();
@@ -4861,7 +4861,7 @@ var DropdownComponent = (0, import_react16.forwardRef)(function Dropdown({
   }, [filteredOptions]);
   (0, import_react16.useEffect)(() => {
     const handleClickOutside = (event) => {
-      if (dropdownHolderRef.current && !dropdownHolderRef.current.contains(event.target)) {
+      if (inputFieldHolderRef.current && !inputFieldHolderRef.current.contains(event.target)) {
         setIsOpen.setFalse();
         setSearchQuery("");
         setFocusedOptionIndex(void 0);
@@ -4881,7 +4881,7 @@ var DropdownComponent = (0, import_react16.forwardRef)(function Dropdown({
   const displayValue = withSearch && isFocused ? searchQuery : selectedOption?.label ?? "";
   const withClearButton = isOpen && selectedOption;
   const readyPlaceholder = placeholder ? placeholder : `Select an ${label?.toLowerCase() ?? "option"}`;
-  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(Div_default.column, { width: "100%", position: "relative", userSelect: "none", ...props, ref: dropdownHolderRef, children: /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(Div_default.row, { position: "relative", width: "100%", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(Div_default.column, { width: "100%", position: "relative", userSelect: "none", ...props, children: /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(Div_default.row, { position: "relative", width: "100%", children: [
     /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
       InputField_default,
       {
@@ -4901,6 +4901,7 @@ var DropdownComponent = (0, import_react16.forwardRef)(function Dropdown({
         onFocus: setIsFocused.setTrue,
         onBlur: setIsFocused.setFalse,
         onKeyDown: onKeyDownInputField,
+        holderRef: inputFieldHolderRef,
         onChangeValue: withSearch ? onChangeValue : void 0,
         insideInputFieldComponent: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
           Div_default,
@@ -5360,9 +5361,9 @@ var InputFieldComponent = (0, import_react18.forwardRef)(function InputField({
     if (!withDebounce) return;
     onChangeValue?.(debouncedValue);
   }, [withDebounce, onChangeValue, debouncedValue]);
-  return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(Div_default.column, { width: "100%", gap: theme2.styles.gap, ...styledComponentStylesWithExcluded, ref: holderRef, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(Div_default.column, { width: "100%", gap: theme2.styles.gap, ...styledComponentStylesWithExcluded, children: [
     label && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Label_default, { text: label, color: labelColor, required, isError: !!errorText }),
-    /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(Div_default, { position: "relative", width: "100%", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(Div_default, { position: "relative", width: "100%", ref: holderRef, children: [
       leftIcon && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
         Icon_default,
         {