npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@anypoint-web-components/anypoint-dropdown-menu

v0.1.24

Published

Accessible dropdown menu for Anypoint platform

Downloads

2,297

Vulnerabilities

Powered byPowered by Snyk
  • 0High
  • 0Medium
  • 0Low

Links

Git

Maintainers

jarrodekjarrodektwoplustwoonetwoplustwoonelbauretlbauretcarowrightcarowright

Keywords

web-componentsanypoint-web-componentsselectionlistdropdown

Readme

Deprecated

This component has been moved to anypoint-web-components/awc.

This component is based on Material Design menu and adjusted for Anypoint platform components.

Anypoint web components are set of components that allows to build Anypoint enabled UI in open source projects.

Exposed dropdown menus display the currently selected menu item above the menu. They can be used only when a single menu item can be chosen at a time.

Styling options

The element has three built-in themes:

  • Material Design - Filled
  • Material Design - Outlined
  • Anypoint Design - Compatibility

By default the input renders filled dropdown list.

Filled menu

Outlined style is rendered when outlined property is set.

Outlined menu

Anypoint ready styles are rendered when compatibility property is set.

Compatibility menu

OSS application should not use Anypoint based styling as it's protected by MuleSoft copyrights. This property is reserved for OSS applications embedded in the Anypoint platform.

Published on NPM

Usage

Installation

npm install --save @anypoint-web-components/anypoint-dropdown

In an HTML file

<html>
  <head>
    <script type="module">
      import "@anypoint-web-components/anypoint-dropdown/anypoint-dropdown.js";
      import "@anypoint-web-components/anypoint-listbox/anypoint-listbox.js";
      import "@anypoint-web-components/anypoint-item/anypoint-item.js";
    </script>
  </head>
  <body>
    <anypoint-dropdown-menu
      aria-label="Select dinosaur from the list of available options"
    >
      <label slot="label">Selected dinosaur</label>
      <anypoint-listbox slot="dropdown-content" tabindex="-1">
        <anypoint-item>item 1</anypoint-item>
        <anypoint-item>item 2</anypoint-item>
        <anypoint-item>item 3</anypoint-item>
      </anypoint-listbox>
    </anypoint-dropdown-menu>
  </body>
</html>

Replacement for the anypoint-listbox element

It is possible to use different element than anypoint-listbox. The replacement should use AnypointMenuMixin which provides API for the dropdown element to work.

Value selection

When the user selects one of the options in the dropdown menu the list is closed and the rendered label is one of the following (in order):

  • label property of the selected item
  • label or data-label attribute io the selected item
  • innerText of the selected item

The same value is set as value property.

The selection can be controlled by setting selected attribute/property on the anypoint-listbox or the element implementing AnypointMenuMixin.

<anypoint-dropdown-menu
  aria-label="Select dinosaur from the list of available options"
>
  <label slot="label">Selected dinosaur</label>
  <anypoint-listbox slot="dropdown-content" tabindex="-1" selected="0">
    <anypoint-item label="My item 1">item 1</anypoint-item>
    <anypoint-item label="My item 2">item 2</anypoint-item>
    <anypoint-item>item 3</anypoint-item>
  </anypoint-listbox>
</anypoint-dropdown-menu>

By default the selected value is set to My item 1. When selecting option 3 then the label value becomes item 3.

Assistive text

Assistive text allows the user to better understand what kind of input is required. It can be an info message or invalid message when invalid input has been detected.

Info message

Info message provides the user with additional description for the field. It should be used when the label can be confusing or to ensure the user about the reason of collecting the input.

<anypoint-dropdown-menu infomessage="Will be added to your order.">
  <label slot="label">Select a dinosaur</label>
  <anypoint-listbox slot="dropdown-content" tabindex="-1">
    <anypoint-item>item 1</anypoint-item>
    <anypoint-item>item 2</anypoint-item>
    <anypoint-item>item 3</anypoint-item>
  </anypoint-listbox>
</anypoint-dropdown-menu>

Info message

Do not try to put too detailed information. The user should be able to scan the message in a fraction of a second. Treat it as an additional text for the label.

Invalid message

Error message should help the user recover from the error state. Use clear message with simple instructions of how to fix the problem, for example Only letters are allowed.

<anypoint-dropdown-menu
  invalidmessage="This value is required"
  invalid
  required
>
  <label slot="label">Select a dinosaur</label>
  <anypoint-listbox slot="dropdown-content" tabindex="-1">
    <anypoint-item>item 1</anypoint-item>
    <anypoint-item>item 2</anypoint-item>
    <anypoint-item>item 3</anypoint-item>
  </anypoint-listbox>
</anypoint-dropdown-menu>

Invalid message

Form-associated custom elements

The form-associated custom elements allows to associate a custom element with a <form> element. Original custom elements spec does not allow this. The form-associated custom elements may not be supported in some browsers so custom form elements may be required to be used (for example iron-form).

The element supports this API in browser that has this API implemented. This means that the element behaves like a <select> element when inserted into the form element. See demo page for an example.

Validation

The element support required and autoValidate properties. When the element is required then it renders invalid state when validate() or checkValidity() function is called. The validate() function is provided by ValidatableMixin for custom elements. checkValidity() function calls validate() function, and, if available, internal checkValidity() function provided by form-associated custom elements API.

The autoValidate option allows to automatically call validate function when value change. It can be used with custom validators implementing ValidatorMixin.

<anypoint-dropdown-menu required autovalidate>
  <label slot="label">Selected dinosaur</label>
  <anypoint-listbox slot="dropdown-content">
    <anypoint-item>item 1</anypoint-item>
    <anypoint-item>item 2</anypoint-item>
    <anypoint-item>item 3</anypoint-item>
  </anypoint-listbox>
</anypoint-dropdown-menu>

Accessibility

The element works perfectly with anypoint-listbox which together creates an accessible list of options. The listbox can be replaced by any other element that support similar functionality but make sure it has an appropriate aria support.

Development

git clone https://github.com/anypoint-web-components/anypoint-dropdown-menu
cd anypoint-dropdown-menu
npm install

Running the demo locally

npm start

Running the tests

npm test