@workday/canvas-kit-react/dist/es6/tabs/lib/TabsList.js

The parent module that contains all Workday Canvas Kit React components

import { jsxs as _jsxs } from "react/jsx-runtime";
import * as React from 'react';
import { useListRenderItems, useListResetCursorOnBlur, useOverflowListMeasure, } from '@workday/canvas-kit-react/collection';
import { composeHooks, createElemPropsHook, createSubcomponent, useLocalRef, useModalityType, } from '@workday/canvas-kit-react/common';
import { mergeStyles } from '@workday/canvas-kit-react/layout';
import { createStencil, px2rem } from '@workday/canvas-kit-styling';
import { base, system } from '@workday/canvas-tokens-web';
import { useTabsModel } from './useTabsModel';
function getScrollPercentage(elem, direction) {
    if (direction === 'vertical') {
        if (elem.scrollHeight > elem.clientHeight) {
            const percentage = elem.scrollTop / (elem.scrollHeight - elem.clientHeight);
            return percentage;
        }
        else {
            return -1;
        }
    }
    if (elem.scrollWidth > elem.clientWidth) {
        const percentage = elem.scrollLeft / (elem.scrollWidth - elem.clientWidth);
        return percentage;
    }
    else {
        return -1;
    }
}
function getScrollPosition(elem, direction) {
    const percentage = getScrollPercentage(elem, direction);
    return percentage <= -1
        ? undefined
        : percentage > 0.99
            ? 'end'
            : percentage > 0.01
                ? 'middle'
                : 'start';
}
function setScrollPosition(elem, scrollPosition) {
    if (scrollPosition) {
        elem.setAttribute('data-scroll-position', scrollPosition);
    }
    else {
        elem.removeAttribute('data-scroll-position');
    }
}
export const useTabOverflowScroll = createElemPropsHook(useTabsModel)((_model, ref, elemProps = {}) => {
    const direction = elemProps['aria-orientation'] || 'vertical';
    const { localRef, elementRef } = useLocalRef(ref);
    React.useLayoutEffect(() => {
        if (!localRef.current) {
            return;
        }
        setScrollPosition(localRef.current, getScrollPosition(localRef.current, direction));
    }, [localRef, direction]);
    return {
        ref: elementRef,
        onScroll: (event) => {
            const elem = event.currentTarget;
            setScrollPosition(elem, getScrollPosition(elem, direction));
        },
    };
});
export const useTabsList = composeHooks(useTabOverflowScroll, createElemPropsHook(useTabsModel)(model => {
    return {
        role: 'tablist',
        'aria-orientation': model.state.orientation,
    };
}), useOverflowListMeasure, useListResetCursorOnBlur);
export const tabsListStencil = createStencil({
    base: { name: "3fc8rr", styles: "box-sizing:border-box;display:flex;position:relative;border-block-end:0.0625rem solid var(--cnvs-sys-color-border-default, var(--cnvs-sys-color-border-divider, oklch(0.3057 0.079 256.22 / 0.13)));gap:var(--cnvs-sys-gap-xs, var(--cnvs-sys-space-x1, 0.25rem));padding-inline:var(--cnvs-base-size-500, 2.5rem);@media screen and (max-width: 768px){padding-inline:var(--cnvs-sys-padding-md, var(--cnvs-sys-space-x4, 1rem));}" },
    modifiers: {
        modality: {
            touch: { name: "2a702q", styles: "overflow-x:auto;padding-inline:0;&[data-scroll-position=\"start\"]{mask-image:linear-gradient(to right, white 80%, transparent);}&[data-scroll-position=\"middle\"]{mask-image:linear-gradient(to left, white 80%, transparent), linear-gradient(to right, white 80%, transparent);mask-composite:intersect;}&[data-scroll-position=\"end\"]{mask-image:linear-gradient(to left, white 80%, transparent);}" },
            mouse: { name: "47kjsi", styles: "" },
            pen: { name: "5328k", styles: "" }
        },
        isDragging: {
            true: { name: "204u6w", styles: "" },
            false: { name: "4av5y6", styles: "" }
        },
        direction: {
            left: { name: "1yb99u", styles: "" },
            right: { name: "3gk6f1", styles: "" }
        }
    }
}, "tabs-list-917c0e");
export const TabsList = createSubcomponent('div')({
    displayName: 'Tabs.List',
    modelHook: useTabsModel,
    elemPropsHook: useTabsList,
})(({ children, overflowButton, ...elemProps }, Element, model) => {
    const modality = useModalityType();
    return (_jsxs(Element, { ...mergeStyles(elemProps, tabsListStencil({
            modality: modality,
        })), children: [useListRenderItems(model, children), overflowButton] }));
});