@carbon/web-components 2.32.0 → 2.33.0-rc.0

package/es/components/dropdown/dropdown-item.d.ts

@@ -38,7 +38,18 @@ declare class CDSDropdownItem extends LitElement {
      * The `value` attribute that is set to the parent `<cds-dropdown>` when this dropdown item is selected.
      */
     value: string;
+    /**
+     * true if menu item has ellipsis applied
+     */
+    _hasEllipsisApplied: boolean;
     connectedCallback(): void;
+    /**
+     * Handles `slotchange` event.
+     *
+     * Adds the `title` property to its parent element so the native
+     * browser tooltip appears for menu items that result in ellipsis
+     */
+    protected _handleSlotChange({ target }: Event): void;
     render(): import("lit-html").TemplateResult<1>;
     /**
      * Store an identifier for use in composing this item's id.

package/es/components/dropdown/dropdown-item.js

@@ -7,7 +7,7 @@
 
 import { __decorate } from 'tslib';
 import { LitElement, html } from 'lit';
-import { property } from 'lit/decorators.js';
+import { property, state } from 'lit/decorators.js';
 import Checkmark16 from '../../icons/checkmark/16.js';
 import { prefix } from '../../globals/settings.js';
 import './dropdown.js';
@@ -55,6 +55,10 @@ let CDSDropdownItem = class CDSDropdownItem extends LitElement {
          * The `value` attribute that is set to the parent `<cds-dropdown>` when this dropdown item is selected.
          */
         this.value = '';
+        /**
+         * true if menu item has ellipsis applied
+         */
+        this._hasEllipsisApplied = false;
     }
     connectedCallback() {
         super.connectedCallback();
@@ -67,11 +71,35 @@ let CDSDropdownItem = class CDSDropdownItem extends LitElement {
         }
         this.setAttribute('aria-selected', String(this.selected));
     }
+    /**
+     * Handles `slotchange` event.
+     *
+     * Adds the `title` property to its parent element so the native
+     * browser tooltip appears for menu items that result in ellipsis
+     */
+    _handleSlotChange({ target }) {
+        var _a;
+        const text = target
+            .assignedNodes()
+            .filter((node) => node.nodeType !== Node.TEXT_NODE || node.textContent.trim());
+        const textContainer = (_a = this.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector(`.${prefix}--list-box__menu-item__option`);
+        if (!textContainer || this._hasEllipsisApplied === true)
+            return;
+        const observer = new ResizeObserver(() => {
+            var _a;
+            this._hasEllipsisApplied =
+                textContainer.scrollWidth > textContainer.clientWidth;
+            if (this._hasEllipsisApplied) {
+                textContainer.setAttribute('title', (_a = text[0].textContent) !== null && _a !== void 0 ? _a : '');
+            }
+        });
+        observer.observe(textContainer);
+    }
     render() {
-        const { selected } = this;
+        const { selected, _handleSlotChange: handleSlotChange } = this;
         return html `
-      <div class="${prefix}--list-box__menu-item__option">
-        <slot></slot>
+      <div class="${prefix}--list-box__menu-item__option" part="menu-item">
+        <slot @slotchange=${handleSlotChange}></slot>
         ${!selected
             ? undefined
             : Checkmark16({
@@ -104,6 +132,9 @@ __decorate([
 __decorate([
     property()
 ], CDSDropdownItem.prototype, "value", void 0);
+__decorate([
+    state()
+], CDSDropdownItem.prototype, "_hasEllipsisApplied", void 0);
 CDSDropdownItem = __decorate([
     carbonElement(`${prefix}-dropdown-item`)
 ], CDSDropdownItem);

package/es/components/dropdown/dropdown-item.js.map

@@ -1 +1 @@
-{"version":3,"file":"dropdown-item.js","sources":["../../../src/components/dropdown/dropdown-item.ts"],"sourcesContent":[null],"names":["customElement"],"mappings":";;;;;;;;;;;;;;;;;AAAA;;;;;AAKG;AAUH;;;;;AAKG;AAEH,IAAM,eAAe,GAArB,MAAM,eAAgB,SAAQ,UAAU,CAAA;AAAxC,IAAA,WAAA,GAAA;;AACE;;AAEG;QAEH,IAAQ,CAAA,QAAA,GAAG,KAAK,CAAC;AAEjB;;;;;AAKG;QAEH,IAAW,CAAA,WAAA,GAAG,KAAK,CAAC;AAEpB;;;;AAIG;QAEH,IAAQ,CAAA,QAAA,GAAG,KAAK,CAAC;AAEjB;;AAEG;AAEH,QAAA,IAAA,CAAA,IAAI,GAAG,aAAa,CAAC,MAAM,CAAC;AAE5B;;AAEG;QAEH,IAAK,CAAA,KAAA,GAAG,EAAE,CAAC;KAwCZ;IAtCC,iBAAiB,GAAA;QACf,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAC1B,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC,MAAM,CAAC,EAAE;AAC9B,YAAA,IAAI,CAAC,YAAY,CAAC,MAAM,EAAE,QAAQ,CAAC,CAAC;SACrC;QACD,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,EAAE;YAC5B,IAAI,CAAC,YAAY,CACf,IAAI,EACJ,GAAG,MAAM,CAAA,eAAA,EAAmB,IAAI,CAAC,WAAsC;iBACpE,EAAE,EAAE,CAAE,CAAA,CACV,CAAC;SACH;AACD,QAAA,IAAI,CAAC,YAAY,CAAC,eAAe,EAAE,MAAM,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC;KAC3D;IAED,MAAM,GAAA;AACJ,QAAA,MAAM,EAAE,QAAQ,EAAE,GAAG,IAAI,CAAC;AAC1B,QAAA,OAAO,IAAI,CAAA,CAAA;oBACK,MAAM,CAAA;;AAEhB,QAAA,EAAA,CAAC,QAAQ;AACT,cAAE,SAAS;cACT,WAAW,CAAC;AACV,gBAAA,IAAI,EAAE,eAAe;gBACrB,KAAK,EAAE,CAAG,EAAA,MAAM,CAAsC,oCAAA,CAAA;aACvD,CAAC,CAAA;;KAET,CAAC;KACH;;AAED;;;;AAIG;AACI,eAAE,CAAA,EAAA,GAAG,CAAH,CAAK;AAEP,eAAM,CAAA,MAAA,GAAG,MAAH,CAAU;AApEvB,UAAA,CAAA;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAC1B,CAAA,EAAA,eAAA,CAAA,SAAA,EAAA,UAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AASjB,UAAA,CAAA;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AACvB,CAAA,EAAA,eAAA,CAAA,SAAA,EAAA,aAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAQpB,UAAA,CAAA;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAC1B,CAAA,EAAA,eAAA,CAAA,SAAA,EAAA,UAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAMjB,UAAA,CAAA;AADC,IAAA,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AACA,CAAA,EAAA,eAAA,CAAA,SAAA,EAAA,MAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAM5B,UAAA,CAAA;AADC,IAAA,QAAQ,EAAE;AACA,CAAA,EAAA,eAAA,CAAA,SAAA,EAAA,OAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAlCP,eAAe,GAAA,UAAA,CAAA;AADpB,IAAAA,aAAa,CAAC,CAAA,EAAG,MAAM,CAAA,cAAA,CAAgB,CAAC;AACnC,CAAA,EAAA,eAAe,CA0EpB,CAAA;AAED,wBAAe,eAAe;;;;"}
+{"version":3,"file":"dropdown-item.js","sources":["../../../src/components/dropdown/dropdown-item.ts"],"sourcesContent":[null],"names":["customElement"],"mappings":"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"}