fui-material 2.1.11 → 2.1.13

package/dist/f-ui-kit.es.js

@@ -2977,14 +2977,45 @@ const FSelectSearchDb = ({
   const [isDropdownOpen, setIsDropdownOpen] = useState(false);
   const [dropdownPosition, setDropdownPosition] = useState("bottom");
   const containerRef = useRef(null);
+  const dropdownRef = useRef(null);
+  const dropdownPortalRef = useRef(null);
   const [textInput, setTextInput] = useState(false);
   const [error2, setError] = useState(void 0);
   useEffect(() => {
-    if (defaultValue !== void 0) {
-      setValueInput(defaultValue);
+    dropdownPortalRef.current = document.createElement("div");
+    document.body.appendChild(dropdownPortalRef.current);
+    return () => {
+      if (dropdownPortalRef.current) {
+        document.body.removeChild(dropdownPortalRef.current);
+      }
+    };
+  }, []);
+  const updateDropdownPosition = useCallback(() => {
+    if (!containerRef.current || !dropdownRef.current || !dropdownPortalRef.current) return;
+    const containerRect = containerRef.current.getBoundingClientRect();
+    const scrollLeft = window.pageXOffset || document.documentElement.scrollLeft;
+    const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
+    const offset = 4;
+    const top = containerRect.top + scrollTop + (dropdownPosition === "bottom" ? containerRect.height - offset : -dropdownRef.current.offsetHeight - offset);
+    const left2 = containerRect.left + scrollLeft;
+    Object.assign(dropdownPortalRef.current.style, {
+      position: "absolute",
+      top: `${top}px`,
+      left: `${left2}px`,
+      width: `${containerRect.width}px`,
+      zIndex: "9999"
+    });
+  }, [dropdownPosition]);
+  useEffect(() => {
+    if (isDropdownOpen) {
+      updateDropdownPosition();
+      window.addEventListener("resize", updateDropdownPosition);
     }
-  }, [defaultValue]);
-  const updateDropdownPosition = () => {
+    return () => {
+      window.removeEventListener("resize", updateDropdownPosition);
+    };
+  }, [isDropdownOpen, updateDropdownPosition]);
+  const updateDropdownPositionBasedOnSpace = () => {
     if (!containerRef.current) return;
     const rect = containerRef.current.getBoundingClientRect();
     const spaceBelow = window.innerHeight - rect.bottom;
@@ -2994,11 +3025,11 @@ const FSelectSearchDb = ({
   };
   useEffect(() => {
     if (isDropdownOpen) {
-      updateDropdownPosition();
-      window.addEventListener("resize", updateDropdownPosition);
+      updateDropdownPositionBasedOnSpace();
+      window.addEventListener("resize", updateDropdownPositionBasedOnSpace);
     }
     return () => {
-      window.removeEventListener("resize", updateDropdownPosition);
+      window.removeEventListener("resize", updateDropdownPositionBasedOnSpace);
     };
   }, [isDropdownOpen]);
   const handlerOnChange = (e) => {
@@ -3129,7 +3160,17 @@ const FSelectSearchDb = ({
             }
           )
         ] }),
-        isDropdownOpen && (arrObject.length > 0 || valueInput.trim() === "") && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: `${styles$e["f-select-search-db__dropdown"]} ${isDropdownOpen ? styles$e.active : ""}`, children: arrObject.length === 0 && valueInput.trim() === "" ? /* @__PURE__ */ jsxRuntimeExports.jsx("li", { children: "Введите текст" }) : arrObject.length === 0 && valueInput.trim() !== "" && !load ? /* @__PURE__ */ jsxRuntimeExports.jsx("li", { children: "Ничего не найдено" }) : /* @__PURE__ */ jsxRuntimeExports.jsx("ul", { className: styles$e["f-select-search-db__dropdown_content"], children: arrObject.slice(0, 10).map((opt, index) => /* @__PURE__ */ jsxRuntimeExports.jsx("li", { onClick: () => handleItemClick(opt), children: selectItem(opt) }, index)) }) })
+        isDropdownOpen && (arrObject.length > 0 || valueInput.trim() === "") && dropdownPortalRef.current && createPortal(
+          /* @__PURE__ */ jsxRuntimeExports.jsx(
+            "div",
+            {
+              ref: dropdownRef,
+              className: `${styles$e["f-select-search-db__dropdown"]} ${isDropdownOpen ? styles$e.active : ""}`,
+              children: arrObject.length === 0 && valueInput.trim() === "" ? /* @__PURE__ */ jsxRuntimeExports.jsx("li", { children: "Введите текст" }) : arrObject.length === 0 && valueInput.trim() !== "" && !load ? /* @__PURE__ */ jsxRuntimeExports.jsx("li", { children: "Ничего не найдено" }) : /* @__PURE__ */ jsxRuntimeExports.jsx("ul", { className: styles$e["f-select-search-db__dropdown_content"], children: arrObject.slice(0, 10).map((opt, index) => /* @__PURE__ */ jsxRuntimeExports.jsx("li", { onClick: () => handleItemClick(opt), children: selectItem(opt) }, index)) })
+            }
+          ),
+          dropdownPortalRef.current
+        )
       ]
     }
   );