fui-material 2.7.10 → 2.7.12

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

@@ -1009,20 +1009,22 @@ const FTableFooter = ({
     }
   );
 };
-const active$4 = "_active_16jkc_16";
-const hide = "_hide_16jkc_37";
+const entering = "_entering_dwagt_17";
+const exiting = "_exiting_dwagt_23";
+const hide = "_hide_dwagt_45";
 const styles$r = {
-  "f-dialog": "_f-dialog_16jkc_1",
-  "active-dialog": "_active-dialog_16jkc_16",
-  "f-dialog__content": "_f-dialog__content_16jkc_20",
-  active: active$4,
+  "f-dialog": "_f-dialog_dwagt_1",
+  entering,
+  "f-dialog__content": "_f-dialog__content_dwagt_20",
+  exiting,
   hide,
-  "f-dialog__header": "_f-dialog__header_16jkc_41",
-  "f-dialog__header_title": "_f-dialog__header_title_16jkc_53",
-  "f-dialog__header_close": "_f-dialog__header_close_16jkc_64",
-  "f-dialog__body": "_f-dialog__body_16jkc_79",
-  "f-dialog__footer": "_f-dialog__footer_16jkc_84"
+  "f-dialog__header": "_f-dialog__header_dwagt_49",
+  "f-dialog__header_title": "_f-dialog__header_title_dwagt_61",
+  "f-dialog__header_close": "_f-dialog__header_close_dwagt_72",
+  "f-dialog__body": "_f-dialog__body_dwagt_87",
+  "f-dialog__footer": "_f-dialog__footer_dwagt_92"
 };
+let openDialogsCount = 0;
 const FDialog = ({
   openAndClose,
   closeButtonBackPage,
@@ -1033,22 +1035,55 @@ const FDialog = ({
   st,
   width = "lg"
 }) => {
+  const [isMounted, setIsMounted] = useState(openAndClose);
+  const [isClosing, setIsClosing] = useState(false);
   useEffect(() => {
-    if (!openAndClose) return;
-    const dialogCount = document.querySelectorAll(".active-dialog").length;
-    if (dialogCount > 0) {
-      document.body.classList.add("open-dialog");
-    } else {
-      document.body.classList.remove("open-dialog");
+    if (openAndClose) {
+      setIsMounted(true);
+      setIsClosing(false);
+    } else if (isMounted) {
+      setIsClosing(true);
     }
-    return () => {
-      const updatedCount = document.querySelectorAll(".active-dialog").length;
-      if (updatedCount === 0) {
-        document.body.classList.remove("open-dialog");
-      }
-    };
   }, [openAndClose]);
-  if (!openAndClose) return null;
+  const handleAnimationEnd = (e) => {
+    if (isClosing && e.target === e.currentTarget) {
+      setIsMounted(false);
+      setIsClosing(false);
+    }
+  };
+  useEffect(() => {
+    if (isClosing) {
+      const timer = setTimeout(() => {
+        setIsMounted(false);
+        setIsClosing(false);
+      }, 300);
+      return () => clearTimeout(timer);
+    }
+  }, [isClosing]);
+  useEffect(() => {
+    if (isMounted && !isClosing) {
+      openDialogsCount += 1;
+      document.body.classList.add("open-dialog");
+      return () => {
+        openDialogsCount = Math.max(0, openDialogsCount - 1);
+        if (openDialogsCount === 0) {
+          document.body.classList.remove("open-dialog");
+        }
+      };
+    }
+  }, [isMounted, isClosing]);
+  const handleKeyDown = useCallback((e) => {
+    if (e.key === "Escape" && openAndClose && !isClosing) {
+      closeButtonBackPage == null ? void 0 : closeButtonBackPage(false);
+    }
+  }, [openAndClose, isClosing, closeButtonBackPage]);
+  useEffect(() => {
+    if (isMounted && !isClosing) {
+      window.addEventListener("keydown", handleKeyDown);
+      return () => window.removeEventListener("keydown", handleKeyDown);
+    }
+  }, [isMounted, isClosing, handleKeyDown]);
+  if (!isMounted) return null;
   const widthStyles = {
     xs: "50vw",
     md: "65vw",
@@ -1057,22 +1092,28 @@ const FDialog = ({
     adaptive: "fit-content"
   };
   const contentWidth = widthStyles[width];
+  const animationClass = isClosing ? styles$r["exiting"] : styles$r["entering"];
   return ReactDOM.createPortal(
     /* @__PURE__ */ jsx(
       "div",
       {
         id,
         style: st,
-        className: `${styles$r["f-dialog"]} ${openAndClose ? styles$r["active-dialog"] : ""} ${className || ""}`,
-        onClick: () => closeButtonBackPage == null ? void 0 : closeButtonBackPage(false),
+        className: `${styles$r["f-dialog"]} ${animationClass} ${className || ""}`,
+        onMouseDown: (e) => {
+          if (e.target === e.currentTarget) {
+            closeButtonBackPage == null ? void 0 : closeButtonBackPage(false);
+          }
+        },
+        onAnimationEnd: handleAnimationEnd,
         children: /* @__PURE__ */ jsx(
           "div",
           {
-            className: `${styles$r["f-dialog__content"]} ${openAndClose ? styles$r["active"] : ""} ${hide2 ? styles$r["hide"] : ""}`,
+            className: `${styles$r["f-dialog__content"]} ${hide2 ? styles$r["hide"] : ""}`,
             style: {
               width: contentWidth
             },
-            onClick: (e) => e.stopPropagation(),
+            onMouseDown: (e) => e.stopPropagation(),
             children
           }
         )
@@ -3446,24 +3487,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 +3566,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 +3588,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 +3649,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 +3681,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 +3762,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 +3806,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",
             {