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

The parent module that contains all Workday Canvas Kit React components

import * as React from 'react';
import { colors, space, type, borderRadius, iconColors } from '@workday/canvas-kit-react/tokens';
import { focusRing, styled, slugify, createElemPropsHook, composeHooks, ellipsisStyles, EllipsisText, createSubcomponent, useModalityType, } from '@workday/canvas-kit-react/common';
import { Box } from '@workday/canvas-kit-react/layout';
import { OverflowTooltip } from '@workday/canvas-kit-react/tooltip';
import { SystemIcon, systemIconStencil } from '@workday/canvas-kit-react/icon';
import { useListItemRegister, useListItemRovingFocus, isSelected, useListItemSelect, useOverflowListItemMeasure, } from '@workday/canvas-kit-react/collection';
import { useTabsModel } from './useTabsModel';
import { px2rem } from '@workday/canvas-kit-styling';
export const StyledTabItem = styled(Box.as('button'))(({ theme }) => ({
    ...type.levels.subtext.large,
    fontWeight: type.properties.fontWeights.medium,
    border: 'none',
    backgroundColor: 'transparent',
    flex: '0 0 auto',
    alignItems: 'center',
    padding: `${space.xs} ${space.s}`,
    height: 52,
    boxSizing: 'border-box',
    cursor: 'pointer',
    color: colors.licorice300,
    position: 'relative',
    borderRadius: `${borderRadius.m} ${borderRadius.m} 0px 0px`,
    transition: 'background 150ms ease, color 150ms ease',
    '&:hover, &:focus-visible, &.hover, &.focus': {
        backgroundColor: colors.soap200,
        color: colors.blackPepper400,
        [systemIconStencil.vars.color]: iconColors.hover,
    },
    '&:focus-visible, &.focus': {
        outline: `${px2rem(2)} solid transparent`,
        ...focusRing({ inset: 'outer', width: 0, separation: 2 }, theme),
    },
    '&:disabled, &[aria-disabled]': {
        color: colors.licorice100,
        [systemIconStencil.vars.color]: iconColors.disabled,
        '&:hover': {
            cursor: 'auto',
            backgroundColor: `transparent`,
            [systemIconStencil.vars.color]: iconColors.disabled,
        },
    },
    '&[aria-selected=true]': {
        color: theme.canvas.palette.primary.main,
        cursor: 'default',
        [systemIconStencil.vars.color]: theme.canvas.palette.primary.main,
        '&:after': {
            position: 'absolute',
            // fallback for Windows high contrast theme
            borderBottom: `${space.xxxs} solid transparent`,
            borderRadius: `${borderRadius.m} ${borderRadius.m} 0px 0px`,
            backgroundColor: theme.canvas.palette.primary.main,
            bottom: 0,
            content: `''`,
            left: 0,
            marginTop: '-2px',
            width: '100%',
        },
        '&:hover, &:focus': {
            backgroundColor: `transparent`,
            color: theme.canvas.palette.primary.main,
        },
    },
}), ({ children, gap = space.xxs }) => {
    if (typeof children === 'string') {
        return ellipsisStyles;
    }
    else {
        return {
            display: 'flex',
            gap,
        };
    }
});
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 (React.createElement(OverflowTooltip, null,
        React.createElement(StyledTabItem, { as: Element, maxWidth: modality === 'touch' ? undefined : 280, ...elemProps }, children)));
});