virtua 0.47.2 → 0.48.0

package/lib/solid/index.jsx

@@ -212,24 +212,18 @@ const updateCacheLength = (cache, length, isShift) => {
  * @internal
  */
 const isBrowser = typeof window !== "undefined";
-const getDocumentElement = () => document.documentElement;
 /**
  * @internal
  */
-const getCurrentDocument = (node) => node.ownerDocument;
+const getDocumentElement = (doc) => doc.documentElement;
 /**
  * @internal
  */
-const getCurrentWindow = (doc) => doc.defaultView;
+const getCurrentDocument = (node) => node.ownerDocument;
 /**
  * @internal
  */
-const isRTLDocument = /*#__PURE__*/ once(() => {
-    // TODO support SSR in rtl
-    return isBrowser
-        ? getComputedStyle(getDocumentElement()).direction === "rtl"
-        : false;
-});
+const getCurrentWindow = (doc) => doc.defaultView;
 /**
  * Currently, all browsers on iOS/iPadOS are WebKit, including WebView.
  * @internal
@@ -248,7 +242,7 @@ const isIOSWebKit = /*#__PURE__*/ once(() => {
  * @internal
  */
 const isSmoothScrollSupported = /*#__PURE__*/ once(() => {
-    return "scrollBehavior" in getDocumentElement().style;
+    return "scrollBehavior" in getDocumentElement(document).style;
 });
 
 const MAX_INT_32 = 0x7fffffff;
@@ -316,8 +310,12 @@ const createVirtualStore = (elementsCount, itemSize = 40, ssrCount = 0, cacheSna
         return computeRange(cache, startOffset, endOffset, _prevRange[0]);
     };
     const getTotalSize = () => getItemOffset(cache, cache._length);
-    const getItemOffset$1 = (index) => {
-        return getItemOffset(cache, index) - pendingJump;
+    const getItemOffset$1 = (index, fromEnd) => {
+        const offset = getItemOffset(cache, index) - pendingJump;
+        if (fromEnd) {
+            return getTotalSize() - offset - getItemSize$1(index);
+        }
+        return offset;
     };
     const getItemSize$1 = (index) => {
         return getItemSize(cache, index);
@@ -598,20 +596,18 @@ const debounce = (fn, ms) => {
     return debouncedFn;
 };
 /**
- * scrollLeft is negative value in rtl direction.
+ * scrollTop/scrollLeft can be negative value under certain styles.
+ * - direction: rtl https://github.com/othree/jquery.rtl-scroll-type
+ * - writing-mode   https://people.igalia.com/fwang/scrollable-elements-in-non-default-writing-modes/
+ * - flex-direction: column-reverse/row-reverse
  *
- * left  right
- * 0     100    spec compliant (ltr)
- * -100  0      spec compliant (rtl)
- * https://github.com/othree/jquery.rtl-scroll-type
+ * top/left bottom/right
+ * 0        100          spec compliant bottom/right overflow, or possibly top/left overflow in Chrome earlier than v85
+ * -100     0            spec compliant top/left overflow
+ * https://drafts.csswg.org/cssom-view/#scroll-an-element
  */
-const normalizeOffset = (offset, isHorizontal) => {
-    if (isHorizontal && isRTLDocument()) {
-        return -offset;
-    }
-    else {
-        return offset;
-    }
+const normalizeScrollOffset = (offset, isNegative) => {
+    return isNegative ? -offset : offset;
 };
 const createScrollObserver = (store, viewport, isHorizontal, getScrollOffset, updateScrollOffset, getStartOffset) => {
     const now = Date.now;
@@ -795,10 +791,11 @@ const createScroller = (store, isHorizontal) => {
     let viewportElement;
     let scrollObserver;
     let initialized = createPromise();
+    let isNegative = false;
     const scrollOffsetKey = isHorizontal ? "scrollLeft" : "scrollTop";
     const overflowKey = isHorizontal ? "overflowX" : "overflowY";
     const [scheduleScroll, cancelScroll] = createScrollScheduler(store, () => initialized[0], (offset, smooth) => {
-        offset = normalizeOffset(offset, isHorizontal);
+        offset = normalizeScrollOffset(offset, isNegative);
         if (smooth) {
             viewportElement.scrollTo({
                 [isHorizontal ? "left" : "top"]: offset,
@@ -812,7 +809,23 @@ const createScroller = (store, isHorizontal) => {
     return {
         $observe(viewport) {
             viewportElement = viewport;
-            scrollObserver = createScrollObserver(store, viewport, isHorizontal, () => normalizeOffset(viewport[scrollOffsetKey], isHorizontal), (jump, shift, isMomentumScrolling) => {
+            const clean = store.$subscribe(UPDATE_SIZE_EVENT, () => {
+                const viewportSize = store.$getViewportSize();
+                if (viewportSize) {
+                    const prev = viewport[scrollOffsetKey];
+                    // Detect overflowed direction after the initial viewport measurement
+                    const dummy = getCurrentDocument(viewport).createElement("div");
+                    dummy.style.cssText = `visibility:hidden;min-${isHorizontal ? "width" : "height"}:${viewportSize + 1}px`;
+                    viewport.appendChild(dummy);
+                    viewport[scrollOffsetKey] = 1;
+                    // It can be positive under some specific situations even if negative mode, so we use `<` for now.
+                    isNegative = viewport[scrollOffsetKey] < 1;
+                    viewport.removeChild(dummy);
+                    viewport[scrollOffsetKey] = prev;
+                    clean();
+                }
+            });
+            scrollObserver = createScrollObserver(store, viewport, isHorizontal, () => normalizeScrollOffset(viewport[scrollOffsetKey], isNegative), (jump, shift, isMomentumScrolling) => {
                 // If we update scroll position while touching on iOS, the position will be reverted.
                 // However iOS WebKit fires touch events only once at the beginning of momentum scrolling.
                 // That means we have no reliable way to confirm still touched or not if user touches more than once during momentum scrolling...
@@ -827,7 +840,7 @@ const createScroller = (store, isHorizontal) => {
                 }
                 // Use absolute position not to exceed scrollable bounds
                 // https://github.com/inokawa/virtua/discussions/475
-                viewport[scrollOffsetKey] = normalizeOffset(store.$getScrollOffset() + jump, isHorizontal);
+                viewport[scrollOffsetKey] = normalizeScrollOffset(store.$getScrollOffset() + jump, isNegative);
                 if (shift) {
                     // https://github.com/inokawa/virtua/issues/357
                     cancelScroll();
@@ -841,6 +854,7 @@ const createScroller = (store, isHorizontal) => {
             // https://github.com/inokawa/virtua/pull/765
             initialized = createPromise();
         },
+        $isNegative: () => isNegative,
         $scrollTo(offset) {
             scheduleScroll(() => offset);
         },
@@ -888,9 +902,10 @@ const createWindowScroller = (store, isHorizontal) => {
     let containerElement;
     let scrollObserver;
     let initialized = createPromise();
+    let isNegative = false;
     const scrollToKey = isHorizontal ? "left" : "top";
     const [scheduleScroll] = createScrollScheduler(store, () => initialized[0], (offset, smooth) => {
-        offset = normalizeOffset(offset, isHorizontal);
+        offset = normalizeScrollOffset(offset, isNegative);
         const window = getCurrentWindow(getCurrentDocument(containerElement));
         if (smooth) {
             window.scroll({
@@ -908,7 +923,7 @@ const createWindowScroller = (store, isHorizontal) => {
         // TODO calc offset only when it changes (maybe impossible)
         const offsetKey = isHorizontal ? "offsetLeft" : "offsetTop";
         const offsetSum = offset +
-            (isHorizontal && isRTLDocument()
+            (isHorizontal && isNegative
                 ? window.innerWidth - node[offsetKey] - node.offsetWidth
                 : node[offsetKey]);
         const parent = node.offsetParent;
@@ -923,18 +938,23 @@ const createWindowScroller = (store, isHorizontal) => {
             const scrollOffsetKey = isHorizontal ? "scrollX" : "scrollY";
             const document = getCurrentDocument(container);
             const window = getCurrentWindow(document);
-            scrollObserver = createScrollObserver(store, window, isHorizontal, () => normalizeOffset(window[scrollOffsetKey], isHorizontal), (jump, shift) => {
+            if (isHorizontal) {
+                // Detect RTL document
+                isNegative =
+                    getComputedStyle(getDocumentElement(document)).direction === "rtl";
+            }
+            scrollObserver = createScrollObserver(store, window, isHorizontal, () => normalizeScrollOffset(window[scrollOffsetKey], isNegative), (jump, shift) => {
                 // TODO support case two window scrollers exist in the same view
                 if (shift) {
                     // Use absolute position not to exceed scrollable bounds
                     window.scroll({
-                        [scrollToKey]: normalizeOffset(store.$getScrollOffset() + jump, isHorizontal),
+                        [scrollToKey]: normalizeScrollOffset(store.$getScrollOffset() + jump, isNegative),
                     });
                 }
                 else {
                     // Use window.scrollBy here, which causes less layout shift for some reason.
                     window.scrollBy({
-                        [scrollToKey]: normalizeOffset(jump, isHorizontal),
+                        [scrollToKey]: normalizeScrollOffset(jump, isNegative),
                     });
                 }
             }, () => calcOffsetToViewport(container, document.body, window, isHorizontal));
@@ -947,6 +967,7 @@ const createWindowScroller = (store, isHorizontal) => {
             // https://github.com/inokawa/virtua/pull/765
             initialized = createPromise();
         },
+        $isNegative: () => isNegative,
         $fixScrollJump: () => {
             scrollObserver && scrollObserver._fixScrollJump();
         },
@@ -970,7 +991,7 @@ const createWindowScroller = (store, isHorizontal) => {
             }
             const document = getCurrentDocument(containerElement);
             const window = getCurrentWindow(document);
-            const html = document.documentElement;
+            const html = getDocumentElement(document);
             const getScrollbarSize = () => store.$getViewportSize() -
                 (isHorizontal ? html.clientWidth : html.clientHeight);
             scheduleScroll(() => {
@@ -1006,6 +1027,7 @@ const createGridScroller = (rowStore, colStore) => {
             rowScroller.$dispose();
             colScroller.$dispose();
         },
+        $isNegative: colScroller.$isNegative,
         $scrollTo(row, col) {
             if (row != null) {
                 rowScroller.$scrollTo(row);
@@ -1266,9 +1288,6 @@ const createGridResizer = (rowStore, colStore) => {
     };
 };
 
-/**
- * @jsxImportSource solid-js
- */
 /**
  * @internal
  */
@@ -1288,7 +1307,7 @@ const ListItem = (props) => {
             position: "absolute",
             [isHorizontal ? "height" : "width"]: "100%",
             [isHorizontal ? "top" : "left"]: "0px",
-            [isHorizontal ? (isRTLDocument() ? "right" : "left") : "top"]: props._offset + "px",
+            [isHorizontal ? "left" : "top"]: props._offset + "px",
             visibility: props._hide ? "hidden" : undefined,
         };
         if (isHorizontal) {
@@ -1343,6 +1362,7 @@ const Virtualizer = (props) => {
     });
     const isScrolling = createMemo(() => stateVersion() && store.$isScrolling());
     const totalSize = createMemo(() => stateVersion() && store.$getTotalSize());
+    const isNegative = createMemo(() => stateVersion() && scroller.$isNegative());
     onMount(() => {
         if (props.ref) {
             props.ref({
@@ -1393,6 +1413,7 @@ const Virtualizer = (props) => {
                 store.$update(ACTION_ITEMS_LENGTH_CHANGE, [count, props.shift]);
             }
         });
+        const pushKey = !horizontal && isNegative() ? "unshift" : "push";
         const items = [];
         const indexes = [];
         if (props.keepMounted) {
@@ -1401,14 +1422,14 @@ const Virtualizer = (props) => {
                 mounted.add(i);
             }
             sort([...mounted]).forEach((index) => {
-                items.push(props.data[index]);
-                indexes.push(index);
+                items[pushKey](props.data[index]);
+                indexes[pushKey](index);
             });
         }
         else {
             for (let [i, j] = range(); i <= j; i++) {
-                items.push(props.data[i]);
-                indexes.push(i);
+                items[pushKey](props.data[i]);
+                indexes[pushKey](i);
             }
         }
         return { _items: items, _indexes: indexes };
@@ -1416,7 +1437,7 @@ const Virtualizer = (props) => {
     const renderItem = (data, index) => {
         const offset = createMemo(() => {
             stateVersion();
-            return store.$getItemOffset(index());
+            return store.$getItemOffset(index(), isNegative());
         });
         const hide = createMemo(() => {
             stateVersion();
@@ -1517,6 +1538,7 @@ const WindowVirtualizer = (props) => {
     });
     const isScrolling = createMemo(() => stateVersion() && store.$isScrolling());
     const totalSize = createMemo(() => stateVersion() && store.$getTotalSize());
+    const isNegative = createMemo(() => stateVersion() && scroller.$isNegative());
     onMount(() => {
         if (props.ref) {
             props.ref({
@@ -1556,9 +1578,10 @@ const WindowVirtualizer = (props) => {
                 store.$update(ACTION_ITEMS_LENGTH_CHANGE, [count, props.shift]);
             }
         });
+        const pushKey = !horizontal && isNegative() ? "unshift" : "push";
         const items = [];
         for (let [i, j] = range(); i <= j; i++) {
-            items.push(props.data[i]);
+            items[pushKey](props.data[i]);
         }
         return items;
     });
@@ -1576,7 +1599,7 @@ const WindowVirtualizer = (props) => {
             const itemIndex = createMemo(() => range()[0] + index());
             const offset = createMemo(() => {
                 stateVersion();
-                return store.$getItemOffset(itemIndex());
+                return store.$getItemOffset(itemIndex(), isNegative());
             });
             const hide = createMemo(() => {
                 stateVersion();