@ai-matrx/design-system 0.17.0 → 0.17.2

package/dist/data-table/index.js

@@ -415,6 +415,7 @@ import {
   isValidElement,
   useCallback as useCallback3,
   useEffect as useEffect9,
+  useLayoutEffect,
   useMemo as useMemo4,
   useRef as useRef4,
   useState as useState14
@@ -1167,6 +1168,7 @@ function useScrollPagination({
   const inFlightGenerationRef = useRef(null);
   const requestErrorRef = useRef(null);
   const mountedRef = useRef(false);
+  const observedTopRef = useRef(/* @__PURE__ */ new WeakMap());
   const effectiveError = error ?? requestError;
   useEffect(() => {
     mountedRef.current = true;
@@ -1200,6 +1202,7 @@ function useScrollPagination({
   };
   useEffect(() => {
     intentRef.current = null;
+    observedTopRef.current = /* @__PURE__ */ new WeakMap();
     consumedSequenceRef.current = inputSequenceRef.current;
     requestErrorRef.current = null;
     setRequestError(null);
@@ -1209,14 +1212,18 @@ function useScrollPagination({
   useEffect(() => {
     if (mode !== "scroll" || !enabled || typeof window === "undefined") return;
     const attachable = containers.map(resolveContainer).filter((container) => container !== null);
-    const setIntent = (container) => {
+    const setIntent = (container, startTop) => {
       const current = latestRef.current;
       if (!isVisibleContainer(container) || current.loading || current.isFetchingNextPage || inFlightGenerationRef.current !== null) return;
       inputSequenceRef.current += 1;
       intentRef.current = {
         queryKey: latestRef.current.queryKey,
         container,
-        startTop: container.scrollTop,
+        // The compositor can advance downward before the passive input
+        // listener, while DOM/test callers can move upward before its scroll
+        // notification. Either way, the lower position is the only safe
+        // baseline for proving that this downward intent caused movement.
+        startTop: Math.min(startTop, container.scrollTop),
         sequence: inputSequenceRef.current,
         expiresAt: Date.now() + intentTimeoutMs
       };
@@ -1231,9 +1238,11 @@ function useScrollPagination({
       void requestNextPage();
     };
     const cleanups = attachable.map((container) => {
+      if (!observedTopRef.current.has(container)) observedTopRef.current.set(container, container.scrollTop);
+      const lastObservedTop = () => observedTopRef.current.get(container) ?? container.scrollTop;
       const onWheel = (event) => {
         if (event.deltaY > 0 && Math.abs(event.deltaY) > Math.abs(event.deltaX)) {
-          setIntent(container);
+          setIntent(container, lastObservedTop());
         }
       };
       const onTouchStart = (event) => {
@@ -1244,19 +1253,22 @@ function useScrollPagination({
         const touch = event.touches.item(0);
         const startY = Number(container.dataset.matrxPaginationTouchY);
         if (touch && Number.isFinite(startY) && startY - touch.clientY > 0) {
-          setIntent(container);
+          setIntent(container, lastObservedTop());
         }
       };
       const onTouchEnd = () => {
         delete container.dataset.matrxPaginationTouchY;
       };
       const onKeyDown = (event) => {
-        if (isDownwardKeyboardInput(event)) setIntent(container);
+        if (isDownwardKeyboardInput(event)) setIntent(container, lastObservedTop());
       };
       const onPointerDown = (event) => {
-        if (isNativeScrollbarPointer(event, container)) setIntent(container);
+        if (isNativeScrollbarPointer(event, container)) setIntent(container, lastObservedTop());
+      };
+      const onScroll = () => {
+        handleScroll(container);
+        observedTopRef.current.set(container, container.scrollTop);
       };
-      const onScroll = () => handleScroll(container);
       container.addEventListener("wheel", onWheel, { passive: true });
       container.addEventListener("touchstart", onTouchStart, { passive: true });
       container.addEventListener("touchmove", onTouchMove, { passive: true });
@@ -5439,6 +5451,16 @@ function MatrxDataTableCore({
   ]);
   const scrollRef = useRef4(null);
   const cardsScrollRef = useRef4(null);
+  const previousAppendKeyForScrollReset = useRef4(appendQueryKey);
+  useLayoutEffect(() => {
+    const previous = previousAppendKeyForScrollReset.current;
+    previousAppendKeyForScrollReset.current = appendQueryKey;
+    if (previous === null || appendQueryKey === null || previous === appendQueryKey) {
+      return;
+    }
+    if (scrollRef.current) scrollRef.current.scrollTop = 0;
+    if (cardsScrollRef.current) cardsScrollRef.current.scrollTop = 0;
+  }, [appendQueryKey]);
   const scrollPagination = useScrollPagination({
     containers: [scrollRef, cardsScrollRef],
     queryKey: appendQuery?.pagination.queryKey ?? "",