diff --git a/packages/overlay/package.json b/packages/overlay/package.json index d924bf8343..6e6aef42bd 100644 --- a/packages/overlay/package.json +++ b/packages/overlay/package.json @@ -102,7 +102,7 @@ "lit-html" ], "dependencies": { - "@floating-ui/dom": "^1.0.4", + "@floating-ui/dom": "^1.1.0", "@spectrum-web-components/action-button": "^0.10.9", "@spectrum-web-components/base": "^0.7.3", "@spectrum-web-components/shared": "^0.15.4", diff --git a/packages/overlay/src/ActiveOverlay.ts b/packages/overlay/src/ActiveOverlay.ts index f420a94a56..bca813980b 100644 --- a/packages/overlay/src/ActiveOverlay.ts +++ b/packages/overlay/src/ActiveOverlay.ts @@ -288,7 +288,7 @@ export class ActiveOverlay extends SpectrumElement { await this.updateOverlayPosition(); document.addEventListener( 'sp-update-overlays', - this.setOverlayPosition + this.resetOverlayPosition ); } if (this.placement && this.placement !== 'none') { @@ -400,7 +400,7 @@ export class ActiveOverlay extends SpectrumElement { } } - private initialHeight!: number; + private initialHeight: number | undefined; private isConstrained = false; public async placeOverlay(): Promise { @@ -426,6 +426,16 @@ export class ActiveOverlay extends SpectrumElement { this.setOverlayPosition(); }; + public resetOverlayPosition = (): void => { + this.style.setProperty('max-height', ''); + this.style.setProperty('height', ''); + this.initialHeight = undefined; + this.isConstrained = false; + // force paint + this.offsetHeight; + this.setOverlayPosition(); + }; + public setOverlayPosition = async (): Promise => { if (!this.placement || this.placement === 'none') { return; @@ -651,7 +661,7 @@ export class ActiveOverlay extends SpectrumElement { override disconnectedCallback(): void { document.removeEventListener( 'sp-update-overlays', - this.setOverlayPosition + this.resetOverlayPosition ); super.disconnectedCallback(); } diff --git a/packages/overlay/src/active-overlay.css b/packages/overlay/src/active-overlay.css index 247ee91ce3..fac7c0b2ed 100644 --- a/packages/overlay/src/active-overlay.css +++ b/packages/overlay/src/active-overlay.css @@ -41,6 +41,7 @@ governing permissions and limitations under the License. pointer-events: none; top: -9999em; left: -9999em; + max-height: 100%; } :host(:focus) { diff --git a/packages/overlay/stories/overlay.stories.ts b/packages/overlay/stories/overlay.stories.ts index 4d723f684d..9d0091ee91 100644 --- a/packages/overlay/stories/overlay.stories.ts +++ b/packages/overlay/stories/overlay.stories.ts @@ -40,6 +40,8 @@ import '@spectrum-web-components/radio/sp-radio-group.js'; import '@spectrum-web-components/tooltip/sp-tooltip.js'; import '@spectrum-web-components/theme/sp-theme.js'; import '@spectrum-web-components/theme/src/themes.js'; +import '@spectrum-web-components/accordion/sp-accordion.js'; +import '@spectrum-web-components/accordion/sp-accordion-item.js'; import '../../../projects/story-decorator/src/types.js'; import './overlay-story-components.js'; @@ -1138,3 +1140,86 @@ export const updating = (): TemplateResult => { updating.swc_vrt = { skip: true, }; + +export const accordion = (): TemplateResult => { + const handleToggle = (): void => { + Overlay.update(); + console.log('hi'); + }; + return html` + + + Open overlay w/ accordion + +
+ + + +

+ Thing +
+
+
+
+
+
+
+ more things +

+
+ +

+ Thing +
+
+
+
+
+
+
+ more things +

+
+ +

+ Thing +
+
+
+
+
+
+
+ more things +

+
+ +

+ Thing +
+
+
+
+
+
+
+ more things +

+
+
+
+
+
+ `; +}; + +accordion.swc_vrt = { + skip: true, +}; diff --git a/yarn.lock b/yarn.lock index ac7e07fd78..188e36b586 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1996,17 +1996,17 @@ dependencies: "@types/chai" "^4.2.12" -"@floating-ui/core@^1.0.3": - version "1.0.3" - resolved "https://registry.yarnpkg.com/@floating-ui/core/-/core-1.0.3.tgz#eab273554bdd883fa2cb48d5218fedda3afbbc1f" - integrity sha512-27FDAEVHrAEQI1UV+7FIjZrFK862gBoAG0USoPMU7RoBCmaTDt6bnKVW/J2uPnOPI6TWqiWGtS7RFN+tN/k+vQ== +"@floating-ui/core@^1.0.5": + version "1.1.0" + resolved "https://registry.yarnpkg.com/@floating-ui/core/-/core-1.1.0.tgz#0a1dee4bbce87ff71602625d33f711cafd8afc08" + integrity sha512-zbsLwtnHo84w1Kc8rScAo5GMk1GdecSlrflIbfnEBJwvTSj1SL6kkOYV+nHraMCPEy+RNZZUaZyL8JosDGCtGQ== -"@floating-ui/dom@^1.0.4": - version "1.0.8" - resolved "https://registry.yarnpkg.com/@floating-ui/dom/-/dom-1.0.8.tgz#207c6fdaf21a73166c877e99cc49c69f2e816c2d" - integrity sha512-uUm1xYQ0xdmFLhtetKgjK9AtF4INwDVwuJZvpK19ENHg1wYn7T0w9phYyCL5+HEpgJtX4ZYG6HJkDbtd2yP6cg== +"@floating-ui/dom@^1.1.0": + version "1.1.0" + resolved "https://registry.yarnpkg.com/@floating-ui/dom/-/dom-1.1.0.tgz#29fea1344fdef15b6ba270a733d20b7134fee5c2" + integrity sha512-TSogMPVxbRe77QCj1dt8NmRiJasPvuc+eT5jnJ6YpLqgOD2zXc5UA3S1qwybN+GVCDNdKfpKy1oj8RpzLJvh6A== dependencies: - "@floating-ui/core" "^1.0.3" + "@floating-ui/core" "^1.0.5" "@formatjs/ecma402-abstract@1.9.3": version "1.9.3"