@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 { chevronRightSmallIcon, relatedActionsIcon } from '@workday/canvas-system-icons-web';
import { SystemIcon, systemIconStencil } from '@workday/canvas-kit-react/icon';
import { composeHooks, createElemPropsHook, createSubcomponent, subModelHook, } from '@workday/canvas-kit-react/common';
import { useOverflowListTarget } from '@workday/canvas-kit-react/collection';
import { useMenuTarget } from '@workday/canvas-kit-react/menu';
import { TertiaryButton } from '@workday/canvas-kit-react/button';
import { system } from '@workday/canvas-tokens-web';
import { createStencil, handleCsProp, px2rem } from '@workday/canvas-kit-styling';
import { useBreadcrumbsModel } from './hooks/useBreadcrumbsModel';
export const breadcrumbsOverflowButtonStencil = createStencil({
    parts: {
        overflowButton: 'breadcrumbs-overflow-button',
        chevronRightIcon: 'breadcrumbs-overflow-button-chevron-right-icon',
    },
    base: { name: "2by9fu", styles: "box-sizing:border-box;align-items:center;display:flex;--color-system-icon-3a4847:var(--cnvs-sys-color-icon-default);--size-svg-8fcab8:1.25rem;[data-part=\"breadcrumbs-overflow-button-chevron-right-icon\"]{height:var(--cnvs-sys-space-x8);width:var(--cnvs-sys-space-x8);justify-content:center;align-items:center;display:inline-flex;:dir(rtl){transform:scaleX(-1);}}" }
}, "breadcrumbs-overflow-button-9c6f83");
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, ...breadcrumbsOverflowButtonStencil.parts.overflowButton, ...handleCsProp(elemProps) }), _jsx(SystemIcon, { icon: chevronRightSmallIcon, ...breadcrumbsOverflowButtonStencil.parts.chevronRightIcon, "aria-hidden": true })] }));
});