fui-material 2.8.22 → 2.8.23

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

@@ -4925,6 +4925,21 @@ const FStatusBadge = ({
     /* @__PURE__ */ jsx("span", { children })
   ] });
 };
+function findOffsetIndex(offsets, targetOffset) {
+  let low = 0;
+  let high = offsets.length - 2;
+  let result = 0;
+  while (low <= high) {
+    const mid = low + high >> 1;
+    if (offsets[mid] <= targetOffset) {
+      result = mid;
+      low = mid + 1;
+    } else {
+      high = mid - 1;
+    }
+  }
+  return result;
+}
 function FProgressiveList({
   items,
   chunkSize = 6,
@@ -4939,14 +4954,18 @@ function FProgressiveList({
   hasMore = false,
   isLoadingMore = false,
   loader: loader2,
-  threshold = 250
+  threshold = 250,
+  virtualize = false,
+  overscan = 2
 }) {
   const totalCount = items.length;
+  const containerRef = useRef(null);
   const [renderedCount, setRenderedCount] = useState(() => Math.min(chunkSize, totalCount));
   const sentinelRef = useRef(null);
   const prevFirstKeyRef = useRef(void 0);
   const prevTotalCountRef = useRef(totalCount);
   useEffect(() => {
+    if (virtualize) return;
     const currentFirstKey = items.length > 0 ? keyExtractor(items[0], 0) : void 0;
     const isReset = currentFirstKey !== prevFirstKeyRef.current || totalCount < prevTotalCountRef.current;
     if (isReset) {
@@ -4954,17 +4973,119 @@ function FProgressiveList({
     }
     prevFirstKeyRef.current = currentFirstKey;
     prevTotalCountRef.current = totalCount;
-  }, [items, keyExtractor, chunkSize, totalCount]);
+  }, [items, keyExtractor, chunkSize, totalCount, virtualize]);
   useEffect(() => {
+    if (virtualize) return;
     if (renderedCount >= totalCount) return;
     const frameId = requestAnimationFrame(() => {
       setRenderedCount((prev) => Math.min(prev + chunkSize, totalCount));
     });
     return () => cancelAnimationFrame(frameId);
-  }, [renderedCount, totalCount, chunkSize]);
+  }, [renderedCount, totalCount, chunkSize, virtualize]);
+  const measuredHeights = useRef(/* @__PURE__ */ new Map());
+  const [measureVersion, setMeasureVersion] = useState(0);
+  const resizeObserverRef = useRef(null);
+  useEffect(() => {
+    if (!virtualize) return;
+    const currentFirstKey = items.length > 0 ? keyExtractor(items[0], 0) : void 0;
+    if (currentFirstKey !== prevFirstKeyRef.current || totalCount < prevTotalCountRef.current) {
+      measuredHeights.current.clear();
+      setMeasureVersion((v) => v + 1);
+    }
+    prevFirstKeyRef.current = currentFirstKey;
+    prevTotalCountRef.current = totalCount;
+  }, [items, keyExtractor, totalCount, virtualize]);
+  useEffect(() => {
+    if (!virtualize) return;
+    const ro = new ResizeObserver((entries) => {
+      var _a, _b;
+      let changed = false;
+      for (const entry of entries) {
+        const indexAttr = entry.target.getAttribute("data-virtual-index");
+        if (indexAttr !== null) {
+          const index = Number(indexAttr);
+          const height = ((_b = (_a = entry.borderBoxSize) == null ? void 0 : _a[0]) == null ? void 0 : _b.blockSize) ?? entry.contentRect.height;
+          const prevHeight = measuredHeights.current.get(index);
+          if (height > 0 && (!prevHeight || Math.abs(prevHeight - height) > 2)) {
+            measuredHeights.current.set(index, height);
+            changed = true;
+          }
+        }
+      }
+      if (changed) {
+        setMeasureVersion((v) => v + 1);
+      }
+    });
+    resizeObserverRef.current = ro;
+    return () => ro.disconnect();
+  }, [virtualize]);
+  const offsets = useMemo(() => {
+    if (!virtualize) return new Float64Array(0);
+    const arr = new Float64Array(totalCount + 1);
+    let sum = 0;
+    for (let i = 0; i < totalCount; i++) {
+      arr[i] = sum;
+      const h = measuredHeights.current.get(i) ?? estimatedItemHeight;
+      sum += h;
+    }
+    arr[totalCount] = sum;
+    return arr;
+  }, [totalCount, estimatedItemHeight, virtualize, measureVersion]);
+  const [scrollState, setScrollState] = useState(() => ({
+    scrollTop: 0,
+    viewportHeight: typeof window !== "undefined" ? window.innerHeight : 800
+  }));
+  useEffect(() => {
+    if (!virtualize) return;
+    let rafId = null;
+    const handleScroll = () => {
+      if (rafId !== null) return;
+      rafId = requestAnimationFrame(() => {
+        rafId = null;
+        if (!containerRef.current) return;
+        const rect = containerRef.current.getBoundingClientRect();
+        const scrollTop = Math.max(0, -rect.top);
+        const viewportHeight = window.innerHeight;
+        setScrollState((prev) => {
+          if (Math.abs(prev.scrollTop - scrollTop) > 30 || prev.viewportHeight !== viewportHeight) {
+            return { scrollTop, viewportHeight };
+          }
+          return prev;
+        });
+      });
+    };
+    window.addEventListener("scroll", handleScroll, { passive: true });
+    window.addEventListener("resize", handleScroll, { passive: true });
+    handleScroll();
+    return () => {
+      if (rafId !== null) cancelAnimationFrame(rafId);
+      window.removeEventListener("scroll", handleScroll);
+      window.removeEventListener("resize", handleScroll);
+    };
+  }, [virtualize]);
+  const { startIndex, endIndex, topSpacerHeight, bottomSpacerHeight } = useMemo(() => {
+    if (!virtualize || totalCount === 0 || offsets.length <= 1) {
+      return { startIndex: 0, endIndex: 0, topSpacerHeight: 0, bottomSpacerHeight: 0 };
+    }
+    const visibleTop = scrollState.scrollTop;
+    const visibleBottom = scrollState.scrollTop + scrollState.viewportHeight;
+    const rawStartIndex = findOffsetIndex(offsets, visibleTop);
+    const rawEndIndex = findOffsetIndex(offsets, visibleBottom);
+    const sIdx = Math.max(0, rawStartIndex - overscan);
+    const eIdx = Math.min(totalCount - 1, rawEndIndex + overscan);
+    const topHeight = offsets[sIdx] || 0;
+    const totalHeight = offsets[totalCount] || 0;
+    const bottomHeight = Math.max(0, totalHeight - (offsets[eIdx + 1] || totalHeight));
+    return {
+      startIndex: sIdx,
+      endIndex: eIdx,
+      topSpacerHeight: topHeight,
+      bottomSpacerHeight: bottomHeight
+    };
+  }, [virtualize, totalCount, offsets, scrollState, overscan]);
   useEffect(() => {
     if (!onLoadMore || !hasMore || isLoadingMore) return;
-    if (renderedCount < totalCount) return;
+    if (!virtualize && renderedCount < totalCount) return;
     const sentinelEl = sentinelRef.current;
     if (!sentinelEl) return;
     const observer = new IntersectionObserver(
@@ -4980,26 +5101,56 @@ function FProgressiveList({
       }
     );
     observer.observe(sentinelEl);
-    return () => {
-      observer.disconnect();
-    };
-  }, [onLoadMore, hasMore, isLoadingMore, renderedCount, totalCount, threshold]);
-  const visibleItems = items.slice(0, renderedCount);
+    return () => observer.disconnect();
+  }, [onLoadMore, hasMore, isLoadingMore, renderedCount, totalCount, threshold, virtualize]);
+  useEffect(() => {
+    if (!virtualize || !onLoadMore || !hasMore || isLoadingMore) return;
+    if (totalCount > 0 && endIndex >= totalCount - 1 - overscan) {
+      onLoadMore();
+    }
+  }, [virtualize, endIndex, totalCount, overscan, onLoadMore, hasMore, isLoadingMore]);
+  const setItemRef = useCallback((el) => {
+    if (el && resizeObserverRef.current) {
+      resizeObserverRef.current.observe(el);
+    }
+  }, []);
   const itemWrapperStyle = {
-    contentVisibility: "auto",
-    containIntrinsicSize: `0 ${estimatedItemHeight}px`,
+    contentVisibility: virtualize ? void 0 : "auto",
+    containIntrinsicSize: virtualize ? void 0 : `0 ${estimatedItemHeight}px`,
     marginBottom: 16
   };
-  return /* @__PURE__ */ jsxs("div", { className, style: st, children: [
-    visibleItems.map((item, index) => /* @__PURE__ */ jsx(
-      "div",
-      {
-        style: itemWrapperStyle,
-        children: children(item, index)
-      },
-      keyExtractor(item, index)
-    )),
-    showProgress && renderProgress && renderedCount < totalCount && /* @__PURE__ */ jsx("div", { style: { textAlign: "center", padding: "8px 0" }, children: renderProgress(renderedCount, totalCount) }),
+  return /* @__PURE__ */ jsxs("div", { ref: containerRef, className, style: st, children: [
+    virtualize ? (
+      // --- РЕНДЕР С ВИРТУАЛЬНЫМ ОКНОМ ---
+      /* @__PURE__ */ jsxs(Fragment, { children: [
+        topSpacerHeight > 0 && /* @__PURE__ */ jsx("div", { style: { height: topSpacerHeight, width: "100%" }, "aria-hidden": "true" }),
+        items.slice(startIndex, endIndex + 1).map((item, localIndex) => {
+          const globalIndex = startIndex + localIndex;
+          return /* @__PURE__ */ jsx(
+            "div",
+            {
+              ref: setItemRef,
+              "data-virtual-index": globalIndex,
+              style: itemWrapperStyle,
+              children: children(item, globalIndex)
+            },
+            keyExtractor(item, globalIndex)
+          );
+        }),
+        bottomSpacerHeight > 0 && /* @__PURE__ */ jsx("div", { style: { height: bottomSpacerHeight, width: "100%" }, "aria-hidden": "true" })
+      ] })
+    ) : (
+      // --- СТАНДАРТНЫЙ ПРОГРЕССИВНЫЙ РЕНДЕР ---
+      items.slice(0, renderedCount).map((item, index) => /* @__PURE__ */ jsx(
+        "div",
+        {
+          style: itemWrapperStyle,
+          children: children(item, index)
+        },
+        keyExtractor(item, index)
+      ))
+    ),
+    !virtualize && showProgress && renderProgress && renderedCount < totalCount && /* @__PURE__ */ jsx("div", { style: { textAlign: "center", padding: "8px 0" }, children: renderProgress(renderedCount, totalCount) }),
     onLoadMore && hasMore && /* @__PURE__ */ jsx(
       "div",
       {
@@ -10104,9 +10255,11 @@ function useFManualPagination(options) {
     resetPage = true,
     dopUrl
   }) => {
-    const targetPage = resetPage ? 1 : page;
+    const payloadObj = payload && typeof payload === "object" ? payload : void 0;
+    const targetPage = payloadObj && typeof payloadObj.page === "number" ? payloadObj.page : resetPage ? 1 : page;
+    const targetSize = payloadObj && typeof payloadObj.size === "number" ? payloadObj.size : pageSize || defaultPageSize || 20;
     if (resetPage) {
-      setPage(1);
+      setPage(targetPage);
       if (isInfinite) {
         setAccumulatedData(void 0);
       }
@@ -10114,7 +10267,8 @@ function useFManualPagination(options) {
     setIsSubmitting(true);
     try {
       const rawResponse = await query.run({
-        newParams: { ...payload, page: targetPage, size: pageSize },
+        newParams: { ...payload, page: targetPage, size: targetSize },
+        newUrlParams: { page: targetPage, size: targetSize },
         dopUrl
       });
       const extracted = extractResult(rawResponse);
@@ -10125,13 +10279,14 @@ function useFManualPagination(options) {
     } finally {
       setIsSubmitting(false);
     }
-  }, [query, page, pageSize, isInfinite, extractResult]);
+  }, [query, page, pageSize, defaultPageSize, isInfinite, extractResult]);
   const changePage = useCallback(async (newPage) => {
     if (isInfinite) {
       setIsFetchingMore(true);
       try {
         const rawResponse = await query.run({
           newParams: { page: newPage, size: pageSize },
+          newUrlParams: { page: newPage, size: pageSize },
           mergeParams: true
         });
         const extracted = extractResult(rawResponse);
@@ -10145,6 +10300,7 @@ function useFManualPagination(options) {
       setPage(newPage);
       const rawResponse = await query.run({
         newParams: { page: newPage, size: pageSize },
+        newUrlParams: { page: newPage, size: pageSize },
         mergeParams: true
       });
       return extractResult(rawResponse);