fix!: floating-ui elements no longer take up space when closed

packages/calcite-components/.stylelintrc.cjs

@@ -6,7 +6,7 @@ const customFunctions = [
   "medium-modular-scale",
   "modular-scale",
   "scale-duration",
-  "small-modular-scale",
+  "small-modular-scale"
 ];
 // ⚠️ END OF AUTO-GENERATED CODE
 

packages/calcite-components/src/assets/styles/_floating-ui.scss

@@ -34,7 +34,7 @@ $floating-ui-transition-offset: 5px;
 
 @mixin floating-ui-anim-active {
   opacity: 1;
-  inset-block: 0;
+  inset-block-start: 0;
   left: 0;
 }
 
@@ -64,54 +64,13 @@ $floating-ui-transition-offset: 5px;
   }
 }
 
-@mixin floating-ui-host-anim {
-  @include floating-ui-anim();
-
-  :host([data-placement^="bottom"]) .calcite-floating-ui-anim {
-    @include floating-ui-offset-bottom();
-  }
-
-  :host([data-placement^="top"]) .calcite-floating-ui-anim {
-    @include floating-ui-offset-top();
-  }
-
-  :host([data-placement^="left"]) .calcite-floating-ui-anim {
-    @include floating-ui-offset-left();
-  }
-
-  :host([data-placement^="right"]) .calcite-floating-ui-anim {
-    @include floating-ui-offset-right();
-  }
-
-  :host([data-placement]) .calcite-floating-ui-anim--active {
-    @include floating-ui-anim-active();
-  }
-}
-
 @mixin floating-ui-container() {
-  display: block;
-  position: absolute;
+  display: none;
+  inset-block-start: 0;
+  left: 0;
   z-index: var(--calcite-floating-ui-z-index);
 }
 
-@mixin floating-ui-wrapper {
-  visibility: hidden;
-}
-
-@mixin floating-ui-wrapper-active {
-  visibility: visible;
-}
-
-@mixin floating-ui-host() {
-  :host {
-    @include floating-ui-container();
-  }
-
-  @include floating-ui-host-anim();
-
-  @include calcite-hydrated-hidden();
-}
-
 @mixin floating-ui-arrow {
   .calcite-floating-ui-arrow {
     @apply -z-default

packages/calcite-components/src/components/action-menu/action-menu.e2e.ts

@@ -12,6 +12,8 @@ import {
   themed,
 } from "../../tests/commonTests";
 import { TOOLTIP_OPEN_DELAY_MS } from "../tooltip/resources";
+import { CSS as TooltipCSS } from "../tooltip/resources";
+import { skipAnimations } from "../../tests/utils";
 import { CSS, SLOTS, activeAttr } from "./resources";
 
 describe("calcite-action-menu", () => {
@@ -212,31 +214,33 @@ describe("calcite-action-menu", () => {
   });
 
   it("should close tooltip when open", async () => {
-    const page = await newE2EPage({
-      html: `
-    <calcite-action-menu label="test">
-    <calcite-action id="trigger" slot="${SLOTS.trigger}" text="Add" icon="plus"></calcite-action>
-      <calcite-tooltip slot="${SLOTS.tooltip}">Bits and bobs.</calcite-tooltip>
-      <calcite-action text="Add" icon="plus"></calcite-action>
-    </calcite-action-menu>
-    `,
-    });
+    const page = await newE2EPage();
+
+    await page.setContent(html`
+      <calcite-action-menu label="test">
+        <calcite-action id="trigger" slot="${SLOTS.trigger}" text="Add" icon="plus"></calcite-action>
+        <calcite-tooltip slot="${SLOTS.tooltip}">Bits and bobs.</calcite-tooltip>
+        <calcite-action text="Add" icon="plus"></calcite-action>
+      </calcite-action-menu>
+    `);
+
+    await skipAnimations(page);
 
     const actionMenu = await page.find("calcite-action-menu");
-    const tooltip = await page.find("calcite-tooltip");
+    const tooltipPositionContainer = await page.find(`calcite-tooltip >>> .${TooltipCSS.positionContainer}`);
     const trigger = await page.find("#trigger");
 
-    expect(await tooltip.isVisible()).toBe(false);
+    expect(await tooltipPositionContainer.isVisible()).toBe(false);
 
     await trigger.hover();
     await page.waitForTimeout(TOOLTIP_OPEN_DELAY_MS);
 
-    expect(await tooltip.isVisible()).toBe(true);
+    expect(await tooltipPositionContainer.isVisible()).toBe(true);
 
     actionMenu.setProperty("open", true);
     await page.waitForChanges();
 
-    expect(await tooltip.isVisible()).toBe(false);
+    expect(await tooltipPositionContainer.isVisible()).toBe(false);
   });
 
   describe("Keyboard navigation", () => {

packages/calcite-components/src/components/combobox/combobox.e2e.ts

@@ -1352,7 +1352,7 @@ describe("calcite-combobox", () => {
       await page.waitForChanges();
       expect(await page.evaluate(() => document.activeElement.id)).toBe("myCombobox");
 
-      const container = await page.find(`#myCombobox >>> .floating-ui-container`);
+      const container = await page.find(`#myCombobox >>> .${CSS.floatingUIContainer}`);
       const visible = await container.isVisible();
       expect(visible).toBe(false);
     });
@@ -1361,25 +1361,25 @@ describe("calcite-combobox", () => {
       await page.keyboard.press("Tab");
       expect(await page.evaluate(() => document.activeElement.id)).toBe("myCombobox");
 
-      const floatingUI = await page.find("#myCombobox >>> .floating-ui-container--active");
-      expect(floatingUI).toBeNull();
+      const floatingUI = await page.find(`#myCombobox >>> .${CSS.floatingUIContainer}`);
+      expect(await floatingUI.isVisible()).toBe(false);
     });
 
     it("tab will close the item group if it’s open", async () => {
+      skipAnimations(page);
       const inputEl = await page.find(`#myCombobox >>> input`);
       await inputEl.focus();
       await page.waitForChanges();
       expect(await page.evaluate(() => document.activeElement.id)).toBe("myCombobox");
 
       await page.keyboard.press("Space");
       await page.waitForChanges();
-      let floatingUI = await page.find("#myCombobox >>> .floating-ui-container--active");
-      expect(floatingUI).toBeTruthy();
+      const floatingUI = await page.find(`#myCombobox >>> .${CSS.floatingUIContainer}`);
+      expect(await floatingUI.isVisible()).toBe(true);
 
       await page.keyboard.press("Tab");
       await page.waitForChanges();
-      floatingUI = await page.find("#myCombobox >>> .floating-ui-container--active");
-      expect(floatingUI).toBeNull();
+      expect(await floatingUI.isVisible()).toBe(false);
     });
 
     it("should not throw when typing custom value and pressing ArrowDown", async () => {
@@ -1409,20 +1409,20 @@ describe("calcite-combobox", () => {
     });
 
     it(`Escape closes the dropdown, but remains focused`, async () => {
+      await skipAnimations(page);
       const inputEl = await page.find(`#myCombobox >>> input`);
       await inputEl.focus();
       await page.waitForChanges();
       expect(await page.evaluate(() => document.activeElement.id)).toBe("myCombobox");
 
       await page.keyboard.press("Space");
       await page.waitForChanges();
-      let floatingUI = await page.find("#myCombobox >>> .floating-ui-container--active");
-      expect(floatingUI).toBeTruthy();
+      const floatingUI = await page.find(`#myCombobox >>> .${CSS.floatingUIContainer}`);
+      expect(await floatingUI.isVisible()).toBe(true);
 
       await page.keyboard.press("Escape");
       await page.waitForChanges();
-      floatingUI = await page.find("#myCombobox >>> .floating-ui-container--active");
-      expect(floatingUI).toBeNull();
+      expect(await floatingUI.isVisible()).toBe(false);
 
       expect(await page.evaluate(() => document.activeElement.id)).toBe("myCombobox");
     });
@@ -1464,8 +1464,8 @@ describe("calcite-combobox", () => {
       });
       const combobox = await page.find("calcite-combobox");
       await combobox.callMethod(`setFocus`);
-      const activeContainer = await page.find("#myCombobox >>> .floating-ui-container--active");
-      expect(activeContainer).toBeNull();
+      const floatingUI = await page.find(`#myCombobox >>> .${CSS.floatingUIContainer}`);
+      expect(await floatingUI.isVisible()).toBe(false);
       expect(await page.evaluate(() => window.scrollY)).toEqual(0);
 
       await page.keyboard.press("PageDown");
@@ -1907,7 +1907,7 @@ describe("calcite-combobox", () => {
       expect(value).toBe("");
       await input.click();
 
-      const container = await page.find("calcite-combobox >>> .floating-ui-container");
+      const container = await page.find(`calcite-combobox >>> .${CSS.floatingUIContainer}`);
       let visible = await container.isVisible();
       expect(visible).toBe(true);
 
@@ -2055,7 +2055,7 @@ describe("calcite-combobox", () => {
         </calcite-combobox>
       `,
       "open",
-      { shadowSelector: ".floating-ui-container" },
+      { shadowSelector: `.${CSS.floatingUIContainer}` },
     );
   });
 

packages/calcite-components/src/components/combobox/combobox.scss

@@ -203,18 +203,13 @@
 .floating-ui-container {
   --calcite-floating-ui-z-index: theme("zIndex.dropdown");
   @include floating-ui-container();
-  @include floating-ui-wrapper();
 }
 
 @include floating-ui-elem-anim(".floating-ui-container");
 
-.floating-ui-container--active {
-  @include floating-ui-wrapper-active();
-}
-
 @media (forced-colors: active) {
   .wrapper,
-  .floating-ui-container--active {
+  .floating-ui-container {
     border: 1px solid canvasText;
   }
 }

packages/calcite-components/src/components/combobox/combobox.tsx

@@ -24,6 +24,7 @@ import {
   FlipPlacement,
   FloatingCSS,
   FloatingUIComponent,
+  hideFloatingUI,
   LogicalPlacement,
   OverlayPositioning,
   reposition,
@@ -499,7 +500,7 @@ export class Combobox
       onToggleOpenCloseComponent(this);
     }
 
-    connectFloatingUI(this, this.referenceEl, this.floatingEl);
+    connectFloatingUI(this);
   }
 
   async componentWillLoad(): Promise<void> {
@@ -511,7 +512,7 @@ export class Combobox
 
   componentDidLoad(): void {
     afterConnectDefaultValueSet(this, this.getValue());
-    connectFloatingUI(this, this.referenceEl, this.floatingEl);
+    connectFloatingUI(this);
     setComponentLoaded(this);
   }
 
@@ -533,7 +534,7 @@ export class Combobox
     this.resizeObserver?.disconnect();
     disconnectLabel(this);
     disconnectForm(this);
-    disconnectFloatingUI(this, this.referenceEl, this.floatingEl);
+    disconnectFloatingUI(this);
     disconnectLocalized(this);
     disconnectMessages(this);
   }
@@ -591,6 +592,10 @@ export class Combobox
 
   textInput: HTMLInputElement = null;
 
+  floatingEl: HTMLDivElement;
+
+  referenceEl: HTMLDivElement;
+
   private data: ItemData[];
 
   mutationObserver = createObserver("mutation", () => this.updateItems());
@@ -604,10 +609,6 @@ export class Combobox
 
   private inputHeight = 0;
 
-  private floatingEl: HTMLDivElement;
-
-  private referenceEl: HTMLDivElement;
-
   private chipContainerEl: HTMLDivElement;
 
   private listContainerEl: HTMLDivElement;
@@ -826,6 +827,7 @@ export class Combobox
 
   onClose(): void {
     this.calciteComboboxClose.emit();
+    hideFloatingUI(this);
   }
 
   setMaxScrollerHeight = async (): Promise<void> => {
@@ -972,7 +974,7 @@ export class Combobox
 
   setFloatingEl = (el: HTMLDivElement): void => {
     this.floatingEl = el;
-    connectFloatingUI(this, this.referenceEl, this.floatingEl);
+    connectFloatingUI(this);
   };
 
   private setCompactSelectionDisplay({
@@ -1003,7 +1005,7 @@ export class Combobox
 
   setReferenceEl = (el: HTMLDivElement): void => {
     this.referenceEl = el;
-    connectFloatingUI(this, this.referenceEl, this.floatingEl);
+    connectFloatingUI(this);
   };
 
   setAllSelectedIndicatorChipEl = (el: HTMLCalciteChipElement): void => {
@@ -1676,14 +1678,7 @@ export class Combobox
     };
 
     return (
-      <div
-        aria-hidden="true"
-        class={{
-          "floating-ui-container": true,
-          "floating-ui-container--active": open,
-        }}
-        ref={setFloatingEl}
-      >
+      <div aria-hidden="true" class={CSS.floatingUIContainer} ref={setFloatingEl}>
         <div class={classes} ref={setContainerEl}>
           <ul class={{ list: true, "list--hide": !open }}>
             <slot />

packages/calcite-components/src/components/combobox/resources.ts

@@ -12,6 +12,7 @@ export const CSS = {
   icon: "icon",
   placeholderIcon: "placeholder-icon",
   selectedIcon: "selected-icon",
+  floatingUIContainer: "floating-ui-container",
 };
 
 export const IDS = {

packages/calcite-components/src/components/dropdown/dropdown.e2e.ts

@@ -733,6 +733,7 @@ describe("calcite-dropdown", () => {
           </calcite-dropdown-group>
         </calcite-dropdown>
       `);
+      await skipAnimations(page);
       const element = await page.find("calcite-dropdown");
       const trigger = await element.find("calcite-button[slot='trigger']");
       const dropdownWrapper = await page.find(`calcite-dropdown >>> .calcite-dropdown-wrapper`);
@@ -779,6 +780,7 @@ describe("calcite-dropdown", () => {
           </calcite-dropdown-group>
         </calcite-dropdown>
       `);
+      await skipAnimations(page);
       const element = await page.find("calcite-dropdown");
       const trigger = await element.find("calcite-action[slot='trigger'] >>> button");
       const dropdownWrapper = await page.find(`calcite-dropdown >>> .calcite-dropdown-wrapper`);
@@ -825,6 +827,7 @@ describe("calcite-dropdown", () => {
           </calcite-dropdown-group>
         </calcite-dropdown>
       `);
+      await skipAnimations(page);
       const element = await page.find("calcite-dropdown");
       const dropdownWrapper = await page.find(`calcite-dropdown >>> .calcite-dropdown-wrapper`);
       const calciteDropdownOpen = await element.spyOnEvent("calciteDropdownOpen");
@@ -1163,6 +1166,7 @@ describe("calcite-dropdown", () => {
         </calcite-list>
       </calcite-panel>`,
     });
+    await skipAnimations(page);
     await page.waitForChanges();
 
     const dropdownContentHeight = await (

packages/calcite-components/src/components/dropdown/dropdown.scss

@@ -15,13 +15,9 @@
 :host .calcite-dropdown-wrapper {
   --calcite-floating-ui-z-index: theme("zIndex.dropdown");
   @include floating-ui-container();
-  @include floating-ui-wrapper();
 }
 
 @include floating-ui-elem-anim(".calcite-dropdown-wrapper");
-:host([open]) .calcite-dropdown-wrapper {
-  @include floating-ui-wrapper-active();
-}
 
 :host .calcite-dropdown-content {
   @apply bg-foreground-1