@vx-oss/heroui-v2-use-data-scroll-overflow 2.2.14-alpha.0

package/LICENSE

@@ -0,0 +1,32 @@
+SPDX-License-Identifier: MIT
+
+The MIT License (MIT)
+
+Parameters
+
+Creator / Maintainer    : Vezham Technologies Private Limited
+Original Author         : NextUI Inc
+Licensor                : Vezham Technologies Private Limited
+
+Copyright © 2025, Vezham Technologies Private Limited. All rights reserved.
+Copyright (c) 2020, NextUI Inc.
+
+---
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,24 @@
+# @vx-oss/heroui-v2-use-data-scroll-overflow
+
+A Quick description of the component
+
+> This is an internal utility, not intended for public usage.
+
+## Installation
+
+```sh
+yarn add @vx-oss/heroui-v2-use-data-scroll-overflow
+# or
+npm i @vx-oss/heroui-v2-use-data-scroll-overflow
+```
+
+## Contribution
+
+Yes please! See the
+[contributing guidelines](https://github.com/heroui-inc/heroui/blob/master/CONTRIBUTING.md)
+for details.
+
+## License
+
+This project is licensed under the terms of the
+[MIT license](https://github.com/heroui-inc/heroui/blob/master/LICENSE).

package/dist/index.d.mts

@@ -0,0 +1,50 @@
+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 {
+    /**
+     * The reference to the DOM element on which we're checking overflow.
+     */
+    domRef?: React.RefObject<HTMLElement>;
+    /**
+     * Determines the direction of overflow to check.
+     * - "horizontal" will check for overflow on the x-axis.
+     * - "vertical" will check for overflow on the y-axis.
+     * - "both" (default) will check for overflow on both axes.
+     *
+     * @default "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.
+     * @default true
+     */
+    isEnabled?: boolean;
+    /**
+     * Defines a buffer or margin within which we won't treat the scroll as reaching the edge.
+     *
+     * @default 0 - meaning the check will behave exactly at the edge.
+     */
+    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;
+}
+declare function useDataScrollOverflow(props?: UseDataScrollOverflowProps): void;
+type UseDataScrollOverflowReturn = ReturnType<typeof useDataScrollOverflow>;
+
+export { type ScrollOverflowCheck, type ScrollOverflowEdgeCheck, type ScrollOverflowOrientation, type ScrollOverflowVisibility, type UseDataScrollOverflowProps, type UseDataScrollOverflowReturn, useDataScrollOverflow };

package/dist/index.d.ts

@@ -0,0 +1,50 @@
+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 {
+    /**
+     * The reference to the DOM element on which we're checking overflow.
+     */
+    domRef?: React.RefObject<HTMLElement>;
+    /**
+     * Determines the direction of overflow to check.
+     * - "horizontal" will check for overflow on the x-axis.
+     * - "vertical" will check for overflow on the y-axis.
+     * - "both" (default) will check for overflow on both axes.
+     *
+     * @default "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.
+     * @default true
+     */
+    isEnabled?: boolean;
+    /**
+     * Defines a buffer or margin within which we won't treat the scroll as reaching the edge.
+     *
+     * @default 0 - meaning the check will behave exactly at the edge.
+     */
+    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;
+}
+declare function useDataScrollOverflow(props?: UseDataScrollOverflowProps): void;
+type UseDataScrollOverflowReturn = ReturnType<typeof useDataScrollOverflow>;
+
+export { type ScrollOverflowCheck, type ScrollOverflowEdgeCheck, type ScrollOverflowOrientation, type ScrollOverflowVisibility, type UseDataScrollOverflowProps, type UseDataScrollOverflowReturn, useDataScrollOverflow };

package/dist/index.js

@@ -0,0 +1,108 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  useDataScrollOverflow: () => useDataScrollOverflow
+});
+module.exports = __toCommonJS(index_exports);
+var import_heroui_v2_shared_utils = require("@vx-oss/heroui-v2-shared-utils");
+var import_react = require("react");
+function useDataScrollOverflow(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;
+    if (!el || !isEnabled) return;
+    const setAttributes = (direction, hasBefore, hasAfter, prefix, suffix) => {
+      if (visibility === "auto") {
+        const both = `${prefix}${(0, import_heroui_v2_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[`${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;
+        }
+      }
+    };
+    const checkOverflow = () => {
+      var _a, _b;
+      const directions = [
+        { type: "vertical", prefix: "top", suffix: "bottom" },
+        { type: "horizontal", prefix: "left", suffix: "right" }
+      ];
+      const listbox = el.querySelector('ul[data-slot="list"]');
+      const scrollHeight = +((_a = listbox == null ? void 0 : listbox.getAttribute("data-virtual-scroll-height")) != null ? _a : el.scrollHeight);
+      const scrollTop = +((_b = listbox == null ? void 0 : listbox.getAttribute("data-virtual-scroll-top")) != null ? _b : el.scrollTop);
+      for (const { type, prefix, suffix } of directions) {
+        if (overflowCheck === type || overflowCheck === "both") {
+          const hasBefore = type === "vertical" ? scrollTop > offset : el.scrollLeft > offset;
+          const hasAfter = type === "vertical" ? scrollTop + el.clientHeight + offset < scrollHeight : el.scrollLeft + el.clientWidth + offset < el.scrollWidth;
+          setAttributes(type, hasBefore, hasAfter, prefix, suffix);
+        }
+      }
+    };
+    const clearOverflow = () => {
+      ["top", "bottom", "top-bottom", "left", "right", "left-right"].forEach((attr) => {
+        el.removeAttribute(`data-${attr}-scroll`);
+      });
+    };
+    checkOverflow();
+    el.addEventListener("scroll", checkOverflow, true);
+    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.removeEventListener("scroll", checkOverflow, true);
+      clearOverflow();
+    };
+  }, [...updateDeps, isEnabled, visibility, overflowCheck, onVisibilityChange, domRef]);
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  useDataScrollOverflow
+});

package/dist/index.mjs

@@ -0,0 +1,83 @@
+// src/index.ts
+import { capitalize } from "@vx-oss/heroui-v2-shared-utils";
+import { useEffect, useRef } from "react";
+function useDataScrollOverflow(props = {}) {
+  const {
+    domRef,
+    isEnabled = true,
+    overflowCheck = "vertical",
+    visibility = "auto",
+    offset = 0,
+    onVisibilityChange,
+    updateDeps = []
+  } = props;
+  const visibleRef = useRef(visibility);
+  useEffect(() => {
+    const el = domRef == null ? void 0 : domRef.current;
+    if (!el || !isEnabled) return;
+    const setAttributes = (direction, hasBefore, hasAfter, prefix, suffix) => {
+      if (visibility === "auto") {
+        const both = `${prefix}${capitalize(suffix)}Scroll`;
+        if (hasBefore && hasAfter) {
+          el.dataset[both] = "true";
+          el.removeAttribute(`data-${prefix}-scroll`);
+          el.removeAttribute(`data-${suffix}-scroll`);
+        } else {
+          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;
+        }
+      }
+    };
+    const checkOverflow = () => {
+      var _a, _b;
+      const directions = [
+        { type: "vertical", prefix: "top", suffix: "bottom" },
+        { type: "horizontal", prefix: "left", suffix: "right" }
+      ];
+      const listbox = el.querySelector('ul[data-slot="list"]');
+      const scrollHeight = +((_a = listbox == null ? void 0 : listbox.getAttribute("data-virtual-scroll-height")) != null ? _a : el.scrollHeight);
+      const scrollTop = +((_b = listbox == null ? void 0 : listbox.getAttribute("data-virtual-scroll-top")) != null ? _b : el.scrollTop);
+      for (const { type, prefix, suffix } of directions) {
+        if (overflowCheck === type || overflowCheck === "both") {
+          const hasBefore = type === "vertical" ? scrollTop > offset : el.scrollLeft > offset;
+          const hasAfter = type === "vertical" ? scrollTop + el.clientHeight + offset < scrollHeight : el.scrollLeft + el.clientWidth + offset < el.scrollWidth;
+          setAttributes(type, hasBefore, hasAfter, prefix, suffix);
+        }
+      }
+    };
+    const clearOverflow = () => {
+      ["top", "bottom", "top-bottom", "left", "right", "left-right"].forEach((attr) => {
+        el.removeAttribute(`data-${attr}-scroll`);
+      });
+    };
+    checkOverflow();
+    el.addEventListener("scroll", checkOverflow, true);
+    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.removeEventListener("scroll", checkOverflow, true);
+      clearOverflow();
+    };
+  }, [...updateDeps, isEnabled, visibility, overflowCheck, onVisibilityChange, domRef]);
+}
+export {
+  useDataScrollOverflow
+};

package/package.json

@@ -0,0 +1,59 @@
+{
+  "name": "@vx-oss/heroui-v2-use-data-scroll-overflow",
+  "version": "2.2.14-alpha.0",
+  "description": "A hook to add data attributes when the element has top or bottom scroll.",
+  "keywords": [
+    "use-data-scroll-overflow"
+  ],
+  "author": "Vx OSS Devs <oss-developers@vezham.com>",
+  "homepage": "https://vezham.com",
+  "license": "MIT",
+  "main": "dist/index.js",
+  "sideEffects": false,
+  "files": [
+    "dist"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/vezham/heroui-v2.git",
+    "directory": "packages/hooks/use-data-scroll-overflow"
+  },
+  "bugs": {
+    "url": "https://github.com/vezham/heroui-v2/issues"
+  },
+  "dependencies": {
+    "@vx-oss/heroui-v2-shared-utils": "2.1.13-alpha.0"
+  },
+  "peerDependencies": {
+    "react": ">=18 || >=19.0.0-rc.0"
+  },
+  "clean-package": "../../../clean-package.config.json",
+  "tsup": {
+    "clean": true,
+    "target": "es2019",
+    "format": [
+      "cjs",
+      "esm"
+    ]
+  },
+  "module": "dist/index.mjs",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.js"
+    },
+    "./package.json": "./package.json"
+  },
+  "scripts": {
+    "build": "tsup src --dts",
+    "build:fast": "tsup src",
+    "dev": "pnpm build:fast --watch",
+    "clean": "rimraf dist .turbo",
+    "typecheck": "tsc --noEmit"
+  }
+}