diff --git a/packages/jui/src/Tabs/Tabs.tsx b/packages/jui/src/Tabs/Tabs.tsx index a9d0860a..8d7e40fd 100644 --- a/packages/jui/src/Tabs/Tabs.tsx +++ b/packages/jui/src/Tabs/Tabs.tsx @@ -6,7 +6,7 @@ import { AriaTabListProps } from "@react-types/tabs"; import { StyledHorizontalOverflowShadows } from "./StyledHorizontalOverflowShadows"; import { TabsOverflowMenu } from "./TabsOverflowMenu"; import { useCollectionOverflowObserver } from "./useCollectionOverflowObserver"; -import { useIsScrolled } from "./useIsScrolled"; +import { useHasOverflow } from "./useHasOverflow"; import { styled, css } from "@intellij-platform/core/styled"; import { StyledDefaultTab } from "./StyledDefaultTab"; import { StyledDefaultTabs } from "./StyledDefaultTabs"; @@ -119,7 +119,7 @@ export const Tabs = ({ const ref = React.useRef(null); const { tabListProps } = useTabList(props, state, ref); - const { scrolledIndicatorProps, isScrolled } = useIsScrolled({ ref }); + const { scrolledIndicatorProps, hasOverflow } = useHasOverflow({ ref }); const { overflowedKeys, intersectionObserver } = useCollectionOverflowObserver(ref); @@ -145,8 +145,8 @@ export const Tabs = ({ return ( ({ +export function useHasOverflow({ threshold = 5, ref, }: { threshold?: number; ref: RefObject; }) { - const [isScrolled, setIsScrolled] = useState({ + const [hasOverflow, setHasOverflow] = useState({ left: false, right: false, top: false, @@ -23,19 +23,19 @@ export function useIsScrolled({ const offsetTop = element.scrollTop; const offsetBottom = element.scrollHeight - (element.offsetHeight + element.scrollTop); - const newIsScrolled = { - top: offsetTop >= threshold, - bottom: offsetBottom >= threshold, - left: offsetLeft >= threshold, - right: offsetRight >= threshold, + const newHasOverflow = { + top: offsetTop > threshold, + bottom: offsetBottom > threshold, + left: offsetLeft > threshold, + right: offsetRight > threshold, }; if ( - isScrolled.top !== isScrolled.top || - isScrolled.bottom !== newIsScrolled.bottom || - isScrolled.left !== newIsScrolled.left || - isScrolled.right !== newIsScrolled.right + hasOverflow.top !== newHasOverflow.top || + hasOverflow.bottom !== newHasOverflow.bottom || + hasOverflow.left !== newHasOverflow.left || + hasOverflow.right !== newHasOverflow.right ) { - setIsScrolled(newIsScrolled); + setHasOverflow(newHasOverflow); } } }; @@ -45,6 +45,6 @@ export function useIsScrolled({ scrolledIndicatorProps: { onScroll: update as UIEventHandler, }, - isScrolled, + hasOverflow, }; }