@umbraco-ui/uui-menu-item 1.15.0 → 1.16.0-rc.0

package/custom-elements.json

@@ -151,6 +151,11 @@
           "type": "string",
           "default": "\"'Reveal the underlying items'\""
         },
+        {
+          "name": "renderExpandSymbol",
+          "description": "Overwrite the expand symbol rendering, this replaces the Expand Symbol from UI Library.",
+          "type": "(() => Element | TemplateResult<1> | undefined) | undefined"
+        },
         {
           "name": "styles",
           "type": "CSSResult[]",

package/lib/index.js

@@ -35,7 +35,7 @@ var __decorateClass = (decorators, target, key, kind) => {
 var __accessCheck = (obj, member, msg) => member.has(obj) || __typeError("Cannot " + msg);
 var __privateAdd = (obj, member, value) => member.has(obj) ? __typeError("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
 var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "access private method"), method);
-var _UUIMenuItemElement_instances, onLabelClicked_fn;
+var _UUIMenuItemElement_instances, onLabelClicked_fn, renderExpandSymbol_fn;
 let UUIMenuItemElement = class extends SelectOnlyMixin(
   SelectableMixin(ActiveMixin(LabelMixin("label", LitElement)))
 ) {
@@ -116,17 +116,15 @@ let UUIMenuItemElement = class extends SelectOnlyMixin(
   render() {
     return html`
       <div id="menu-item" aria-label="menuitem" role="menuitem">
+        <div id="label-button-background"></div>
         ${this.hasChildren ? html`<button
               id="caret-button"
               aria-label=${this.caretLabel}
               @click=${this._onCaretClicked}>
-              <uui-symbol-expand
-                aria-hidden="true"
-                ?open=${this.showChildren}></uui-symbol-expand>
+              ${__privateMethod(this, _UUIMenuItemElement_instances, renderExpandSymbol_fn).call(this)}
             </button>` : ""}
         ${this.href && this.selectOnly !== true && this.selectable !== true ? this._renderLabelAsAnchor() : this._renderLabelAsButton()}
 
-        <div id="label-button-background"></div>
         <slot id="actions-container" name="actions"></slot>
         ${this.loading ? html`<uui-loader-bar id="loader"></uui-loader-bar>` : ""}
       </div>
@@ -140,6 +138,17 @@ onLabelClicked_fn = function() {
   const event = new UUIMenuItemEvent(UUIMenuItemEvent.CLICK_LABEL);
   this.dispatchEvent(event);
 };
+renderExpandSymbol_fn = function() {
+  if (this.renderExpandSymbol) {
+    const result = this.renderExpandSymbol();
+    if (result) {
+      return result;
+    }
+  }
+  return html`<uui-symbol-expand
+      aria-hidden="true"
+      ?open=${this.showChildren}></uui-symbol-expand>`;
+};
 UUIMenuItemElement.styles = [
   css`
       :host {
@@ -165,12 +174,8 @@ UUIMenuItemElement.styles = [
 
       /** Not active, not selected, not disabled: */
       :host(:not([active], [selected], [disabled], [select-mode='highlight']))
-        #menu-item
-        #label-button:hover
-        ~ #label-button-background,
-      :host(:not([active], [selected], [disabled]))
-        #menu-item
-        #caret-button:hover {
+        #menu-item:has(#label-button:hover)
+        #label-button-background {
         background-color: var(
           --uui-menu-item-background-color-hover,
           var(--uui-color-surface-emphasis,rgb(
@@ -204,7 +209,9 @@ UUIMenuItemElement.styles = [
           var(--uui-color-current,#f5c1bc)
         );
       }
-      :host([active]) #label-button:hover ~ #label-button-background,
+      :host([active])
+        #menu-item:has(#label-button:hover)
+        #label-button-background,
       :host([active]) #caret-button:hover {
         background-color: var(
           --uui-menu-item-background-color-active-hover,
@@ -243,8 +250,8 @@ UUIMenuItemElement.styles = [
       }
       /** Selected, not highlight mode */
       :host([selected]:not([select-mode='highlight'], [disabled]))
-        #label-button:hover
-        ~ #label-button-background,
+        #menu-item:has(#label-button:hover)
+        #label-button-background,
       :host([selected]:not([select-mode='highlight'], [disabled]))
         #caret-button:hover {
         background-color: var(
@@ -259,9 +266,8 @@ UUIMenuItemElement.styles = [
 
       /** highlight mode, default */
       :host([select-mode='highlight']:not([disabled], [active], [selectable]))
-        #menu-item
-        #label-button:hover
-        ~ #label-button-background {
+        #menu-item:has(#label-button:hover)
+        #label-button-background {
         border-radius: var(--uui-border-radius,3px);
         background-color: var(
           --uui-menu-item-background-color-highlight,
@@ -282,9 +288,8 @@ UUIMenuItemElement.styles = [
 
       /** highlight mode, active & selected */
       :host([select-mode='highlight'][active][selected]:not([disabled]))
-        #menu-item
-        #label-button:hover
-        ~ #label-button-background {
+        #menu-item:has(#label-button:hover)
+        #label-button-background {
         border-radius: var(--uui-border-radius,3px);
         background-color: var(
           --uui-menu-item-background-color-highlight-active-selected,
@@ -370,15 +375,13 @@ UUIMenuItemElement.styles = [
       }
 
       :host([select-mode='highlight'][selectable]:not([disabled]))
-        #menu-item
-        #label-button:hover
-        ~ #label-button-background::after {
+        #menu-item:has(#label-button:hover)
+        #label-button-background::after {
         opacity: 0.33;
       }
       :host([select-mode='highlight'][selected]:not([disabled]))
-        #menu-item
-        #label-button:hover
-        ~ #label-button-background::after {
+        #menu-item:has(#label-button:hover)
+        #label-button-background::after {
         opacity: 0.66;
       }
 
@@ -403,7 +406,6 @@ UUIMenuItemElement.styles = [
         background-color: transparent;
         cursor: pointer;
         min-height: var(--uui-size-12,36px);
-        z-index: 1;
       }
 
       #label-button {
@@ -421,7 +423,6 @@ UUIMenuItemElement.styles = [
         text-decoration: none;
         color: currentColor;
         min-height: var(--uui-size-12,36px);
-        z-index: 1;
         font-weight: inherit;
       }
 
@@ -560,6 +561,9 @@ __decorateClass([
 __decorateClass([
   property({ type: String, attribute: "caret-label" })
 ], UUIMenuItemElement.prototype, "caretLabel", 2);
+__decorateClass([
+  property({ attribute: false })
+], UUIMenuItemElement.prototype, "renderExpandSymbol", 2);
 __decorateClass([
   state()
 ], UUIMenuItemElement.prototype, "iconSlotHasContent", 2);

package/lib/uui-menu-item.element.d.ts

@@ -1,4 +1,4 @@
-import { LitElement } from 'lit';
+import { LitElement, TemplateResult } from 'lit';
 declare const UUIMenuItemElement_base: (new (...args: any[]) => import("@umbraco-ui/uui-base/lib/mixins").SelectOnlyMixinInterface) & (new (...args: any[]) => import("@umbraco-ui/uui-base/lib/mixins").SelectableMixinInterface) & (new (...args: any[]) => import("@umbraco-ui/uui-base/lib/mixins").ActiveMixinInterface) & (new (...args: any[]) => import("@umbraco-ui/uui-base/lib/mixins").LabelMixinInterface) & typeof LitElement;
 /**
  *  @element uui-menu-item
@@ -88,6 +88,10 @@ export declare class UUIMenuItemElement extends UUIMenuItemElement_base {
      * @default 'Reveal the underlying items'
      */
     caretLabel: string;
+    /**
+     * Overwrite the expand symbol rendering, this replaces the Expand Symbol from UI Library.
+     */
+    renderExpandSymbol?: () => Element | TemplateResult<1> | undefined;
     private iconSlotHasContent;
     connectedCallback(): void;
     focus(): Promise<void>;
@@ -97,7 +101,7 @@ export declare class UUIMenuItemElement extends UUIMenuItemElement_base {
     private _renderLabelInside;
     private _renderLabelAsAnchor;
     private _renderLabelAsButton;
-    render(): import("lit-html").TemplateResult<1>;
+    render(): TemplateResult<1>;
     static styles: import("lit").CSSResult[];
 }
 declare global {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umbraco-ui/uui-menu-item",
-  "version": "1.15.0",
+  "version": "1.16.0-rc.0",
   "license": "MIT",
   "keywords": [
     "Umbraco",
@@ -30,9 +30,9 @@
     "custom-elements.json"
   ],
   "dependencies": {
-    "@umbraco-ui/uui-base": "1.15.0",
-    "@umbraco-ui/uui-loader-bar": "1.15.0",
-    "@umbraco-ui/uui-symbol-expand": "1.15.0"
+    "@umbraco-ui/uui-base": "1.16.0-rc.0",
+    "@umbraco-ui/uui-loader-bar": "1.16.0-rc.0",
+    "@umbraco-ui/uui-symbol-expand": "1.16.0-rc.0"
   },
   "scripts": {
     "build": "npm run analyze && tsc --build && rollup -c rollup.config.js",
@@ -43,5 +43,5 @@
     "access": "public"
   },
   "homepage": "https://uui.umbraco.com/?path=/story/uui-menu-item",
-  "gitHead": "b84216deaff3a3be8f7bd8cdbf2758e7955c70e9"
+  "gitHead": "7bf1acd40b60feb81d82067ba2342d2b3e33c057"
 }