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

Comparing version 0.8.9-alpha.1 to 0.8.9

custom-elements.json

@@ -128,2 +128,6 @@ {
         {
+          "name": "itemChildren",
+          "type": "{ icon: Element[]; content: Node[]; }"
+        },
+        {
           "name": "emphasized",
@@ -242,2 +246,8 @@ "attribute": "emphasized",
         }
+      ],
+      "slots": [
+        {
+          "name": "value",
+          "description": "content placed at the end of the Menu Item like values, keyboard shortcuts, etc."
+        }
       ]
@@ -244,0 +254,0 @@ },

package.json

 {
     "name": "@spectrum-web-components/menu",
-    "version": "0.8.9-alpha.1+23ae605e",
+    "version": "0.8.9",
     "publishConfig": {
@@ -53,7 +53,7 @@ "access": "public"
     "dependencies": {
-        "@spectrum-web-components/action-button": "^0.5.3-alpha.1+23ae605e",
-        "@spectrum-web-components/base": "^0.4.5-alpha.1+23ae605e",
-        "@spectrum-web-components/icon": "^0.9.8-alpha.1+23ae605e",
-        "@spectrum-web-components/icons-ui": "^0.6.8-alpha.1+23ae605e",
-        "@spectrum-web-components/shared": "^0.12.6-alpha.1+23ae605e",
+        "@spectrum-web-components/action-button": "^0.5.3",
+        "@spectrum-web-components/base": "^0.4.4",
+        "@spectrum-web-components/icon": "^0.9.7",
+        "@spectrum-web-components/icons-ui": "^0.6.7",
+        "@spectrum-web-components/shared": "^0.12.6",
         "tslib": "^2.0.0"
@@ -69,3 +69,3 @@ },
     ],
-    "gitHead": "23ae605e3718dd3f86bc3aa5b10229a4eb7f83c9"
+    "gitHead": "ed13341debd82f86abc062f647d42458c77633cc"
 }

src/menu-divider.css.d.ts

@@ -1,2 +0,2 @@
-declare const styles: import("@spectrum-web-components/base").CSSResultGroup;
+declare const styles: import("@spectrum-web-components/base").CSSResult;
 export default styles;

src/menu-group.css.d.ts

@@ -1,2 +0,2 @@
-declare const styles: import("@spectrum-web-components/base").CSSResultGroup;
+declare const styles: import("@spectrum-web-components/base").CSSResult;
 export default styles;

src/menu-item.css.d.ts

@@ -1,2 +0,2 @@
-declare const styles: import("@spectrum-web-components/base").CSSResultGroup;
+declare const styles: import("@spectrum-web-components/base").CSSResult;
 export default styles;

src/menu-item.css.js

@@ -17,5 +17,5 @@ /*
 var(--spectrum-alias-border-size-thin)))}:host([selected]) #selected{display:block}.icon,::slotted([slot=icon]){flex-shrink:0;align-self:flex-start}:host([dir=ltr]) .icon+#label,:host([dir=ltr]) slot[name=icon]+#label{margin-left:var(--spectrum-listitem-icon-gap)}:host([dir=rtl]) .icon+#label,:host([dir=rtl]) slot[name=icon]+#label{margin-right:var(--spectrum-listitem-icon-gap)}.icon+#label,slot[name=icon]+#label{width:calc(100% - var(--spectrum-icon-checkmark-medium-width) - var(--spectrum-listitem-icon-gap) - var(--spectrum-listitem-thumbnail-padding-left) - var(--spectrum-alias-workflow-icon-size-m,
-var(--spectrum-global-dimension-size-225)))}#label{flex:1 1 auto;line-height:var(--spectrum-listitem-label-line-height);-webkit-hyphens:auto;hyphens:auto;overflow-wrap:break-word;width:calc(100% - var(--spectrum-icon-checkmark-medium-width) - var(--spectrum-listitem-icon-gap))}:host([no-wrap]) #label{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}#selected{display:none;align-self:flex-start}:host([dir=ltr]) #selected,:host([dir=ltr]) .chevron{margin-left:var(--spectrum-listitem-icon-gap)}:host([dir=rtl]) #selected,:host([dir=rtl]) .chevron{margin-right:var(--spectrum-listitem-icon-gap)}#selected{flex-grow:0;margin-top:var(--spectrum-listitem-icon-margin-top)}:host([dir=rtl]) .chevron{transform:matrix(-1,0,0,1,0,0)}:host{background-color:var(--spectrum-listitem-m-background-color,var(--spectrum-alias-background-color-transparent));color:var(--spectrum-listitem-m-text-color,var(--spectrum-alias-text-color))}:host([dir=ltr].focus-visible),:host([dir=ltr][focused]){border-left-color:var(--spectrum-listitem-m-focus-indicator-color,var(--spectrum-alias-border-color-focus))}:host([dir=ltr].focus-visible),:host([dir=ltr][focused]){border-left-color:var(--spectrum-listitem-m-focus-indicator-color,var(--spectrum-alias-border-color-focus))}:host([dir=ltr]:focus-visible),:host([dir=ltr][focused]){border-left-color:var(--spectrum-listitem-m-focus-indicator-color,var(--spectrum-alias-border-color-focus))}:host([dir=rtl].focus-visible),:host([dir=rtl][focused]){border-right-color:var(--spectrum-listitem-m-focus-indicator-color,var(--spectrum-alias-border-color-focus))}:host([dir=rtl].focus-visible),:host([dir=rtl][focused]){border-right-color:var(--spectrum-listitem-m-focus-indicator-color,var(--spectrum-alias-border-color-focus))}:host([dir=rtl]:focus-visible),:host([dir=rtl][focused]){border-right-color:var(--spectrum-listitem-m-focus-indicator-color,var(--spectrum-alias-border-color-focus))}:host(.focus-visible),:host([focused]){background-color:var(--spectrum-listitem-m-background-color-key-focus,var(--spectrum-alias-background-color-hover-overlay));color:var(--spectrum-listitem-m-text-color-key-focus,var(--spectrum-alias-text-color))}:host(.focus-visible),:host([focused]){background-color:var(--spectrum-listitem-m-background-color-key-focus,var(--spectrum-alias-background-color-hover-overlay));color:var(--spectrum-listitem-m-text-color-key-focus,var(--spectrum-alias-text-color))}:host(:focus-visible),:host([focused]){background-color:var(--spectrum-listitem-m-background-color-key-focus,var(--spectrum-alias-background-color-hover-overlay));color:var(--spectrum-listitem-m-text-color-key-focus,var(--spectrum-alias-text-color))}:host(.is-highlighted),:host(.is-open),:host(:focus),:host(:hover){background-color:var(--spectrum-listitem-m-background-color-hover,var(--spectrum-alias-background-color-hover-overlay));color:var(--spectrum-listitem-m-text-color-hover,var(--spectrum-alias-text-color))}:host([selected]){color:var(--spectrum-listitem-m-text-color-selected,var(--spectrum-alias-text-color))}:host([selected]) #selected{color:var(--spectrum-listitem-m-icon-color-selected,var(--spectrum-alias-icon-color-selected))}.is-active,:host(:active){background-color:var(--spectrum-listitem-m-background-color-down,var(--spectrum-alias-background-color-hover-overlay))}:host([disabled]){background-color:var(--spectrum-listitem-m-background-color-disabled,var(--spectrum-alias-background-color-transparent));background-image:none;color:var(--spectrum-listitem-m-text-color-disabled,var(--spectrum-alias-text-color-disabled));cursor:default}#button{position:absolute;top:0;right:0;bottom:0;left:0}
+var(--spectrum-global-dimension-size-225)))}#label{flex:1 1 auto;line-height:var(--spectrum-listitem-label-line-height);-webkit-hyphens:auto;hyphens:auto;overflow-wrap:break-word;width:calc(100% - var(--spectrum-icon-checkmark-medium-width) - var(--spectrum-listitem-icon-gap))}:host([no-wrap]) #label{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}#selected{display:none;align-self:flex-start}:host([dir=ltr]) #selected,:host([dir=ltr]) .chevron{margin-left:var(--spectrum-listitem-icon-gap)}:host([dir=rtl]) #selected,:host([dir=rtl]) .chevron{margin-right:var(--spectrum-listitem-icon-gap)}#selected{flex-grow:0;margin-top:var(--spectrum-listitem-icon-margin-top)}:host([dir=rtl]) .chevron{transform:matrix(-1,0,0,1,0,0)}:host{background-color:var(--spectrum-listitem-m-background-color,var(--spectrum-alias-background-color-transparent));color:var(--spectrum-listitem-m-text-color,var(--spectrum-alias-text-color))}:host([dir=ltr].focus-visible),:host([dir=ltr][focused]){border-left-color:var(--spectrum-listitem-m-focus-indicator-color,var(--spectrum-alias-border-color-focus))}:host([dir=ltr].focus-visible),:host([dir=ltr][focused]){border-left-color:var(--spectrum-listitem-m-focus-indicator-color,var(--spectrum-alias-border-color-focus))}:host([dir=ltr]:focus-visible),:host([dir=ltr][focused]){border-left-color:var(--spectrum-listitem-m-focus-indicator-color,var(--spectrum-alias-border-color-focus))}:host([dir=rtl].focus-visible),:host([dir=rtl][focused]){border-right-color:var(--spectrum-listitem-m-focus-indicator-color,var(--spectrum-alias-border-color-focus))}:host([dir=rtl].focus-visible),:host([dir=rtl][focused]){border-right-color:var(--spectrum-listitem-m-focus-indicator-color,var(--spectrum-alias-border-color-focus))}:host([dir=rtl]:focus-visible),:host([dir=rtl][focused]){border-right-color:var(--spectrum-listitem-m-focus-indicator-color,var(--spectrum-alias-border-color-focus))}:host(.focus-visible),:host([focused]){background-color:var(--spectrum-listitem-m-background-color-key-focus,var(--spectrum-alias-background-color-hover-overlay));color:var(--spectrum-listitem-m-text-color-key-focus,var(--spectrum-alias-text-color))}:host(.focus-visible),:host([focused]){background-color:var(--spectrum-listitem-m-background-color-key-focus,var(--spectrum-alias-background-color-hover-overlay));color:var(--spectrum-listitem-m-text-color-key-focus,var(--spectrum-alias-text-color))}:host(:focus-visible),:host([focused]){background-color:var(--spectrum-listitem-m-background-color-key-focus,var(--spectrum-alias-background-color-hover-overlay));color:var(--spectrum-listitem-m-text-color-key-focus,var(--spectrum-alias-text-color))}:host(.is-highlighted),:host(.is-open),:host(:focus),:host(:hover){background-color:var(--spectrum-listitem-m-background-color-hover,var(--spectrum-alias-background-color-hover-overlay));color:var(--spectrum-listitem-m-text-color-hover,var(--spectrum-alias-text-color))}:host([selected]){color:var(--spectrum-listitem-m-text-color-selected,var(--spectrum-alias-text-color))}:host([selected]) #selected{color:var(--spectrum-listitem-m-icon-color-selected,var(--spectrum-alias-icon-color-selected))}.is-active,:host(:active){background-color:var(--spectrum-listitem-m-background-color-down,var(--spectrum-alias-background-color-hover-overlay))}:host([disabled]){background-color:var(--spectrum-listitem-m-background-color-disabled,var(--spectrum-alias-background-color-transparent));background-image:none;color:var(--spectrum-listitem-m-text-color-disabled,var(--spectrum-alias-text-color-disabled));cursor:default}#button{position:absolute;top:0;right:0;bottom:0;left:0}:host([dir=ltr]) ::slotted([slot=value]){margin-left:var(--spectrum-listitem-icon-gap)}:host([dir=rtl]) ::slotted([slot=value]){margin-right:var(--spectrum-listitem-icon-gap)}:host([dir=ltr]) [icon-only]::slotted(:last-of-type){margin-right:auto}:host([dir=rtl]) [icon-only]::slotted(:last-of-type){margin-left:auto}
 `;
 export default styles;
 //# sourceMappingURL=menu-item.css.js.map

src/menu.css.d.ts

@@ -1,2 +0,2 @@
-declare const styles: import("@spectrum-web-components/base").CSSResultGroup;
+declare const styles: import("@spectrum-web-components/base").CSSResult;
 export default styles;

src/MenuItem.d.ts

@@ -10,2 +10,3 @@ import { CSSResultArray, TemplateResult, PropertyValues } from '@spectrum-web-components/base';
  * @element sp-menu-item
+ * @slot value - content placed at the end of the Menu Item like values, keyboard shortcuts, etc.
  */
@@ -17,10 +18,6 @@ export declare class MenuItem extends ActionButton {
     noWrap: boolean;
-    /**
-     * Hide this getter from web-component-analyzer until
-     * https://github.com/runem/web-component-analyzer/issues/131
-     * has been addressed.
-     *
-     * @private
-     */
-    get itemText(): string;
+    get itemChildren(): {
+        icon: Element[];
+        content: Node[];
+    };
     protected get buttonContent(): TemplateResult[];
@@ -27,0 +24,0 @@ protected renderButton(): TemplateResult;

src/MenuItem.js

@@ -21,2 +21,3 @@ /*
  * @element sp-menu-item
+ * @slot value - content placed at the end of the Menu Item like values, keyboard shortcuts, etc.
  */
@@ -32,14 +33,23 @@ export class MenuItem extends ActionButton {
     }
-    /**
-     * Hide this getter from web-component-analyzer until
-     * https://github.com/runem/web-component-analyzer/issues/131
-     * has been addressed.
-     *
-     * @private
-     */
-    get itemText() {
-        return (this.textContent || /* c8 ignore next */ '').trim();
+    get itemChildren() {
+        const iconSlot = this.shadowRoot.querySelector('slot[name="icon"]');
+        const icon = !iconSlot
+            ? []
+            : iconSlot.assignedElements().map((element) => {
+                const newElement = element.cloneNode(true);
+                newElement.removeAttribute('slot');
+                newElement.classList.toggle('icon');
+                return newElement;
+            });
+        const contentSlot = this.shadowRoot.querySelector('slot:not([name])');
+        const content = !contentSlot
+            ? []
+            : contentSlot.assignedNodes().map((node) => node.cloneNode(true));
+        return { icon, content };
     }
     get buttonContent() {
         const content = super.buttonContent;
+        content.push(html `
+                <slot name="value"></slot>
+            `);
         if (this.selected) {
@@ -46,0 +56,0 @@ content.push(html `

src/spectrum-menu-divider.css.d.ts

@@ -1,2 +0,2 @@
-declare const styles: import("@spectrum-web-components/base").CSSResultGroup;
+declare const styles: import("@spectrum-web-components/base").CSSResult;
 export default styles;

src/spectrum-menu-item.css.d.ts

@@ -1,2 +0,2 @@
-declare const styles: import("@spectrum-web-components/base").CSSResultGroup;
+declare const styles: import("@spectrum-web-components/base").CSSResult;
 export default styles;

src/spectrum-menu-sectionHeading.css.d.ts

@@ -1,2 +0,2 @@
-declare const styles: import("@spectrum-web-components/base").CSSResultGroup;
+declare const styles: import("@spectrum-web-components/base").CSSResult;
 export default styles;

src/spectrum-menu.css.d.ts

@@ -1,2 +0,2 @@
-declare const styles: import("@spectrum-web-components/base").CSSResultGroup;
+declare const styles: import("@spectrum-web-components/base").CSSResult;
 export default styles;

stories/menu-item.stories.js

@@ -36,2 +36,20 @@ /*
 };
+export const valueSlot = () => {
+    return html `
+        <sp-menu style="width: 150px;" selectable>
+            <sp-menu-item>
+                Save
+                <kbd slot="value">⌘S</kbd>
+            </sp-menu-item>
+            <sp-menu-item selected>
+                Save As...
+                <kbd slot="value">⇧⌘S</kbd>
+            </sp-menu-item>
+            <sp-menu-item disabled>
+                Save All
+                <kbd slot="value">⌥⌘S</kbd>
+            </sp-menu-item>
+        </sp-menu>
+    `;
+};
 export const href = () => {
@@ -38,0 +56,0 @@ return html `

test/menu.test.js

@@ -109,2 +109,15 @@ /*
     });
+    it('renders w/ hrefs', async () => {
+        const el = await fixture(html `
+                <sp-menu>
+                    <sp-menu-item href="not-selected.html">
+                        Not Selected
+                    </sp-menu-item>
+                    <sp-menu-item href="selected.html">Selected</sp-menu-item>
+                    <sp-menu-item href="other.html">Other</sp-menu-item>
+                </sp-menu>
+            `);
+        await elementUpdated(el);
+        await expect(el).to.be.accessible();
+    });
     it('handle focus and keyboard input', async () => {
@@ -111,0 +124,0 @@ const el = await fixture(html `

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Manifest confusion

Supply chain risk

This package has inconsistent metadata. This could be malicious or caused by an error when publishing the package.

Found 1 instance in 1 package

Unidentified License

License

(Experimental) Something that seems like a license was found, but its contents could not be matched with a known license.

Found 2 instances in 1 package

Improved metrics

Total package byte prevSize

257979

increased by30.33%

Number of low license alerts

19

decreased by-9.52%

Lines of code

2341

increased by29.12%

Number of medium supply chain risk alerts

0

decreased by-100%

Worsened metrics

Number of package files

71

decreased by-2.74%

Dependency changes

• Updated@spectrum-web-components/action-button@^0.5.3

• Updated@spectrum-web-components/base@^0.4.4

• Updated@spectrum-web-components/icon@^0.9.7

• Updated@spectrum-web-components/icons-ui@^0.6.7

• Updated@spectrum-web-components/shared@^0.12.6