diff --git a/.yarn/cache/@carbon-icons-npm-11.32.0-ad4e2a2d6c-d0d1776877.zip b/.yarn/cache/@carbon-icons-npm-11.31.0-3bec00ed0e-da2ae3f51a.zip similarity index 84% rename from .yarn/cache/@carbon-icons-npm-11.32.0-ad4e2a2d6c-d0d1776877.zip rename to .yarn/cache/@carbon-icons-npm-11.31.0-3bec00ed0e-da2ae3f51a.zip index dd2fc14b864..db445971452 100644 Binary files a/.yarn/cache/@carbon-icons-npm-11.32.0-ad4e2a2d6c-d0d1776877.zip and b/.yarn/cache/@carbon-icons-npm-11.31.0-3bec00ed0e-da2ae3f51a.zip differ diff --git a/.yarn/cache/@carbon-icons-react-npm-11.32.0-57e6e5849d-538f83c10f.zip b/.yarn/cache/@carbon-icons-react-npm-11.32.0-57e6e5849d-538f83c10f.zip deleted file mode 100644 index 46f40671b61..00000000000 Binary files a/.yarn/cache/@carbon-icons-react-npm-11.32.0-57e6e5849d-538f83c10f.zip and /dev/null differ diff --git a/.yarn/cache/@carbon-react-npm-1.46.0-5b5d8e05f5-7a7805f58a.zip b/.yarn/cache/@carbon-react-npm-1.47.0-6e2714c8c3-01dfec292c.zip similarity index 81% rename from .yarn/cache/@carbon-react-npm-1.46.0-5b5d8e05f5-7a7805f58a.zip rename to .yarn/cache/@carbon-react-npm-1.47.0-6e2714c8c3-01dfec292c.zip index d4c10fec593..6ca83a059c3 100644 Binary files a/.yarn/cache/@carbon-react-npm-1.46.0-5b5d8e05f5-7a7805f58a.zip and b/.yarn/cache/@carbon-react-npm-1.47.0-6e2714c8c3-01dfec292c.zip differ diff --git a/.yarn/cache/@carbon-styles-npm-1.46.0-69d4aec9e6-e403d3890d.zip b/.yarn/cache/@carbon-styles-npm-1.47.0-0d50a041b3-a320dd704f.zip similarity index 62% rename from .yarn/cache/@carbon-styles-npm-1.46.0-69d4aec9e6-e403d3890d.zip rename to .yarn/cache/@carbon-styles-npm-1.47.0-0d50a041b3-a320dd704f.zip index 889be097ad4..4c26ead554c 100644 Binary files a/.yarn/cache/@carbon-styles-npm-1.46.0-69d4aec9e6-e403d3890d.zip and b/.yarn/cache/@carbon-styles-npm-1.47.0-0d50a041b3-a320dd704f.zip differ diff --git a/.yarn/cache/@ibm-telemetry-js-npm-1.1.0-b3b4946df0-4a7b5fcf56.zip b/.yarn/cache/@ibm-telemetry-js-npm-1.1.0-b3b4946df0-4a7b5fcf56.zip new file mode 100644 index 00000000000..9a94b9ece19 Binary files /dev/null and b/.yarn/cache/@ibm-telemetry-js-npm-1.1.0-b3b4946df0-4a7b5fcf56.zip differ diff --git a/.yarn/cache/classnames-npm-2.3.2-d2fdae468d-ba3151c12e.zip b/.yarn/cache/classnames-npm-2.3.2-d2fdae468d-ba3151c12e.zip deleted file mode 100644 index cbb980c4d64..00000000000 Binary files a/.yarn/cache/classnames-npm-2.3.2-d2fdae468d-ba3151c12e.zip and /dev/null differ diff --git a/.yarn/cache/classnames-npm-2.5.0-52351935b9-729436ac76.zip b/.yarn/cache/classnames-npm-2.5.0-52351935b9-729436ac76.zip new file mode 100644 index 00000000000..063d74bba7b Binary files /dev/null and b/.yarn/cache/classnames-npm-2.5.0-52351935b9-729436ac76.zip differ diff --git a/.yarn/cache/downshift-npm-8.2.3-8c74cc268e-08c15b9e88.zip b/.yarn/cache/downshift-npm-8.2.3-8c74cc268e-08c15b9e88.zip deleted file mode 100644 index b92c91fcaaf..00000000000 Binary files a/.yarn/cache/downshift-npm-8.2.3-8c74cc268e-08c15b9e88.zip and /dev/null differ diff --git a/.yarn/cache/downshift-npm-8.2.4-b8528cd8ba-c6ce78312b.zip b/.yarn/cache/downshift-npm-8.2.4-b8528cd8ba-c6ce78312b.zip new file mode 100644 index 00000000000..773d91b8a67 Binary files /dev/null and b/.yarn/cache/downshift-npm-8.2.4-b8528cd8ba-c6ce78312b.zip differ diff --git a/packages/carbon-web-components/package.json b/packages/carbon-web-components/package.json index 1a7c114e78d..14bb8862a3c 100644 --- a/packages/carbon-web-components/package.json +++ b/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", diff --git a/packages/styles/package.json b/packages/styles/package.json index 61e00e9ecee..3f1126dadb7 100644 --- a/packages/styles/package.json +++ b/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", diff --git a/packages/styles/scss/components/masthead/_masthead.scss b/packages/styles/scss/components/masthead/_masthead.scss index eaed25489a7..8ad1a6e9050 100755 --- a/packages/styles/scss/components/masthead/_masthead.scss +++ b/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; } diff --git a/packages/utilities/src/utilities/StickyHeader/StickyHeader.js b/packages/utilities/src/utilities/StickyHeader/StickyHeader.js index e68a9ccf700..5274b1d40f0 100644 --- a/packages/utilities/src/utilities/StickyHeader/StickyHeader.js +++ b/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 diff --git a/packages/utilities/src/utilities/settings/settings.js b/packages/utilities/src/utilities/settings/settings.js index 32809a03992..e96eb6c119f 100644 --- a/packages/utilities/src/utilities/settings/settings.js +++ b/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', }; diff --git a/packages/web-components/package.json b/packages/web-components/package.json index 7e0f02329fb..1e3d45df694 100644 --- a/packages/web-components/package.json +++ b/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", diff --git a/packages/web-components/src/components/masthead/masthead-composite.ts b/packages/web-components/src/components/masthead/masthead-composite.ts index eebad67d9fd..96cd65c04ed 100644 --- a/packages/web-components/src/components/masthead/masthead-composite.ts +++ b/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, diff --git a/packages/web-components/src/components/masthead/masthead-contact.ts b/packages/web-components/src/components/masthead/masthead-contact.ts index d8073d81aa9..f37e399734c 100644 --- a/packages/web-components/src/components/masthead/masthead-contact.ts +++ b/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 } diff --git a/packages/web-components/src/components/masthead/masthead-container.ts b/packages/web-components/src/components/masthead/masthead-container.ts index 31857ae7a63..450e62c5e20 100644 --- a/packages/web-components/src/components/masthead/masthead-container.ts +++ b/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, diff --git a/packages/web-components/src/components/masthead/masthead-l1.ts b/packages/web-components/src/components/masthead/masthead-l1.ts index 9f5a1baf155..7471e28597c 100644 --- a/packages/web-components/src/components/masthead/masthead-l1.ts +++ b/packages/web-components/src/components/masthead/masthead-l1.ts @@ -447,6 +447,7 @@ class C4DMastheadL1 extends StableSelectorMixin(LitElement) { ${title}${ChevronDown16()}
${announcement ? html`
@@ -551,7 +552,7 @@ class C4DMastheadL1 extends StableSelectorMixin(LitElement) { -