@carbon/web-components 2.10.0 → 2.11.0-rc.0

package/es/components/ui-shell/side-nav-menu.d.ts

@@ -33,11 +33,11 @@ declare const CDSSideNavMenu_base: {
         click(): void;
         hidePopover(): void;
         showPopover(): void;
-        togglePopover(force?: boolean | undefined): boolean;
-        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions | undefined): void;
-        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions | undefined): void;
-        removeEventListener<K_1 extends keyof HTMLElementEventMap>(type: K_1, listener: (this: HTMLElement, ev: HTMLElementEventMap[K_1]) => any, options?: boolean | EventListenerOptions | undefined): void;
-        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions | undefined): void;
+        togglePopover(force?: boolean): boolean;
+        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
         readonly attributes: NamedNodeMap;
         readonly classList: DOMTokenList;
         className: string;
@@ -62,10 +62,10 @@ declare const CDSSideNavMenu_base: {
         slot: string;
         readonly tagName: string;
         attachShadow(init: ShadowRootInit): ShadowRoot;
-        checkVisibility(options?: CheckVisibilityOptions | undefined): boolean;
-        closest<K_2 extends keyof HTMLElementTagNameMap>(selector: K_2): HTMLElementTagNameMap[K_2] | null;
-        closest<K_3 extends keyof SVGElementTagNameMap>(selector: K_3): SVGElementTagNameMap[K_3] | null;
-        closest<K_4 extends keyof MathMLElementTagNameMap>(selector: K_4): MathMLElementTagNameMap[K_4] | null;
+        checkVisibility(options?: CheckVisibilityOptions): boolean;
+        closest<K extends keyof HTMLElementTagNameMap>(selector: K): HTMLElementTagNameMap[K] | null;
+        closest<K extends keyof SVGElementTagNameMap>(selector: K): SVGElementTagNameMap[K] | null;
+        closest<K extends keyof MathMLElementTagNameMap>(selector: K): MathMLElementTagNameMap[K] | null;
         closest<E extends Element = Element>(selectors: string): E | null;
         computedStyleMap(): StylePropertyMapReadOnly;
         getAttribute(qualifiedName: string): string | null;
@@ -76,10 +76,10 @@ declare const CDSSideNavMenu_base: {
         getBoundingClientRect(): DOMRect;
         getClientRects(): DOMRectList;
         getElementsByClassName(classNames: string): HTMLCollectionOf<Element>;
-        getElementsByTagName<K_5 extends keyof HTMLElementTagNameMap>(qualifiedName: K_5): HTMLCollectionOf<HTMLElementTagNameMap[K_5]>;
-        getElementsByTagName<K_6 extends keyof SVGElementTagNameMap>(qualifiedName: K_6): HTMLCollectionOf<SVGElementTagNameMap[K_6]>;
-        getElementsByTagName<K_7 extends keyof MathMLElementTagNameMap>(qualifiedName: K_7): HTMLCollectionOf<MathMLElementTagNameMap[K_7]>;
-        getElementsByTagName<K_8 extends keyof HTMLElementDeprecatedTagNameMap>(qualifiedName: K_8): HTMLCollectionOf<HTMLElementDeprecatedTagNameMap[K_8]>;
+        getElementsByTagName<K extends keyof HTMLElementTagNameMap>(qualifiedName: K): HTMLCollectionOf<HTMLElementTagNameMap[K]>;
+        getElementsByTagName<K extends keyof SVGElementTagNameMap>(qualifiedName: K): HTMLCollectionOf<SVGElementTagNameMap[K]>;
+        getElementsByTagName<K extends keyof MathMLElementTagNameMap>(qualifiedName: K): HTMLCollectionOf<MathMLElementTagNameMap[K]>;
+        getElementsByTagName<K extends keyof HTMLElementDeprecatedTagNameMap>(qualifiedName: K): HTMLCollectionOf<HTMLElementDeprecatedTagNameMap[K]>;
         getElementsByTagName(qualifiedName: string): HTMLCollectionOf<Element>;
         getElementsByTagNameNS(namespaceURI: "http://www.w3.org/1999/xhtml", localName: string): HTMLCollectionOf<HTMLElement>;
         getElementsByTagNameNS(namespaceURI: "http://www.w3.org/2000/svg", localName: string): HTMLCollectionOf<SVGElement>;
@@ -97,21 +97,22 @@ declare const CDSSideNavMenu_base: {
         removeAttribute(qualifiedName: string): void;
         removeAttributeNS(namespace: string | null, localName: string): void;
         removeAttributeNode(attr: Attr): Attr;
-        requestFullscreen(options?: FullscreenOptions | undefined): Promise<void>;
+        requestFullscreen(options?: FullscreenOptions): Promise<void>;
         requestPointerLock(): void;
-        scroll(options?: ScrollToOptions | undefined): void;
+        scroll(options?: ScrollToOptions): void;
         scroll(x: number, y: number): void;
-        scrollBy(options?: ScrollToOptions | undefined): void;
+        scrollBy(options?: ScrollToOptions): void;
         scrollBy(x: number, y: number): void;
-        scrollIntoView(arg?: boolean | ScrollIntoViewOptions | undefined): void;
-        scrollTo(options?: ScrollToOptions | undefined): void;
+        scrollIntoView(arg?: boolean | ScrollIntoViewOptions): void;
+        scrollTo(options?: ScrollToOptions): void;
         scrollTo(x: number, y: number): void;
         setAttribute(qualifiedName: string, value: string): void;
         setAttributeNS(namespace: string | null, qualifiedName: string, value: string): void;
         setAttributeNode(attr: Attr): Attr | null;
         setAttributeNodeNS(attr: Attr): Attr | null;
+        setHTMLUnsafe(html: string): void;
         setPointerCapture(pointerId: number): void;
-        toggleAttribute(qualifiedName: string, force?: boolean | undefined): boolean;
+        toggleAttribute(qualifiedName: string, force?: boolean): boolean;
         webkitMatchesSelector(selectors: string): boolean;
         readonly baseURI: string;
         readonly childNodes: NodeListOf<ChildNode>;
@@ -127,20 +128,20 @@ declare const CDSSideNavMenu_base: {
         readonly previousSibling: ChildNode | null;
         textContent: string | null;
         appendChild<T extends Node>(node: T): T;
-        cloneNode(deep?: boolean | undefined): Node;
+        cloneNode(deep?: boolean): Node;
         compareDocumentPosition(other: Node): number;
         contains(other: Node | null): boolean;
-        getRootNode(options?: GetRootNodeOptions | undefined): Node;
+        getRootNode(options?: GetRootNodeOptions): Node;
         hasChildNodes(): boolean;
-        insertBefore<T_1 extends Node>(node: T_1, child: Node | null): T_1;
+        insertBefore<T extends Node>(node: T, child: Node | null): T;
         isDefaultNamespace(namespace: string | null): boolean;
         isEqualNode(otherNode: Node | null): boolean;
         isSameNode(otherNode: Node | null): boolean;
         lookupNamespaceURI(prefix: string | null): string | null;
         lookupPrefix(namespace: string | null): string | null;
         normalize(): void;
-        removeChild<T_2 extends Node>(child: T_2): T_2;
-        replaceChild<T_3 extends Node>(node: Node, child: T_3): T_3;
+        removeChild<T extends Node>(child: T): T;
+        replaceChild<T extends Node>(node: Node, child: T): T;
         readonly ELEMENT_NODE: 1;
         readonly ATTRIBUTE_NODE: 2;
         readonly TEXT_NODE: 3;
@@ -162,6 +163,8 @@ declare const CDSSideNavMenu_base: {
         dispatchEvent(event: Event): boolean;
         ariaAtomic: string | null;
         ariaAutoComplete: string | null;
+        ariaBrailleLabel: string | null;
+        ariaBrailleRoleDescription: string | null;
         ariaBusy: string | null;
         ariaChecked: string | null;
         ariaColCount: string | null;
@@ -199,12 +202,12 @@ declare const CDSSideNavMenu_base: {
         ariaValueNow: string | null;
         ariaValueText: string | null;
         role: string | null;
-        animate(keyframes: Keyframe[] | PropertyIndexedKeyframes | null, options?: number | KeyframeAnimationOptions | undefined): Animation;
-        getAnimations(options?: GetAnimationsOptions | undefined): Animation[];
-        after(...nodes: (string | Node)[]): void;
-        before(...nodes: (string | Node)[]): void;
+        animate(keyframes: Keyframe[] | PropertyIndexedKeyframes | null, options?: number | KeyframeAnimationOptions): Animation;
+        getAnimations(options?: GetAnimationsOptions): Animation[];
+        after(...nodes: (Node | string)[]): void;
+        before(...nodes: (Node | string)[]): void;
         remove(): void;
-        replaceWith(...nodes: (string | Node)[]): void;
+        replaceWith(...nodes: (Node | string)[]): void;
         innerHTML: string;
         readonly nextElementSibling: Element | null;
         readonly previousElementSibling: Element | null;
@@ -212,19 +215,19 @@ declare const CDSSideNavMenu_base: {
         readonly children: HTMLCollection;
         readonly firstElementChild: Element | null;
         readonly lastElementChild: Element | null;
-        append(...nodes: (string | Node)[]): void;
-        prepend(...nodes: (string | Node)[]): void;
-        querySelector<K_9 extends keyof HTMLElementTagNameMap>(selectors: K_9): HTMLElementTagNameMap[K_9] | null;
-        querySelector<K_10 extends keyof SVGElementTagNameMap>(selectors: K_10): SVGElementTagNameMap[K_10] | null;
-        querySelector<K_11 extends keyof MathMLElementTagNameMap>(selectors: K_11): MathMLElementTagNameMap[K_11] | null;
-        querySelector<K_12 extends keyof HTMLElementDeprecatedTagNameMap>(selectors: K_12): HTMLElementDeprecatedTagNameMap[K_12] | null;
-        querySelector<E_1 extends Element = Element>(selectors: string): E_1 | null;
-        querySelectorAll<K_13 extends keyof HTMLElementTagNameMap>(selectors: K_13): NodeListOf<HTMLElementTagNameMap[K_13]>;
-        querySelectorAll<K_14 extends keyof SVGElementTagNameMap>(selectors: K_14): NodeListOf<SVGElementTagNameMap[K_14]>;
-        querySelectorAll<K_15 extends keyof MathMLElementTagNameMap>(selectors: K_15): NodeListOf<MathMLElementTagNameMap[K_15]>;
-        querySelectorAll<K_16 extends keyof HTMLElementDeprecatedTagNameMap>(selectors: K_16): NodeListOf<HTMLElementDeprecatedTagNameMap[K_16]>;
-        querySelectorAll<E_2 extends Element = Element>(selectors: string): NodeListOf<E_2>;
-        replaceChildren(...nodes: (string | Node)[]): void;
+        append(...nodes: (Node | string)[]): void;
+        prepend(...nodes: (Node | string)[]): void;
+        querySelector<K extends keyof HTMLElementTagNameMap>(selectors: K): HTMLElementTagNameMap[K] | null;
+        querySelector<K extends keyof SVGElementTagNameMap>(selectors: K): SVGElementTagNameMap[K] | null;
+        querySelector<K extends keyof MathMLElementTagNameMap>(selectors: K): MathMLElementTagNameMap[K] | null;
+        querySelector<K extends keyof HTMLElementDeprecatedTagNameMap>(selectors: K): HTMLElementDeprecatedTagNameMap[K] | null;
+        querySelector<E extends Element = Element>(selectors: string): E | null;
+        querySelectorAll<K extends keyof HTMLElementTagNameMap>(selectors: K): NodeListOf<HTMLElementTagNameMap[K]>;
+        querySelectorAll<K extends keyof SVGElementTagNameMap>(selectors: K): NodeListOf<SVGElementTagNameMap[K]>;
+        querySelectorAll<K extends keyof MathMLElementTagNameMap>(selectors: K): NodeListOf<MathMLElementTagNameMap[K]>;
+        querySelectorAll<K extends keyof HTMLElementDeprecatedTagNameMap>(selectors: K): NodeListOf<HTMLElementDeprecatedTagNameMap[K]>;
+        querySelectorAll<E extends Element = Element>(selectors: string): NodeListOf<E>;
+        replaceChildren(...nodes: (Node | string)[]): void;
         readonly assignedSlot: HTMLSlotElement | null;
         readonly attributeStyleMap: StylePropertyMap;
         readonly style: CSSStyleDeclaration;
@@ -295,7 +298,7 @@ declare const CDSSideNavMenu_base: {
         onpointerout: ((this: GlobalEventHandlers, ev: PointerEvent) => any) | null;
         onpointerover: ((this: GlobalEventHandlers, ev: PointerEvent) => any) | null;
         onpointerup: ((this: GlobalEventHandlers, ev: PointerEvent) => any) | null;
-        onprogress: ((this: GlobalEventHandlers, ev: ProgressEvent<EventTarget>) => any) | null;
+        onprogress: ((this: GlobalEventHandlers, ev: ProgressEvent) => any) | null;
         onratechange: ((this: GlobalEventHandlers, ev: Event) => any) | null;
         onreset: ((this: GlobalEventHandlers, ev: Event) => any) | null;
         onresize: ((this: GlobalEventHandlers, ev: UIEvent) => any) | null;
@@ -330,7 +333,7 @@ declare const CDSSideNavMenu_base: {
         onwheel: ((this: GlobalEventHandlers, ev: WheelEvent) => any) | null;
         autofocus: boolean;
         readonly dataset: DOMStringMap;
-        nonce?: string | undefined;
+        nonce?: string;
         tabIndex: number;
         blur(): void;
     };
@@ -422,7 +425,8 @@ declare class CDSSideNavMenu extends CDSSideNavMenu_base {
     static shadowRootOptions: {
         delegatesFocus: boolean;
         mode: ShadowRootMode;
-        slotAssignment?: SlotAssignmentMode | undefined;
+        serializable?: boolean;
+        slotAssignment?: SlotAssignmentMode;
     };
     static styles: any;
 }

package/es/components/ui-shell/side-nav-menu.js.map

@@ -1 +1 @@
-{"version":3,"file":"side-nav-menu.js","names":["LitElement","html","property","query","ChevronDown20","prefix","forEach","FocusMixin","styles","carbonElement","customElement","CDSSideNavMenu","_decorate","_initialize","_FocusMixin","constructor","args","F","d","kind","key","value","decorators","_handleUserInitiatedToggle","expanded","eventBeforeToggle","eventToggle","init","bubbles","cancelable","composed","detail","dispatchEvent","CustomEvent","_handleClickExpando","_handleSlotChange","target","_hasIcon","hasIcon","assignedNodes","item","nodeType","Node","ELEMENT_NODE","toggleAttribute","attribItemHasIcon","_handleSlotChangeTitleIcon","_this$_titleIconConta","length","_titleIconContainerNode","querySelectorAll","selectorItem","type","Boolean","reflect","attribute","connectedCallback","hasAttribute","setAttribute","_get","_getPrototypeOf","prototype","call","updated","changedProperties","has","elem","tabIndex","render","forceCollapsed","title","handleClickExpando","handleSlotChange","handleSlotChangeTitleIcon","_t","_","String","part","static","_objectSpread","shadowRootOptions","delegatesFocus"],"sources":["components/ui-shell/side-nav-menu.ts"],"sourcesContent":["/**\n * @license\n *\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 { property, query } from 'lit/decorators.js';\nimport ChevronDown20 from '@carbon/icons/lib/chevron--down/20';\nimport { prefix } from '../../globals/settings';\nimport { forEach } from '../../globals/internal/collection-helpers';\nimport FocusMixin from '../../globals/mixins/focus';\nimport styles from './side-nav.scss';\nimport { carbonElement as customElement } from '../../globals/decorators/carbon-element';\n\n/**\n * Side nav menu.\n *\n * @element cds-side-nav-menu\n * @fires cds-side-nav-menu-beingtoggled\n *   The name of the custom event fired before this side nav menu is being toggled upon a user gesture.\n *   Cancellation of this event stops the user-initiated action of toggling this side nav menu.\n * @fires cds-side-nav-menu-toggled\n *   The name of the custom event fired after this side nav menu is toggled upon a user gesture.\n * @slot title-icon - The icon.\n * @csspart expando The expando.\n * @csspart expando-icon-container The expando icon container.\n * @csspart expando-icon The expando icon.\n * @csspart title The title.\n * @csspart title-icon-container The title icon container.\n * @csspart menu-body The menu body.\n */\n@customElement(`${prefix}-side-nav-menu`)\nclass CDSSideNavMenu extends FocusMixin(LitElement) {\n  /**\n   * `true` if this menu has an icon.\n   */\n  private _hasIcon = false;\n\n  /**\n   * The container for the title icon.\n   */\n  @query('#title-icon-container')\n  private _titleIconContainerNode!: HTMLDivElement;\n\n  /**\n   * Handles user-initiated toggle request of this side nav menu.\n   *\n   * @param expanded The new expanded state.\n   */\n  private _handleUserInitiatedToggle(expanded = !this.expanded) {\n    const { eventBeforeToggle, eventToggle } = this\n      .constructor as typeof CDSSideNavMenu;\n    const init = {\n      bubbles: true,\n      cancelable: true,\n      composed: true,\n      detail: {\n        expanded,\n      },\n    };\n    if (this.dispatchEvent(new CustomEvent(eventBeforeToggle, init))) {\n      this.expanded = expanded;\n      this.dispatchEvent(new CustomEvent(eventToggle, init));\n    }\n  }\n\n  /**\n   * Handler for the `click` event on the expando button.\n   */\n  private _handleClickExpando() {\n    this._handleUserInitiatedToggle();\n  }\n\n  /**\n   * Handles `slotchange` event on the non-named `<slot>`.\n   */\n  private _handleSlotChange({ target }) {\n    const { _hasIcon: hasIcon } = this;\n    forEach(target.assignedNodes(), (item) => {\n      if (item.nodeType === Node.ELEMENT_NODE) {\n        item.toggleAttribute(\n          (this.constructor as typeof CDSSideNavMenu).attribItemHasIcon,\n          hasIcon\n        );\n      }\n    });\n  }\n\n  /**\n   * Handles `slotchange` event on the `<slot>` for the title icon.\n   */\n  private _handleSlotChangeTitleIcon({ target }) {\n    const constructor = this.constructor as typeof CDSSideNavMenu;\n    const hasIcon = target.assignedNodes().length > 0;\n    this._hasIcon = hasIcon;\n    this._titleIconContainerNode?.toggleAttribute('hidden', !hasIcon);\n    forEach(this.querySelectorAll(constructor.selectorItem), (item) => {\n      item.toggleAttribute(constructor.attribItemHasIcon, hasIcon);\n    });\n  }\n\n  /**\n   * `true` if the menu has active menu item.\n   */\n  @property({ type: Boolean, reflect: true })\n  active = false;\n\n  /**\n   * `true` if the menu should be open.\n   */\n  @property({ type: Boolean, reflect: true })\n  expanded = false;\n\n  /**\n   * Specify if this is a large variation of the side nav menu\n   */\n  @property({ type: Boolean, reflect: true })\n  large = false;\n\n  /**\n   * `true` if the menu should be forced collapsed upon side nav's expanded state.\n   */\n  @property({ type: Boolean, reflect: true, attribute: 'force-collapsed' })\n  forceCollapsed = false;\n\n  /**\n   * The title text.\n   */\n  @property()\n  title = '';\n\n  connectedCallback() {\n    if (!this.hasAttribute('role')) {\n      this.setAttribute('role', 'listitem');\n    }\n    super.connectedCallback();\n  }\n\n  updated(changedProperties) {\n    if (changedProperties.has('expanded')) {\n      const { selectorItem } = this.constructor as typeof CDSSideNavMenu;\n      const { expanded } = this;\n      forEach(this.querySelectorAll(selectorItem), (elem) => {\n        (elem as HTMLElement).tabIndex = expanded ? 0 : -1;\n      });\n    }\n  }\n\n  render() {\n    const {\n      expanded,\n      forceCollapsed,\n      title,\n      _handleClickExpando: handleClickExpando,\n      _handleSlotChange: handleSlotChange,\n      _handleSlotChangeTitleIcon: handleSlotChangeTitleIcon,\n    } = this;\n    return html`\n      <button\n        type=\"button\"\n        part=\"expando\"\n        aria-haspopup=\"true\"\n        aria-expanded=\"${String(Boolean(expanded && !forceCollapsed))}\"\n        class=\"${prefix}--side-nav__submenu\"\n        @click=${handleClickExpando}>\n        <div\n          id=\"title-icon-container\"\n          part=\"title-icon-container\"\n          hidden\n          class=\"${prefix}--side-nav__icon\">\n          <slot\n            name=\"title-icon\"\n            @slotchange=${handleSlotChangeTitleIcon}></slot>\n        </div>\n        <span part=\"title\" class=\"${prefix}--side-nav__submenu-title\"\n          >${title}</span\n        >\n        <div\n          part=\"expando-icon-container\"\n          class=\"${prefix}--side-nav__icon ${prefix}--side-nav__icon--small ${prefix}--side-nav__submenu-chevron\">\n          ${ChevronDown20({ part: 'expando-icon' })}\n        </div>\n      </button>\n      <ul part=\"menu-body\" class=\"${prefix}--side-nav__menu\">\n        <slot @slotchange=${handleSlotChange}></slot>\n      </ul>\n    `;\n  }\n\n  /**\n   * The attribute name of the menu items, that is set if this menu has an icon.\n   */\n  static attribItemHasIcon = 'parent-has-icon';\n\n  /**\n   * A selector that will return the menu items.\n   */\n  static get selectorItem() {\n    return `${prefix}-side-nav-menu-item`;\n  }\n\n  /**\n   * The name of the custom event fired before this side nav menu is being toggled upon a user gesture.\n   * Cancellation of this event stops the user-initiated action of toggling this side nav menu.\n   */\n  static get eventBeforeToggle() {\n    return `${prefix}-side-nav-menu-beingtoggled`;\n  }\n\n  /**\n   * The name of the custom event fired after this side nav menu is toggled upon a user gesture.\n   */\n  static get eventToggle() {\n    return `${prefix}-side-nav-menu-toggled`;\n  }\n\n  static shadowRootOptions = {\n    ...LitElement.shadowRootOptions,\n    delegatesFocus: true,\n  };\n  static styles = styles; // `styles` here is a `CSSResult` generated by custom WebPack loader\n}\n\nexport default CDSSideNavMenu;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"side-nav-menu.js","names":["LitElement","html","property","query","ChevronDown20","prefix","forEach","FocusMixin","styles","carbonElement","customElement","CDSSideNavMenu","_decorate","_initialize","_FocusMixin","constructor","args","F","d","kind","key","value","decorators","_handleUserInitiatedToggle","expanded","eventBeforeToggle","eventToggle","init","bubbles","cancelable","composed","detail","dispatchEvent","CustomEvent","_handleClickExpando","_handleSlotChange","target","_hasIcon","hasIcon","assignedNodes","item","nodeType","Node","ELEMENT_NODE","toggleAttribute","attribItemHasIcon","_handleSlotChangeTitleIcon","_this$_titleIconConta","length","_titleIconContainerNode","querySelectorAll","selectorItem","type","Boolean","reflect","attribute","connectedCallback","hasAttribute","setAttribute","_get","_getPrototypeOf","prototype","call","updated","changedProperties","has","elem","tabIndex","render","forceCollapsed","title","handleClickExpando","handleSlotChange","handleSlotChangeTitleIcon","_t","_","String","part","static","_objectSpread","shadowRootOptions","delegatesFocus"],"sources":["components/ui-shell/side-nav-menu.ts"],"sourcesContent":["/**\n * @license\n *\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 { property, query } from 'lit/decorators.js';\nimport ChevronDown20 from '@carbon/icons/lib/chevron--down/20';\nimport { prefix } from '../../globals/settings';\nimport { forEach } from '../../globals/internal/collection-helpers';\nimport FocusMixin from '../../globals/mixins/focus';\nimport styles from './side-nav.scss';\nimport { carbonElement as customElement } from '../../globals/decorators/carbon-element';\n\n/**\n * Side nav menu.\n *\n * @element cds-side-nav-menu\n * @fires cds-side-nav-menu-beingtoggled\n *   The name of the custom event fired before this side nav menu is being toggled upon a user gesture.\n *   Cancellation of this event stops the user-initiated action of toggling this side nav menu.\n * @fires cds-side-nav-menu-toggled\n *   The name of the custom event fired after this side nav menu is toggled upon a user gesture.\n * @slot title-icon - The icon.\n * @csspart expando The expando.\n * @csspart expando-icon-container The expando icon container.\n * @csspart expando-icon The expando icon.\n * @csspart title The title.\n * @csspart title-icon-container The title icon container.\n * @csspart menu-body The menu body.\n */\n@customElement(`${prefix}-side-nav-menu`)\nclass CDSSideNavMenu extends FocusMixin(LitElement) {\n  /**\n   * `true` if this menu has an icon.\n   */\n  private _hasIcon = false;\n\n  /**\n   * The container for the title icon.\n   */\n  @query('#title-icon-container')\n  private _titleIconContainerNode!: HTMLDivElement;\n\n  /**\n   * Handles user-initiated toggle request of this side nav menu.\n   *\n   * @param expanded The new expanded state.\n   */\n  private _handleUserInitiatedToggle(expanded = !this.expanded) {\n    const { eventBeforeToggle, eventToggle } = this\n      .constructor as typeof CDSSideNavMenu;\n    const init = {\n      bubbles: true,\n      cancelable: true,\n      composed: true,\n      detail: {\n        expanded,\n      },\n    };\n    if (this.dispatchEvent(new CustomEvent(eventBeforeToggle, init))) {\n      this.expanded = expanded;\n      this.dispatchEvent(new CustomEvent(eventToggle, init));\n    }\n  }\n\n  /**\n   * Handler for the `click` event on the expando button.\n   */\n  private _handleClickExpando() {\n    this._handleUserInitiatedToggle();\n  }\n\n  /**\n   * Handles `slotchange` event on the non-named `<slot>`.\n   */\n  private _handleSlotChange({ target }) {\n    const { _hasIcon: hasIcon } = this;\n    forEach(target.assignedNodes(), (item) => {\n      if (item.nodeType === Node.ELEMENT_NODE) {\n        item.toggleAttribute(\n          (this.constructor as typeof CDSSideNavMenu).attribItemHasIcon,\n          hasIcon\n        );\n      }\n    });\n  }\n\n  /**\n   * Handles `slotchange` event on the `<slot>` for the title icon.\n   */\n  private _handleSlotChangeTitleIcon({ target }) {\n    const constructor = this.constructor as typeof CDSSideNavMenu;\n    const hasIcon = target.assignedNodes().length > 0;\n    this._hasIcon = hasIcon;\n    this._titleIconContainerNode?.toggleAttribute('hidden', !hasIcon);\n    forEach(this.querySelectorAll(constructor.selectorItem), (item) => {\n      item.toggleAttribute(constructor.attribItemHasIcon, hasIcon);\n    });\n  }\n\n  /**\n   * `true` if the menu has active menu item.\n   */\n  @property({ type: Boolean, reflect: true })\n  active = false;\n\n  /**\n   * `true` if the menu should be open.\n   */\n  @property({ type: Boolean, reflect: true })\n  expanded = false;\n\n  /**\n   * Specify if this is a large variation of the side nav menu\n   */\n  @property({ type: Boolean, reflect: true })\n  large = false;\n\n  /**\n   * `true` if the menu should be forced collapsed upon side nav's expanded state.\n   */\n  @property({ type: Boolean, reflect: true, attribute: 'force-collapsed' })\n  forceCollapsed = false;\n\n  /**\n   * The title text.\n   */\n  @property()\n  title = '';\n\n  connectedCallback() {\n    if (!this.hasAttribute('role')) {\n      this.setAttribute('role', 'listitem');\n    }\n    super.connectedCallback();\n  }\n\n  updated(changedProperties) {\n    if (changedProperties.has('expanded')) {\n      const { selectorItem } = this.constructor as typeof CDSSideNavMenu;\n      const { expanded } = this;\n      forEach(this.querySelectorAll(selectorItem), (elem) => {\n        (elem as HTMLElement).tabIndex = expanded ? 0 : -1;\n      });\n    }\n  }\n\n  render() {\n    const {\n      expanded,\n      forceCollapsed,\n      title,\n      _handleClickExpando: handleClickExpando,\n      _handleSlotChange: handleSlotChange,\n      _handleSlotChangeTitleIcon: handleSlotChangeTitleIcon,\n    } = this;\n    return html`\n      <button\n        type=\"button\"\n        part=\"expando\"\n        aria-haspopup=\"true\"\n        aria-expanded=\"${String(Boolean(expanded && !forceCollapsed))}\"\n        class=\"${prefix}--side-nav__submenu\"\n        @click=${handleClickExpando}>\n        <div\n          id=\"title-icon-container\"\n          part=\"title-icon-container\"\n          hidden\n          class=\"${prefix}--side-nav__icon\">\n          <slot\n            name=\"title-icon\"\n            @slotchange=${handleSlotChangeTitleIcon}></slot>\n        </div>\n        <span part=\"title\" class=\"${prefix}--side-nav__submenu-title\"\n          >${title}</span\n        >\n        <div\n          part=\"expando-icon-container\"\n          class=\"${prefix}--side-nav__icon ${prefix}--side-nav__icon--small ${prefix}--side-nav__submenu-chevron\">\n          ${ChevronDown20({ part: 'expando-icon' })}\n        </div>\n      </button>\n      <ul part=\"menu-body\" class=\"${prefix}--side-nav__menu\">\n        <slot @slotchange=${handleSlotChange}></slot>\n      </ul>\n    `;\n  }\n\n  /**\n   * The attribute name of the menu items, that is set if this menu has an icon.\n   */\n  static attribItemHasIcon = 'parent-has-icon';\n\n  /**\n   * A selector that will return the menu items.\n   */\n  static get selectorItem() {\n    return `${prefix}-side-nav-menu-item`;\n  }\n\n  /**\n   * The name of the custom event fired before this side nav menu is being toggled upon a user gesture.\n   * Cancellation of this event stops the user-initiated action of toggling this side nav menu.\n   */\n  static get eventBeforeToggle() {\n    return `${prefix}-side-nav-menu-beingtoggled`;\n  }\n\n  /**\n   * The name of the custom event fired after this side nav menu is toggled upon a user gesture.\n   */\n  static get eventToggle() {\n    return `${prefix}-side-nav-menu-toggled`;\n  }\n\n  static shadowRootOptions = {\n    ...LitElement.shadowRootOptions,\n    delegatesFocus: true,\n  };\n  static styles = styles; // `styles` here is a `CSSResult` generated by custom WebPack loader\n}\n\nexport default CDSSideNavMenu;\n"],"mappings":"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","ignoreList":[]}

package/es/components/ui-shell/side-nav.d.ts

@@ -38,11 +38,11 @@ declare const CDSSideNav_base: {
         click(): void;
         hidePopover(): void;
         showPopover(): void;
-        togglePopover(force?: boolean | undefined): boolean;
-        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions | undefined): void;
-        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions | undefined): void;
-        removeEventListener<K_1 extends keyof HTMLElementEventMap>(type: K_1, listener: (this: HTMLElement, ev: HTMLElementEventMap[K_1]) => any, options?: boolean | EventListenerOptions | undefined): void;
-        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions | undefined): void;
+        togglePopover(force?: boolean): boolean;
+        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
         readonly attributes: NamedNodeMap;
         readonly classList: DOMTokenList;
         className: string;
@@ -67,10 +67,10 @@ declare const CDSSideNav_base: {
         slot: string;
         readonly tagName: string;
         attachShadow(init: ShadowRootInit): ShadowRoot;
-        checkVisibility(options?: CheckVisibilityOptions | undefined): boolean;
-        closest<K_2 extends keyof HTMLElementTagNameMap>(selector: K_2): HTMLElementTagNameMap[K_2] | null;
-        closest<K_3 extends keyof SVGElementTagNameMap>(selector: K_3): SVGElementTagNameMap[K_3] | null;
-        closest<K_4 extends keyof MathMLElementTagNameMap>(selector: K_4): MathMLElementTagNameMap[K_4] | null;
+        checkVisibility(options?: CheckVisibilityOptions): boolean;
+        closest<K extends keyof HTMLElementTagNameMap>(selector: K): HTMLElementTagNameMap[K] | null;
+        closest<K extends keyof SVGElementTagNameMap>(selector: K): SVGElementTagNameMap[K] | null;
+        closest<K extends keyof MathMLElementTagNameMap>(selector: K): MathMLElementTagNameMap[K] | null;
         closest<E extends Element = Element>(selectors: string): E | null;
         computedStyleMap(): StylePropertyMapReadOnly;
         getAttribute(qualifiedName: string): string | null;
@@ -81,10 +81,10 @@ declare const CDSSideNav_base: {
         getBoundingClientRect(): DOMRect;
         getClientRects(): DOMRectList;
         getElementsByClassName(classNames: string): HTMLCollectionOf<Element>;
-        getElementsByTagName<K_5 extends keyof HTMLElementTagNameMap>(qualifiedName: K_5): HTMLCollectionOf<HTMLElementTagNameMap[K_5]>;
-        getElementsByTagName<K_6 extends keyof SVGElementTagNameMap>(qualifiedName: K_6): HTMLCollectionOf<SVGElementTagNameMap[K_6]>;
-        getElementsByTagName<K_7 extends keyof MathMLElementTagNameMap>(qualifiedName: K_7): HTMLCollectionOf<MathMLElementTagNameMap[K_7]>;
-        getElementsByTagName<K_8 extends keyof HTMLElementDeprecatedTagNameMap>(qualifiedName: K_8): HTMLCollectionOf<HTMLElementDeprecatedTagNameMap[K_8]>;
+        getElementsByTagName<K extends keyof HTMLElementTagNameMap>(qualifiedName: K): HTMLCollectionOf<HTMLElementTagNameMap[K]>;
+        getElementsByTagName<K extends keyof SVGElementTagNameMap>(qualifiedName: K): HTMLCollectionOf<SVGElementTagNameMap[K]>;
+        getElementsByTagName<K extends keyof MathMLElementTagNameMap>(qualifiedName: K): HTMLCollectionOf<MathMLElementTagNameMap[K]>;
+        getElementsByTagName<K extends keyof HTMLElementDeprecatedTagNameMap>(qualifiedName: K): HTMLCollectionOf<HTMLElementDeprecatedTagNameMap[K]>;
         getElementsByTagName(qualifiedName: string): HTMLCollectionOf<Element>;
         getElementsByTagNameNS(namespaceURI: "http://www.w3.org/1999/xhtml", localName: string): HTMLCollectionOf<HTMLElement>;
         getElementsByTagNameNS(namespaceURI: "http://www.w3.org/2000/svg", localName: string): HTMLCollectionOf<SVGElement>;
@@ -102,21 +102,22 @@ declare const CDSSideNav_base: {
         removeAttribute(qualifiedName: string): void;
         removeAttributeNS(namespace: string | null, localName: string): void;
         removeAttributeNode(attr: Attr): Attr;
-        requestFullscreen(options?: FullscreenOptions | undefined): Promise<void>;
+        requestFullscreen(options?: FullscreenOptions): Promise<void>;
         requestPointerLock(): void;
-        scroll(options?: ScrollToOptions | undefined): void;
+        scroll(options?: ScrollToOptions): void;
         scroll(x: number, y: number): void;
-        scrollBy(options?: ScrollToOptions | undefined): void;
+        scrollBy(options?: ScrollToOptions): void;
         scrollBy(x: number, y: number): void;
-        scrollIntoView(arg?: boolean | ScrollIntoViewOptions | undefined): void;
-        scrollTo(options?: ScrollToOptions | undefined): void;
+        scrollIntoView(arg?: boolean | ScrollIntoViewOptions): void;
+        scrollTo(options?: ScrollToOptions): void;
         scrollTo(x: number, y: number): void;
         setAttribute(qualifiedName: string, value: string): void;
         setAttributeNS(namespace: string | null, qualifiedName: string, value: string): void;
         setAttributeNode(attr: Attr): Attr | null;
         setAttributeNodeNS(attr: Attr): Attr | null;
+        setHTMLUnsafe(html: string): void;
         setPointerCapture(pointerId: number): void;
-        toggleAttribute(qualifiedName: string, force?: boolean | undefined): boolean;
+        toggleAttribute(qualifiedName: string, force?: boolean): boolean;
         webkitMatchesSelector(selectors: string): boolean;
         readonly baseURI: string;
         readonly childNodes: NodeListOf<ChildNode>;
@@ -132,20 +133,20 @@ declare const CDSSideNav_base: {
         readonly previousSibling: ChildNode | null;
         textContent: string | null;
         appendChild<T extends Node>(node: T): T;
-        cloneNode(deep?: boolean | undefined): Node;
+        cloneNode(deep?: boolean): Node;
         compareDocumentPosition(other: Node): number;
         contains(other: Node | null): boolean;
-        getRootNode(options?: GetRootNodeOptions | undefined): Node;
+        getRootNode(options?: GetRootNodeOptions): Node;
         hasChildNodes(): boolean;
-        insertBefore<T_1 extends Node>(node: T_1, child: Node | null): T_1;
+        insertBefore<T extends Node>(node: T, child: Node | null): T;
         isDefaultNamespace(namespace: string | null): boolean;
         isEqualNode(otherNode: Node | null): boolean;
         isSameNode(otherNode: Node | null): boolean;
         lookupNamespaceURI(prefix: string | null): string | null;
         lookupPrefix(namespace: string | null): string | null;
         normalize(): void;
-        removeChild<T_2 extends Node>(child: T_2): T_2;
-        replaceChild<T_3 extends Node>(node: Node, child: T_3): T_3;
+        removeChild<T extends Node>(child: T): T;
+        replaceChild<T extends Node>(node: Node, child: T): T;
         readonly ELEMENT_NODE: 1;
         readonly ATTRIBUTE_NODE: 2;
         readonly TEXT_NODE: 3;
@@ -167,6 +168,8 @@ declare const CDSSideNav_base: {
         dispatchEvent(event: Event): boolean;
         ariaAtomic: string | null;
         ariaAutoComplete: string | null;
+        ariaBrailleLabel: string | null;
+        ariaBrailleRoleDescription: string | null;
         ariaBusy: string | null;
         ariaChecked: string | null;
         ariaColCount: string | null;
@@ -204,12 +207,12 @@ declare const CDSSideNav_base: {
         ariaValueNow: string | null;
         ariaValueText: string | null;
         role: string | null;
-        animate(keyframes: Keyframe[] | PropertyIndexedKeyframes | null, options?: number | KeyframeAnimationOptions | undefined): Animation;
-        getAnimations(options?: GetAnimationsOptions | undefined): Animation[];
-        after(...nodes: (string | Node)[]): void;
-        before(...nodes: (string | Node)[]): void;
+        animate(keyframes: Keyframe[] | PropertyIndexedKeyframes | null, options?: number | KeyframeAnimationOptions): Animation;
+        getAnimations(options?: GetAnimationsOptions): Animation[];
+        after(...nodes: (Node | string)[]): void;
+        before(...nodes: (Node | string)[]): void;
         remove(): void;
-        replaceWith(...nodes: (string | Node)[]): void;
+        replaceWith(...nodes: (Node | string)[]): void;
         innerHTML: string;
         readonly nextElementSibling: Element | null;
         readonly previousElementSibling: Element | null;
@@ -217,19 +220,19 @@ declare const CDSSideNav_base: {
         readonly children: HTMLCollection;
         readonly firstElementChild: Element | null;
         readonly lastElementChild: Element | null;
-        append(...nodes: (string | Node)[]): void;
-        prepend(...nodes: (string | Node)[]): void;
-        querySelector<K_9 extends keyof HTMLElementTagNameMap>(selectors: K_9): HTMLElementTagNameMap[K_9] | null;
-        querySelector<K_10 extends keyof SVGElementTagNameMap>(selectors: K_10): SVGElementTagNameMap[K_10] | null;
-        querySelector<K_11 extends keyof MathMLElementTagNameMap>(selectors: K_11): MathMLElementTagNameMap[K_11] | null;
-        querySelector<K_12 extends keyof HTMLElementDeprecatedTagNameMap>(selectors: K_12): HTMLElementDeprecatedTagNameMap[K_12] | null;
-        querySelector<E_1 extends Element = Element>(selectors: string): E_1 | null;
-        querySelectorAll<K_13 extends keyof HTMLElementTagNameMap>(selectors: K_13): NodeListOf<HTMLElementTagNameMap[K_13]>;
-        querySelectorAll<K_14 extends keyof SVGElementTagNameMap>(selectors: K_14): NodeListOf<SVGElementTagNameMap[K_14]>;
-        querySelectorAll<K_15 extends keyof MathMLElementTagNameMap>(selectors: K_15): NodeListOf<MathMLElementTagNameMap[K_15]>;
-        querySelectorAll<K_16 extends keyof HTMLElementDeprecatedTagNameMap>(selectors: K_16): NodeListOf<HTMLElementDeprecatedTagNameMap[K_16]>;
-        querySelectorAll<E_2 extends Element = Element>(selectors: string): NodeListOf<E_2>;
-        replaceChildren(...nodes: (string | Node)[]): void;
+        append(...nodes: (Node | string)[]): void;
+        prepend(...nodes: (Node | string)[]): void;
+        querySelector<K extends keyof HTMLElementTagNameMap>(selectors: K): HTMLElementTagNameMap[K] | null;
+        querySelector<K extends keyof SVGElementTagNameMap>(selectors: K): SVGElementTagNameMap[K] | null;
+        querySelector<K extends keyof MathMLElementTagNameMap>(selectors: K): MathMLElementTagNameMap[K] | null;
+        querySelector<K extends keyof HTMLElementDeprecatedTagNameMap>(selectors: K): HTMLElementDeprecatedTagNameMap[K] | null;
+        querySelector<E extends Element = Element>(selectors: string): E | null;
+        querySelectorAll<K extends keyof HTMLElementTagNameMap>(selectors: K): NodeListOf<HTMLElementTagNameMap[K]>;
+        querySelectorAll<K extends keyof SVGElementTagNameMap>(selectors: K): NodeListOf<SVGElementTagNameMap[K]>;
+        querySelectorAll<K extends keyof MathMLElementTagNameMap>(selectors: K): NodeListOf<MathMLElementTagNameMap[K]>;
+        querySelectorAll<K extends keyof HTMLElementDeprecatedTagNameMap>(selectors: K): NodeListOf<HTMLElementDeprecatedTagNameMap[K]>;
+        querySelectorAll<E extends Element = Element>(selectors: string): NodeListOf<E>;
+        replaceChildren(...nodes: (Node | string)[]): void;
         readonly assignedSlot: HTMLSlotElement | null;
         readonly attributeStyleMap: StylePropertyMap;
         readonly style: CSSStyleDeclaration;
@@ -300,7 +303,7 @@ declare const CDSSideNav_base: {
         onpointerout: ((this: GlobalEventHandlers, ev: PointerEvent) => any) | null;
         onpointerover: ((this: GlobalEventHandlers, ev: PointerEvent) => any) | null;
         onpointerup: ((this: GlobalEventHandlers, ev: PointerEvent) => any) | null;
-        onprogress: ((this: GlobalEventHandlers, ev: ProgressEvent<EventTarget>) => any) | null;
+        onprogress: ((this: GlobalEventHandlers, ev: ProgressEvent) => any) | null;
         onratechange: ((this: GlobalEventHandlers, ev: Event) => any) | null;
         onreset: ((this: GlobalEventHandlers, ev: Event) => any) | null;
         onresize: ((this: GlobalEventHandlers, ev: UIEvent) => any) | null;
@@ -335,15 +338,15 @@ declare const CDSSideNav_base: {
         onwheel: ((this: GlobalEventHandlers, ev: WheelEvent) => any) | null;
         autofocus: boolean;
         readonly dataset: DOMStringMap;
-        nonce?: string | undefined;
+        nonce?: string;
         tabIndex: number;
         blur(): void;
-        focus(options?: FocusOptions | undefined): void;
+        focus(options?: FocusOptions): void;
     };
     _hostListeners: {
         [listenerName: string]: {
             [type: string]: {
-                options?: boolean | AddEventListenerOptions | undefined;
+                options?: boolean | AddEventListenerOptions;
             };
         };
     };
@@ -364,14 +367,6 @@ declare class CDSSideNav extends CDSSideNav_base {
      * The handle for `transitionend` event listener.
      */
     private _hTransition;
-    /**
-     * A promise that is resolved when the transition is complete.
-     */
-    private _transitionPromise;
-    /**
-     * A promise that is resolved when the transition upon proprety update is complete.
-     */
-    private get _updateAndTransitionPromise();
     /**
      * Cleans the handle for `transitionend` event listener.
      */
@@ -379,7 +374,7 @@ declare class CDSSideNav extends CDSSideNav_base {
     /**
      * Handles `${prefix}-header-menu-button-toggle` event on the document.
      */
-    private _handleButtonToggle;
+    protected _handleButtonToggle: (event: CustomEvent) => Promise<void>;
     /**
      * Force child side nav menus collapsed upon the hover/expanded state of this side nav.
      */
@@ -402,7 +397,6 @@ declare class CDSSideNav extends CDSSideNav_base {
     isNotPersistent: boolean;
     connectedCallback(): void;
     disconnectedCallback(): void;
-    shouldUpdate(changedProperties: any): boolean;
     updated(changedProperties: any): void;
     /**
      * Handles `blur` event handler on this element.

package/es/components/ui-shell/side-nav.js

@@ -16,7 +16,6 @@ let _ = t => t,
 import { LitElement, html } from 'lit';
 import { property } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
-import on from '../../globals/mixins/on';
 import { prefix } from '../../globals/settings';
 import HostListenerMixin from '../../globals/mixins/host-listener';
 import HostListener from '../../globals/decorators/host-listener';
@@ -55,14 +54,8 @@ let CDSSideNav = _decorate([customElement(`${prefix}-side-nav`)], function (_ini
         return null;
       }
     }, {
-      kind: "field",
-      key: "_transitionPromise",
-      value() {
-        return Promise.resolve();
-      }
-    }, {
-      kind: "get",
-      key: "_updateAndTransitionPromise",
+      kind: "method",
+      key: "_cleanHTransition",
       value:
       /**
        * `true` if this side nav is hovered.
@@ -72,24 +65,10 @@ let CDSSideNav = _decorate([customElement(`${prefix}-side-nav`)], function (_ini
        * The handle for `transitionend` event listener.
        */
 
-      /**
-       * A promise that is resolved when the transition is complete.
-       */
-
-      /**
-       * A promise that is resolved when the transition upon proprety update is complete.
-       */
-      function _updateAndTransitionPromise() {
-        return this.updateComplete.then(() => this._transitionPromise);
-      }
-
       /**
        * Cleans the handle for `transitionend` event listener.
        */
-    }, {
-      kind: "method",
-      key: "_cleanHTransition",
-      value: function _cleanHTransition() {
+      function _cleanHTransition() {
         if (this._hTransition) {
           this._hTransition = this._hTransition.release();
         }
@@ -105,14 +84,6 @@ let CDSSideNav = _decorate([customElement(`${prefix}-side-nav`)], function (_ini
       value() {
         return async event => {
           this.expanded = event.detail.active;
-          if (this.expanded) {
-            await this._updateAndTransitionPromise;
-            // Checks if the side nav is not collapsed during the animation
-            if (this.expanded) {
-              var _this$querySelector;
-              (_this$querySelector = this.querySelector(this.constructor.selectorNavItems)) === null || _this$querySelector === void 0 || _this$querySelector.focus();
-            }
-          }
         };
       }
     }, {
@@ -202,21 +173,6 @@ let CDSSideNav = _decorate([customElement(`${prefix}-side-nav`)], function (_ini
         this._cleanHTransition();
         _get(_getPrototypeOf(CDSSideNav.prototype), "disconnectedCallback", this).call(this);
       }
-    }, {
-      kind: "method",
-      key: "shouldUpdate",
-      value: function shouldUpdate(changedProperties) {
-        if (changedProperties.has('expanded')) {
-          this._transitionPromise = new Promise(resolve => {
-            this._cleanHTransition();
-            this._hTransition = on(this, 'transitionend', () => {
-              this._cleanHTransition();
-              resolve();
-            });
-          });
-        }
-        return true;
-      }
     }, {
       kind: "method",
       key: "updated",
@@ -233,9 +189,11 @@ let CDSSideNav = _decorate([customElement(`${prefix}-side-nav`)], function (_ini
             item.active = this.expanded;
           });
           if (this.expanded) {
+            var _this$querySelector;
             forEach(headerItems, item => {
               item.setAttribute('tabindex', '-1');
             });
+            (_this$querySelector = this.querySelector(this.constructor.selectorNavItems)) === null || _this$querySelector === void 0 || _this$querySelector.focus();
           } else {
             forEach(headerItems, item => {
               item.removeAttribute('tabindex');