@workday/canvas-kit-react
Version:
The parent module that contains all Workday Canvas Kit React components
24 lines (23 loc) • 1.7 kB
JavaScript
import * as React from 'react';
import { chevronRightSmallIcon, relatedActionsIcon } from '@workday/canvas-system-icons-web';
import { colors, space } from '@workday/canvas-kit-react/tokens';
import { SystemIcon } from '@workday/canvas-kit-react/icon';
import { Flex } from '@workday/canvas-kit-react/layout';
import { composeHooks, createElemPropsHook, createSubcomponent, subModelHook, useIsRTL, } from '@workday/canvas-kit-react/common';
import { useOverflowListTarget } from '@workday/canvas-kit-react/collection';
import { useMenuTarget } from '@workday/canvas-kit-react/menu';
import { useBreadcrumbsModel } from './hooks/useBreadcrumbsModel';
import { TertiaryButton } from '@workday/canvas-kit-react/button';
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 (React.createElement(Flex, { as: "li", alignItems: "center", ...style },
React.createElement(TertiaryButton, { as: Element, icon: relatedActionsIcon, ...elemProps }),
React.createElement(SystemIcon, { icon: chevronRightSmallIcon, color: colors.licorice200, colorHover: colors.licorice200, size: 20, height: space.l, width: space.l, shouldMirror: useIsRTL(), cs: { justifyContent: 'center', alignItems: 'center', display: 'inline-flex' }, "aria-hidden": true })));
});