@workday/canvas-kit-react/dist/es6/breadcrumbs/lib/BreadcrumbsCurrentItem.js

The parent module that contains all Workday Canvas Kit React components

import { jsx as _jsx } from "react/jsx-runtime";
import { useListItemRegister, useOverflowListItemMeasure, } from '@workday/canvas-kit-react/collection';
import { composeHooks, createElemPropsHook, createSubcomponent, useForkRef, useLocalRef, } from '@workday/canvas-kit-react/common';
import { Text } from '@workday/canvas-kit-react/text';
import { OverflowTooltip } from '@workday/canvas-kit-react/tooltip';
import { createStencil, handleCsProp, px2rem } from '@workday/canvas-kit-styling';
import { system } from '@workday/canvas-tokens-web';
import { useBreadcrumbsModel } from './hooks/useBreadcrumbsModel';
export const breadcrumbsCurrentItemStencil = createStencil({
    vars: {
        maxWidth: '',
    },
    base: { name: "1fn88e", 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));font-weight:var(--cnvs-sys-font-weight-normal);letter-spacing:var(--cnvs-sys-letter-spacing-subtext-lg, var(--cnvs-sys-type-letter-spacing-subtext-large));line-height:var(--cnvs-sys-line-height-subtext-lg, var(--cnvs-sys-line-height-subtext-large, 1.25rem));color:var(--cnvs-sys-color-fg-muted-default);display:inline-block;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;max-width:var(--maxWidth-breadcrumbs-current-item-29bc44);" }
}, "breadcrumbs-current-item-29bc44");
export const useBreadcrumbsItem = composeHooks(createElemPropsHook(useBreadcrumbsModel)((_model, ref) => {
    const { localRef } = useLocalRef(useForkRef(ref));
    let shouldShowTooltip = false;
    const refCurrent = localRef.current;
    if (refCurrent) {
        const { scrollWidth, clientWidth } = refCurrent;
        shouldShowTooltip = scrollWidth > clientWidth;
    }
    return {
        tabIndex: shouldShowTooltip ? 0 : undefined,
        ref: localRef,
    };
}), useOverflowListItemMeasure, useListItemRegister);
export const BreadcrumbsCurrentItem = createSubcomponent('li')({
    displayName: 'Breadcrumbs.Item',
    modelHook: useBreadcrumbsModel,
    elemPropsHook: useBreadcrumbsItem,
})(({ children, tooltipProps = {}, maxWidth = '350px', ...elemProps }, Element) => {
    return (_jsx(OverflowTooltip, { ...tooltipProps, children: _jsx(Text, { as: Element, ...handleCsProp(elemProps, breadcrumbsCurrentItemStencil({
                maxWidth: typeof maxWidth === 'number' ? px2rem(maxWidth) : maxWidth,
            })), children: children }) }));
});