# All files / src/tabs utils.ts

95.23% Statements 80/84
90% Branches 27/30
100% Functions 3/3
95.23% Lines 80/84

Press n or j to go to the next uncovered block, b, p or k for the previous block.

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    851x
    1x
    1x
    1x
    85x
    85x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    20x
    20x

    20x
    20x
    20x

    20x
    20x
    20x
    20x
    20x
    20x
    20x
    20x
    20x
    20x
    20x
    9x
    9x
    20x
    1x
    1x
    20x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    12x
    12x
    12x
    12x
    12x
    12x
    12x
    12x
    12x
    12x
    12x
    12x
    12x
    12x
    12x
     /**
     * @internal
     */
    export const getTabRoleOnly = (container: Element): readonly HTMLElement[] => [
      ...container.querySelectorAll<HTMLElement>('[role="tab"]'),
    ];

    /** @internal */
    interface ScrollOptions {
      container: HTMLElement | null;
      forward: HTMLElement | null;
      backward: HTMLElement | null;
      vertical: boolean;
      activeIndex: number;
    }

    /**
     * @internal
     */
    export const scrollTabIntoView = (options: ScrollOptions): void => {
      const { container, vertical, forward, backward, activeIndex } = options;
      if (!container) {
        return;
      }

      const activeTab = getTabRoleOnly(container)[activeIndex];
      if (!activeTab) {
        return;
      }

      const sizeAttribute = vertical ? "offsetHeight" : "offsetWidth";
      const offsetAttribute = vertical ? "offsetTop" : "offsetLeft";
      const scrollAttribute = vertical ? "scrollTop" : "scrollLeft";
      const firstOffset = backward?.[sizeAttribute] || 0;
      const lastOffset = forward?.[sizeAttribute] || 0;
      const elementStart = activeTab[offsetAttribute];
      const elementEnd = elementStart + activeTab[sizeAttribute];
      const containerStart = container[scrollAttribute];
      const containerEnd = containerStart + container[sizeAttribute] - lastOffset;
      if (elementEnd > containerEnd) {
        const containerSize = container[sizeAttribute] - lastOffset;
        container[scrollAttribute] = elementEnd - containerSize;
      } else if (elementStart < containerStart + firstOffset) {
        container[scrollAttribute] = elementStart - firstOffset;
      }
    };

    /**
     * @remarks \@since 6.0.0
     */
    export interface TabListScrollToOptions {
      isRTL: boolean;
      animate: boolean;
      vertical: boolean;
      increment: boolean;
      container: HTMLElement;
    }

    /**
     * @remarks \@since 6.0.0
     */
    export type GetTabListScrollToOptions = (
      options: TabListScrollToOptions
    ) => ScrollToOptions | undefined;

    /**
     * @remarks \@since 6.0.0
     */
    export const getTabListScrollToOptions: GetTabListScrollToOptions = (
      options
    ) => {
      const { isRTL, animate, vertical, increment, container } = options;
      const { scrollLeft, scrollTop, scrollWidth, scrollHeight } = container;
      const currentScroll = vertical ? scrollTop : scrollLeft;
      const scrollDistance = vertical ? scrollHeight : scrollWidth;
      const amount = (scrollDistance / 10) * (increment ? 1 : -1);
      const distance = currentScroll + amount * (vertical || !isRTL ? 1 : -1);

      return {
        left: vertical ? undefined : distance,
        top: vertical ? distance : undefined,
        behavior: animate ? "smooth" : "auto",
      };
    };