fui-material 2.7.10 → 2.7.11

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

@@ -3446,24 +3446,24 @@ const FTooltip = ({
     tooltipElement && createPortal(tooltipElement, document.body)
   ] });
 };
-const rotate = "_rotate_fq6h3_43";
-const focused = "_focused_fq6h3_94";
-const selected = "_selected_fq6h3_97";
+const rotate = "_rotate_1kvw2_38";
+const focused = "_focused_1kvw2_87";
+const selected = "_selected_1kvw2_90";
 const styles$6 = {
-  "f-search-select": "_f-search-select_fq6h3_3",
-  "f-select-native-hidden": "_f-select-native-hidden_fq6h3_8",
-  "f-select-actions": "_f-select-actions_fq6h3_25",
-  "f-select-icon": "_f-select-icon_fq6h3_34",
+  "f-search-select": "_f-search-select_1kvw2_3",
+  "f-select-native-hidden": "_f-select-native-hidden_1kvw2_9",
+  "f-select-actions": "_f-select-actions_1kvw2_20",
+  "f-select-icon": "_f-select-icon_1kvw2_29",
   rotate,
-  "f-select-dropdown": "_f-select-dropdown_fq6h3_48",
-  "f-select-list": "_f-select-list_fq6h3_62",
-  "f-select-option": "_f-select-option_fq6h3_81",
+  "f-select-dropdown": "_f-select-dropdown_1kvw2_43",
+  "f-select-list": "_f-select-list_1kvw2_54",
+  "f-select-option": "_f-select-option_1kvw2_75",
   focused,
   selected,
-  "f-select-create": "_f-select-create_fq6h3_102",
-  "f-select-no-results": "_f-select-no-results_fq6h3_108",
-  "f-select-highlight": "_f-select-highlight_fq6h3_128",
-  "has-icons": "_has-icons_fq6h3_135"
+  "f-select-create": "_f-select-create_1kvw2_95",
+  "f-select-no-results": "_f-select-no-results_1kvw2_101",
+  "f-select-highlight": "_f-select-highlight_1kvw2_121",
+  "has-icons": "_has-icons_1kvw2_128"
 };
 const ChevronIcon = ({ className }) => /* @__PURE__ */ jsx("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", className, children: /* @__PURE__ */ jsx("polyline", { points: "6 9 12 15 18 9" }) });
 const CloseIcon = () => /* @__PURE__ */ jsxs("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
@@ -3525,7 +3525,11 @@ const FSearchableSelect = forwardRef(
     const [searchQuery, setSearchQuery] = useState("");
     const [highlightedIndex, setHighlightedIndex] = useState(0);
     const [isTyping, setIsTyping] = useState(false);
+    const [dropdownStyle, setDropdownStyle] = useState({});
+    const [listMaxHeight, setListMaxHeight] = useState(300);
     const containerRef = useRef(null);
+    const controlRef = useRef(null);
+    const dropdownRef = useRef(null);
     const visibleInputRef = useRef(null);
     const listRef = useRef(null);
     const lastValueRef = useRef(restProps.value !== void 0 ? String(restProps.value) : "");
@@ -3543,11 +3547,48 @@ const FSearchableSelect = forwardRef(
         return;
       }
       setIsTyping(true);
-      const timeoutId = setTimeout(() => {
-        setIsTyping(false);
-      }, 1e3);
+      const timeoutId = setTimeout(() => setIsTyping(false), 1e3);
       return () => clearTimeout(timeoutId);
     }, [searchQuery, isOpen]);
+    const updateDropdownPosition = () => {
+      if (!controlRef.current || !isOpen) return;
+      const rect = controlRef.current.getBoundingClientRect();
+      const viewportHeight = window.innerHeight;
+      const spaceBelow = viewportHeight - rect.bottom;
+      const spaceAbove = rect.top;
+      let top, bottom, maxHeight;
+      const gap = 4;
+      if (spaceBelow < 250 && spaceAbove > spaceBelow) {
+        bottom = viewportHeight - rect.top + gap;
+        top = "auto";
+        maxHeight = Math.min(spaceAbove - 20, 350);
+      } else {
+        top = rect.bottom + gap;
+        bottom = "auto";
+        maxHeight = Math.min(spaceBelow - 20, 350);
+      }
+      setDropdownStyle({
+        position: "fixed",
+        top,
+        bottom,
+        left: rect.left,
+        width: rect.width,
+        zIndex: 999999
+        // Поверх модалок
+      });
+      setListMaxHeight(maxHeight);
+    };
+    useLayoutEffect(() => {
+      if (isOpen) {
+        updateDropdownPosition();
+        window.addEventListener("scroll", updateDropdownPosition, true);
+        window.addEventListener("resize", updateDropdownPosition);
+      }
+      return () => {
+        window.removeEventListener("scroll", updateDropdownPosition, true);
+        window.removeEventListener("resize", updateDropdownPosition);
+      };
+    }, [isOpen]);
     const deferredQuery = useDeferredValue(searchQuery);
     const filteredOptions = useMemo(() => {
       if (!isOpen) return options;
@@ -3567,6 +3608,14 @@ const FSearchableSelect = forwardRef(
       }
       return list;
     }, [filteredOptions, showCreateOption, deferredQuery]);
+    useEffect(() => {
+      if (isOpen && listRef.current) {
+        const activeItem = listRef.current.children[highlightedIndex];
+        if (activeItem) {
+          activeItem.scrollIntoView({ block: "nearest" });
+        }
+      }
+    }, [highlightedIndex, isOpen]);
     const triggerChange = (newValue) => {
       lastValueRef.current = newValue;
       if (restProps.onChange) {
@@ -3591,7 +3640,10 @@ const FSearchableSelect = forwardRef(
     };
     useEffect(() => {
       const handleClickOutside = (event) => {
-        if (containerRef.current && !containerRef.current.contains(event.target)) {
+        var _a, _b;
+        const isClickInContainer = (_a = containerRef.current) == null ? void 0 : _a.contains(event.target);
+        const isClickInDropdown = (_b = dropdownRef.current) == null ? void 0 : _b.contains(event.target);
+        if (!isClickInContainer && !isClickInDropdown) {
           setIsOpen(false);
           const effectiveValue = restProps.value !== void 0 ? String(restProps.value) : lastValueRef.current;
           if (effectiveValue) {
@@ -3669,7 +3721,7 @@ const FSearchableSelect = forwardRef(
               "aria-hidden": "true"
             }
           ),
-          /* @__PURE__ */ jsxs("div", { className: `f-form-element__control ${load ? "is-loading" : ""}`, children: [
+          /* @__PURE__ */ jsxs("div", { ref: controlRef, className: `f-form-element__control ${load ? "is-loading" : ""}`, children: [
             /* @__PURE__ */ jsx(
               "input",
               {
@@ -3713,29 +3765,48 @@ const FSearchableSelect = forwardRef(
               /* @__PURE__ */ jsx("div", { className: `${styles$6["f-select-icon"]} ${isOpen ? styles$6["rotate"] : ""}`, children: /* @__PURE__ */ jsx(ChevronIcon, {}) })
             ] })
           ] }),
-          isOpen && !disabled2 && !load && /* @__PURE__ */ jsx("div", { className: styles$6["f-select-dropdown"], children: /* @__PURE__ */ jsx("ul", { ref: listRef, className: styles$6["f-select-list"], children: isTyping ? /* @__PURE__ */ jsx("li", { className: styles$6["f-select-no-results"], children: "Ожидается окончание ввода..." }) : renderList.length === 0 ? /* @__PURE__ */ jsx("li", { className: styles$6["f-select-no-results"], children: allowCreate ? "Нет данных" : "Совпадений не найдено" }) : renderList.map((option, index) => /* @__PURE__ */ jsx(
-            "li",
-            {
-              className: `
+          isOpen && !disabled2 && !load && typeof document !== "undefined" && createPortal(
+            /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: styles$6["f-select-dropdown"],
+                style: dropdownStyle,
+                ref: dropdownRef,
+                children: /* @__PURE__ */ jsx(
+                  "ul",
+                  {
+                    ref: listRef,
+                    className: styles$6["f-select-list"],
+                    style: { maxHeight: `${listMaxHeight}px` },
+                    children: isTyping ? /* @__PURE__ */ jsx("li", { className: styles$6["f-select-no-results"], children: "Ожидается окончание ввода..." }) : renderList.length === 0 ? /* @__PURE__ */ jsx("li", { className: styles$6["f-select-no-results"], children: allowCreate ? "Нет данных" : "Совпадений не найдено" }) : renderList.map((option, index) => /* @__PURE__ */ jsx(
+                      "li",
+                      {
+                        className: `
                                                 ${styles$6["f-select-option"]} 
                                                 ${option.isNew ? styles$6["f-select-create"] : ""} 
                                                 ${index === highlightedIndex ? styles$6["focused"] : ""} 
                                                 ${currentValStr === option.value ? styles$6["selected"] : ""}
                                             `,
-              onMouseDown: (e) => e.preventDefault(),
-              onClick: (e) => {
-                e.stopPropagation();
-                handleSelect(option);
-              },
-              onMouseEnter: () => setHighlightedIndex(index),
-              children: /* @__PURE__ */ jsxs("div", { style: { overflow: "hidden", textOverflow: "ellipsis" }, children: [
-                option.isNew && /* @__PURE__ */ jsx("span", { style: { marginRight: 4 }, children: /* @__PURE__ */ jsx(PlusIcon, {}) }),
-                /* @__PURE__ */ jsx(HighlightedText, { text: option.label, highlight: deferredQuery }),
-                option.isNew && /* @__PURE__ */ jsx("span", { style: { opacity: 0.6, fontSize: "0.85em", marginLeft: 6 }, children: "(Создать)" })
-              ] })
-            },
-            option.value + index
-          )) }) }),
+                        onMouseDown: (e) => e.preventDefault(),
+                        onClick: (e) => {
+                          e.stopPropagation();
+                          handleSelect(option);
+                        },
+                        onMouseEnter: () => setHighlightedIndex(index),
+                        children: /* @__PURE__ */ jsxs("div", { style: { overflow: "hidden", textOverflow: "ellipsis" }, children: [
+                          option.isNew && /* @__PURE__ */ jsx("span", { style: { marginRight: 4 }, children: /* @__PURE__ */ jsx(PlusIcon, {}) }),
+                          /* @__PURE__ */ jsx(HighlightedText, { text: option.label, highlight: deferredQuery }),
+                          option.isNew && /* @__PURE__ */ jsx("span", { style: { opacity: 0.6, fontSize: "0.85em", marginLeft: 6 }, children: "(Создать)" })
+                        ] })
+                      },
+                      option.value + index
+                    ))
+                  }
+                )
+              }
+            ),
+            document.body
+          ),
           helpText && /* @__PURE__ */ jsx(
             "p",
             {