@workday/canvas-kit-react
Version:
The parent module that contains all Workday Canvas Kit React components
45 lines (44 loc) • 4.96 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.TabsItem = exports.useTabsItem = exports.StyledTabItem = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const common_1 = require("@workday/canvas-kit-react/common");
const layout_1 = require("@workday/canvas-kit-react/layout");
const tooltip_1 = require("@workday/canvas-kit-react/tooltip");
const icon_1 = require("@workday/canvas-kit-react/icon");
const collection_1 = require("@workday/canvas-kit-react/collection");
const canvas_kit_styling_1 = require("@workday/canvas-kit-styling");
const useTabsModel_1 = require("./useTabsModel");
const button_1 = require("@workday/canvas-kit-react/button");
const canvas_tokens_web_1 = require("@workday/canvas-tokens-web");
const tabItemStencil = (0, canvas_kit_styling_1.createStencil)({
base: { name: "tb4m1", 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-99ce3e:var(--cnvs-sys-color-fg-muted-soft);&:has(span){display:flex;gap:var(--cnvs-sys-space-x2);}&:hover, &.hover, &:focus-visible, &.focus{background-color:var(--cnvs-base-palette-soap-200);color:var(--cnvs-base-palette-black-pepper-400);--color-system-icon-99ce3e:var(--cnvs-sys-color-icon-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-base-palette-french-vanilla-100, rgba(255,255,255,1));--boxShadowInner-button-65cb05:var(--cnvs-sys-color-border-inverse);--boxShadowOuter-button-65cb05:var(--cnvs-brand-common-focus-outline);--color-system-icon-99ce3e:var(--cnvs-sys-color-icon-strong);}&:disabled, &.disabled, &[aria-disabled]{color:var(--cnvs-sys-color-text-disabled);--color-system-icon-99ce3e:var(--cnvs-sys-color-fg-disabled);&:hover{cursor:auto;background-color:var(--cnvs-sys-color-bg-transparent);--color-system-icon-99ce3e:var(--cnvs-sys-color-fg-disabled);}}&[aria-selected=true]{color:var(--cnvs-brand-primary-base);cursor:default;--color-system-icon-99ce3e: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);color:var(--cnvs-brand-primary-base);}}" }
}, "tab-item-c66993");
exports.StyledTabItem = (0, common_1.createComponent)('button')({
displayName: 'StyledTabItem',
Component: ({ children, ...elemProps }, ref, Element) => {
return ((0, jsx_runtime_1.jsx)(Element, { ref: ref, ...(0, layout_1.mergeStyles)(elemProps, tabItemStencil()), children: children }));
},
});
exports.useTabsItem = (0, common_1.composeHooks)((0, common_1.createElemPropsHook)(useTabsModel_1.useTabsModel)(({ state }, _, elemProps = {}) => {
const name = elemProps['data-id'] || '';
const selected = !!elemProps['data-id'] && (0, collection_1.isSelected)(name, state);
return {
type: 'button',
role: 'tab',
'aria-selected': selected,
'aria-controls': (0, common_1.slugify)(`tabpanel-${state.id}-${name}`),
};
}), collection_1.useListItemSelect, collection_1.useOverflowListItemMeasure, collection_1.useListItemRovingFocus, collection_1.useListItemRegister);
exports.TabsItem = (0, common_1.createSubcomponent)('button')({
displayName: 'Tabs.Item',
modelHook: useTabsModel_1.useTabsModel,
elemPropsHook: exports.useTabsItem,
subComponents: {
Icon: icon_1.SystemIcon,
Text: common_1.EllipsisText,
},
})(({ children, ...elemProps }, Element) => {
const modality = (0, common_1.useModalityType)();
return ((0, jsx_runtime_1.jsx)(tooltip_1.OverflowTooltip, { children: (0, jsx_runtime_1.jsx)(exports.StyledTabItem, { as: Element, maxWidth: modality === 'touch' ? undefined : 280, ...elemProps, children: children }) }));
});