sp-menu

NPM 1.0.1

View Storybook

Try it on webcomponents.dev
Overview API Changelog

Overview

An <sp-menu> is used for creating a menu list. The various elements inside a menu are given as <sp-menu-group>, <sp-menu-item>, or <sp-menu-divider>. Often a <sp-menu> element will appear in a <sp-popover> element so that it displays as a toggling menu.

Usage

See it on NPM! How big is this package in your project? Try it on webcomponents.dev

yarn add @spectrum-web-components/menu

Import the side effectful registration of <sp-menu>, <sp-menu-group>, <sp-menu-item>, or <sp-menu-divider> individually as follows:

import '@spectrum-web-components/menu/sp-menu.js';
import '@spectrum-web-components/menu/sp-menu-group.js';
import '@spectrum-web-components/menu/sp-menu-item.js';
import '@spectrum-web-components/menu/sp-menu-divider.js';

When looking to leverage the Menu, MenuGroup, MenuItem, or MenuDivider base classes as a type and/or for extension purposes, do so via:

import {
    Menu,
    MenuGroup,
    MenuItem,
    MenuDivider
} from '@spectrum-web-components/menu';

Anatomy

<sp-menu label="Selection type">
    <sp-menu-item>
        Deselect
    </sp-menu-item>
    <sp-menu-item>
        Select inverse
    </sp-menu-item>
    <sp-menu-item>
        Feather...
    </sp-menu-item>
    <sp-menu-item>
        Select and mask...
    </sp-menu-item>
    <sp-menu-item>
        Save selection
    </sp-menu-item>
    <sp-menu-item disabled>
        Make work path
    </sp-menu-item>
</sp-menu>

Popover menus

Often an <sp-menu> element will be delivered inside of an <sp-popover> element when displaying it above other content.

<sp-popover open style="position: relative" label="Selection type">
    <sp-menu>
        <sp-menu-item value="item-1">Deselect</sp-menu-item>
        <sp-menu-item value="item-2">Select inverse</sp-menu-item>
        <sp-menu-item value="item-3">Feather...</sp-menu-item>
        <sp-menu-item value="item-4">Select and mask...</sp-menu-item>
        <sp-menu-item value="item-5">Save selection</sp-menu-item>
        <sp-menu-item value="item-6" disabled>Make work path</sp-menu-item>
    </sp-menu>
</sp-popover>

Labels

To render accessibly, an <sp-menu> element or its parent <sp-popover> must have a label. For an accessible label that is visibly hidden, but can still be read by assistive technology, use the label attribute.

Menu with label 
<sp-menu id="menu-label-attribute" label="Selection type">
    <sp-menu-item>Deselect</sp-menu-item>
    <sp-menu-item>Select inverse</sp-menu-item>
    <sp-menu-item>Feather...</sp-menu-item>
    <sp-menu-item>Select and mask...</sp-menu-item>
    <sp-menu-divider></sp-menu-divider>
    <sp-menu-item>Save selection</sp-menu-item>
    <sp-menu-item disabled>Make work path</sp-menu-item>
</sp-menu>
 Popover with label 
<sp-popover open style="position: relative" label="Selection type:">
    <sp-menu id="popover-label-attribute">
        <sp-menu-item>Deselect</sp-menu-item>
        <sp-menu-item>Select inverse</sp-menu-item>
        <sp-menu-item>Feather...</sp-menu-item>
        <sp-menu-item>Select and mask...</sp-menu-item>
        <sp-menu-divider></sp-menu-divider>
        <sp-menu-item>Save selection</sp-menu-item>
        <sp-menu-item disabled>Make work path</sp-menu-item>
    </sp-menu>
</sp-popover>

Options

Sizes

Small 
<sp-menu id="menu-s" size="s" label="Selection type">
    <sp-menu-item>Deselect</sp-menu-item>
    <sp-menu-item>Select inverse</sp-menu-item>
    <sp-menu-item>Feather...</sp-menu-item>
    <sp-menu-item>Select and mask...</sp-menu-item>
    <sp-menu-divider></sp-menu-divider>
    <sp-menu-item>Save selection</sp-menu-item>
    <sp-menu-item disabled>Make work path</sp-menu-item>
</sp-menu>
<sp-popover open style="position: relative" label="Selection type:">
    <sp-menu id="menu-s-popover" size="s">
        <sp-menu-item>Deselect</sp-menu-item>
        <sp-menu-item>Select inverse</sp-menu-item>
        <sp-menu-item>Feather...</sp-menu-item>
        <sp-menu-item>Select and mask...</sp-menu-item>
        <sp-menu-divider></sp-menu-divider>
        <sp-menu-item>Save selection</sp-menu-item>
        <sp-menu-item disabled>Make work path</sp-menu-item>
    </sp-menu>
</sp-popover>
 Medium 
<sp-menu id="menu-m" size="m" label="Selection type">
    <sp-menu-item>Deselect</sp-menu-item>
    <sp-menu-item>Select inverse</sp-menu-item>
    <sp-menu-item>Feather...</sp-menu-item>
    <sp-menu-item>Select and mask...</sp-menu-item>
    <sp-menu-divider></sp-menu-divider>
    <sp-menu-item>Save selection</sp-menu-item>
    <sp-menu-item disabled>Make work path</sp-menu-item>
</sp-menu>
<sp-popover open style="position: relative" label="Selection type:">
    <sp-menu id="menu-m-popover" size="m">
        <sp-menu-item>Deselect</sp-menu-item>
        <sp-menu-item>Select inverse</sp-menu-item>
        <sp-menu-item>Feather...</sp-menu-item>
        <sp-menu-item>Select and mask...</sp-menu-item>
        <sp-menu-divider></sp-menu-divider>
        <sp-menu-item>Save selection</sp-menu-item>
        <sp-menu-item disabled>Make work path</sp-menu-item>
    </sp-menu>
</sp-popover>
 Large 
<sp-menu id="menu-l" size="l" label="Selection type">
    <sp-menu-item>Deselect</sp-menu-item>
    <sp-menu-item>Select inverse</sp-menu-item>
    <sp-menu-item>Feather...</sp-menu-item>
    <sp-menu-item>Select and mask...</sp-menu-item>
    <sp-menu-divider></sp-menu-divider>
    <sp-menu-item>Save selection</sp-menu-item>
    <sp-menu-item disabled>Make work path</sp-menu-item>
</sp-menu>
<sp-popover open style="position: relative" label="Selection type:">
    <sp-menu id="menu-l-popover" size="l">
        <sp-menu-item>Deselect</sp-menu-item>
        <sp-menu-item>Select inverse</sp-menu-item>
        <sp-menu-item>Feather...</sp-menu-item>
        <sp-menu-item>Select and mask...</sp-menu-item>
        <sp-menu-divider></sp-menu-divider>
        <sp-menu-item>Save selection</sp-menu-item>
        <sp-menu-item disabled>Make work path</sp-menu-item>
    </sp-menu>
</sp-popover>
 Extra Large 
<sp-menu id="menu-xl" size="xl" label="Selection type">
    <sp-menu-item>Deselect</sp-menu-item>
    <sp-menu-item>Select inverse</sp-menu-item>
    <sp-menu-item>Feather...</sp-menu-item>
    <sp-menu-item>Select and mask...</sp-menu-item>
    <sp-menu-divider></sp-menu-divider>
    <sp-menu-item>Save selection</sp-menu-item>
    <sp-menu-item disabled>Make work path</sp-menu-item>
</sp-menu>
<sp-popover open style="position: relative" label="Selection type:">
    <sp-menu id="menu-xl-popover" size="xl">
        <sp-menu-item>Deselect</sp-menu-item>
        <sp-menu-item>Select inverse</sp-menu-item>
        <sp-menu-item>Feather...</sp-menu-item>
        <sp-menu-item>Select and mask...</sp-menu-item>
        <sp-menu-divider></sp-menu-divider>
        <sp-menu-item>Save selection</sp-menu-item>
        <sp-menu-item disabled>Make work path</sp-menu-item>
    </sp-menu>
</sp-popover>

Selection

The <sp-menu> element can be instructed to maintain a selection via the selects attribute. Depending on the chosen algorithm, the <sp-menu> element will hold a value property and manage the selected state of its <sp-menu-item> descendants.

  • When selects="single", the <sp-menu> element will maintain one selected item after an initial selection is made.
  • When selects is set to multiple, the <sp-menu> element will maintain zero or more selected items.
  • When selects is set to inherit, the <sp-menu> element will allow its <sp-menu-item> children to participate in the selection of its nearest <sp-menu> ancestor.
Single 
<p>
    The value of the `&lt;sp-menu&gt;` element is:
    <span id="single-value"></span>
</p>
<sp-menu
    label="Choose a shape"
    selects="single"
    onchange="this.previousElementSibling.querySelector('#single-value').textContent=this.value"
>
    <sp-menu-item value="item-1">Square</sp-menu-item>
    <sp-menu-item value="item-2" selected>Triangle</sp-menu-item>
    <sp-menu-item value="item-3">Parallelogram</sp-menu-item>
    <sp-menu-item value="item-4">Star</sp-menu-item>
    <sp-menu-item value="item-5">Hexagon</sp-menu-item>
    <sp-menu-item value="item-6" disabled>Circle</sp-menu-item>
</sp-menu>
 Multiple 
<p>
    The value of the `&lt;sp-menu&gt;` element is:
    <span id="multiple-value">item-3,item-4</span>
</p>
<sp-menu
    label="Choose some fruit"
    selects="multiple"
    onchange="this.previousElementSibling.querySelector('#multiple-value').textContent=this.value"
>
    <sp-menu-item value="item-1">Apple</sp-menu-item>
    <sp-menu-item value="item-2">Banana</sp-menu-item>
    <sp-menu-item value="item-3" selected>Goji berry</sp-menu-item>
    <sp-menu-item value="item-4" selected>Grapes</sp-menu-item>
    <sp-menu-item value="item-5" disabled>Kumquat</sp-menu-item>
    <sp-menu-item value="item-6">Orange</sp-menu-item>
</sp-menu>
 Inherit 
<p>
    The value of the `&lt;sp-menu&gt;` element is:
    <span id="inherit-value">item-3 || item-4 || item-8 || item-11</span>
</p>
<sp-menu
    label="Choose some groceries"
    selects="multiple"
    value-separator=" || "
    onchange="this.previousElementSibling.querySelector('#inherit-value').textContent=this.value"
>
    <sp-menu label="Fruit" selects="inherit">
        <sp-menu-item value="item-1">Apple</sp-menu-item>
        <sp-menu-item value="item-2">Banana</sp-menu-item>
        <sp-menu-item value="item-3" selected>Goji berry</sp-menu-item>
        <sp-menu-item value="item-4" selected>Grapes</sp-menu-item>
        <sp-menu-item value="item-5" disabled>Kumquat</sp-menu-item>
        <sp-menu-item value="item-6">Orange</sp-menu-item>
    </sp-menu>
    <sp-menu label="Vegetables" selects="inherit">
        <sp-menu-item value="item-7">Carrot</sp-menu-item>
        <sp-menu-item value="item-8" selected>Garlic</sp-menu-item>
        <sp-menu-item value="item-9" disabled>Lettuce</sp-menu-item>
        <sp-menu-item value="item-10">Onion</sp-menu-item>
        <sp-menu-item value="item-11" selected>Potato</sp-menu-item>
        <sp-menu-item value="item-12">Tomato</sp-menu-item>
    </sp-menu>
</sp-menu>

Behaviors

"change" event

Regardless of whether or not <sp-menu> carries a selection, when one of the <sp-menu-item> children that it manages is activated, the <sp-menu> element will dispatch a change event. At dispatch time, even when a selection is not held due to the absence of the selects attribute, the value of the <sp-menu> will correspond to the <sp-menu-item> that was activated. When the selects attribute is present, this value will persist beyond the lifecycle of the change event. When selects="multiple", the values of multiple items will be comma separated, unless otherwise set via the value-separator attribute.

Note: The change event is only dispatched on a left mouse click or Enter/Space keypress. Right/Middle mouse clicks will not dispatch the change event.

Accessibility

Review the accessibility guidelines for the menu-item and menu-group descendants.

Include a label

A menu is required to have an accessible label.

1.0.1 (2024-11-11)

Bug Fixes

  • menu: prevent sp-menu-item text-align cascading (#4868) (6663820)

1.0.0 (2024-10-31)

Note: Version bump only for package @spectrum-web-components/menu

0.49.0 (2024-10-15)

Note: Version bump only for package @spectrum-web-components/menu

0.48.1 (2024-10-01)

Note: Version bump only for package @spectrum-web-components/menu

0.48.0 (2024-09-17)

Bug Fixes

  • menu: allow menu-item to support arbitrary element as the submenu root (#4720) (4c6a0dc)

0.47.2 (2024-09-03)

Note: Version bump only for package @spectrum-web-components/menu

0.47.1 (2024-08-27)

Note: Version bump only for package @spectrum-web-components/menu

0.47.0 (2024-08-20)

Features

  • breadcrumbs: add Breadcrumbs component (#4578) (acd4b5e)

0.46.0 (2024-08-08)

Bug Fixes

  • menu: should not make a selection on right click (#4642) (d269629)

Features

  • upgrade menu and dialog grid css (#4638) (ab9d468)

0.45.0 (2024-07-30)

Note: Version bump only for package @spectrum-web-components/menu

0.44.0 (2024-07-15)

Features

  • action-bar: support for action-menus (#3780) (4aff599)

0.43.0 (2024-06-11)

Bug Fixes

  • menu: enable numpad arrow and Enter keys (#4492) (012c411)

0.42.5 (2024-05-24)

Note: Version bump only for package @spectrum-web-components/menu

0.42.4 (2024-05-14)

Bug Fixes

  • action-menu: allow menu groups to handle their own selections (#4397) (5a19051)

0.42.3 (2024-05-01)

Note: Version bump only for package @spectrum-web-components/menu

0.42.2 (2024-04-03)

Note: Version bump only for package @spectrum-web-components/menu

0.42.1 (2024-04-02)

Note: Version bump only for package @spectrum-web-components/menu

0.42.0 (2024-03-19)

Bug Fixes

  • menu: release synthetic "click" promise to unblock keyboard interactions (f8aecf3)

Features

  • asset: use core tokens (99e76f4)

0.41.2 (2024-03-05)

Bug Fixes

  • menu: fix css for disabled "value" slots in menu items (#4113) (3c5855d)

0.41.1 (2024-02-22)

Bug Fixes

  • menu: correct disabled menu item's chevron to appropriate colour (#4052) (30f5bb5)

0.41.0 (2024-02-13)

Bug Fixes

  • support generating random IDs outside of secure contexts (485a67c)

0.40.5 (2024-02-05)

Bug Fixes

  • menu: process ":active" styles (7917583)

0.40.4 (2024-01-29)

Bug Fixes

  • picker,action-menu,split-button: update interaction model (#3935) (bae7d52)

0.40.3 (2024-01-11)

Bug Fixes

  • overlay: move closed overlays to "display: none" (fc0278b)

0.40.2 (2023-12-18)

Bug Fixes

  • menu: support navigating to and selecting Menu Items in Menu Groups (8469ab2)

0.40.1 (2023-12-05)

Note: Version bump only for package @spectrum-web-components/menu

0.40.0 (2023-11-16)

Note: Version bump only for package @spectrum-web-components/menu

0.39.4 (2023-11-02)

Note: Version bump only for package @spectrum-web-components/menu

0.39.3 (2023-10-18)

Bug Fixes

  • update deps graph, fix imports (f633005)

0.39.2 (2023-10-13)

Bug Fixes

  • menu: conditionally access slots for their assigned content (#3717) (c045822)

0.39.1 (2023-10-06)

Bug Fixes

  • menu: allow change events to be direct (#3689) (b2cd3da)

0.39.0 (2023-09-25)

Bug Fixes

  • menu: allow Menu elements to be controlled (74ed7fb)
  • menu: manage deeply slotted menu items and initial focus (7f9ad69)

0.38.0 (2023-09-05)

Bug Fixes

  • menu: added support for menu item description (#3559) (ce99528)
  • menu: correct types import for .d.ts file creation (a11d264)

0.37.0 (2023-08-18)

Bug Fixes

  • ensure submenus stay open when root it clicked again (83ced1c)

Features

  • menu: prepare for Overlay v2 and less connnected/disconnected responsibilities (5dfb71e)

Performance Improvements

  • make lots of things lazy (b8fa3ad)
  • make submenus lazier (a2d661c)
  • make submenus lazy (93531b9)

0.36.0 (2023-08-18)

Features

  • menu: convert to core tokens (#3254) (da43540)

0.35.0 (2023-07-31)

Bug Fixes

  • menu item missing aria labels (#3417) (0d04869)

0.34.0 (2023-07-11)

Note: Version bump only for package @spectrum-web-components/menu

0.33.2 (2023-06-14)

Note: Version bump only for package @spectrum-web-components/menu

0.33.1 (2023-06-14)

Bug Fixes

  • menu: #3164 plug memory leak with gobal events (ff589d4)

0.33.0 (2023-06-08)

Note: Version bump only for package @spectrum-web-components/menu

0.32.0 (2023-06-01)

Note: Version bump only for package @spectrum-web-components/menu

0.31.0 (2023-05-17)

Note: Version bump only for package @spectrum-web-components/menu

0.30.0 (2023-05-03)

Bug Fixes

  • abstract "hasVisibleFocusInTree" functionality and return trigger focus after close (4f39f2c)
  • add "value" slot to sp-menu-item (e1bd264)
  • add icon present and icon-only support to Picker (f6887a3)
  • add value/selection checks to the tests and fix up the value logic (933106f)
  • address a11y issues raised by updating our dependencies (4f06477)
  • correct @element jsDoc listing across library (c97a632)
  • correctly delivery visuals and mouse interactions for litAnchor and extensions (0ae889a)
  • dropdown: improve accessibility (389d9d9)
  • ensure Action Menu Item with [href] close the menu (6b3d87f)
  • ensure browser understandable extensions (f4e59f7)
  • ensure that an overlay can be released even if it does not complete its fade in animation (4cbb36f)
  • ensure that entering an ancestor Menu Item without a submen closes related submenus (efe5fa1)
  • include "type" in package.json, generate custom-elements.json (1a8d716)
  • include default export in the "exports" fields (f32407d)
  • include the "types" entry in package.json files (b432f59)
  • match "pointerup" listeners with "pointercancel" for full coverage (7f2ce92)
  • menu: add support for submenu interactions (68399af)
  • menu: allow for settign "selected" async from above (9d7f622)
  • menu: cache item parent element to correct disconnecting event dispatch (f375510)
  • menu: clarify menu internal focus management via preventScroll option (9ae092c)
  • menu: disabled menu-item should not open submenu (33848bc)
  • menu: ensure active descendant is in view when activated (6edc351)
  • menu: ensure that Groups in Action Menus are rendered with the correct width (a996a10)
  • menu: include all direct dependencies (aa7327f)
  • menu: manage tabindex and focus entry correctly (3b1a250)
  • menu: only scrollIntoView when keyboard navigating (f4e9278)
  • menu: pass current focus visibility to menu items (2d3bf80)
  • menu: patch undefined lastFocusedItem (772a7ea)
  • menu: prevent infinite loop when focus() (e4e98a3)
  • menu: support menu item list change in deep decendents (b2b47f3)
  • normalize "event" and "error" argument names (8d382cd)
  • picker: allow menu items to be added, updated, and removed (73511ba)
  • prepare for querying child items while disconnected (f4152a5)
  • prevent infinite loops when all children are [disabled] (2deac3d)
  • prevent leaving multiple submenus open at a time (d2bfbb2)
  • remove usage where deprecated (387db3b)
  • simplify focus application in Menu (6140169)
  • split-button: hide "selected" item from menu (322a966)
  • stop merging selectors in a way that alters the cascade (369388f)
  • style clean up (49e1537)
  • update consumption of Spectrum CSS for latest version (ed2305b)
  • update latest Spectrum CSS beta releases (d8d3acc)
  • update Picker label via MutationObserver instead of "slotchange" (196998e)
  • update role application logic to not overwrite menu* roles (94b6aec)
  • update side effect listings (8160d3a)
  • update to latest spectrum-css packages (a5ca19f)
  • use icons without "size" values (3fc7c91)
  • use latest @spectrum-css/* versions (c35eb86)

Features

  • action-button: add action button pattern (03ac00a)
  • action-group: manage "one" and "multiple" selections (6fad59e)
  • add screenshot regression testing to CI (8205dfe)
  • add selects attribute to menu (bdf2578)
  • adopt DNA@7 base Spectrum CSS (e08cafd)
  • allow dir management by sp-theme elements (2d10158)
  • conditionally load focus-visible polyfill (6b5e5cf)
  • delivery dev mode messages in various packages (62370a1)
  • icons-workflow: vend fully registered icon components (941f3a4)
  • include all Dev Mode files in side effects (f70817c)
  • leverage "exports" field in package.json (321abd7)
  • menu: update spectrum css input (8c7e18a)
  • overlay: manage focus throwing and tab trapping (27a0b53)
  • picker: process field-label content for more accurate a11y tree (dc9df54)
  • picker: support responsive delivery of menu (20031d1)
  • reparentChildren - refactored arguments - breaking change (dea2bc5)
  • shared pkg versions, devmode define warning, registry-conflicts docs (6e49565)
  • split-button: add split-button pattern (4833a59)
  • update lit-* dependencies, wip (377f3c8)
  • update Menu Divider for new Spectrum CSS output (aca7e2d)
  • update to Spectrum CSS v3.0.0 (e8b3d8f)
  • use :focus-visable (via polyfill) instead of :focus (11c6fc7)
  • use @adobe/spectrum-css@2.15.1 (3918888)
  • use latest exports specification (a7ecf4b)

Performance Improvements

  • reorganize inheritance and composition in Menu Items (d96ccb6)
  • use "sideEffects" listing in package.json (7271614)
  • use imported TypeScript helpers instead of inlining them (cc2bd0a)

Reverts

  • Revert "chore: release new versions" (a6d655d)

0.16.17 (2023-04-24)

Note: Version bump only for package @spectrum-web-components/menu

0.16.16 (2023-04-05)

Note: Version bump only for package @spectrum-web-components/menu

0.16.15 (2023-03-22)

Note: Version bump only for package @spectrum-web-components/menu

0.16.14 (2023-03-08)

Note: Version bump only for package @spectrum-web-components/menu

0.16.13 (2023-02-13)

Note: Version bump only for package @spectrum-web-components/menu

0.16.12 (2023-02-08)

Bug Fixes

  • menu: patch undefined lastFocusedItem (772a7ea)
  • prepare for querying child items while disconnected (f4152a5)

0.16.11 (2023-01-23)

Note: Version bump only for package @spectrum-web-components/menu

0.16.10 (2023-01-09)

Note: Version bump only for package @spectrum-web-components/menu

0.16.9 (2022-12-08)

Note: Version bump only for package @spectrum-web-components/menu

0.16.8 (2022-11-21)

Bug Fixes

  • ensure that an overlay can be released even if it does not complete its fade in animation (4cbb36f)

0.16.7 (2022-11-14)

Note: Version bump only for package @spectrum-web-components/menu

0.16.6 (2022-10-28)

Bug Fixes

  • ensure Action Menu Item with [href] close the menu (6b3d87f)

0.16.5 (2022-10-17)

Bug Fixes

  • menu: ensure that Groups in Action Menus are rendered with the correct width (a996a10)

0.16.4 (2022-10-10)

Bug Fixes

  • match "pointerup" listeners with "pointercancel" for full coverage (7f2ce92)

0.16.3 (2022-09-15)

Note: Version bump only for package @spectrum-web-components/menu

0.16.2 (2022-09-14)

Note: Version bump only for package @spectrum-web-components/menu

0.16.1 (2022-08-24)

Note: Version bump only for package @spectrum-web-components/menu

0.16.0 (2022-08-09)

Features

  • include all Dev Mode files in side effects (f70817c)

0.15.0 (2022-08-04)

Features

  • delivery dev mode messages in various packages (62370a1)

0.14.4 (2022-07-18)

Note: Version bump only for package @spectrum-web-components/menu

0.14.3 (2022-06-29)

Bug Fixes

  • ensure that entering an ancestor Menu Item without a submen closes related submenus (efe5fa1)
  • update Picker label via MutationObserver instead of "slotchange" (196998e)

0.14.2 (2022-06-07)

Bug Fixes

  • prevent leaving multiple submenus open at a time (d2bfbb2)
  • menu: disabled menu-item should not open submenu (33848bc)

0.14.1 (2022-05-27)

Bug Fixes

  • update consumption of Spectrum CSS for latest version (ed2305b)

0.14.0 (2022-05-12)

Features

  • update Menu Divider for new Spectrum CSS output (aca7e2d)

0.13.0 (2022-04-21)

Features

  • conditionally load focus-visible polyfill (6b5e5cf)
  • reparentChildren - refactored arguments - breaking change (dea2bc5)

0.12.5 (2022-03-30)

Note: Version bump only for package @spectrum-web-components/menu

0.12.4 (2022-03-08)

Note: Version bump only for package @spectrum-web-components/menu

0.12.3 (2022-03-08)

Note: Version bump only for package @spectrum-web-components/menu

0.12.2 (2022-03-04)

Bug Fixes

  • menu: add support for submenu interactions (68399af)

0.12.1 (2022-02-22)

Note: Version bump only for package @spectrum-web-components/menu

0.12.0 (2022-02-02)

Features

  • picker: support responsive delivery of menu (20031d1)

0.11.3 (2022-01-26)

Note: Version bump only for package @spectrum-web-components/menu

0.11.2 (2022-01-07)

Note: Version bump only for package @spectrum-web-components/menu

0.11.1 (2021-12-13)

Bug Fixes

  • picker: allow menu items to be added, updated, and removed (73511ba)

0.11.0 (2021-11-08)

Features

  • update lit-* dependencies, wip (377f3c8)

0.10.1 (2021-11-08)

Bug Fixes

  • abstract "hasVisibleFocusInTree" functionality and return trigger focus after close (4f39f2c)

0.10.0 (2021-11-02)

Features

  • adopt DNA@7 base Spectrum CSS (e08cafd)

0.9.6 (2021-10-12)

Note: Version bump only for package @spectrum-web-components/menu

0.9.5 (2021-10-05)

Bug Fixes

  • menu: cache item parent element to correct disconnecting event dispatch (f375510)

0.9.4 (2021-09-20)

Note: Version bump only for package @spectrum-web-components/menu

0.9.3 (2021-09-13)

Bug Fixes

  • simplify focus application in Menu (6140169)

0.9.2 (2021-08-24)

Bug Fixes

  • correct @element jsDoc listing across library (c97a632)

0.9.1 (2021-08-17)

Performance Improvements

  • reorganize inheritance and composition in Menu Items (d96ccb6)

0.9.0 (2021-08-03)

Bug Fixes

  • add value/selection checks to the tests and fix up the value logic (933106f)
  • split-button: hide "selected" item from menu (322a966)

Features

  • add selects attribute to menu (bdf2578)

0.8.10 (2021-07-22)

Bug Fixes

  • style clean up (49e1537)

0.8.9 (2021-07-01)

Bug Fixes

  • add "value" slot to sp-menu-item (e1bd264)
  • add icon present and icon-only support to Picker (f6887a3)

0.8.8 (2021-06-16)

Bug Fixes

  • update role application logic to not overwrite menu* roles (94b6aec)

0.8.7 (2021-06-07)

Bug Fixes

  • menu: clarify menu internal focus management via preventScroll option (9ae092c)

0.8.6 (2021-05-24)

Note: Version bump only for package @spectrum-web-components/menu

0.8.5 (2021-05-12)

Bug Fixes

  • menu: pass current focus visibility to menu items (2d3bf80)

0.8.4 (2021-04-15)

Bug Fixes

  • menu: manage tabindex and focus entry correctly (3b1a250)
  • menu: only scrollIntoView when keyboard navigating (f4e9278)

0.8.3 (2021-04-09)

Note: Version bump only for package @spectrum-web-components/menu

0.8.2 (2021-03-29)

Note: Version bump only for package @spectrum-web-components/menu

0.8.1 (2021-03-22)

Note: Version bump only for package @spectrum-web-components/menu

0.8.0 (2021-03-22)

Bug Fixes

  • correctly delivery visuals and mouse interactions for litAnchor and extensions (0ae889a)
  • remove usage where deprecated (387db3b)

Features

  • picker: process field-label content for more accurate a11y tree (dc9df54)

0.7.1 (2021-03-05)

Note: Version bump only for package @spectrum-web-components/menu

0.7.0 (2021-03-04)

Bug Fixes

  • menu: ensure active descendant is in view when activated (6edc351)

Features

  • use latest exports specification (a7ecf4b)

0.6.3 (2021-02-11)

Bug Fixes

  • update to latest spectrum-css packages (a5ca19f)

0.6.2 (2021-02-02)

Note: Version bump only for package @spectrum-web-components/menu

0.6.1 (2021-01-28)

Note: Version bump only for package @spectrum-web-components/menu

0.6.0 (2021-01-21)

Bug Fixes

  • address a11y issues raised by updating our dependencies (4f06477)
  • include the "types" entry in package.json files (b432f59)
  • prevent infinite loops when all children are [disabled] (2deac3d)
  • stop merging selectors in a way that alters the cascade (369388f)
  • use icons without "size" values (3fc7c91)
  • menu: prevent infinite loop when focus() (e4e98a3)
  • update latest Spectrum CSS beta releases (d8d3acc)
  • use latest @spectrum-css/* versions (c35eb86)

Features

  • action-button: add action button pattern (03ac00a)
  • action-group: manage "one" and "multiple" selections (6fad59e)
  • icons-workflow: vend fully registered icon components (941f3a4)
  • menu: update spectrum css input (8c7e18a)

0.5.0 (2021-01-13)

Bug Fixes

  • include the "types" entry in package.json files (b432f59)
  • prevent infinite loops when all children are disabled
  • stop merging selectors in a way that alters the cascade (369388f)
  • use icons without "size" values (3fc7c91)
  • menu: prevent infinite loop when focus() (e4e98a3)
  • update latest Spectrum CSS beta releases (d8d3acc)
  • use latest @spectrum-css/* versions (c35eb86)

Features

  • action-button: add action button pattern (03ac00a)
  • action-group: manage "one" and "multiple" selections (6fad59e)
  • icons-workflow: vend fully registered icon components (941f3a4)
  • menu: update spectrum css input (8c7e18a)

0.4.4 (2020-10-12)

Note: Version bump only for package @spectrum-web-components/menu

0.4.3 (2020-10-12)

Bug Fixes

  • include default export in the "exports" fields (f32407d)
  • dropdown: improve accessibility (389d9d9)

0.4.2 (2020-09-25)

Bug Fixes

  • update side effect listings (8160d3a)

0.4.1 (2020-09-14)

Note: Version bump only for package @spectrum-web-components/menu

0.4.0 (2020-08-31)

Features

  • allow dir management by sp-theme elements (2d10158)
  • update to Spectrum CSS v3.0.0 (e8b3d8f)
  • split-button: add split-button pattern (4833a59)

0.3.2 (2020-08-19)

Note: Version bump only for package @spectrum-web-components/menu

0.3.1 (2020-08-13)

Bug Fixes

  • menu: include all direct dependencies (aa7327f)
  • ensure browser understandable extensions (f4e59f7)

0.3.0 (2020-07-17)

Features

  • overlay: manage focus throwing and tab trapping (27a0b53)
  • leverage "exports" field in package.json (321abd7)

0.2.7 (2020-06-08)

Bug Fixes

  • menu: support menu item list change in deep decendents (b2b47f3)

0.2.6 (2020-04-16)

Performance Improvements

  • use "sideEffects" listing in package.json (7271614)

0.2.5 (2020-04-07)

Note: Version bump only for package @spectrum-web-components/menu

0.2.4 (2020-03-11)

Note: Version bump only for package @spectrum-web-components/menu

0.2.3 (2020-01-06)

Note: Version bump only for package @spectrum-web-components/menu

0.2.2 (2019-12-02)

Bug Fixes

  • normalize "event" and "error" argument names (8d382cd)

0.2.1 (2019-11-27)

Bug Fixes

  • include "type" in package.json, generate custom-elements.json (1a8d716)

0.2.0 (2019-11-19)

Bug Fixes

  • menu: allow for settign "selected" async from above (9d7f622)

Features

  • add screenshot regression testing to CI (8205dfe)
  • use :focus-visable (via polyfill) instead of :focus (11c6fc7)
  • use @adobe/spectrum-css@2.15.1 (3918888)

0.1.4 (2019-10-14)

Performance Improvements

  • use imported TypeScript helpers instead of inlining them (cc2bd0a)

0.1.3 (2019-10-03)

Note: Version bump only for package @spectrum-web-components/menu

Attributes and Properties

Property Attribute Type Default Description ignore ignore boolean false label label string '' selects selects undefined | 'inherit' | 'single' | 'multiple' whether the element has a specific selection algorithm that it applies to its item descendants. `single` allows only one descendent to be selected at a time. `multiple` allows many descendants to be selected. `inherit` will be applied dynamically when an ancestor of this element is actively managing the selection of its descendents. When the `selects` attribute is not present a `value` will not be maintained and the Menu Item children of this Menu will not have their `selected` state managed. value value string '' valueSeparator value-separator string ','

Slots

Name Description default slot menu items to be listed in the menu

Events

Name Type Description change Event Announces that the `value` of the element has changed close Event