@trackunit/react-components 0.5.0 → 0.5.1

package/index.cjs.js

@@ -13,8 +13,8 @@ var stringTs = require('string-ts');
 var cssClassVarianceUtilities = require('@trackunit/css-class-variance-utilities');
 var reactSlot = require('@radix-ui/react-slot');
 var isEqual = require('lodash/isEqual');
-var reactRouter = require('@tanstack/react-router');
 var usehooksTs = require('usehooks-ts');
+var reactRouter = require('@tanstack/react-router');
 var react = require('@floating-ui/react');
 var omit = require('lodash/omit');
 var tailwindMerge = require('tailwind-merge');
@@ -1309,6 +1309,62 @@ const getWindowSize = () => {
     }
 };
 
+const SCROLL_DEBOUNCE_TIME = 50;
+/**
+ * Hook for getting detecting scroll values.
+ *
+ * @param {useRef} elementRef - Ref hook holding the element that needs to be observed during scrolling
+ * @returns {object} An object containing if the element is scrollable, is at the top, is at the bottom, and its current scroll position.
+ */
+const useScrollDetection = (elementRef) => {
+    const [isScrollable, setIsScrollable] = React.useState(false);
+    const [isAtTop, setIsAtTop] = React.useState(true);
+    const [isAtBottom, setIsAtBottom] = React.useState(false);
+    const [scrollPosition, setScrollPosition] = React.useState({ top: 0, bottom: 0 });
+    const observerRef = React.useRef();
+    const checkScrollable = React.useCallback(() => {
+        const element = elementRef.current;
+        if (!element) {
+            return;
+        }
+        const hasOverflow = element.scrollHeight > element.clientHeight;
+        setIsScrollable(hasOverflow);
+    }, [elementRef]);
+    const checkScrollPosition = React.useCallback(() => {
+        const element = elementRef.current;
+        if (!element) {
+            return;
+        }
+        const { scrollTop, scrollHeight, clientHeight } = element;
+        setIsAtTop(scrollTop === 0);
+        setIsAtBottom(Math.abs(scrollHeight - scrollTop - clientHeight) < 1);
+        setScrollPosition(prev => ({ ...prev, top: scrollTop, bottom: clientHeight - scrollTop }));
+    }, [elementRef]);
+    const debouncedCheckScrollPosition = usehooksTs.useDebounceCallback(checkScrollPosition, SCROLL_DEBOUNCE_TIME);
+    React.useEffect(() => {
+        const element = elementRef.current;
+        if (!element) {
+            return;
+        }
+        // Initial checks
+        checkScrollable();
+        checkScrollPosition();
+        observerRef.current = new ResizeObserver(() => {
+            checkScrollable();
+            checkScrollPosition();
+        });
+        observerRef.current.observe(element);
+        element.addEventListener("scroll", debouncedCheckScrollPosition);
+        return () => {
+            if (observerRef.current) {
+                observerRef.current.disconnect();
+            }
+            element.removeEventListener("scroll", debouncedCheckScrollPosition);
+        };
+    }, [elementRef, checkScrollable, checkScrollPosition, debouncedCheckScrollPosition]);
+    return { isScrollable, isAtTop, isAtBottom, scrollPosition };
+};
+
 /**
  * A useRef that updates its given value whenever it changes.
  *
@@ -4923,6 +4979,7 @@ exports.usePopoverContext = usePopoverContext;
 exports.usePrevious = usePrevious;
 exports.usePrompt = usePrompt;
 exports.useResize = useResize;
+exports.useScrollDetection = useScrollDetection;
 exports.useSelfUpdatingRef = useSelfUpdatingRef;
 exports.useTimeout = useTimeout;
 exports.useViewportSize = useViewportSize;

package/index.esm.js

@@ -12,8 +12,8 @@ import { snakeCase, titleCase } from 'string-ts';
 import { cvaMerge } from '@trackunit/css-class-variance-utilities';
 import { Slottable, Slot } from '@radix-ui/react-slot';
 import isEqual from 'lodash/isEqual';
+import { useDebounceCallback, useCopyToClipboard } from 'usehooks-ts';
 import { Link, useBlocker } from '@tanstack/react-router';
-import { useCopyToClipboard } from 'usehooks-ts';
 import { useFloating, autoUpdate, offset, flip, shift, size, useClick, useDismiss, useHover as useHover$1, useRole, useInteractions, useMergeRefs, FloatingPortal, FloatingFocusManager, arrow, useTransitionStatus, FloatingArrow } from '@floating-ui/react';
 import omit from 'lodash/omit';
 import { twMerge } from 'tailwind-merge';
@@ -1289,6 +1289,62 @@ const getWindowSize = () => {
     }
 };
 
+const SCROLL_DEBOUNCE_TIME = 50;
+/**
+ * Hook for getting detecting scroll values.
+ *
+ * @param {useRef} elementRef - Ref hook holding the element that needs to be observed during scrolling
+ * @returns {object} An object containing if the element is scrollable, is at the top, is at the bottom, and its current scroll position.
+ */
+const useScrollDetection = (elementRef) => {
+    const [isScrollable, setIsScrollable] = useState(false);
+    const [isAtTop, setIsAtTop] = useState(true);
+    const [isAtBottom, setIsAtBottom] = useState(false);
+    const [scrollPosition, setScrollPosition] = useState({ top: 0, bottom: 0 });
+    const observerRef = useRef();
+    const checkScrollable = useCallback(() => {
+        const element = elementRef.current;
+        if (!element) {
+            return;
+        }
+        const hasOverflow = element.scrollHeight > element.clientHeight;
+        setIsScrollable(hasOverflow);
+    }, [elementRef]);
+    const checkScrollPosition = useCallback(() => {
+        const element = elementRef.current;
+        if (!element) {
+            return;
+        }
+        const { scrollTop, scrollHeight, clientHeight } = element;
+        setIsAtTop(scrollTop === 0);
+        setIsAtBottom(Math.abs(scrollHeight - scrollTop - clientHeight) < 1);
+        setScrollPosition(prev => ({ ...prev, top: scrollTop, bottom: clientHeight - scrollTop }));
+    }, [elementRef]);
+    const debouncedCheckScrollPosition = useDebounceCallback(checkScrollPosition, SCROLL_DEBOUNCE_TIME);
+    useEffect(() => {
+        const element = elementRef.current;
+        if (!element) {
+            return;
+        }
+        // Initial checks
+        checkScrollable();
+        checkScrollPosition();
+        observerRef.current = new ResizeObserver(() => {
+            checkScrollable();
+            checkScrollPosition();
+        });
+        observerRef.current.observe(element);
+        element.addEventListener("scroll", debouncedCheckScrollPosition);
+        return () => {
+            if (observerRef.current) {
+                observerRef.current.disconnect();
+            }
+            element.removeEventListener("scroll", debouncedCheckScrollPosition);
+        };
+    }, [elementRef, checkScrollable, checkScrollPosition, debouncedCheckScrollPosition]);
+    return { isScrollable, isAtTop, isAtBottom, scrollPosition };
+};
+
 /**
  * A useRef that updates its given value whenever it changes.
  *
@@ -4806,4 +4862,4 @@ const cvaClickable = cvaMerge([
     },
 });
 
-export { Alert, Badge, Breadcrumb, BreadcrumbContainer, Button, Card, CardBody, CardFooter, CardHeader, Collapse, CompletionStatusIndicator, CopyableText, EmptyState, EmptyValue, ExternalLink, Heading, Icon, IconButton, Indicator, KPICard, MenuDivider, MenuItem, MenuList, MoreMenu, Notice, PackageNameStoryComponent, Page, PageContent, PageHeader, Pagination, Polygon, Popover, PopoverContent, PopoverTitle, PopoverTrigger, Prompt, ROLE_CARD, SectionHeader, Sidebar, SkeletonLines, Spacer, Spinner, StarButton, Tab, TabContent, TabList, Tabs, Tag, Text, Timeline, TimelineElement, ToggleGroup, ToggleItem, Tooltip, ValueBar, VirtualizedList, WidgetBody, cvaButton, cvaButtonPrefixSuffix, cvaButtonSpinner, cvaButtonSpinnerContainer, cvaClickable, cvaIconButton, cvaIndicator, cvaIndicatorIcon, cvaIndicatorIconBackground, cvaIndicatorLabel, cvaIndicatorPing, cvaInteractableItem, cvaMenuItem, cvaMenuItemLabel, cvaMenuItemPrefix, cvaMenuItemStyle, cvaMenuItemSuffix, docs, getDevicePixelRatio, getValueBarColorByValue, iconColorNames, iconPalette, setLocalStorage, useClickOutside, useContinuousTimeout, useDebounce, useDevicePixelRatio, useGeometry, useHover, useIsFirstRender, useIsFullscreen, useIsTextCutOff, useLocalStorage, useLocalStorageReducer, useOptionallyElevatedState, useOverflowItems, usePopoverContext, usePrevious, usePrompt, useResize, useSelfUpdatingRef, useTimeout, useViewportSize, useWindowActivity };
+export { Alert, Badge, Breadcrumb, BreadcrumbContainer, Button, Card, CardBody, CardFooter, CardHeader, Collapse, CompletionStatusIndicator, CopyableText, EmptyState, EmptyValue, ExternalLink, Heading, Icon, IconButton, Indicator, KPICard, MenuDivider, MenuItem, MenuList, MoreMenu, Notice, PackageNameStoryComponent, Page, PageContent, PageHeader, Pagination, Polygon, Popover, PopoverContent, PopoverTitle, PopoverTrigger, Prompt, ROLE_CARD, SectionHeader, Sidebar, SkeletonLines, Spacer, Spinner, StarButton, Tab, TabContent, TabList, Tabs, Tag, Text, Timeline, TimelineElement, ToggleGroup, ToggleItem, Tooltip, ValueBar, VirtualizedList, WidgetBody, cvaButton, cvaButtonPrefixSuffix, cvaButtonSpinner, cvaButtonSpinnerContainer, cvaClickable, cvaIconButton, cvaIndicator, cvaIndicatorIcon, cvaIndicatorIconBackground, cvaIndicatorLabel, cvaIndicatorPing, cvaInteractableItem, cvaMenuItem, cvaMenuItemLabel, cvaMenuItemPrefix, cvaMenuItemStyle, cvaMenuItemSuffix, docs, getDevicePixelRatio, getValueBarColorByValue, iconColorNames, iconPalette, setLocalStorage, useClickOutside, useContinuousTimeout, useDebounce, useDevicePixelRatio, useGeometry, useHover, useIsFirstRender, useIsFullscreen, useIsTextCutOff, useLocalStorage, useLocalStorageReducer, useOptionallyElevatedState, useOverflowItems, usePopoverContext, usePrevious, usePrompt, useResize, useScrollDetection, useSelfUpdatingRef, useTimeout, useViewportSize, useWindowActivity };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trackunit/react-components",
-  "version": "0.5.0",
+  "version": "0.5.1",
   "repository": "https://github.com/Trackunit/manager",
   "license": "SEE LICENSE IN LICENSE.txt",
   "engines": {

package/src/hooks/index.d.ts

@@ -13,6 +13,7 @@ export * from "./useIsTextCutOff";
 export * from "./useOptionallyElevatedState";
 export * from "./usePrevious";
 export * from "./useResize";
+export * from "./useScrollDetection";
 export * from "./useSelfUpdatingRef";
 export * from "./useTimeout";
 export * from "./useViewportSize";

package/src/hooks/useScrollDetection.d.ts

@@ -0,0 +1,16 @@
+import { type RefObject } from "react";
+/**
+ * Hook for getting detecting scroll values.
+ *
+ * @param {useRef} elementRef - Ref hook holding the element that needs to be observed during scrolling
+ * @returns {object} An object containing if the element is scrollable, is at the top, is at the bottom, and its current scroll position.
+ */
+export declare const useScrollDetection: (elementRef: RefObject<HTMLElement>) => {
+    isScrollable: boolean;
+    isAtTop: boolean;
+    isAtBottom: boolean;
+    scrollPosition: {
+        top: number;
+        bottom: number;
+    };
+};