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

The parent module that contains all Workday Canvas Kit React components

import { jsx as _jsx } from "react/jsx-runtime";
import { buttonStencil } from '@workday/canvas-kit-react/button';
import { isSelected, useListItemRegister, useListItemRovingFocus, useListItemSelect, useOverflowListItemMeasure, } from '@workday/canvas-kit-react/collection';
import { EllipsisText, composeHooks, createComponent, createElemPropsHook, createSubcomponent, focusRing, slugify, useModalityType, } from '@workday/canvas-kit-react/common';
import { SystemIcon, systemIconStencil } from '@workday/canvas-kit-react/icon';
import { mergeStyles } from '@workday/canvas-kit-react/layout';
import { OverflowTooltip } from '@workday/canvas-kit-react/tooltip';
import { calc, createStencil, px2rem } from '@workday/canvas-kit-styling';
import { base, component, system } from '@workday/canvas-tokens-web';
import { useTabsModel } from './useTabsModel';
const tabItemStencil = createStencil({
    base: { name: "a6rzk", styles: "box-sizing:border-box;font-family:var(--cnvs-sys-font-family-default);font-size:var(--cnvs-sys-font-size-subtext-lg, var(--cnvs-sys-font-size-subtext-large, 0.875rem));line-height:var(--cnvs-sys-line-height-subtext-lg, var(--cnvs-sys-line-height-subtext-large, 1.25rem));letter-spacing:var(--cnvs-sys-letter-spacing-subtext-lg, var(--cnvs-sys-type-letter-spacing-subtext-large));font-weight:var(--cnvs-sys-font-weight-medium);border:none;background-color:var(--cnvs-sys-color-surface-transparent, var(--cnvs-sys-color-bg-transparent-default, oklch(0 0 0 / 0)));flex:0 0 auto;min-width:0;align-items:center;padding:0 var(--cnvs-sys-padding-md, var(--cnvs-sys-space-x4, 1rem));height:var(--cnvs-sys-size-lg, 3rem);cursor:pointer;color:var(--cnvs-sys-color-fg-muted-default);position:relative;border-radius:var(--cnvs-sys-shape-md, var(--cnvs-sys-shape-x2, 0.5rem)) var(--cnvs-sys-shape-md, var(--cnvs-sys-shape-x2, 0.5rem)) var(--cnvs-sys-shape-none, var(--cnvs-sys-shape-zero, 0)) var(--cnvs-sys-shape-none, var(--cnvs-sys-shape-zero, 0));transition:background 150ms ease, color 150ms ease;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;--color-system-icon-c9acc3:currentColor;--size-svg-bca693:var(--cnvs-component-system-icon-size-md, var(--cnvs-sys-space-x5, 1.25rem));&:has(span){display:flex;gap:var(--cnvs-sys-gap-sm, var(--cnvs-sys-space-x2, 0.5rem));}&:hover, &.hover, &:focus-visible, &.focus{background-color:var(--cnvs-sys-color-surface-overlay-hover-default, oklch(0.3343 0.0951 253.3 / 0.05));color:var(--cnvs-sys-color-fg-muted-strong);--color-system-icon-c9acc3:var(--cnvs-sys-color-fg-muted-strong);}&:focus-visible, &.focus{outline:0.125rem solid transparent;box-shadow:inset 0 0 0 2px var(--cnvs-brand-common-focus-outline, rgba(8,117,225,1)), inset 0 0 0 2px var(--cnvs-sys-color-border-inverse-default, var(--cnvs-base-palette-neutral-0));--boxShadowInner-button-a19f67:var(--cnvs-sys-color-focus-inverse, var(--cnvs-sys-color-border-input-inverse, oklch(1 0 0 / 1)));--boxShadowOuter-button-a19f67:var(--cnvs-sys-color-brand-focus-primary, var(--cnvs-brand-common-focus-outline, oklch(0.6023 0.2032 255.68 / 1)));color:var(--cnvs-sys-color-fg-strong);--color-system-icon-c9acc3:var(--cnvs-sys-color-fg-strong);}&:disabled, &.disabled, &[aria-disabled]{opacity:var(--cnvs-sys-opacity-disabled);&:hover{cursor:auto;background-color:var(--cnvs-sys-color-surface-transparent, var(--cnvs-sys-color-bg-transparent-default, oklch(0 0 0 / 0)));--color-system-icon-c9acc3:var(--cnvs-sys-color-fg-muted-default);}}&[aria-selected=true]{color:var(--cnvs-sys-color-brand-fg-primary-default, var(--cnvs-brand-primary-base, oklch(0.5198 0.1782 256.11 / 1)));cursor:default;--color-system-icon-c9acc3:var(--cnvs-sys-color-brand-fg-primary-default, var(--cnvs-brand-primary-base, oklch(0.5198 0.1782 256.11 / 1)));&:after{position:absolute;border-block-end:var(--cnvs-base-size-50, 0.25rem) solid transparent;border-radius:var(--cnvs-sys-shape-md, var(--cnvs-sys-shape-x2, 0.5rem)) var(--cnvs-sys-shape-md, var(--cnvs-sys-shape-x2, 0.5rem)) var(--cnvs-sys-shape-none, var(--cnvs-sys-shape-zero, 0)) var(--cnvs-sys-shape-none, var(--cnvs-sys-shape-zero, 0));background-color:var(--cnvs-sys-color-brand-fg-primary-default, var(--cnvs-brand-primary-base, oklch(0.5198 0.1782 256.11 / 1)));bottom:0;content:'';left:0;margin-block-start:calc(calc(var(--cnvs-sys-padding-xs, var(--cnvs-sys-space-x2, 0.5rem)) / var(--cnvs-sys-padding-xxs, var(--cnvs-sys-space-x1, 0.25rem))) * -1);width:100%;}&:hover, &.hover, &:focus-visible, &.focus{background-color:var(--cnvs-sys-color-surface-transparent, var(--cnvs-sys-color-bg-transparent-default, oklch(0 0 0 / 0)));color:var(--cnvs-sys-color-brand-fg-primary-default, var(--cnvs-brand-primary-base, oklch(0.5198 0.1782 256.11 / 1)));}}" }
}, "tab-item-f3b0c4");
export const StyledTabItem = createComponent('button')({
    displayName: 'StyledTabItem',
    Component: ({ children, ...elemProps }, ref, Element) => {
        return (_jsx(Element, { ref: ref, ...mergeStyles(elemProps, tabItemStencil()), children: children }));
    },
});
export const useTabsItem = composeHooks(createElemPropsHook(useTabsModel)(({ state }, _, elemProps = {}) => {
    const name = elemProps['data-id'] || '';
    const selected = !!elemProps['data-id'] && isSelected(name, state);
    return {
        type: 'button',
        role: 'tab',
        'aria-selected': selected,
        'aria-controls': slugify(`tabpanel-${state.id}-${name}`),
    };
}), useListItemSelect, useOverflowListItemMeasure, useListItemRovingFocus, useListItemRegister);
export const TabsItem = createSubcomponent('button')({
    displayName: 'Tabs.Item',
    modelHook: useTabsModel,
    elemPropsHook: useTabsItem,
    subComponents: {
        Icon: SystemIcon,
        Text: EllipsisText,
    },
})(({ children, ...elemProps }, Element) => {
    const modality = useModalityType();
    return (_jsx(OverflowTooltip, { children: _jsx(StyledTabItem, { as: Element, maxWidth: modality === 'touch' ? undefined : 280, ...elemProps, children: children }) }));
});