@nebula.js/sn-table 1.4.0 → 1.4.1

package/api-specifications/properties.json

@@ -3,7 +3,7 @@
   "info": {
     "name": "@nebula.js/sn-table:properties",
     "description": "Table generic object definition",
-    "version": "1.4.0",
+    "version": "1.4.1",
     "license": "MIT",
     "stability": "experimental",
     "x-qlik-visibility": "public"

package/core/esm/index.js

@@ -1,5 +1,5 @@
 /*
-* @nebula.js/sn-table v1.4.0
+* @nebula.js/sn-table v1.4.1
 * Copyright (c) 2022 QlikTech International AB
 * Released under the MIT license.
 */
@@ -502,7 +502,7 @@ const properties$1 = {
    * @type {string}
    * @default
    */
-  version: "1.4.0",
+  version: "1.4.1",
 
   /**
    * @extends {qae.HyperCubeDef}
@@ -34586,17 +34586,32 @@ function useDidUpdateEffect(fn, inputs) {
   }, inputs);
 }
 
-const handleScroll = (evt, tableContainerRef) => {
-  evt.stopPropagation();
+const handleHorizontalScroll = (evt, rtl, memoedContainer) => {
+  evt.stopPropagation(); // scrollWidth is the width of an element's content, including content not visible on the screen due to overflow.
+  // offsetWidth is the element's CSS width, including any borders, padding, and vertical scrollbars
+  // scrollLeft is the number of pixels scrolled from its left edge
+
   let {
     scrollLeft
-  } = tableContainerRef.current;
-  const newScrollLeft = scrollLeft + evt.deltaX;
-  const max = tableContainerRef.current.scrollWidth - tableContainerRef.current.offsetWidth;
-
-  if (max > 0 && (newScrollLeft < 0 || newScrollLeft > max)) {
+  } = memoedContainer;
+  const ScrollLeftWidth = scrollLeft + evt.deltaX;
+  const maxScrollableWidth = memoedContainer.scrollWidth - memoedContainer.offsetWidth;
+
+  if (rtl) {
+    // scrollLeft is 0 when the scrollbar is at its rightmost position
+    // (at the start of the scrolled content),
+    // and then increasingly negative as you scroll towards (left) the end of the content .
+    // evt.deltaX increasingly negative as you scroll towards left,
+    // increasingly positive as you scroll towards right
+    const scrollRight = maxScrollableWidth + ScrollLeftWidth;
+
+    if (maxScrollableWidth > 0 && (scrollRight <= 0 || scrollRight > maxScrollableWidth)) {
+      evt.preventDefault();
+      scrollLeft = Math.min(0, Math.min(maxScrollableWidth, scrollRight));
+    }
+  } else if (maxScrollableWidth > 0 && (ScrollLeftWidth < 0 || ScrollLeftWidth > maxScrollableWidth)) {
     evt.preventDefault();
-    scrollLeft = Math.max(0, Math.min(max, newScrollLeft));
+    scrollLeft = Math.max(0, Math.min(maxScrollableWidth, ScrollLeftWidth));
   }
 };
 const handleNavigateTop = ({
@@ -34786,21 +34801,27 @@ function TableWrapper(props) {
   };
 
   useEffect(() => {
-    const memoedContainer = tableContainerRef.current;
     const memoedWrapper = tableWrapperRef.current;
-    if (!memoedContainer || !memoedWrapper) return () => {};
-
-    const scrollCallback = evt => handleScroll(evt, tableContainerRef);
+    if (!memoedWrapper) return () => {};
 
     const focusOutCallback = evt => handleFocusoutEvent(evt, shouldRefocus, keyboard);
 
-    memoedContainer.addEventListener('wheel', scrollCallback);
     memoedWrapper.addEventListener('focusout', focusOutCallback);
     return () => {
-      memoedContainer.removeEventListener('wheel', scrollCallback);
       memoedWrapper.removeEventListener('focusout', focusOutCallback);
     };
   }, []);
+  useEffect(() => {
+    const memoedContainer = tableContainerRef.current;
+    if (!memoedContainer) return () => {};
+
+    const horizontalScrollCallback = evt => handleHorizontalScroll(evt, rtl, memoedContainer);
+
+    memoedContainer.addEventListener('wheel', horizontalScrollCallback);
+    return () => {
+      memoedContainer.removeEventListener('wheel', horizontalScrollCallback);
+    };
+  }, [rtl]);
   useEffect(() => handleNavigateTop({
     tableContainerRef,
     focusedCellCoord,
@@ -35400,7 +35421,7 @@ function muiSetup() {
 
   const theme = createTheme(adaptV4Theme(muiConfig$1));
   const generateClassName = createGenerateClassName({
-    productionPrefix: `${"1.4.0"}`,
+    productionPrefix: `${"1.4.1"}`,
     disableGlobal: true,
     seed: `sn-t-${Date.now()}`
   });