Merge branch 'main' into feat/ibmdotcom-styles-remove-react-class-2

packages/carbon-web-components/package.json

@@ -69,7 +69,7 @@
   ],
   "dependencies": {
     "@babel/runtime": "^7.16.3",
-    "@carbon/styles": "^1.46.0",
+    "@carbon/styles": "1.47.0",
     "flatpickr": "4.6.1",
     "lit": "^2.7.6",
     "lodash-es": "^4.17.21"
@@ -89,8 +89,8 @@
     "@babel/preset-modules": "^0.1.5",
     "@babel/template": "~7.12.0",
     "@babel/traverse": "~7.23.0",
-    "@carbon/icon-helpers": "^10.45.1",
-    "@carbon/icons": "^11.31.0",
+    "@carbon/icon-helpers": "10.45.1",
+    "@carbon/icons": "11.31.0",
     "@open-wc/semantic-dom-diff": "~0.18.0",
     "@percy-io/in-percy": "^0.1.11",
     "@percy/cli": "^1.27.4",

packages/styles/package.json

@@ -29,14 +29,14 @@
     "upgrade-carbon": "yarn upgrade-interactive @carbon/layout @carbon/styles @carbon/themes @carbon/icons-react --latest --exact"
   },
   "dependencies": {
-    "@carbon/icons-react": "^11.31.0",
-    "@carbon/layout": "^11.20.1",
-    "@carbon/styles": "^1.46.0",
+    "@carbon/icons-react": "11.33.0",
+    "@carbon/layout": "11.20.1",
+    "@carbon/styles": "1.47.0",
     "@carbon/telemetry": "0.1.0",
-    "@carbon/type": "^11.25.1"
+    "@carbon/type": "11.25.1"
   },
   "devDependencies": {
-    "@carbon/themes": "^11.28.0",
+    "@carbon/themes": "11.28.0",
     "del": "^6.0.0",
     "gulp": "^4.0.2",
     "gulp-autoprefixer": "^6.1.0",

packages/styles/scss/components/masthead/_masthead.scss

@@ -1,5 +1,5 @@
 /**
- * Copyright IBM Corp. 2016, 2023
+ * Copyright IBM Corp. 2016, 2024
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
@@ -270,6 +270,7 @@
   :host(#{$c4d-prefix}-cloud-masthead-container) {
     position: relative;
     z-index: 900;
+    display: block;
     padding-block-start: $spacing-09;
   }
 

packages/utilities/src/utilities/StickyHeader/StickyHeader.js

@@ -226,7 +226,7 @@ class StickyHeader {
     }
 
     const newY = window.scrollY;
-    this._lastScrollPosition = newY;
+    this._lastScrollPosition = Math.max(0, newY);
 
     /**
      * maxScrollaway is a calculated value matching the height of all components

packages/utilities/src/utilities/settings/settings.js

@@ -12,10 +12,10 @@
  * @type {object} Settings object
  * @property {string} [stablePrefix=c4d] stable prefix
  * @property {string} [prefix=cds] core Carbon prefix
- * Carbon for IBM.com v2.0.0',
+ * Carbon for IBM.com v2.1.0',
  */
 const settings = {
-  version: 'Carbon for IBM.com v2.0.0',
+  version: 'Carbon for IBM.com v2.1.0',
   stablePrefix: 'c4d',
   prefix: 'cds',
 };

packages/web-components/package.json

@@ -93,9 +93,9 @@
     "@carbon/ibmdotcom-services": "2.0.0",
     "@carbon/ibmdotcom-styles": "2.0.0",
     "@carbon/ibmdotcom-utilities": "2.0.0",
-    "@carbon/layout": "^11.20.1",
-    "@carbon/motion": "^11.16.1",
-    "@carbon/styles": "^1.46.0",
+    "@carbon/layout": "11.20.1",
+    "@carbon/motion": "11.16.1",
+    "@carbon/styles": "1.47.0",
     "@carbon/telemetry": "0.1.0",
     "@carbon/web-components": "2.0.2-rc.1",
     "lit": "^2.7.6",
@@ -132,11 +132,11 @@
     "@babel/traverse": "~7.23.0",
     "@carbon/ibmdotcom-services-store": "1.53.0",
     "@carbon/icon-helpers": "10.45.1",
-    "@carbon/icons": "^11.31.0",
+    "@carbon/icons": "11.31.0",
     "@carbon/icons-react": "10.49.2",
     "@carbon/pictograms-react": "11.55.0",
-    "@carbon/react": "^1.46.0",
-    "@carbon/type": "^11.25.1",
+    "@carbon/react": "1.47.0",
+    "@carbon/type": "11.25.1",
     "@open-wc/semantic-dom-diff": "~0.18.0",
     "@percy-io/in-percy": "^0.1.11",
     "@percy/cli": "^1.27.4",

packages/web-components/src/components/masthead/masthead-composite.ts

@@ -8,7 +8,7 @@
  */
 
 import { LitElement, html, TemplateResult } from 'lit';
-import { state, property } from 'lit/decorators.js';
+import { state, property, query } from 'lit/decorators.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import ArrowRight16 from '../../internal/vendor/@carbon/web-components/icons/arrow--right/16.js';
 import ifNonEmpty from '../../internal/vendor/@carbon/web-components/globals/directives/if-non-empty.js';
@@ -41,6 +41,7 @@ import { C4D_CUSTOM_PROFILE_LOGIN } from '../../globals/internal/feature-flags';
 import C4DMastheadLogo from './masthead-logo';
 import C4DMegaMenuTabs from './megamenu-tabs';
 import C4DMegamenuTopNavMenu from './megamenu-top-nav-menu';
+import C4DMastheadL1 from './masthead-l1';
 import './masthead';
 import './masthead-button-cta';
 import './masthead-l1';
@@ -94,6 +95,7 @@ export interface CMApp {
   version: string;
   ready: boolean;
   init: Function;
+  minimize: Function;
   refresh: Function;
   register: Function;
   deregister: Function;
@@ -992,6 +994,9 @@ class C4DMastheadComposite extends HostListenerMixin(LitElement) {
     // any previously opened megamenu.
     if (active && menuIndex !== undefined) {
       this._activeMegamenuIndex = menuIndex;
+
+      // Close the Contact Module upon opening megamenu.
+      this.contactModuleApp?.minimize();
     }
 
     // If clicking the same nav item to close megamenu, reset state to prune its
@@ -1008,6 +1013,14 @@ class C4DMastheadComposite extends HostListenerMixin(LitElement) {
     resolveFn();
   };
 
+  @HostListener(C4DMastheadL1.dropDownToggleEvent)
+  protected _handleL1DropdownToggle({ detail }: CustomEvent) {
+    const { isOpen } = detail;
+    if (isOpen) {
+      this.contactModuleApp?.minimize();
+    }
+  }
+
   /**
    * Sets the active megamenu tabpanel upon user interaction.
    *
@@ -1325,6 +1338,47 @@ class C4DMastheadComposite extends HostListenerMixin(LitElement) {
       : unauthenticatedCtaButtons;
   }
 
+  /**
+   * A reference to the c4d-masthead element.
+   */
+  @query(`${c4dPrefix}-masthead`)
+  mastheadRef;
+
+  /**
+   * Resize observer to trigger container height recalculations.
+   *
+   * @private
+   */
+  private _heightResizeObserver = new ResizeObserver(
+    this._resizeObserverCallback.bind(this)
+  );
+
+  /**
+   * Prevents resize observer from blocking main thread.
+   */
+  private _resizeObserverThrottle?: NodeJS.Timeout;
+
+  /**
+   * Throttled callback for _heightResizeObserver.
+   */
+  protected _resizeObserverCallback() {
+    clearTimeout(this._resizeObserverThrottle);
+    this._resizeObserverThrottle = setTimeout(
+      this._setContainerHeight.bind(this),
+      100
+    );
+  }
+
+  /**
+   * Sets root element's height equal to the height of the fixed masthead elements.
+   */
+  protected _setContainerHeight() {
+    const { mastheadRef } = this;
+    if (mastheadRef) {
+      this.style.display = 'block';
+      this.style.height = `${mastheadRef.getBoundingClientRect().height}px`;
+    }
+  }
   firstUpdated() {
     const { language, dataEndpoint } = this;
     globalInit();
@@ -1344,6 +1398,9 @@ class C4DMastheadComposite extends HostListenerMixin(LitElement) {
       this._isMobileVersion = layoutBreakpoint.matches;
       this.requestUpdate();
     });
+
+    // Keep render root's height in sync with c4d-masthead.
+    this._heightResizeObserver.observe(this.mastheadRef);
   }
 
   updated(changedProperties) {
@@ -1359,6 +1416,11 @@ class C4DMastheadComposite extends HostListenerMixin(LitElement) {
     }
   }
 
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this._heightResizeObserver.disconnect();
+  }
+
   render() {
     const {
       _isMobileVersion: isMobileVersion,

packages/web-components/src/components/masthead/masthead-contact.ts

@@ -12,10 +12,9 @@ import { property } from 'lit/decorators.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import Chat20 from '../../internal/vendor/@carbon/web-components/icons/chat/20.js';
 import settings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
+import HostListener from '../../internal/vendor/@carbon/web-components/globals/decorators/host-listener.js';
 import styles from './masthead.scss';
 import C4DMastheadProfile from './masthead-profile';
-import C4DMastheadContainer from './masthead-container';
-import { CMApp } from './masthead-composite';
 import { carbonElement as customElement } from '../../internal/vendor/@carbon/web-components/globals/decorators/carbon-element.js';
 
 const { prefix, stablePrefix: c4dPrefix } = settings;
@@ -33,6 +32,28 @@ class C4DMastheadContact extends C4DMastheadProfile {
   @property({ attribute: 'trigger-label' })
   triggerLabel = 'Contact';
 
+  /**
+   * Handles cm-app-pane-displayed event fired by CM_APP.
+   *
+   * @see DOCUMENT_EVENTS live-advisor/cm-app/js/helpers/otherConstants.js
+   *   - https://github.ibm.com/live-advisor/cm-app/blob/master/js/helpers/otherConstants.js
+   */
+  @HostListener('document:cm-app-pane-displayed')
+  protected _handleCMAppDisplayed = (_event: CustomEvent) => {
+    this.triggerLabel = 'Close contact window';
+  };
+
+  /**
+   * Handles cm-app-pane-hidden event fired by CM_APP.
+   *
+   * @see DOCUMENT_EVENTS live-advisor/cm-app/js/helpers/otherConstants.js
+   *   - https://github.ibm.com/live-advisor/cm-app/blob/master/js/helpers/otherConstants.js
+   */
+  @HostListener('document:cm-app-pane-hidden')
+  protected _handleCMAppHidden = (_event: CustomEvent) => {
+    this.triggerLabel = 'Show contact window';
+  };
+
   render() {
     const { triggerLabel, _handleClick: handleClick } = this;
     return html`
@@ -46,25 +67,6 @@ class C4DMastheadContact extends C4DMastheadProfile {
     `;
   }
 
-  updated(changedProperties) {
-    if (changedProperties.has('expanded')) {
-      if (!this.expanded) {
-        const mastheadContainer = this.closest(
-          `${c4dPrefix}-masthead-container`
-        ) as C4DMastheadContainer;
-
-        /**
-         * This is a workaround to minimize the chat module. Currently no minimize methods exist.
-         *
-         * @see https://github.ibm.com/live-advisor/cm-app
-         */
-        if (mastheadContainer?.contactModuleApp) {
-          (mastheadContainer.contactModuleApp as CMApp).init();
-        }
-      }
-    }
-  }
-
   static styles = styles; // `styles` here is a `CSSResult` generated by custom WebPack loader
 }
 

packages/web-components/src/components/masthead/masthead-container.ts

@@ -100,16 +100,17 @@ export function mapStateToProps(
         : translations?.[language]?.mastheadNav?.links,
       authenticatedProfileItems: !language
         ? undefined
-        : translations?.[language]?.profileMenu.signedin,
+        : translations?.[language]?.profileMenu?.signedin,
       unauthenticatedProfileItems: !language
         ? undefined
-        : translations?.[language]?.profileMenu.signedout,
+        : translations?.[language]?.profileMenu?.signedout,
       authenticatedCtaButtons: !language
         ? undefined
-        : translations?.[language]?.masthead?.profileMenu.signedin.ctaButtons,
+        : translations?.[language]?.masthead?.profileMenu?.signedin?.ctaButtons,
       unauthenticatedCtaButtons: !language
         ? undefined
-        : translations?.[language]?.masthead?.profileMenu.signedout.ctaButtons,
+        : translations?.[language]?.masthead?.profileMenu?.signedout
+            ?.ctaButtons,
       contactUsButton: !language
         ? undefined
         : translations?.[language]?.masthead?.contact,

packages/web-components/src/components/masthead/masthead-l1.ts

@@ -447,6 +447,7 @@ class C4DMastheadL1 extends StableSelectorMixin(LitElement) {
           ${title}${ChevronDown16()}
         </button>
         <div
+          data-dropdown-target
           class="${prefix}--masthead__l1-dropdown ${prefix}--masthead__l1-dropdown__${columns}-col">
           ${announcement
             ? html`<div class="${prefix}--masthead__l1-dropdown-announcement">
@@ -551,7 +552,7 @@ class C4DMastheadL1 extends StableSelectorMixin(LitElement) {
       <button class="${prefix}--masthead__l1-title" @click=${toggleSubsection}>
         ${title}${ChevronDown16()}
       </button>
-      <ul class="${prefix}--masthead__l1-dropdown">
+      <ul data-dropdown-target class="${prefix}--masthead__l1-dropdown">
         ${url
           ? html` <li>
               <a class="${prefix}--masthead__l1-dropdown-item" href="${url}">
@@ -617,7 +618,9 @@ class C4DMastheadL1 extends StableSelectorMixin(LitElement) {
           @click=${toggleSubsection}>
           ${title}${ChevronDown16()}
         </button>
-        <div class="${prefix}--masthead__l1-dropdown-subsection">
+        <div
+          data-dropdown-target
+          class="${prefix}--masthead__l1-dropdown-subsection">
           ${announcement
             ? html`<div class="${prefix}--masthead__l1-dropdown-announcement">
                 ${unsafeHTML(announcement)}
@@ -670,10 +673,13 @@ class C4DMastheadL1 extends StableSelectorMixin(LitElement) {
    */
   protected _toggleSubsection(event: PointerEvent) {
     const { isMobileVersion } = this;
+    const { dropDownToggleEvent } = this.constructor as typeof C4DMastheadL1;
     const { currentTarget } = event;
     const button = currentTarget as HTMLElement;
-    const dropdown = button.nextElementSibling as HTMLElement;
-    const isOpen = dropdown.classList.contains('is-open');
+    const dropdown = button.parentNode?.querySelector(
+      '[data-dropdown-target]'
+    ) as HTMLElement;
+    const isOpen = dropdown?.classList.contains('is-open');
 
     if (!isMobileVersion && dropdown && !isOpen) {
       // Get Button & Dropdown locations & widths
@@ -731,6 +737,17 @@ class C4DMastheadL1 extends StableSelectorMixin(LitElement) {
       dropdown.style.maxHeight = `calc(${maxHeight}px - 4rem)`;
     }
 
+    this.dispatchEvent(
+      new CustomEvent(dropDownToggleEvent, {
+        bubbles: true,
+        composed: true,
+        cancelable: false,
+        detail: {
+          isOpen: !isOpen,
+        },
+      })
+    );
+
     button.classList.toggle('is-open', !isOpen);
     dropdown.classList.toggle('is-open', !isOpen);
   }
@@ -952,6 +969,10 @@ class C4DMastheadL1 extends StableSelectorMixin(LitElement) {
     return `${c4dPrefix}--masthead__l1`;
   }
 
+  static get dropDownToggleEvent() {
+    return `${c4dPrefix}-masthead-l1-dropdown-toggle`;
+  }
+
   static styles = styles; // `styles` here is a `CSSResult` generated by custom WebPack loader
 }