Skip to content

Releases: github/details-menu-element

v1.0.13

24 Oct 20:59
4719f8c
Compare
Choose a tag to compare

What's Changed

New Contributors

Full Changelog: v1.0.12...v1.0.13

v1.0.12

23 Aug 08:18
v1.0.12
d87b072
Compare
Choose a tag to compare

This release brings us a bugfix for click events in nested elements within a <label> element (See #54)

v1.0.11...v1.0.12

v1.0.11

12 Aug 09:13
v1.0.11
04474bb
Compare
Choose a tag to compare

This release includes a bugfix that will close the menu when a checked input is clicked.

v1.0.10...v1.0.11

v1.0.10

21 Jul 09:58
v1.0.10
03d0c3d
Compare
Choose a tag to compare

This release brings you updated dependencies as well as a bugfix for <summary autofocus>. The element should now focus on any autofocused element within the details menu when the summary has an autofocus attribute.

Thanks to @pablonete for their contributions to this realease.

v1.0.9...v1.0.10

v1.0.9

03 Jun 20:54
63f84ba
Compare
Choose a tag to compare
  • Convert to TypeScript/remove Flow type support.
  • Package is now type module. UMD build is removed.

v1.0.8

29 Jan 17:23
87a2ed3
Compare
Choose a tag to compare
  • Only close() if <details> was open. #45 This is to address an issue where user focus can be moved even though user was not interacting with the menu directly.

v1.0.7

20 Jan 13:19
1e383b3
Compare
Choose a tag to compare
  • Add type to HTMLElementTagNameMap in typescript declaration file (#44)

v1.0.6...v1.0.7

v1.0.5

10 Sep 19:35
958e01d
Compare
Choose a tag to compare

#36

  • Fix first menu item taking precedence over [autofocus] elements when opening the menu with keydown
  • Fix <details-menu> overriding its existing role attribute
  • Set role=button on <summary> when there isn't a role set, so it's exposed to AT

v1.0.4

09 Aug 08:16
d89b169
Compare
Choose a tag to compare
  • Merge pull request #35 from github/publish-to-gpr-as-well 3e5bebf
  • publish to GPR as a postpublish step fc523b6

v1.0.3...v1.0.4

1.0.4

09 Aug 08:16
3e5bebf
Compare
Choose a tag to compare

<details-menu> element

A menu that's opened with a <details> button.

Installation

$ npm install @github/details-menu-element

Usage

import '@github/details-menu-element'
<details>
  <summary>Robots</summary>
  <details-menu role="menu">
    <button type="button" role="menuitem">Hubot</button>
    <button type="button" role="menuitem">Bender</button>
    <button type="button" role="menuitem">BB-8</button>
  </details-menu>
</details>

Use data-menu-button and data-menu-button-text to have button text updated on menu item activation.

<details>
  <summary>Preferred robot: <span data-menu-button>None</span></summary>
  <details-menu role="menu">
    <button type="button" role="menuitem" data-menu-button-text>Hubot</button>
    <button type="button" role="menuitem" data-menu-button-text>Bender</button>
    <button type="button" role="menuitem" data-menu-button-text>BB-8</button>
  </details-menu>
</details>

Use label[tabindex="0"][role=menuitemradio/menuitemcheckbox] when dealing with radio and checkbox inputs menu items. Check states of the input element and the label will be synchronized.

<details>
  <summary>Preferred robot</summary>
  <details-menu role="menu">
    <label tabindex="0" role="menuitemradio">
      <input type="radio" name="robot" value="Hubot"> Hubot
    </label>
    <label tabindex="0" role="menuitemradio">
      <input type="radio" name="robot" value="Bender"> Bender
    </label>
    <label tabindex="0" role="menuitemradio">
      <input type="radio" name="robot" value="BB-8"> BB-8
    </label>
  </details-menu>
</details>

Events

  • details-menu-select (cancelable) - fired on <details-menu> with event.detail.relatedTarget being the item to be selected.
  • details-menu-selected - fired on <details-menu> with event.detail.relatedTarget being the item selected, after label is updated and menu is closed.

Deferred loading

Menu content can be loaded from a server by embedding an
<include-fragment> element.

<details>
  <summary>Robots</summary>
  <details-menu src="/robots" preload>
    <include-fragment>Loading…</include-fragment>
  </details-menu>
</details>

The src attribute value is copied to the <include-fragment> the first
time the <details> button is toggled open, which starts the server fetch.

If the preload attribute is present, the server fetch will begin on mouse
hover over the <details> button, so the content may be loaded by the time
the menu is opened.

Browser support

Browsers without native custom element support require a polyfill.

  • Chrome
  • Firefox
  • Safari
  • Microsoft Edge

Development

npm install
npm test

License

Distributed under the MIT license. See LICENSE for details.