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

The parent module that contains all Workday Canvas Kit React components

import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { TertiaryButton } from '@workday/canvas-kit-react/button';
import { useOverflowListTarget } from '@workday/canvas-kit-react/collection';
import { composeHooks, createElemPropsHook, createSubcomponent, subModelHook, } from '@workday/canvas-kit-react/common';
import { SystemIcon, systemIconStencil } from '@workday/canvas-kit-react/icon';
import { useMenuTarget } from '@workday/canvas-kit-react/menu';
import { createStencil, handleCsProp } from '@workday/canvas-kit-styling';
import { chevronRightSmallIcon, relatedActionsIcon } from '@workday/canvas-system-icons-web';
import { component, system } from '@workday/canvas-tokens-web';
import { useBreadcrumbsModel } from './hooks/useBreadcrumbsModel';
export const breadcrumbsOverflowButtonStencil = createStencil({
    parts: {
        overflowButton: 'breadcrumbs-overflow-button',
        chevronRightIcon: 'breadcrumbs-overflow-button-chevron-right-icon',
    },
    base: { name: "3o6u9x", styles: "box-sizing:border-box;align-items:center;display:flex;--color-system-icon-c9acc3:var(--cnvs-sys-color-fg-muted-default);--size-svg-bca693:var(--cnvs-component-system-icon-size-md, var(--cnvs-sys-space-x5, 1.25rem));[data-part=\"breadcrumbs-overflow-button\"]{--color-system-icon-c9acc3:var(--cnvs-sys-color-fg-strong);}[data-part=\"breadcrumbs-overflow-button-chevron-right-icon\"]{height:var(--cnvs-sys-size-sm, var(--cnvs-sys-space-x8, 2rem));width:var(--cnvs-sys-size-sm, var(--cnvs-sys-space-x8, 2rem));justify-content:center;align-items:center;display:inline-flex;:dir(rtl){transform:scaleX(-1);}}" }
}, "breadcrumbs-overflow-button-16df19");
export const useBreadcrumbsOverflowButton = composeHooks(createElemPropsHook(useBreadcrumbsModel)(() => ({
    'aria-haspopup': true,
    'aria-controls': 'menu',
})), useOverflowListTarget, subModelHook((m) => m.menu, useMenuTarget));
export const BreadcrumbsOverflowButton = createSubcomponent('button')({
    displayName: 'Breadcrumbs.OverflowButton',
    modelHook: useBreadcrumbsModel,
    elemPropsHook: useBreadcrumbsOverflowButton,
})(({ style, ...elemProps }, Element) => {
    return (_jsxs("li", { ...breadcrumbsOverflowButtonStencil(), ...style, children: [_jsx(TertiaryButton, { as: Element, icon: relatedActionsIcon, size: "extraSmall", ...breadcrumbsOverflowButtonStencil.parts.overflowButton, ...handleCsProp(elemProps) }), _jsx(SystemIcon, { icon: chevronRightSmallIcon, ...breadcrumbsOverflowButtonStencil.parts.chevronRightIcon, "aria-hidden": true })] }));
});