@workday/canvas-kit-react
Version:
The parent module that contains all Workday Canvas Kit React components
42 lines (41 loc) • 4.73 kB
JavaScript
import { jsx as _jsx } from "react/jsx-runtime";
import { focusRing, slugify, createElemPropsHook, composeHooks, EllipsisText, createSubcomponent, useModalityType, createComponent, } from '@workday/canvas-kit-react/common';
import { mergeStyles } 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 { calc, createStencil, px2rem } from '@workday/canvas-kit-styling';
import { useTabsModel } from './useTabsModel';
import { buttonStencil } from '@workday/canvas-kit-react/button';
import { system, brand } from '@workday/canvas-tokens-web';
const tabItemStencil = createStencil({
base: { name: "355m2j", styles: "box-sizing:border-box;font-family:var(--cnvs-sys-font-family-default), Helvetica Neue, Helvetica, Arial, sans-serif;font-weight:var(--cnvs-sys-font-weight-medium);line-height:var(--cnvs-sys-line-height-subtext-large);font-size:var(--cnvs-sys-font-size-subtext-large);letter-spacing:var(--cnvs-base-letter-spacing-150);border:none;background-color:transparent;flex:0 0 auto;min-width:var(--cnvs-sys-space-zero);align-items:center;padding:var(--cnvs-sys-space-x3) var(--cnvs-sys-space-x4);height:3.25rem;cursor:pointer;color:var(--cnvs-sys-color-fg-muted-default);position:relative;border-radius:var(--cnvs-sys-space-x1) var(--cnvs-sys-space-x1) var(--cnvs-sys-space-zero) var(--cnvs-sys-space-zero);transition:background 150ms ease, color 150ms ease;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;--color-system-icon-3a4847:currentColor;&:has(span){display:flex;gap:var(--cnvs-sys-space-x2);}&:hover, &.hover, &:focus-visible, &.focus{background-color:var(--cnvs-sys-color-bg-alt-default);color:var(--cnvs-sys-color-fg-contrast-default);--color-system-icon-3a4847:var(--cnvs-sys-color-fg-contrast-default);}&: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, rgba(255,255,255,1));--boxShadowInner-button-85bf0e:var(--cnvs-sys-color-border-inverse);--boxShadowOuter-button-85bf0e:var(--cnvs-brand-common-focus-outline);--color-system-icon-3a4847:var(--cnvs-sys-color-icon-strong);}&:disabled, &.disabled, &[aria-disabled]{color:var(--cnvs-sys-color-text-disabled);--color-system-icon-3a4847:var(--cnvs-sys-color-fg-disabled);&:hover{cursor:auto;background-color:var(--cnvs-sys-color-bg-transparent-default);--color-system-icon-3a4847:var(--cnvs-sys-color-fg-disabled);}}&[aria-selected=true]{color:var(--cnvs-brand-primary-base);cursor:default;--color-system-icon-3a4847:var(--cnvs-brand-primary-base);&:after{position:absolute;border-bottom:var(--cnvs-sys-space-x1) solid transparent;border-radius:var(--cnvs-sys-shape-x1) var(--cnvs-sys-shape-x1) var(--cnvs-sys-shape-zero) var(--cnvs-sys-shape-zero);background-color:var(--cnvs-brand-primary-base);bottom:var(--cnvs-sys-space-zero);content:'';left:var(--cnvs-sys-space-zero);margin-block-start:calc(calc(var(--cnvs-sys-space-x2) / var(--cnvs-sys-space-x1)) * -1);width:100%;}&:hover, &.hover, &:focus-visible, &.focus{background-color:var(--cnvs-sys-color-bg-transparent-default);color:var(--cnvs-brand-primary-base);}}" }
}, "tab-item-116136");
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 }) }));
});