@carbon/web-components 2.55.0-rc.0 → 2.56.0-rc.0

package/es-custom/components/menu/menu-item.js

@@ -38,7 +38,7 @@ let CDSmenuItem = class CDSmenuItem extends HostListenerMixin(HostListenerMixin(
 		super(..._args);
 		this.hoverIntentDelay = 150;
 		this._parentMenu = null;
-		this.dangerDescription = "danger";
+		this.dangerDescription = "";
 		this.submenuOpen = false;
 		this.kind = "default";
 		this.boundaries = {
@@ -207,7 +207,7 @@ let CDSmenuItem = class CDSmenuItem extends HostListenerMixin(HostListenerMixin(
 	}
 	render() {
 		const { label, shortcut, submenuOpen, boundaries, isRtl, kind, dangerDescription } = this;
-		const isDanger = kind === "danger" && !this.hasSubmenu;
+		const hasDangerDescription = kind === "danger" && !this.hasSubmenu && Boolean(dangerDescription);
 		const menuClassName = this.context?.hasSelectableItems ? `cds-custom--menu--with-selectable-items` : "";
 		return html`
       <div class="${"cds-custom"}--menu-item__selection-icon">
@@ -218,7 +218,7 @@ let CDSmenuItem = class CDSmenuItem extends HostListenerMixin(HostListenerMixin(
         <slot name="render-icon"></slot>
       </div>
       <div class="${"cds-custom"}--menu-item__label">${label}</div>
-      ${isDanger ? html`<span id="danger-description" class="${"cds-custom"}--visually-hidden"
+      ${hasDangerDescription ? html`<span id="danger-description" class="${"cds-custom"}--visually-hidden"
             >${dangerDescription}</span
           >` : html``}
       ${shortcut && !this.hasSubmenu ? html` <div class="${"cds-custom"}--menu-item__shortcut">${shortcut}</div> ` : html``}

package/es-custom/components/menu/menu-item.js.map

@@ -1 +1 @@
-{"version":3,"file":"menu-item.js","names":["styles","customElement"],"sources":["../../../src/components/menu/menu-item.ts"],"sourcesContent":["/**\n * Copyright IBM Corp. 2019, 2026\n *\n * This source code is licensed under the Apache-2.0 license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { LitElement, html } from 'lit';\nimport { property, state } from 'lit/decorators.js';\nimport { prefix } from '../../globals/settings';\nimport styles from './menu-item.scss?lit';\nimport { carbonElement as customElement } from '../../globals/decorators/carbon-element';\nimport { consume } from '@lit/context';\nimport { MenuContext } from './menu-context';\nimport Checkmark16 from '@carbon/icons/es/checkmark/16.js';\nimport CaretLeft16 from '@carbon/icons/es/caret--left/16.js';\nimport CaretRight16 from '@carbon/icons/es/caret--right/16.js';\nimport HostListener from '../../globals/decorators/host-listener';\nimport HostListenerMixin from '../../globals/mixins/host-listener';\nimport { MENU_ITEM_KIND, MENU_SIZE } from './defs';\nimport { iconLoader } from '../../globals/internal/icon-loader';\nimport CDSMenu from './menu';\n\nexport { MENU_ITEM_KIND, MENU_SIZE };\nexport const MENU_CLOSE_ROOT_EVENT = `${prefix}-menu-close-root-request`;\n\n/**\n * Menu Item.\n *\n * @element cds-custom-menu-item\n */\n@customElement(`${prefix}-menu-item`)\nclass CDSmenuItem extends HostListenerMixin(HostListenerMixin(LitElement)) {\n  @consume({ context: MenuContext })\n  context;\n\n  readonly hoverIntentDelay = 150; // in ms\n  hoverIntentTimeout;\n\n  /**\n   * The parent cds-custom-menu element\n   */\n  private _parentMenu: CDSMenu | null = null;\n\n  /**\n   * MutationObserver that observes the parent cds-custom-menu element\n   */\n  private _parentMenuObserver?: MutationObserver;\n\n  /**\n   * Label for the menu item.\n   */\n  @property({ type: String })\n  label;\n  /**\n   * Shortcut for the menu item.\n   */\n  @property({ type: String })\n  shortcut;\n  /**\n   * Disabled property for the menu item.\n   */\n  @property({ type: Boolean })\n  disabled;\n\n  /**\n   * Specify the message read by screen readers for the danger menu item variant\n   */\n  @property({ type: String, attribute: 'danger-description' })\n  dangerDescription = 'danger';\n\n  /**\n   * Whether the menu submen for an item is open or not.\n   */\n  @property({ type: Boolean })\n  submenuOpen = false;\n\n  @property()\n  kind = MENU_ITEM_KIND.DEFAULT;\n  /**\n   * Menu boundaries.\n   */\n  @property()\n  boundaries: {\n    x: number | [number, number];\n    y: number | [number, number];\n  } = { x: -1, y: -1 };\n\n  @property({ attribute: 'aria-checked' })\n  ariaChecked: string | null = this.getAttribute('selected') ?? 'false';\n\n  /**\n   * Entrypoint.\n   */\n  @state()\n  submenuEntry;\n  /**\n   * Checks if document direction is rtl.\n   */\n  @state()\n  isRtl = false;\n  /**\n   * Checks if document direction is rtl.\n   */\n  @state()\n  hasSubmenu = false;\n\n  async dispatchIconDetect() {\n    const hasRenderIcon = !!this.querySelector('[slot=\"render-icon\"]');\n    if (hasRenderIcon) {\n      await undefined; // this is used to replace setTimeout with 0 time out, which is much fater.\n      this.dispatchEvent(\n        new CustomEvent('icon-detect', {\n          bubbles: true, // Allows event to bubble up the DOM\n          composed: true, // Allows event to cross shadow DOM boundary\n        })\n      );\n    }\n  }\n\n  private _updateAttributes() {\n    if (this.disabled && !this.hasSubmenu) {\n      this.setAttribute('aria-disabled', this.disabled);\n      this.setAttribute('tabindex', '-1');\n    } else if (this._parentMenu && !(this._parentMenu as CDSMenu).open) {\n      this.removeAttribute('aria-disabled');\n      this.setAttribute('tabindex', '-1');\n    } else {\n      this.removeAttribute('aria-disabled');\n      this.setAttribute('tabindex', '0');\n    }\n    if (this.hasSubmenu) {\n      this.setAttribute('aria-haspopup', this.hasSubmenu + '');\n    } else {\n      this.removeAttribute('aria-haspopup');\n    }\n    if (this.closest(`${prefix}-menu-item-radio-group`)) {\n      this.setAttribute('role', 'menuitemradio');\n      this.setAttribute('aria-checked', this.ariaChecked + '');\n    } else if (!this.getAttribute('role')) {\n      this.setAttribute('role', 'menuitem');\n    }\n  }\n\n  firstUpdated() {\n    this.hasSubmenu = !!this.querySelector('[slot=\"submenu\"]');\n\n    this.dispatchIconDetect();\n    this.isRtl = document.dir === 'rtl';\n    this._registerSubMenuItems();\n    this._parentMenu = this.closest(`${prefix}-menu`);\n\n    this._updateAttributes();\n\n    this.addEventListener(`${prefix}-menu-closed`, () => {\n      this.focus();\n      this._closeSubmenu();\n    });\n\n    if (this._parentMenu) {\n      this._parentMenuObserver = new MutationObserver(() => {\n        this._updateAttributes();\n      });\n\n      this._parentMenuObserver.observe(this._parentMenu, {\n        attributes: true,\n        attributeFilter: ['open'],\n      });\n    }\n  }\n\n  disconnectedCallback() {\n    this._parentMenuObserver?.disconnect();\n  }\n\n  updated(): void {\n    if (this.hasSubmenu) {\n      this.setAttribute('aria-expanded', this.hasSubmenu + '');\n    } else {\n      this.removeAttribute('aria-expanded');\n    }\n    if (this.kind === MENU_ITEM_KIND.DANGER)\n      this.classList.toggle(`${prefix}--menu-item--danger`);\n  }\n\n  @HostListener('click', { capture: true })\n  handleClick(event: MouseEvent) {\n    this._handleClick(event);\n  }\n\n  @HostListener('mousedown')\n  handleMouseDown(event: MouseEvent) {\n    if (this.disabled) {\n      event.preventDefault();\n    }\n  }\n\n  @HostListener('mouseenter')\n  handleMouseEnter() {\n    if (this.hasSubmenu) {\n      this._handleMouseEnter();\n    }\n  }\n\n  @HostListener('mouseleave')\n  handleMouseLeave() {\n    if (this.hasSubmenu) {\n      this._handleMouseLeave();\n    }\n  }\n\n  @HostListener('keydown')\n  handleKeyDown(event: KeyboardEvent) {\n    this._handleKeyDown(event);\n  }\n\n  render() {\n    const {\n      label,\n      shortcut,\n      submenuOpen,\n      boundaries,\n      isRtl,\n      kind,\n      dangerDescription,\n    } = this;\n\n    const isDanger = kind === MENU_ITEM_KIND.DANGER && !this.hasSubmenu;\n\n    const menuClassName = this.context?.hasSelectableItems\n      ? `${prefix}--menu--with-selectable-items`\n      : '';\n\n    return html`\n      <div class=\"${prefix}--menu-item__selection-icon\">\n        ${this.ariaChecked === 'true' ? iconLoader(Checkmark16) : undefined}\n      </div>\n\n      <div class=\"${prefix}--menu-item__icon\">\n        <slot name=\"render-icon\"></slot>\n      </div>\n      <div class=\"${prefix}--menu-item__label\">${label}</div>\n      ${isDanger\n        ? html`<span id=\"danger-description\" class=\"${prefix}--visually-hidden\"\n            >${dangerDescription}</span\n          >`\n        : html``}\n      ${shortcut && !this.hasSubmenu\n        ? html` <div class=\"${prefix}--menu-item__shortcut\">${shortcut}</div> `\n        : html``}\n      ${this.hasSubmenu\n        ? html`\n            <div class=\"${prefix}--menu-item__shortcut\">\n              ${isRtl ? iconLoader(CaretLeft16) : iconLoader(CaretRight16)}\n            </div>\n            <cds-custom-menu\n              className=${menuClassName}\n              size=${this.parentElement?.getAttribute('size') ??\n              MENU_SIZE.LARGE}\n              ?isChild=\"${this.hasSubmenu}\"\n              label=\"${label}\"\n              .open=\"${submenuOpen}\"\n              .x=\"${boundaries.x}\"\n              .y=\"${boundaries.y}\">\n              <slot name=\"submenu\"></slot>\n            </cds-custom-menu>\n          `\n        : html``}\n    `;\n  }\n\n  _handleClick = (e: MouseEvent | KeyboardEvent): void => {\n    if (this.disabled) {\n      return;\n    }\n\n    if (this.hasSubmenu) {\n      this._openSubmenu();\n      return;\n    }\n\n    if (e.type === 'keydown') {\n      this.click();\n      return;\n    }\n\n    this.dispatchEvent(\n      new CustomEvent(MENU_CLOSE_ROOT_EVENT, {\n        bubbles: true,\n        composed: true,\n        detail: {\n          triggerEvent: e,\n        },\n      })\n    );\n  };\n  _handleMouseEnter = () => {\n    this.hoverIntentTimeout = setTimeout(() => {\n      this._openSubmenu();\n    }, this.hoverIntentDelay);\n  };\n  _handleMouseLeave = () => {\n    if (this.hoverIntentTimeout) {\n      clearTimeout(this.hoverIntentTimeout);\n      this._closeSubmenu();\n      this.focus();\n    }\n  };\n  _openSubmenu = () => {\n    const { x, y, width, height } = this.getBoundingClientRect();\n    if (this.isRtl) {\n      this.boundaries = {\n        x: [-x, x - width],\n        y: [y, y + height],\n      };\n    } else {\n      this.boundaries = {\n        x: [x, x + width],\n        y: [y, y + height],\n      };\n    }\n    this.submenuOpen = true;\n  };\n  _registerSubMenuItems = () => {\n    const observer = new MutationObserver((mutationsList) => {\n      for (const mutation of mutationsList) {\n        if (mutation.type === 'childList') {\n          const submenuSlot = this.shadowRoot?.querySelector(\n            'slot[name=\"submenu\"]'\n          ) as HTMLSlotElement;\n\n          const item = submenuSlot?.assignedElements?.()?.[0];\n          if (item) {\n            switch (item.tagName) {\n              case 'CDS-MENU-ITEM-RADIO-GROUP':\n                this.submenuEntry = item.querySelector(`${prefix}-menu-item`);\n                break;\n              case 'CDS-MENU-ITEM-GROUP': {\n                const slotElements = item.shadowRoot\n                  ?.querySelector('slot')\n                  ?.assignedElements();\n                const firstElement = slotElements?.length && slotElements[0];\n                this.submenuEntry = firstElement;\n                break;\n              }\n              case 'CDS-MENU-ITEM':\n                this.submenuEntry = item;\n                break;\n            }\n          }\n        }\n      }\n    });\n    observer.observe(this.shadowRoot as Node, {\n      childList: true,\n      subtree: true,\n    });\n  };\n  _closeSubmenu = () => {\n    this.boundaries = {\n      x: -1,\n      y: -1,\n    };\n    this.submenuOpen = false;\n    (\n      this.shadowRoot?.querySelector(`.${prefix}--menu-item`) as HTMLLIElement\n    )?.focus();\n  };\n  _handleKeyDown = (e: KeyboardEvent) => {\n    if (this.hasSubmenu && ['ArrowRight', 'Enter', ' '].includes(e.key)) {\n      this._openSubmenu();\n      setTimeout(() => {\n        this.submenuEntry.focus();\n      });\n      e.stopPropagation();\n    } else if (e.key === 'Enter' || e.key === ' ') {\n      this._handleClick(e);\n    }\n  };\n\n  static styles = styles;\n}\nexport default CDSmenuItem;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAwBA,MAAa,wBAAwB;;;;;;AAOrC,IAAA,cAAA,MACM,oBAAoB,kBAAkB,kBAAkB,WAAW,CAAC,CAAC;;;0BAI7C;qBAMU;2BA2BlB;qBAMN;;oBAWV;GAAE,GAAG;GAAI,GAAG;GAAI;qBAGS,KAAK,aAAa,WAAW,IAAI;eAWtD;oBAKK;uBAsKG,MAAwC;AACtD,OAAI,KAAK,SACP;AAGF,OAAI,KAAK,YAAY;AACnB,SAAK,cAAc;AACnB;;AAGF,OAAI,EAAE,SAAS,WAAW;AACxB,SAAK,OAAO;AACZ;;AAGF,QAAK,cACH,IAAI,YAAY,uBAAuB;IACrC,SAAS;IACT,UAAU;IACV,QAAQ,EACN,cAAc,GACf;IACF,CAAC,CACH;;iCAEuB;AACxB,QAAK,qBAAqB,iBAAiB;AACzC,SAAK,cAAc;MAClB,KAAK,iBAAiB;;iCAED;AACxB,OAAI,KAAK,oBAAoB;AAC3B,iBAAa,KAAK,mBAAmB;AACrC,SAAK,eAAe;AACpB,SAAK,OAAO;;;4BAGK;GACnB,MAAM,EAAE,GAAG,GAAG,OAAO,WAAW,KAAK,uBAAuB;AAC5D,OAAI,KAAK,MACP,MAAK,aAAa;IAChB,GAAG,CAAC,CAAC,GAAG,IAAI,MAAM;IAClB,GAAG,CAAC,GAAG,IAAI,OAAO;IACnB;OAED,MAAK,aAAa;IAChB,GAAG,CAAC,GAAG,IAAI,MAAM;IACjB,GAAG,CAAC,GAAG,IAAI,OAAO;IACnB;AAEH,QAAK,cAAc;;qCAES;AACX,OAAI,kBAAkB,kBAAkB;AACvD,SAAK,MAAM,YAAY,cACrB,KAAI,SAAS,SAAS,aAAa;KAKjC,MAAM,QAJc,KAAK,YAAY,cACnC,yBACD,GAEyB,oBAAoB,GAAG;AACjD,SAAI,KACF,SAAQ,KAAK,SAAb;MACE,KAAK;AACH,YAAK,eAAe,KAAK,cAAc,gBAAsB;AAC7D;MACF,KAAK,uBAAuB;OAC1B,MAAM,eAAe,KAAK,YACtB,cAAc,OAAO,EACrB,kBAAkB;OACtB,MAAM,eAAe,cAAc,UAAU,aAAa;AAC1D,YAAK,eAAe;AACpB;;MAEF,KAAK;AACH,YAAK,eAAe;AACpB;;;KAKV,CACO,QAAQ,KAAK,YAAoB;IACxC,WAAW;IACX,SAAS;IACV,CAAC;;6BAEkB;AACpB,QAAK,aAAa;IAChB,GAAG;IACH,GAAG;IACJ;AACD,QAAK,cAAc;AACnB,IACE,KAAK,YAAY,cAAc,kBAAwB,GACtD,OAAO;;yBAEM,MAAqB;AACrC,OAAI,KAAK,cAAc;IAAC;IAAc;IAAS;IAAI,CAAC,SAAS,EAAE,IAAI,EAAE;AACnE,SAAK,cAAc;AACnB,qBAAiB;AACf,UAAK,aAAa,OAAO;MACzB;AACF,MAAE,iBAAiB;cACV,EAAE,QAAQ,WAAW,EAAE,QAAQ,IACxC,MAAK,aAAa,EAAE;;;CA7QxB,MAAM,qBAAqB;AAEzB,MADsB,CAAC,CAAC,KAAK,cAAc,yBAAuB,EAC/C;AACjB,SAAM,KAAA;AACN,QAAK,cACH,IAAI,YAAY,eAAe;IAC7B,SAAS;IACT,UAAU;IACX,CAAC,CACH;;;CAIL,oBAA4B;AAC1B,MAAI,KAAK,YAAY,CAAC,KAAK,YAAY;AACrC,QAAK,aAAa,iBAAiB,KAAK,SAAS;AACjD,QAAK,aAAa,YAAY,KAAK;aAC1B,KAAK,eAAe,CAAE,KAAK,YAAwB,MAAM;AAClE,QAAK,gBAAgB,gBAAgB;AACrC,QAAK,aAAa,YAAY,KAAK;SAC9B;AACL,QAAK,gBAAgB,gBAAgB;AACrC,QAAK,aAAa,YAAY,IAAI;;AAEpC,MAAI,KAAK,WACP,MAAK,aAAa,iBAAiB,KAAK,aAAa,GAAG;MAExD,MAAK,gBAAgB,gBAAgB;AAEvC,MAAI,KAAK,QAAQ,4BAAkC,EAAE;AACnD,QAAK,aAAa,QAAQ,gBAAgB;AAC1C,QAAK,aAAa,gBAAgB,KAAK,cAAc,GAAG;aAC/C,CAAC,KAAK,aAAa,OAAO,CACnC,MAAK,aAAa,QAAQ,WAAW;;CAIzC,eAAe;AACb,OAAK,aAAa,CAAC,CAAC,KAAK,cAAc,qBAAmB;AAE1D,OAAK,oBAAoB;AACzB,OAAK,QAAQ,SAAS,QAAQ;AAC9B,OAAK,uBAAuB;AAC5B,OAAK,cAAc,KAAK,QAAQ,WAAiB;AAEjD,OAAK,mBAAmB;AAExB,OAAK,iBAAiB,yBAA+B;AACnD,QAAK,OAAO;AACZ,QAAK,eAAe;IACpB;AAEF,MAAI,KAAK,aAAa;AACpB,QAAK,sBAAsB,IAAI,uBAAuB;AACpD,SAAK,mBAAmB;KACxB;AAEF,QAAK,oBAAoB,QAAQ,KAAK,aAAa;IACjD,YAAY;IACZ,iBAAiB,CAAC,OAAO;IAC1B,CAAC;;;CAIN,uBAAuB;AACrB,OAAK,qBAAqB,YAAY;;CAGxC,UAAgB;AACd,MAAI,KAAK,WACP,MAAK,aAAa,iBAAiB,KAAK,aAAa,GAAG;MAExD,MAAK,gBAAgB,gBAAgB;AAEvC,MAAI,KAAK,SAAA,SACP,MAAK,UAAU,OAAO,yBAA+B;;CAGzD,YACY,OAAmB;AAC7B,OAAK,aAAa,MAAM;;CAG1B,gBACgB,OAAmB;AACjC,MAAI,KAAK,SACP,OAAM,gBAAgB;;CAI1B,mBACmB;AACjB,MAAI,KAAK,WACP,MAAK,mBAAmB;;CAI5B,mBACmB;AACjB,MAAI,KAAK,WACP,MAAK,mBAAmB;;CAI5B,cACc,OAAsB;AAClC,OAAK,eAAe,MAAM;;CAG5B,SAAS;EACP,MAAM,EACJ,OACA,UACA,aACA,YACA,OACA,MACA,sBACE;EAEJ,MAAM,WAAW,SAAA,YAAkC,CAAC,KAAK;EAEzD,MAAM,gBAAgB,KAAK,SAAS,qBAChC,qCACA;AAEJ,SAAO,IAAI;0BACY;UACjB,KAAK,gBAAgB,SAAS,WAAW,YAAY,GAAG,KAAA,EAAU;;;0BAGjD;;;0BAGA,sBAAsB,MAAM;QAC/C,WACE,IAAI,wCAAA,MAA+C;eAC9C,kBAAkB;eAEvB,IAAI,GAAG;QACT,YAAY,CAAC,KAAK,aAChB,IAAI,gBAAA,MAAuB,yBAAyB,SAAS,WAC7D,IAAI,GAAG;QACT,KAAK,aACH,IAAI;gCACmB;gBACjB,QAAQ,WAAW,YAAY,GAAG,WAAW,aAAa,CAAC;;;0BAGjD,cAAc;qBACnB,KAAK,eAAe,aAAa,OAAO,IAAA,KAC/B;0BACJ,KAAK,WAAW;uBACnB,MAAM;uBACN,YAAY;oBACf,WAAW,EAAE;oBACb,WAAW,EAAE;;;cAIvB,IAAI,GAAG;;;;gBAiHCA;;;YA3Vf,QAAQ,EAAE,SAAS,aAAa,CAAC,CAAA,EAAA,YAAA,WAAA,WAAA,KAAA,EAAA;YAmBjC,SAAS,EAAE,MAAM,QAAQ,CAAC,CAAA,EAAA,YAAA,WAAA,SAAA,KAAA,EAAA;YAK1B,SAAS,EAAE,MAAM,QAAQ,CAAC,CAAA,EAAA,YAAA,WAAA,YAAA,KAAA,EAAA;YAK1B,SAAS,EAAE,MAAM,SAAS,CAAC,CAAA,EAAA,YAAA,WAAA,YAAA,KAAA,EAAA;YAM3B,SAAS;CAAE,MAAM;CAAQ,WAAW;CAAsB,CAAC,CAAA,EAAA,YAAA,WAAA,qBAAA,KAAA,EAAA;YAM3D,SAAS,EAAE,MAAM,SAAS,CAAC,CAAA,EAAA,YAAA,WAAA,eAAA,KAAA,EAAA;YAG3B,UAAU,CAAA,EAAA,YAAA,WAAA,QAAA,KAAA,EAAA;YAKV,UAAU,CAAA,EAAA,YAAA,WAAA,cAAA,KAAA,EAAA;YAMV,SAAS,EAAE,WAAW,gBAAgB,CAAC,CAAA,EAAA,YAAA,WAAA,eAAA,KAAA,EAAA;YAMvC,OAAO,CAAA,EAAA,YAAA,WAAA,gBAAA,KAAA,EAAA;YAKP,OAAO,CAAA,EAAA,YAAA,WAAA,SAAA,KAAA,EAAA;YAKP,OAAO,CAAA,EAAA,YAAA,WAAA,cAAA,KAAA,EAAA;YAiFP,aAAa,SAAS,EAAE,SAAS,MAAM,CAAC,CAAA,EAAA,YAAA,WAAA,eAAA,KAAA;YAKxC,aAAa,YAAY,CAAA,EAAA,YAAA,WAAA,mBAAA,KAAA;YAOzB,aAAa,aAAa,CAAA,EAAA,YAAA,WAAA,oBAAA,KAAA;YAO1B,aAAa,aAAa,CAAA,EAAA,YAAA,WAAA,oBAAA,KAAA;YAO1B,aAAa,UAAU,CAAA,EAAA,YAAA,WAAA,iBAAA,KAAA;0BApLzBC,cAAc,gBAAsB,CAAA,EAAA,YAAA;AA+VrC,IAAA,oBAAe"}
+{"version":3,"file":"menu-item.js","names":["styles","customElement"],"sources":["../../../src/components/menu/menu-item.ts"],"sourcesContent":["/**\n * Copyright IBM Corp. 2019, 2026\n *\n * This source code is licensed under the Apache-2.0 license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { LitElement, html } from 'lit';\nimport { property, state } from 'lit/decorators.js';\nimport { prefix } from '../../globals/settings';\nimport styles from './menu-item.scss?lit';\nimport { carbonElement as customElement } from '../../globals/decorators/carbon-element';\nimport { consume } from '@lit/context';\nimport { MenuContext } from './menu-context';\nimport Checkmark16 from '@carbon/icons/es/checkmark/16.js';\nimport CaretLeft16 from '@carbon/icons/es/caret--left/16.js';\nimport CaretRight16 from '@carbon/icons/es/caret--right/16.js';\nimport HostListener from '../../globals/decorators/host-listener';\nimport HostListenerMixin from '../../globals/mixins/host-listener';\nimport { MENU_ITEM_KIND, MENU_SIZE } from './defs';\nimport { iconLoader } from '../../globals/internal/icon-loader';\nimport CDSMenu from './menu';\n\nexport { MENU_ITEM_KIND, MENU_SIZE };\nexport const MENU_CLOSE_ROOT_EVENT = `${prefix}-menu-close-root-request`;\n\n/**\n * Menu Item.\n *\n * @element cds-custom-menu-item\n */\n@customElement(`${prefix}-menu-item`)\nclass CDSmenuItem extends HostListenerMixin(HostListenerMixin(LitElement)) {\n  @consume({ context: MenuContext })\n  context;\n\n  readonly hoverIntentDelay = 150; // in ms\n  hoverIntentTimeout;\n\n  /**\n   * The parent cds-custom-menu element\n   */\n  private _parentMenu: CDSMenu | null = null;\n\n  /**\n   * MutationObserver that observes the parent cds-custom-menu element\n   */\n  private _parentMenuObserver?: MutationObserver;\n\n  /**\n   * Label for the menu item.\n   */\n  @property({ type: String })\n  label;\n  /**\n   * Shortcut for the menu item.\n   */\n  @property({ type: String })\n  shortcut;\n  /**\n   * Disabled property for the menu item.\n   */\n  @property({ type: Boolean })\n  disabled;\n\n  /**\n   * Specify the message read by screen readers for the danger menu item variant\n   */\n  @property({ type: String, attribute: 'danger-description' })\n  dangerDescription = '';\n\n  /**\n   * Whether the menu submen for an item is open or not.\n   */\n  @property({ type: Boolean })\n  submenuOpen = false;\n\n  @property()\n  kind = MENU_ITEM_KIND.DEFAULT;\n  /**\n   * Menu boundaries.\n   */\n  @property()\n  boundaries: {\n    x: number | [number, number];\n    y: number | [number, number];\n  } = { x: -1, y: -1 };\n\n  @property({ attribute: 'aria-checked' })\n  ariaChecked: string | null = this.getAttribute('selected') ?? 'false';\n\n  /**\n   * Entrypoint.\n   */\n  @state()\n  submenuEntry;\n  /**\n   * Checks if document direction is rtl.\n   */\n  @state()\n  isRtl = false;\n  /**\n   * Checks if document direction is rtl.\n   */\n  @state()\n  hasSubmenu = false;\n\n  async dispatchIconDetect() {\n    const hasRenderIcon = !!this.querySelector('[slot=\"render-icon\"]');\n    if (hasRenderIcon) {\n      await undefined; // this is used to replace setTimeout with 0 time out, which is much fater.\n      this.dispatchEvent(\n        new CustomEvent('icon-detect', {\n          bubbles: true, // Allows event to bubble up the DOM\n          composed: true, // Allows event to cross shadow DOM boundary\n        })\n      );\n    }\n  }\n\n  private _updateAttributes() {\n    if (this.disabled && !this.hasSubmenu) {\n      this.setAttribute('aria-disabled', this.disabled);\n      this.setAttribute('tabindex', '-1');\n    } else if (this._parentMenu && !(this._parentMenu as CDSMenu).open) {\n      this.removeAttribute('aria-disabled');\n      this.setAttribute('tabindex', '-1');\n    } else {\n      this.removeAttribute('aria-disabled');\n      this.setAttribute('tabindex', '0');\n    }\n    if (this.hasSubmenu) {\n      this.setAttribute('aria-haspopup', this.hasSubmenu + '');\n    } else {\n      this.removeAttribute('aria-haspopup');\n    }\n    if (this.closest(`${prefix}-menu-item-radio-group`)) {\n      this.setAttribute('role', 'menuitemradio');\n      this.setAttribute('aria-checked', this.ariaChecked + '');\n    } else if (!this.getAttribute('role')) {\n      this.setAttribute('role', 'menuitem');\n    }\n  }\n\n  firstUpdated() {\n    this.hasSubmenu = !!this.querySelector('[slot=\"submenu\"]');\n\n    this.dispatchIconDetect();\n    this.isRtl = document.dir === 'rtl';\n    this._registerSubMenuItems();\n    this._parentMenu = this.closest(`${prefix}-menu`);\n\n    this._updateAttributes();\n\n    this.addEventListener(`${prefix}-menu-closed`, () => {\n      this.focus();\n      this._closeSubmenu();\n    });\n\n    if (this._parentMenu) {\n      this._parentMenuObserver = new MutationObserver(() => {\n        this._updateAttributes();\n      });\n\n      this._parentMenuObserver.observe(this._parentMenu, {\n        attributes: true,\n        attributeFilter: ['open'],\n      });\n    }\n  }\n\n  disconnectedCallback() {\n    this._parentMenuObserver?.disconnect();\n  }\n\n  updated(): void {\n    if (this.hasSubmenu) {\n      this.setAttribute('aria-expanded', this.hasSubmenu + '');\n    } else {\n      this.removeAttribute('aria-expanded');\n    }\n    if (this.kind === MENU_ITEM_KIND.DANGER)\n      this.classList.toggle(`${prefix}--menu-item--danger`);\n  }\n\n  @HostListener('click', { capture: true })\n  handleClick(event: MouseEvent) {\n    this._handleClick(event);\n  }\n\n  @HostListener('mousedown')\n  handleMouseDown(event: MouseEvent) {\n    if (this.disabled) {\n      event.preventDefault();\n    }\n  }\n\n  @HostListener('mouseenter')\n  handleMouseEnter() {\n    if (this.hasSubmenu) {\n      this._handleMouseEnter();\n    }\n  }\n\n  @HostListener('mouseleave')\n  handleMouseLeave() {\n    if (this.hasSubmenu) {\n      this._handleMouseLeave();\n    }\n  }\n\n  @HostListener('keydown')\n  handleKeyDown(event: KeyboardEvent) {\n    this._handleKeyDown(event);\n  }\n\n  render() {\n    const {\n      label,\n      shortcut,\n      submenuOpen,\n      boundaries,\n      isRtl,\n      kind,\n      dangerDescription,\n    } = this;\n\n    const isDanger = kind === MENU_ITEM_KIND.DANGER && !this.hasSubmenu;\n    const hasDangerDescription = isDanger && Boolean(dangerDescription);\n\n    const menuClassName = this.context?.hasSelectableItems\n      ? `${prefix}--menu--with-selectable-items`\n      : '';\n\n    return html`\n      <div class=\"${prefix}--menu-item__selection-icon\">\n        ${this.ariaChecked === 'true' ? iconLoader(Checkmark16) : undefined}\n      </div>\n\n      <div class=\"${prefix}--menu-item__icon\">\n        <slot name=\"render-icon\"></slot>\n      </div>\n      <div class=\"${prefix}--menu-item__label\">${label}</div>\n      ${hasDangerDescription\n        ? html`<span id=\"danger-description\" class=\"${prefix}--visually-hidden\"\n            >${dangerDescription}</span\n          >`\n        : html``}\n      ${shortcut && !this.hasSubmenu\n        ? html` <div class=\"${prefix}--menu-item__shortcut\">${shortcut}</div> `\n        : html``}\n      ${this.hasSubmenu\n        ? html`\n            <div class=\"${prefix}--menu-item__shortcut\">\n              ${isRtl ? iconLoader(CaretLeft16) : iconLoader(CaretRight16)}\n            </div>\n            <cds-custom-menu\n              className=${menuClassName}\n              size=${this.parentElement?.getAttribute('size') ??\n              MENU_SIZE.LARGE}\n              ?isChild=\"${this.hasSubmenu}\"\n              label=\"${label}\"\n              .open=\"${submenuOpen}\"\n              .x=\"${boundaries.x}\"\n              .y=\"${boundaries.y}\">\n              <slot name=\"submenu\"></slot>\n            </cds-custom-menu>\n          `\n        : html``}\n    `;\n  }\n\n  _handleClick = (e: MouseEvent | KeyboardEvent): void => {\n    if (this.disabled) {\n      return;\n    }\n\n    if (this.hasSubmenu) {\n      this._openSubmenu();\n      return;\n    }\n\n    if (e.type === 'keydown') {\n      this.click();\n      return;\n    }\n\n    this.dispatchEvent(\n      new CustomEvent(MENU_CLOSE_ROOT_EVENT, {\n        bubbles: true,\n        composed: true,\n        detail: {\n          triggerEvent: e,\n        },\n      })\n    );\n  };\n  _handleMouseEnter = () => {\n    this.hoverIntentTimeout = setTimeout(() => {\n      this._openSubmenu();\n    }, this.hoverIntentDelay);\n  };\n  _handleMouseLeave = () => {\n    if (this.hoverIntentTimeout) {\n      clearTimeout(this.hoverIntentTimeout);\n      this._closeSubmenu();\n      this.focus();\n    }\n  };\n  _openSubmenu = () => {\n    const { x, y, width, height } = this.getBoundingClientRect();\n    if (this.isRtl) {\n      this.boundaries = {\n        x: [-x, x - width],\n        y: [y, y + height],\n      };\n    } else {\n      this.boundaries = {\n        x: [x, x + width],\n        y: [y, y + height],\n      };\n    }\n    this.submenuOpen = true;\n  };\n  _registerSubMenuItems = () => {\n    const observer = new MutationObserver((mutationsList) => {\n      for (const mutation of mutationsList) {\n        if (mutation.type === 'childList') {\n          const submenuSlot = this.shadowRoot?.querySelector(\n            'slot[name=\"submenu\"]'\n          ) as HTMLSlotElement;\n\n          const item = submenuSlot?.assignedElements?.()?.[0];\n          if (item) {\n            switch (item.tagName) {\n              case 'CDS-MENU-ITEM-RADIO-GROUP':\n                this.submenuEntry = item.querySelector(`${prefix}-menu-item`);\n                break;\n              case 'CDS-MENU-ITEM-GROUP': {\n                const slotElements = item.shadowRoot\n                  ?.querySelector('slot')\n                  ?.assignedElements();\n                const firstElement = slotElements?.length && slotElements[0];\n                this.submenuEntry = firstElement;\n                break;\n              }\n              case 'CDS-MENU-ITEM':\n                this.submenuEntry = item;\n                break;\n            }\n          }\n        }\n      }\n    });\n    observer.observe(this.shadowRoot as Node, {\n      childList: true,\n      subtree: true,\n    });\n  };\n  _closeSubmenu = () => {\n    this.boundaries = {\n      x: -1,\n      y: -1,\n    };\n    this.submenuOpen = false;\n    (\n      this.shadowRoot?.querySelector(`.${prefix}--menu-item`) as HTMLLIElement\n    )?.focus();\n  };\n  _handleKeyDown = (e: KeyboardEvent) => {\n    if (this.hasSubmenu && ['ArrowRight', 'Enter', ' '].includes(e.key)) {\n      this._openSubmenu();\n      setTimeout(() => {\n        this.submenuEntry.focus();\n      });\n      e.stopPropagation();\n    } else if (e.key === 'Enter' || e.key === ' ') {\n      this._handleClick(e);\n    }\n  };\n\n  static styles = styles;\n}\nexport default CDSmenuItem;\n"],"mappings":"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"}