@workday/canvas-kit-react/dist/es6/menu/lib/MenuOption.js

The parent module that contains all Workday Canvas Kit React components

import * as React from 'react';
import { createStencil } from '@workday/canvas-kit-styling';
import { brand, system } from '@workday/canvas-tokens-web';
import { checkSmallIcon } from '@workday/canvas-system-icons-web';
import { createSubcomponent, composeHooks, createElemPropsHook, createComponent, } from '@workday/canvas-kit-react/common';
import { SystemIcon, systemIconStencil } from '@workday/canvas-kit-react/icon';
import { OverflowTooltip } from '@workday/canvas-kit-react/tooltip';
import { mergeStyles } from '@workday/canvas-kit-react/layout';
import { isSelected, useListItemActiveDescendant, useListItemRegister, } from '@workday/canvas-kit-react/collection';
import { useMenuModel } from './useMenuModel';
import { menuItemStencil } from './MenuItem';
export const menuOptionStencil = createStencil({
    extends: menuItemStencil,
    base: { name: "d5h42w", styles: "box-sizing:border-box;&:where([aria-selected=true]){& :where([data-part=\"menu-item-selected\"]){opacity:var(--cnvs-sys-opacity-full);}&:where(.focus, :focus){--color-system-icon-212f69:var(--cnvs-brand-primary-accent);outline:none;background-color:var(--cnvs-brand-primary-base);color:var(--color-system-icon-212f69);}}" }
}, "menu-option-af4ba2");
const MenuOptionIcon = (elemProps) => {
    return React.createElement(SystemIcon, { "data-part": "menu-item-icon", ...elemProps });
};
const MenuOptionText = ({ children }) => {
    return (React.createElement(React.Fragment, null,
        React.createElement("span", { "data-part": "menu-item-text" }, children),
        React.createElement(SystemIcon, { icon: checkSmallIcon, "data-part": "menu-item-selected" })));
};
export const StyledMenuOption = createComponent('button')({
    displayName: 'MenuOption',
    Component: ({ children, ...elemProps }, ref, Element) => {
        return (React.createElement(Element, { ref: ref, ...mergeStyles(elemProps, menuOptionStencil()) }, typeof children === 'string' ? React.createElement(MenuOptionText, null, children) : children));
    },
});
export const useMenuOption = composeHooks(createElemPropsHook(useMenuModel)((model, ref, elemProps = {}) => {
    const id = elemProps['data-id'] || '';
    const selected = isSelected(id, model.state);
    const onMouseDown = (event) => {
        // Only left mouse button
        if (event.button === 0) {
            if (event.currentTarget.getAttribute('aria-disabled') !== 'true') {
                model.events.select({ id });
                if (model.state.mode === 'single') {
                    model.events.hide(event);
                }
            }
        }
        // prevent focus changes
        event.preventDefault();
    };
    return {
        role: 'option',
        'aria-selected': selected,
        onMouseDown,
    };
}), useListItemActiveDescendant, useListItemRegister);
export const MenuOption = createSubcomponent('li')({
    displayName: 'Menu.Item',
    modelHook: useMenuModel,
    elemPropsHook: useMenuOption,
    subComponents: {
        Icon: MenuOptionIcon,
        Text: MenuOptionText,
    },
})(({ children, ...elemProps }, Element) => {
    return (React.createElement(OverflowTooltip, { placement: "left" },
        React.createElement(StyledMenuOption, { as: Element, ...elemProps }, children)));
});