@carbon/web-components 2.43.0 → 2.44.0

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

@@ -1,14 +1,23 @@
 /**
- * Copyright IBM Corp. 2019, 2023
+ * Copyright IBM Corp. 2019, 2025
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
  */
 import { LitElement } from 'lit';
+import { DROPDOWN_SIZE } from './defs';
 /**
  * Skeleton version of dropdown.
  */
 declare class CDSDropdownSkeleton extends LitElement {
+    /**
+     * Specify whether the label should be hidden, or not.
+     */
+    hideLabel: boolean;
+    /**
+     * Specify the size of the ListBox.
+     */
+    size: DROPDOWN_SIZE;
     render(): import("lit-html").TemplateResult<1>;
     static styles: any;
 }

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

@@ -7,12 +7,15 @@
 
 import { __decorate } from 'tslib';
 import { LitElement, html } from 'lit';
+import { classMap } from 'lit/directives/class-map.js';
+import { property } from 'lit/decorators.js';
 import { prefix } from '../../globals/settings.js';
+import { DROPDOWN_SIZE } from './defs.js';
 import styles from './dropdown.scss.js';
 import { carbonElement } from '../../globals/decorators/carbon-element.js';
 
 /**
- * Copyright IBM Corp. 2019, 2023
+ * Copyright IBM Corp. 2019, 2025
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
@@ -21,18 +24,39 @@ import { carbonElement } from '../../globals/decorators/carbon-element.js';
  * Skeleton version of dropdown.
  */
 let CDSDropdownSkeleton = class CDSDropdownSkeleton extends LitElement {
+    constructor() {
+        super(...arguments);
+        /**
+         * Specify whether the label should be hidden, or not.
+         */
+        this.hideLabel = false;
+        /**
+         * Specify the size of the ListBox.
+         */
+        this.size = DROPDOWN_SIZE.MEDIUM;
+    }
     render() {
+        const { hideLabel, size } = this;
+        const classes = classMap({
+            [`${prefix}--skeleton`]: true,
+            [`${prefix}--dropdown`]: true,
+            [`${prefix}--list-box--${size}`]: Boolean(size),
+        });
         return html `
-      <div
-        class="${prefix}--skeleton ${prefix}--dropdown-v2 ${prefix}--list-box ${prefix}--form-item">
-        <div class="${prefix}--list-box__field">
-          <span class="${prefix}--list-box__label"></span>
-        </div>
-      </div>
+      ${!hideLabel
+            ? html `<span class="${prefix}--label ${prefix}--skeleton"></span>`
+            : null}
+      <div class=${classes}></div>
     `;
     }
 };
 CDSDropdownSkeleton.styles = styles;
+__decorate([
+    property({ type: Boolean, reflect: true, attribute: 'hide-label' })
+], CDSDropdownSkeleton.prototype, "hideLabel", void 0);
+__decorate([
+    property({ reflect: true })
+], CDSDropdownSkeleton.prototype, "size", void 0);
 CDSDropdownSkeleton = __decorate([
     carbonElement(`${prefix}-dropdown-skeleton`)
 ], CDSDropdownSkeleton);

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

@@ -1 +1 @@
-{"version":3,"file":"dropdown-skeleton.js","sources":["../../../src/components/dropdown/dropdown-skeleton.ts"],"sourcesContent":["/**\n * Copyright IBM Corp. 2019, 2023\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 { prefix } from '../../globals/settings';\nimport styles from './dropdown.scss?lit';\nimport { carbonElement as customElement } from '../../globals/decorators/carbon-element';\n\n/**\n * Skeleton version of dropdown.\n */\n@customElement(`${prefix}-dropdown-skeleton`)\nclass CDSDropdownSkeleton extends LitElement {\n  render() {\n    return html`\n      <div\n        class=\"${prefix}--skeleton ${prefix}--dropdown-v2 ${prefix}--list-box ${prefix}--form-item\">\n        <div class=\"${prefix}--list-box__field\">\n          <span class=\"${prefix}--list-box__label\"></span>\n        </div>\n      </div>\n    `;\n  }\n\n  static styles = styles;\n}\n\nexport default CDSDropdownSkeleton;\n"],"names":["customElement"],"mappings":";;;;;;;;;;;;;AAAA;;;;;AAKG;AAOH;;AAEG;AAEH,IAAM,mBAAmB,GAAzB,MAAM,mBAAoB,SAAQ,UAAU,CAAA;IAC1C,MAAM,GAAA;AACJ,QAAA,OAAO,IAAI,CAAA;;AAEE,eAAA,EAAA,MAAM,CAAc,WAAA,EAAA,MAAM,CAAiB,cAAA,EAAA,MAAM,cAAc,MAAM,CAAA;sBAChE,MAAM,CAAA;yBACH,MAAM,CAAA;;;KAG1B;;;AAGI,mBAAM,CAAA,MAAA,GAAG,MAAH;AAZT,mBAAmB,GAAA,UAAA,CAAA;AADxB,IAAAA,aAAa,CAAC,CAAA,EAAG,MAAM,CAAA,kBAAA,CAAoB;AACtC,CAAA,EAAA,mBAAmB,CAaxB;AAED,4BAAe,mBAAmB;;;;"}
+{"version":3,"file":"dropdown-skeleton.js","sources":["../../../src/components/dropdown/dropdown-skeleton.ts"],"sourcesContent":["/**\n * Copyright IBM Corp. 2019, 2025\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 { classMap } from 'lit/directives/class-map.js';\nimport { property } from 'lit/decorators.js';\nimport { prefix } from '../../globals/settings';\nimport { DROPDOWN_SIZE } from './defs';\nimport styles from './dropdown.scss?lit';\nimport { carbonElement as customElement } from '../../globals/decorators/carbon-element';\n\n/**\n * Skeleton version of dropdown.\n */\n@customElement(`${prefix}-dropdown-skeleton`)\nclass CDSDropdownSkeleton extends LitElement {\n  /**\n   * Specify whether the label should be hidden, or not.\n   */\n  @property({ type: Boolean, reflect: true, attribute: 'hide-label' })\n  hideLabel = false;\n\n  /**\n   * Specify the size of the ListBox.\n   */\n  @property({ reflect: true })\n  size = DROPDOWN_SIZE.MEDIUM;\n\n  render() {\n    const { hideLabel, size } = this;\n    const classes = classMap({\n      [`${prefix}--skeleton`]: true,\n      [`${prefix}--dropdown`]: true,\n      [`${prefix}--list-box--${size}`]: Boolean(size),\n    });\n\n    return html`\n      ${!hideLabel\n        ? html`<span class=\"${prefix}--label ${prefix}--skeleton\"></span>`\n        : null}\n      <div class=${classes}></div>\n    `;\n  }\n\n  static styles = styles;\n}\n\nexport default CDSDropdownSkeleton;\n"],"names":["customElement"],"mappings":";;;;;;;;;;;;;;;;AAAA;;;;;AAKG;AAUH;;AAEG;AAEH,IAAM,mBAAmB,GAAzB,MAAM,mBAAoB,SAAQ,UAAU,CAAA;AAA5C,IAAA,WAAA,GAAA;;AACE;;AAEG;QAEH,IAAS,CAAA,SAAA,GAAG,KAAK;AAEjB;;AAEG;AAEH,QAAA,IAAA,CAAA,IAAI,GAAG,aAAa,CAAC,MAAM;;IAE3B,MAAM,GAAA;AACJ,QAAA,MAAM,EAAE,SAAS,EAAE,IAAI,EAAE,GAAG,IAAI;QAChC,MAAM,OAAO,GAAG,QAAQ,CAAC;AACvB,YAAA,CAAC,CAAG,EAAA,MAAM,CAAY,UAAA,CAAA,GAAG,IAAI;AAC7B,YAAA,CAAC,CAAG,EAAA,MAAM,CAAY,UAAA,CAAA,GAAG,IAAI;YAC7B,CAAC,CAAA,EAAG,MAAM,CAAA,YAAA,EAAe,IAAI,CAAA,CAAE,GAAG,OAAO,CAAC,IAAI,CAAC;AAChD,SAAA,CAAC;AAEF,QAAA,OAAO,IAAI,CAAA;AACP,MAAA,EAAA,CAAC;AACD,cAAE,IAAI,CAAA,gBAAgB,MAAM,CAAA,QAAA,EAAW,MAAM,CAAqB,mBAAA;AAClE,cAAE,IAAI;mBACK,OAAO,CAAA;KACrB;;;AAGI,mBAAM,CAAA,MAAA,GAAG,MAAH;AAxBb,UAAA,CAAA;AADC,IAAA,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,YAAY,EAAE;AACjD,CAAA,EAAA,mBAAA,CAAA,SAAA,EAAA,WAAA,EAAA,MAAA,CAAA;AAMlB,UAAA,CAAA;AADC,IAAA,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE;AACC,CAAA,EAAA,mBAAA,CAAA,SAAA,EAAA,MAAA,EAAA,MAAA,CAAA;AAXxB,mBAAmB,GAAA,UAAA,CAAA;AADxB,IAAAA,aAAa,CAAC,CAAA,EAAG,MAAM,CAAA,kBAAA,CAAoB;AACtC,CAAA,EAAA,mBAAmB,CA8BxB;AAED,4BAAe,mBAAmB;;;;"}

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

@@ -1463,6 +1463,14 @@ declare class CDSDropdown extends CDSDropdown_base {
      * `true` if there is an AI Label.
      */
     protected _hasAILabel: boolean;
+    /**
+     * Currently slotted AI decorator nodes (`cds-ai-label`/slug) with listeners attached.
+     */
+    private _aiDecoratorNodes;
+    /**
+     * Handles interaction on an AI decorator while the menu is open.
+     */
+    private _handleAIDecoratorInteraction;
     protected _activeDescendant?: string;
     /**
      * The content of the selected item.
@@ -1508,8 +1516,20 @@ declare class CDSDropdown extends CDSDropdown_base {
      * Handler for the `keydown` event on the top-level element in the shadow DOM.
      */
     protected _handleKeydownInner(event: KeyboardEvent): void;
+    private _handleMenuInputKeydown;
+    protected _shouldClearMenuInputOnEscape({ menuOpen, }: {
+        event: KeyboardEvent;
+        menuOpen: boolean;
+        isInputTarget: boolean;
+    }): boolean;
+    protected get _supportsMenuInputFiltering(): boolean;
+    protected get _menuInputNode(): HTMLInputElement | null;
+    protected _clearMenuInputFiltering(): void;
+    private _shouldForwardKeyToMenuInput;
+    private _forwardKeyToMenuInput;
+    private _shouldRetainMenuInputFocus;
     /**
-     * Handler for the `keypress` event on the top-level element in the shadow DOM.
+     * Handles keypress events (Space, Enter)
      */
     protected _handleKeypressInner(event: KeyboardEvent): void;
     /**
@@ -1517,6 +1537,8 @@ declare class CDSDropdown extends CDSDropdown_base {
      *
      * @param event The event.
      */
+    protected _handleMouseoverInner(event: MouseEvent): void;
+    protected _handleMouseleaveInner(event: MouseEvent): void;
     protected _handleFocusOut(event: FocusEvent): void;
     /**
      * Handles `slotchange` event for the `<slot>` for helper text.
@@ -1530,27 +1552,39 @@ declare class CDSDropdown extends CDSDropdown_base {
      * Handles `slotchange` event.
      */
     protected _handleAILabelSlotChange({ target }: Event): void;
+    disconnectedCallback(): void;
+    /**
+     * Updates listeners for AI decorator nodes to ensure only one menu stays open.
+     */
+    private _updateAIDecoratorListeners;
     /**
      * Handles user-initiated selection of a dropdown item.
      *
      * @param [item] The dropdown item user wants to select. Absense of this argument means clearing selection.
      */
     protected _handleUserInitiatedSelectItem(item?: CDSDropdownItem): void;
+    protected _shouldCloseAfterSelection(_item?: CDSDropdownItem): boolean;
     /**
      * Handles user-initiated toggling the open state.
      *
      * @param [force] If specified, forces the open state to the given one.
      */
-    protected _handleUserInitiatedToggle(force?: boolean): void;
+    protected _handleUserInitiatedToggle(force?: boolean, { restoreTriggerFocus, focusMenu, highlightSelectedOnOpen, }?: {
+        restoreTriggerFocus?: boolean;
+        focusMenu?: boolean;
+        highlightSelectedOnOpen?: boolean;
+    }): void;
     /**
      * Clears the selection of dropdown items.
      */
     protected _clearHighlight(): void;
-    /**
-     * Navigate through dropdown items.
-     *
-     * @param direction `-1` to navigate backward, `1` to navigate forward.
-     */
+    protected _getDropdownItemFromEvent(event: Event): CDSDropdownItem | null;
+    protected _setHighlightedItem(item?: CDSDropdownItem | null, { scrollIntoView }?: {
+        scrollIntoView?: boolean;
+    }): void;
+    protected _getNextDropdownItem(item: CDSDropdownItem): CDSDropdownItem | null;
+    protected _updateSelectedNextSibling(item?: CDSDropdownItem | null): void;
+    protected _highlightSelectedItem(): void;
     protected _navigate(direction: number): void;
     /**
      * @returns The content preceding the trigger button.