import React from 'react' ; import { createComponent , useDefaultModel } from '@workday/canvas-kit-react/common' ; import { MenuModel , MenuModelConfig , useMenuModel } from './useMenuModel' ; import { MenuPopper } from './MenuPopper' ; import { MenuTarget } from './MenuTarget' ; import { MenuItem } from './MenuItem' ; import { MenuCard } from './MenuCard' ; import { MenuList } from './MenuList' ; export const MenuModelContext = React . createContext < MenuModel > ( { } as any ) ; export interface MenuProps < T > extends MenuModelConfig < T > { /**
     * The contents of the Menu. Can be `Menu` children or any valid elements.
     */ children : React . ReactNode ; default model ? : MenuModel < T > ; } example export const Menu = createComponent ( ) ( { displayName : 'Menu' , Component : ( { children , model , ... config } ) => { const value = useDefaultModel ( model , config , useMenuModel ) ; return < MenuModelContext . Provider value = { value } > { children } < /MenuModelContext.Provider>; } , subComponents : { /**
         * The menu card is a non-semantic element used to give the dropdown menu its distinct visual
         * cue that the dropdown menu is floating above other content. A menu card usually contains a
         * menu list, but can also contain other elements like a header or footer.
         */ Card : MenuCard , example List : MenuList , /**
         * A menu item has an optional `name` prop that identifies the item in the menu list and will be
         * passed to the optional `onSelect` callback of the menu model. A menu item can contain any
         * HTML. If more complex HTML is provided, consider
         */ Item : MenuItem , Target : MenuTarget , /**
         * The "Popper" of a menu. The popper will appear around the `Menu.Target`. It renders a `div`
         * element that is portalled to the `document.body` which is controlled by the `PopupStack. The
         * `PopupStack` is not part of React. This means no extra props given to this component will be
         * forwarded to the `div` element, but the `ref` will be forwarded.
         */ Popper : MenuPopper , } , } ) ;