@lumx/react 4.11.0-next.3 → 4.11.0-next.5

package/package.json

@@ -7,8 +7,8 @@
     },
     "dependencies": {
         "@floating-ui/react-dom": "^2.1.7",
-        "@lumx/core": "^4.11.0-next.3",
-        "@lumx/icons": "^4.11.0-next.3",
+        "@lumx/core": "^4.11.0-next.5",
+        "@lumx/icons": "^4.11.0-next.5",
         "body-scroll-lock": "^3.1.5"
     },
     "devDependencies": {
@@ -100,6 +100,6 @@
         "build:storybook": "storybook build"
     },
     "sideEffects": false,
-    "version": "4.11.0-next.3",
+    "version": "4.11.0-next.5",
     "stableVersion": "4.10.0"
 }

package/utils/index.d.ts

@@ -32,18 +32,15 @@ interface ClickAwayProviderProps extends ClickAwayParameters {
  */
 declare const ClickAwayProvider: React.FC<ClickAwayProviderProps>;
 
-type EventCallback = (evt?: Event) => void;
 interface InfiniteScrollProps {
-    callback: EventCallback;
+    /** Callback when infinite scroll component is in view */
+    callback: (evt?: Event) => void;
+    /** Customize intersection observer option */
     options?: IntersectionObserverInit;
 }
+
 /**
  * Handles basic callback pattern by using intersection observers.
- *
- * @param  {Function} callback The callback to execute once the element is in the viewport or is intersecting
- *                             with its root element.
- * @param  {Object}   options  The set of options we want to set to the intersection observer.
- * @return {Element}  The Infinite scroll element.
  */
 declare const InfiniteScroll: React__default.FC<InfiniteScrollProps>;
 

package/utils/index.js

@@ -10,15 +10,52 @@ import isNil from 'lodash/isNil.js';
 import groupBy from 'lodash/groupBy.js';
 import uniqueId from 'lodash/uniqueId.js';
 
-// The error margin in px we want to have for triggering infinite scroll
-const CLASSNAME = 'lumx-infinite-scroll-anchor';
 /**
- * Handles basic callback pattern by using intersection observers.
+ * Sets up an IntersectionObserver on the given element.
+ * Calls `callback` when at least one observed entry is intersecting.
+ * Returns a cleanup function that unobserves the element.
+ */
+function setupInfiniteScrollObserver(element, callback, options) {
+  const observer = new IntersectionObserver((entries = []) => {
+    const hasIntersection = entries.some(entry => entry.isIntersecting);
+    if (!hasIntersection) {
+      return;
+    }
+    callback();
+  }, options);
+  observer.observe(element);
+  return () => {
+    observer.unobserve(element);
+  };
+}
+
+const INFINITE_SCROLL_CLASSNAME = 'lumx-infinite-scroll-anchor';
+/**
+ * Framework-agnostic InfiniteScroll sentinel component.
+ *
+ * Renders a tiny invisible div that triggers a callback when it enters the viewport
+ * (or intersects its root element) via IntersectionObserver.
  *
- * @param  {Function} callback The callback to execute once the element is in the viewport or is intersecting
- *                             with its root element.
- * @param  {Object}   options  The set of options we want to set to the intersection observer.
- * @return {Element}  The Infinite scroll element.
+ * The div has a small height (4px) to avoid issues when a browser zoom is applied,
+ * where a zero-height element might not trigger IntersectionObserver reliably.
+ */
+const InfiniteScroll$1 = ({
+  ref
+}) =>
+/*#__PURE__*/
+// In order to avoid issues when a zoom is added to the browser, we add a small height to the div so that
+// the intersection has a higher chance of working correctly.
+jsx("div", {
+  ref: ref,
+  "aria-hidden": "true",
+  className: INFINITE_SCROLL_CLASSNAME,
+  style: {
+    height: '4px'
+  }
+});
+
+/**
+ * Handles basic callback pattern by using intersection observers.
  */
 const InfiniteScroll = ({
   callback,
@@ -26,40 +63,17 @@ const InfiniteScroll = ({
 }) => {
   const elementRef = React__default.useRef(null);
   useEffect(() => {
-    const observer = new IntersectionObserver((entries = []) => {
-      const hasIntersection = entries.some(entry => entry.isIntersecting);
-
-      // Make sure at least one target element has intersected with the root element.
-      if (!hasIntersection) {
-        return;
-      }
-      callback();
-    }, options);
-    const currentRef = elementRef.current;
-    if (elementRef && elementRef.current) {
-      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-      // @ts-ignore
-      observer.observe(elementRef.current);
+    const {
+      current: element
+    } = elementRef;
+    if (!element) {
+      return undefined;
     }
-    return () => {
-      if (currentRef) {
-        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-        // @ts-ignore
-        observer.unobserve(currentRef);
-      }
-    };
+    return setupInfiniteScrollObserver(element, callback, options);
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [elementRef.current, callback]);
-
-  // In order to avoid issues when a zoom is added to the browser, we add a small height to the div so that
-  // the intersection has a higher chance of working correctly.
-  return /*#__PURE__*/jsx("div", {
-    ref: elementRef,
-    "aria-hidden": "true",
-    className: CLASSNAME,
-    style: {
-      height: '4px'
-    }
+  return InfiniteScroll$1({
+    ref: elementRef
   });
 };