@workday/canvas-kit-react
Version:
The parent module that contains all Workday Canvas Kit React components
40 lines (39 loc) • 2.69 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.BreadcrumbsCurrentItem = exports.useBreadcrumbsItem = exports.breadcrumbsCurrentItemStencil = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const common_1 = require("@workday/canvas-kit-react/common");
const tooltip_1 = require("@workday/canvas-kit-react/tooltip");
const collection_1 = require("@workday/canvas-kit-react/collection");
const text_1 = require("@workday/canvas-kit-react/text");
const canvas_tokens_web_1 = require("@workday/canvas-tokens-web");
const canvas_kit_styling_1 = require("@workday/canvas-kit-styling");
const useBreadcrumbsModel_1 = require("./hooks/useBreadcrumbsModel");
exports.breadcrumbsCurrentItemStencil = (0, canvas_kit_styling_1.createStencil)({
vars: {
maxWidth: '',
},
base: { name: "47b44e", styles: "box-sizing:border-box;font-family:var(--cnvs-sys-font-family-default);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);color:var(--cnvs-sys-color-text-default);display:inline-block;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;max-width:var(--maxWidth-breadcrumbs-current-item-e1cc6f);" }
}, "breadcrumbs-current-item-e1cc6f");
exports.useBreadcrumbsItem = (0, common_1.composeHooks)((0, common_1.createElemPropsHook)(useBreadcrumbsModel_1.useBreadcrumbsModel)((_model, ref, elemProps) => {
const { localRef } = (0, common_1.useLocalRef)((0, common_1.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,
};
}), collection_1.useOverflowListItemMeasure, collection_1.useListItemRegister);
exports.BreadcrumbsCurrentItem = (0, common_1.createSubcomponent)('li')({
displayName: 'Breadcrumbs.Item',
modelHook: useBreadcrumbsModel_1.useBreadcrumbsModel,
elemPropsHook: exports.useBreadcrumbsItem,
})(({ children, tooltipProps = {}, maxWidth = '350px', ...elemProps }, Element) => {
return ((0, jsx_runtime_1.jsx)(tooltip_1.OverflowTooltip, { ...tooltipProps, children: (0, jsx_runtime_1.jsx)(text_1.Text, { as: Element, ...(0, canvas_kit_styling_1.handleCsProp)(elemProps, (0, exports.breadcrumbsCurrentItemStencil)({
maxWidth: typeof maxWidth === 'number' ? (0, canvas_kit_styling_1.px2rem)(maxWidth) : maxWidth,
})), children: children }) }));
});