@nextui-org/use-data-scroll-overflow - npm Package Compare versions

Comparing version 2.1.1 to 2.1.2

dist/index.d.ts

@@ -0,1 +1,5 @@
+type ScrollOverflowVisibility = "auto" | "top" | "bottom" | "left" | "right" | "both" | "none";
+type ScrollOverflowEdgeCheck = "all" | "top" | "bottom" | "left" | "right";
+type ScrollOverflowOrientation = "horizontal" | "vertical";
+type ScrollOverflowCheck = ScrollOverflowOrientation | "both";
 interface UseDataScrollOverflowProps {
@@ -14,4 +18,10 @@ /**
      */
-    overflowCheck?: "horizontal" | "vertical" | "both";
+    overflowCheck?: ScrollOverflowCheck;
     /**
+     * Controlled visible state. Passing "auto" will make the shadow visible only when the scroll reaches the edge.
+     * use "left" / "right" for horizontal scroll and "top" / "bottom" for vertical scroll.
+     * @default "auto"
+     */
+    visibility?: ScrollOverflowVisibility;
+    /**
      * Enables or disables the overflow checking mechanism.
@@ -27,2 +37,12 @@ * @default true
     offset?: number;
+    /**
+     * List of dependencies to update the overflow check.
+     */
+    updateDeps?: any[];
+    /**
+     * Callback to be called when the overflow state changes.
+     *
+     * @param visibility ScrollOverflowVisibility
+     */
+    onVisibilityChange?: (overflow: ScrollOverflowVisibility) => void;
 }
@@ -32,2 +52,2 @@ declare function useDataScrollOverflow(props?: UseDataScrollOverflowProps): void;
 
-export { UseDataScrollOverflowProps, UseDataScrollOverflowReturn, useDataScrollOverflow };
+export { ScrollOverflowCheck, ScrollOverflowEdgeCheck, ScrollOverflowOrientation, ScrollOverflowVisibility, UseDataScrollOverflowProps, UseDataScrollOverflowReturn, useDataScrollOverflow };

dist/index.js

@@ -26,34 +26,49 @@ "use strict";
 module.exports = __toCommonJS(src_exports);
+var import_shared_utils = require("@nextui-org/shared-utils");
 var import_react = require("react");
 function useDataScrollOverflow(props = {}) {
-  const { domRef, isEnabled = true, overflowCheck = "vertical", offset = 0 } = props;
+  const {
+    domRef,
+    isEnabled = true,
+    overflowCheck = "vertical",
+    visibility = "auto",
+    offset = 0,
+    onVisibilityChange,
+    updateDeps = []
+  } = props;
+  const visibleRef = (0, import_react.useRef)(visibility);
   (0, import_react.useEffect)(() => {
     const el = domRef == null ? void 0 : domRef.current;
-    const checkOverflow = () => {
-      if (!el)
-        return;
-      if (overflowCheck === "vertical" || overflowCheck === "both") {
-        const hasElementsAbove = el.scrollTop > offset;
-        const hasElementsBelow = el.scrollTop + el.clientHeight + offset < el.scrollHeight;
-        if (hasElementsAbove && hasElementsBelow) {
-          el.dataset.topBottomScroll = "true";
-          el.removeAttribute("data-top-scroll");
-          el.removeAttribute("data-bottom-scroll");
+    if (!el || !isEnabled)
+      return;
+    const setAttributes = (direction, hasBefore, hasAfter, prefix, suffix) => {
+      if (visibility === "auto") {
+        const both = `${prefix}${(0, import_shared_utils.capitalize)(suffix)}Scroll`;
+        if (hasBefore && hasAfter) {
+          el.dataset[both] = "true";
+          el.removeAttribute(`data-${prefix}-scroll`);
+          el.removeAttribute(`data-${suffix}-scroll`);
         } else {
-          el.dataset.topScroll = hasElementsAbove.toString();
-          el.dataset.bottomScroll = hasElementsBelow.toString();
-          el.removeAttribute("data-top-bottom-scroll");
+          el.dataset[`${prefix}Scroll`] = hasBefore.toString();
+          el.dataset[`${suffix}Scroll`] = hasAfter.toString();
+          el.removeAttribute(`data-${prefix}-${suffix}-scroll`);
         }
+      } else {
+        const next = hasBefore && hasAfter ? "both" : hasBefore ? prefix : hasAfter ? suffix : "none";
+        if (next !== visibleRef.current) {
+          onVisibilityChange == null ? void 0 : onVisibilityChange(next);
+          visibleRef.current = next;
+        }
       }
-      if (overflowCheck === "horizontal" || overflowCheck === "both") {
-        const hasElementsLeft = el.scrollLeft > offset;
-        const hasElementsRight = el.scrollLeft + el.clientWidth + offset < el.scrollWidth;
-        if (hasElementsLeft && hasElementsRight) {
-          el.dataset.leftRightScroll = "true";
-          el.removeAttribute("data-left-scroll");
-          el.removeAttribute("data-right-scroll");
-        } else {
-          el.dataset.leftScroll = hasElementsLeft.toString();
-          el.dataset.rightScroll = hasElementsRight.toString();
-          el.removeAttribute("data-left-right-scroll");
+    };
+    const checkOverflow = () => {
+      const directions = [
+        { type: "vertical", prefix: "top", suffix: "bottom" },
+        { type: "horizontal", prefix: "left", suffix: "right" }
+      ];
+      for (const { type, prefix, suffix } of directions) {
+        if (overflowCheck === type || overflowCheck === "both") {
+          const hasBefore = type === "vertical" ? el.scrollTop > offset : el.scrollLeft > offset;
+          const hasAfter = type === "vertical" ? el.scrollTop + el.clientHeight + offset < el.scrollHeight : el.scrollLeft + el.clientWidth + offset < el.scrollWidth;
+          setAttributes(type, hasBefore, hasAfter, prefix, suffix);
         }
@@ -63,22 +78,26 @@ }
     const clearOverflow = () => {
-      if (!el)
-        return;
-      el.removeAttribute("data-top-scroll");
-      el.removeAttribute("data-bottom-scroll");
-      el.removeAttribute("data-top-bottom-scroll");
-      el.removeAttribute("data-left-scroll");
-      el.removeAttribute("data-right-scroll");
-      el.removeAttribute("data-left-right-scroll");
+      ["top", "bottom", "topBottom", "left", "right", "leftRight"].forEach((attr) => {
+        el.removeAttribute(`data-${attr}-scroll`);
+      });
     };
-    if (isEnabled) {
-      checkOverflow();
-      el == null ? void 0 : el.addEventListener("scroll", checkOverflow);
-    } else {
+    checkOverflow();
+    el.addEventListener("scroll", checkOverflow);
+    if (visibility !== "auto") {
       clearOverflow();
+      if (visibility === "both") {
+        el.dataset.topBottomScroll = String(overflowCheck === "vertical");
+        el.dataset.leftRightScroll = String(overflowCheck === "horizontal");
+      } else {
+        el.dataset.topBottomScroll = "false";
+        el.dataset.leftRightScroll = "false";
+        ["top", "bottom", "left", "right"].forEach((attr) => {
+          el.dataset[`${attr}Scroll`] = String(visibility === attr);
+        });
+      }
     }
     return () => {
-      el == null ? void 0 : el.removeEventListener("scroll", checkOverflow);
+      el.removeEventListener("scroll", checkOverflow);
       clearOverflow();
     };
-  }, [isEnabled, overflowCheck, domRef]);
+  }, [...updateDeps, isEnabled, visibility, overflowCheck, onVisibilityChange, domRef]);
 }
@@ -85,0 +104,0 @@ // Annotate the CommonJS export names for ESM import in node:

package.json

 {
   "name": "@nextui-org/use-data-scroll-overflow",
-  "version": "2.1.1",
+  "version": "2.1.2",
   "description": "A hook to add data attributes when the element has top or bottom scroll.",
@@ -27,2 +27,5 @@ "keywords": [
   },
+  "dependencies": {
+    "@nextui-org/shared-utils": "2.0.4"
+  },
   "peerDependencies": {
@@ -29,0 +32,0 @@ "react": ">=18"

No alert changes

Improved metrics

Total package byte prevSize

12258

increased by25.81%

Lines of code

233

increased by33.14%

Worsened metrics

Dependency count

2

increased by100%

Dependency changes

• + Added@nextui-org/shared-utils@2.0.4

• + Added@nextui-org/shared-utils@2.0.4(transitive)