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

The parent module that contains all Workday Canvas Kit React components

import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
import { isSelected, useListItemActiveDescendant, useListItemRegister, } from '@workday/canvas-kit-react/collection';
import { composeHooks, createComponent, createElemPropsHook, createSubcomponent, } from '@workday/canvas-kit-react/common';
import { SystemIcon } from '@workday/canvas-kit-react/icon';
import { mergeStyles } from '@workday/canvas-kit-react/layout';
import { OverflowTooltip } from '@workday/canvas-kit-react/tooltip';
import { checkIcon } from '@workday/canvas-system-icons-web';
import { MenuItem, menuItemStencil } from './MenuItem';
import { useMenuModel } from './useMenuModel';
const MenuOptionText = createComponent('span')({
    Component: ({ ...elemProps }, ref, Element) => {
        return (_jsxs(_Fragment, { children: [_jsx(MenuItem.Text, { ref: ref, as: Element, ...elemProps }), _jsx(SystemIcon, { size: "md", ...menuItemStencil.parts.selected, icon: checkIcon })] }));
    },
});
export const StyledMenuOption = createComponent('li')({
    displayName: 'MenuOption',
    Component: ({ children, ...elemProps }, ref, Element) => {
        return (_jsx(Element, { ref: ref, ...mergeStyles(elemProps, menuItemStencil()), children: typeof children === 'string' ? _jsx(MenuOptionText, { children: 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') {
                // Keep the list cursor in sync with pointer selection so dependent UI (for example
                // `aria-activedescendant` and scroll-into-view in combobox) targets the clicked option.
                model.events.goTo({ id });
                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: MenuItem.Icon,
        Text: MenuOptionText,
    },
})(({ children, ...elemProps }, Element) => {
    return (_jsx(OverflowTooltip, { placement: "left", children: _jsx(StyledMenuOption, { as: Element, ...elemProps, children: children }) }));
});