f0062f5cbe
This exposes an api for <ToggleButton /> so you can call it from elsewhere, specifically here we use the api.click to close the dropdown menus which is required is the DOM containing the toggle button isn't redrawn as is the case with external links in a dropdown menu
31 lines
1.2 KiB
Handlebars
31 lines
1.2 KiB
Handlebars
{{yield (concat 'popover-menu-' guid)}}
|
|
<AriaMenu @keyboardAccess={{keyboardAccess}} as |change keypress ariaLabelledBy ariaControls ariaExpanded keypressClick|>
|
|
<ToggleButton
|
|
@checked={{if keyboardAccess ariaExpanded expanded}}
|
|
@onchange={{queue change (action "change")}}
|
|
as |api|>
|
|
<Ref @target={{this}} @name="toggle" @value={{api}} />
|
|
<button type="button" aria-haspopup="menu" onkeydown={{keypress}} onclick={{this.toggle.click}} id={{ariaLabelledBy}} aria-controls={{ariaControls}}>
|
|
<YieldSlot @name="trigger">
|
|
{{yield}}
|
|
</YieldSlot>
|
|
</button>
|
|
</ToggleButton>
|
|
<div class={{position}}>
|
|
<input type="checkbox" id={{concat 'popover-menu-' guid '-'}} />
|
|
{{#each submenus as |sub|}}
|
|
<input type="checkbox" id={{concat 'popover-menu-' guid '-' sub}} />
|
|
{{/each}}
|
|
{{#yield-slot name='header'}}
|
|
<div>
|
|
{{yield}}
|
|
</div>
|
|
{{else}}
|
|
{{/yield-slot}}
|
|
<ul role="menu" id={{ariaControls}} aria-labelledby={{ariaLabelledBy}} aria-expanded={{ariaExpanded}}>
|
|
<YieldSlot @name="menu" @params={{block-params (concat "popover-menu-" guid "-") send keypressClick this.toggle.click}}>
|
|
{{yield}}
|
|
</YieldSlot>
|
|
</ul>
|
|
</div>
|
|
</AriaMenu> |