New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More →
Socket
Sign inDemoInstall
Socket
Sign inDemoInstall

@spectrum-web-components/menu

Package Overview
Dependencies
Maintainers
5
Versions
372
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@spectrum-web-components/menu - npm Package Compare versions

Comparing version 0.2.6 to 0.2.7

src/spectrum-vars.json

6

CHANGELOG.md

@@ -6,2 +6,8 @@ # Change Log

## [0.2.7](https://github.com/adobe/spectrum-web-components/compare/@spectrum-web-components/menu@0.2.6...@spectrum-web-components/menu@0.2.7) (2020-06-08)
### Bug Fixes
- **menu:** support menu item list change in deep decendents ([b2b47f3](https://github.com/adobe/spectrum-web-components/commit/b2b47f305cab9720d29b4214b3330b95f33a56d3))
## [0.2.6](https://github.com/adobe/spectrum-web-components/compare/@spectrum-web-components/menu@0.2.5...@spectrum-web-components/menu@0.2.6) (2020-04-16)

@@ -8,0 +14,0 @@

92

custom-elements.json

@@ -1,91 +0,1 @@

{
"version": "experimental",
"tags": [
{
"name": "sp-menu",
"path": "./src/menu.ts",
"description": "Spectrum Menu Component",
"properties": [
{
"name": "menuItems",
"type": "Element[]",
"default": "[]"
},
{
"name": "focusedItemIndex",
"type": "number",
"default": "0"
},
{
"name": "focusInItemIndex",
"type": "number",
"default": "0"
},
{
"name": "childRole",
"type": "string"
},
{
"name": "handleKeydown"
},
{
"name": "startListeningToKeyboard"
},
{
"name": "stopListeningToKeyboard"
},
{
"name": "onClick"
}
],
"events": [
{
"name": "sp-menu-query-role"
}
]
},
{
"name": "sp-menu",
"path": "./src/index.ts",
"description": "Spectrum Menu Component",
"properties": [
{
"name": "menuItems",
"type": "Element[]",
"default": "[]"
},
{
"name": "focusedItemIndex",
"type": "number",
"default": "0"
},
{
"name": "focusInItemIndex",
"type": "number",
"default": "0"
},
{
"name": "childRole",
"type": "string"
},
{
"name": "handleKeydown"
},
{
"name": "startListeningToKeyboard"
},
{
"name": "stopListeningToKeyboard"
},
{
"name": "onClick"
}
],
"events": [
{
"name": "sp-menu-query-role"
}
]
}
]
}
{"version":"experimental","tags":[{"name":"sp-menu","path":"./src/menu.ts","description":"Spectrum Menu Component","properties":[{"name":"menuItems","type":"Element[]","default":"[]"},{"name":"focusedItemIndex","type":"number","default":"0"},{"name":"focusInItemIndex","type":"number","default":"0"},{"name":"handleKeydown"},{"name":"startListeningToKeyboard"},{"name":"stopListeningToKeyboard"},{"name":"onClick"}],"events":[{"name":"sp-menu-query-role"}]},{"name":"sp-menu","path":"./src/index.ts","description":"Spectrum Menu Component","properties":[{"name":"menuItems","type":"Element[]","default":"[]"},{"name":"focusedItemIndex","type":"number","default":"0"},{"name":"focusInItemIndex","type":"number","default":"0"},{"name":"handleKeydown"},{"name":"startListeningToKeyboard"},{"name":"stopListeningToKeyboard"},{"name":"onClick"}],"events":[{"name":"sp-menu-query-role"}],"cssProperties":[{"name":"--spectrum-popover-padding-y","default":"var(--spectrum-global-dimension-size-50)","type":""},{"name":"--spectrum-icon-checkmark-medium-width","default":"undefined","type":""},{"name":"--spectrum-selectlist-option-icon-padding-x","default":"var(--spectrum-global-dimension-size-150)","type":""},{"name":"--spectrum-selectlist-option-padding","default":"var(--spectrum-global-dimension-static-size-150)","type":""},{"name":"--spectrum-popover-border-size","default":"var(--spectrum-alias-border-size-thin)","type":""},{"name":"--spectrum-selectlist-border-size-key-focus","default":"var(--spectrum-global-dimension-static-size-25)","type":""},{"name":"--spectrum-selectlist-option-height","default":"undefined","type":""},{"name":"--spectrum-selectlist-option-text-size","default":"var(--spectrum-alias-font-size-default)","type":""},{"name":"--spectrum-selectlist-option-text-font-weight","default":"var(--spectrum-global-font-weight-regular)","type":""},{"name":"--spectrum-selectlist-thumbnail-image-padding-x","default":"var(--spectrum-global-dimension-size-100)","type":""},{"name":"--spectrum-alias-workflow-icon-size","default":"var(--spectrum-global-dimension-size-225)","type":""},{"name":"--spectrum-selectlist-divider-size","default":"var(--spectrum-alias-border-size-thick)","type":""},{"name":"--spectrum-selectlist-divider-padding","default":"3px","type":""},{"name":"--spectrum-alias-line-height-medium","default":"var(--spectrum-global-dimension-size-250)","type":""},{"name":"--spectrum-selectlist-background-color","default":"var(--spectrum-alias-background-color-transparent)","type":""},{"name":"--spectrum-selectlist-option-background-color","default":"var(--spectrum-alias-background-color-transparent)","type":""},{"name":"--spectrum-selectlist-option-text-color","default":"var(--spectrum-alias-text-color)","type":""},{"name":"--spectrum-selectlist-option-background-color-key-focus","default":"var(--spectrum-alias-background-color-hover-overlay)","type":""},{"name":"--spectrum-selectlist-option-text-color-key-focus","default":"var(--spectrum-alias-text-color)","type":""},{"name":"--spectrum-selectlist-option-focus-indicator-color","default":"var(--spectrum-alias-border-color-focus)","type":""},{"name":"--spectrum-selectlist-option-background-color-hover","default":"var(--spectrum-alias-background-color-hover-overlay)","type":""},{"name":"--spectrum-selectlist-option-text-color-hover","default":"var(--spectrum-alias-text-color)","type":""},{"name":"--spectrum-selectlist-option-text-color-selected","default":"var(--spectrum-alias-text-color)","type":""},{"name":"--spectrum-selectlist-option-icon-color-selected","default":"var(--spectrum-alias-icon-color-selected)","type":""},{"name":"--spectrum-selectlist-option-background-color-down","default":"var(--spectrum-alias-background-color-hover-overlay)","type":""},{"name":"--spectrum-selectlist-option-background-color-disabled","default":"var(--spectrum-alias-background-color-transparent)","type":""},{"name":"--spectrum-selectlist-option-text-color-disabled","default":"var(--spectrum-alias-text-color-disabled)","type":""},{"name":"--spectrum-heading-subtitle3-text-color","default":"var(--spectrum-global-color-gray-700)","type":""},{"name":"--spectrum-selectlist-divider-color","default":"var(--spectrum-alias-border-color-extralight)","type":""}]}]}

11

lib/menu.d.ts

@@ -15,2 +15,9 @@ import { LitElement, CSSResultArray, TemplateResult } from 'lit-element';

focusInItemIndex: number;
/**
* Hide this getter from web-component-analyzer until
* https://github.com/runem/web-component-analyzer/issues/131
* has been addressed.
*
* @private
*/
get childRole(): string;

@@ -26,5 +33,7 @@ constructor();

updateSelectedItemIndex(): void;
handleSlotchange(): void;
private prepItems;
render(): TemplateResult;
connectedCallback(): void;
disconnectedCallback(): void;
private observer?;
}

@@ -31,0 +40,0 @@ declare global {

50

lib/menu.js

@@ -25,2 +25,13 @@ /*

this.focusInItemIndex = 0;
this.prepItems = () => {
this.menuItems = [
...this.querySelectorAll(`[role="${this.childRole}"]`),
];
if (!this.menuItems || this.menuItems.length === 0) {
return;
}
this.updateSelectedItemIndex();
const focusInItem = this.menuItems[this.focusInItemIndex];
focusInItem.tabIndex = 0;
};
this.handleKeydown = this.handleKeydown.bind(this);

@@ -37,2 +48,9 @@ this.startListeningToKeyboard = this.startListeningToKeyboard.bind(this);

}
/**
* Hide this getter from web-component-analyzer until
* https://github.com/runem/web-component-analyzer/issues/131
* has been addressed.
*
* @private
*/
get childRole() {

@@ -52,2 +70,3 @@ return this.getAttribute('role') === 'menu' ? 'menuitem' : 'option';

const target = path.find((el) => {
/* istanbul ignore if */
if (!(el instanceof Element)) {

@@ -58,2 +77,3 @@ return false;

});
/* istanbul ignore if */
if (!target) {

@@ -104,2 +124,6 @@ return;

requestAnimationFrame(() => {
/* istanbul ignore if */
if (this.menuItems.length === 0) {
return;
}
if (this.querySelector('[selected]')) {

@@ -122,19 +146,9 @@ const itemToBlur = this.menuItems[this.focusInItemIndex];

}
index = Math.max(index, 0);
this.focusedItemIndex = index;
this.focusInItemIndex = index;
}
handleSlotchange() {
this.menuItems = [
...this.querySelectorAll(`[role="${this.childRole}"]`),
];
if (!this.menuItems || this.menuItems.length === 0) {
return;
}
this.updateSelectedItemIndex();
const focusInItem = this.menuItems[this.focusInItemIndex];
focusInItem.tabIndex = 0;
}
render() {
return html `
<slot @slotchange=${this.handleSlotchange}></slot>
<slot></slot>
`;

@@ -155,4 +169,16 @@ }

}
if (!this.observer) {
this.observer = new MutationObserver(this.prepItems);
}
this.observer.observe(this, { childList: true, subtree: true });
this.updateComplete.then(() => this.prepItems());
}
disconnectedCallback() {
/* istanbul ignore else */
if (this.observer) {
this.observer.disconnect();
}
super.disconnectedCallback();
}
}
//# sourceMappingURL=menu.js.map

6

package.json

@@ -21,3 +21,3 @@ {

],
"version": "0.2.6",
"version": "0.2.7",
"description": "",

@@ -49,5 +49,5 @@ "main": "lib/index.js",

"dependencies": {
"tslib": "^1.10.0"
"tslib": "^2.0.0"
},
"gitHead": "c8a769e3b24974f722054bc121f9a896d66e0bf1"
"gitHead": "16b57d15356859cee73278cdf796274e3245320b"
}

35

src/menu.ts

@@ -41,2 +41,9 @@ /*

/**
* Hide this getter from web-component-analyzer until
* https://github.com/runem/web-component-analyzer/issues/131
* has been addressed.
*
* @private
*/
public get childRole(): string {

@@ -72,2 +79,3 @@ return this.getAttribute('role') === 'menu' ? 'menuitem' : 'option';

const target = path.find((el) => {
/* istanbul ignore if */
if (!(el instanceof Element)) {

@@ -78,2 +86,3 @@ return false;

}) as MenuItem;
/* istanbul ignore if */
if (!target) {

@@ -131,2 +140,6 @@ return;

requestAnimationFrame(() => {
/* istanbul ignore if */
if (this.menuItems.length === 0) {
return;
}
if (this.querySelector('[selected]')) {

@@ -156,2 +169,3 @@ const itemToBlur = this.menuItems[

}
index = Math.max(index, 0);
this.focusedItemIndex = index;

@@ -161,3 +175,3 @@ this.focusInItemIndex = index;

public handleSlotchange(): void {
private prepItems = (): void => {
this.menuItems = [

@@ -172,7 +186,7 @@ ...this.querySelectorAll(`[role="${this.childRole}"]`),

focusInItem.tabIndex = 0;
}
};
public render(): TemplateResult {
return html`
<slot @slotchange=${this.handleSlotchange}></slot>
<slot></slot>
`;

@@ -194,3 +208,18 @@ }

}
if (!this.observer) {
this.observer = new MutationObserver(this.prepItems);
}
this.observer.observe(this, { childList: true, subtree: true });
this.updateComplete.then(() => this.prepItems());
}
public disconnectedCallback(): void {
/* istanbul ignore else */
if (this.observer) {
this.observer.disconnect();
}
super.disconnectedCallback();
}
private observer?: MutationObserver;
}

@@ -197,0 +226,0 @@ 

lib/menu.js.map

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc