@base-ui-components/react/esm/tabs/list/useTabsList.js

Base UI is a library of headless ('unstyled') React components and low-level hooks. You gain complete control over your app's CSS and accessibility features.

'use client';

import * as React from 'react';
import { mergeReactProps } from '../../utils/mergeReactProps.js';
import { useEnhancedEffect } from '../../utils/useEnhancedEffect.js';
import { useForkRef } from '../../utils/useForkRef.js';
import { useEventCallback } from '../../utils/useEventCallback.js';
function useTabsList(parameters) {
  const {
    getTabElementBySelectedValue,
    onValueChange,
    orientation,
    rootRef: externalRef,
    tabsListRef,
    value: selectedTabValue
  } = parameters;
  const detectActivationDirection = useActivationDirectionDetector(
  // the old value
  selectedTabValue, orientation, tabsListRef, getTabElementBySelectedValue);
  const onTabActivation = useEventCallback((newValue, event) => {
    if (newValue !== selectedTabValue) {
      const activationDirection = detectActivationDirection(newValue);
      onValueChange(newValue, activationDirection, event);
    }
  });
  const handleRef = useForkRef(tabsListRef, externalRef);
  const getRootProps = React.useCallback((otherProps = {}) => {
    return mergeReactProps(otherProps, {
      'aria-orientation': orientation === 'vertical' ? 'vertical' : undefined,
      ref: handleRef,
      role: 'tablist'
    });
  }, [handleRef, orientation]);
  return {
    getRootProps,
    onTabActivation,
    rootRef: handleRef,
    tabsListRef
  };
}
function getInset(tab, tabsList) {
  const {
    left: tabLeft,
    top: tabTop
  } = tab.getBoundingClientRect();
  const {
    left: listLeft,
    top: listTop
  } = tabsList.getBoundingClientRect();
  const left = tabLeft - listLeft;
  const top = tabTop - listTop;
  return {
    left,
    top
  };
}
function useActivationDirectionDetector(
// the old value
selectedTabValue, orientation, tabsListRef, getTabElement) {
  const previousTabEdge = React.useRef(null);
  useEnhancedEffect(() => {
    // Whenever orientation changes, reset the state.
    if (selectedTabValue == null || tabsListRef.current == null) {
      previousTabEdge.current = null;
      return;
    }
    const activeTab = getTabElement(selectedTabValue);
    if (activeTab == null) {
      previousTabEdge.current = null;
      return;
    }
    const {
      left,
      top
    } = getInset(activeTab, tabsListRef.current);
    previousTabEdge.current = orientation === 'horizontal' ? left : top;
  }, [orientation, getTabElement, tabsListRef, selectedTabValue]);
  return React.useCallback(newValue => {
    if (newValue === selectedTabValue) {
      return 'none';
    }
    if (newValue == null) {
      previousTabEdge.current = null;
      return 'none';
    }
    if (newValue != null && tabsListRef.current != null) {
      const selectedTabElement = getTabElement(newValue);
      if (selectedTabElement != null) {
        const {
          left,
          top
        } = getInset(selectedTabElement, tabsListRef.current);
        if (previousTabEdge.current == null) {
          previousTabEdge.current = orientation === 'horizontal' ? left : top;
          return 'none';
        }
        if (orientation === 'horizontal') {
          if (left < previousTabEdge.current) {
            previousTabEdge.current = left;
            return 'left';
          }
          if (left > previousTabEdge.current) {
            previousTabEdge.current = left;
            return 'right';
          }
        } else if (top < previousTabEdge.current) {
          previousTabEdge.current = top;
          return 'up';
        } else if (top > previousTabEdge.current) {
          previousTabEdge.current = top;
          return 'down';
        }
      }
    }
    return 'none';
  }, [getTabElement, orientation, previousTabEdge, tabsListRef, selectedTabValue]);
}
export { useTabsList };