fix: ensure beforeOpen/open and beforeClose/close events emit properly

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

@@ -38,7 +38,6 @@ $border-style: 1px solid var(--calcite-color-border-3);
   inline-size: var(--calcite-alert-width);
   max-inline-size: calc(100% - (var(--calcite-alert-edge-distance) * 2));
   transition:
-    var(--calcite-internal-animation-timing-slow) $easing-function,
     opacity var(--calcite-internal-animation-timing-slow) $easing-function,
     all var(--calcite-animation-timing) ease-in-out;
 

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

@@ -13,6 +13,7 @@ import {
 } from "../../tests/commonTests";
 import { html } from "../../../support/formatting";
 import { openClose } from "../../tests/commonTests";
+import { skipAnimations } from "../../tests/utils";
 import { CSS, SLOTS } from "./resources";
 
 describe("calcite-block", () => {
@@ -189,6 +190,7 @@ describe("calcite-block", () => {
     const heading = "heading";
     const page = await newE2EPage();
     await page.setContent(html`<calcite-block collapsible heading=${heading}></calcite-block>`);
+    await skipAnimations(page);
     const messages = await import(`./assets/block/t9n/messages.json`);
 
     const element = await page.find("calcite-block");
@@ -251,6 +253,7 @@ describe("calcite-block", () => {
           <div class="nested-control" tabindex="0" slot=${SLOTS.control}>fake space/enter-bubbling control</div>
         </calcite-block>
       `);
+      await skipAnimations(page);
       const control = await page.find(".nested-control");
       expect(await control.isVisible()).toBe(true);
 

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

@@ -10,8 +10,9 @@
   @extend %component-host;
   @extend %component-spacing;
   @apply transition-margin ease-cubic border-color-3 flex flex-shrink-0 flex-grow-0
-    flex-col border-0 border-b border-solid p-0 duration-150;
+    flex-col border-0 border-b border-solid p-0;
   flex-basis: auto;
+  transition-duration: var(--calcite-animation-timing);
 }
 
 @include disabled();

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

@@ -224,7 +224,7 @@ export class Block
 
   @State() hasEndActions = false;
 
-  openTransitionProp = "opacity";
+  openTransitionProp = "margin-top";
 
   transitionEl: HTMLElement;
 
@@ -239,6 +239,8 @@ export class Block
     connectInteractive(this);
     connectLocalized(this);
     connectMessages(this);
+
+    this.transitionEl = this.el;
   }
 
   disconnectedCallback(): void {
@@ -301,10 +303,6 @@ export class Block
     this.calciteBlockToggle.emit();
   };
 
-  private setTransitionEl = (el: HTMLElement): void => {
-    this.transitionEl = el;
-  };
-
   private actionsEndSlotChangeHandler = (event: Event): void => {
     this.hasEndActions = slotChangeHasAssignedElement(event);
   };
@@ -490,7 +488,6 @@ export class Block
               class={CSS.content}
               hidden={!open}
               id={IDS.content}
-              ref={this.setTransitionEl}
             >
               {this.renderScrim()}
             </section>

packages/calcite-components/src/components/input-time-picker/input-time-picker.e2e.ts

@@ -859,8 +859,8 @@ describe("calcite-input-time-picker", () => {
         html`<calcite-input-time-picker></calcite-input-time-picker>
           <div id="next-sibling" tabindex="0">next sibling</div>`,
       );
+      await skipAnimations(page);
       const popover = await page.find("calcite-input-time-picker >>> calcite-popover");
-      const stopgapDelayUntilOpenCloseEventsAreImplemented = 500;
 
       await page.keyboard.press("Tab");
       expect(await getFocusedElementProp(page, "tagName")).toBe("CALCITE-INPUT-TIME-PICKER");
@@ -876,7 +876,6 @@ describe("calcite-input-time-picker", () => {
 
       await page.keyboard.press("ArrowDown");
       await page.waitForChanges();
-      await page.waitForTimeout(stopgapDelayUntilOpenCloseEventsAreImplemented);
 
       expect(await popover.isVisible()).toBe(true);
       expect(await getFocusedElementProp(page, "tagName", { shadow: true })).toBe("CALCITE-TIME-PICKER");
@@ -891,7 +890,6 @@ describe("calcite-input-time-picker", () => {
 
       await page.keyboard.press("Escape");
       await page.waitForChanges();
-      await page.waitForTimeout(stopgapDelayUntilOpenCloseEventsAreImplemented);
 
       expect(await popover.isVisible()).toBe(false);
       expect(await getFocusedElementProp(page, "tagName")).toBe("CALCITE-INPUT-TIME-PICKER");

packages/calcite-components/src/components/input-time-picker/input-time-picker.tsx

@@ -75,7 +75,6 @@ import {
   updateMessages,
 } from "../../utils/t9n";
 import { getSupportedLocale } from "../../utils/locale";
-import { onToggleOpenCloseComponent, OpenCloseComponent } from "../../utils/openCloseComponent";
 import { decimalPlaces } from "../../utils/math";
 import { getIconScale } from "../../utils/component";
 import { Validation } from "../functional/Validation";
@@ -169,7 +168,6 @@ export class InputTimePicker
     LabelableComponent,
     LoadableComponent,
     LocalizedComponent,
-    OpenCloseComponent,
     T9nComponent
 {
   //--------------------------------------------------------------------------
@@ -184,14 +182,13 @@ export class InputTimePicker
 
   @Watch("open")
   openHandler(): void {
-    onToggleOpenCloseComponent(this);
-
     if (this.disabled || this.readOnly) {
       this.open = false;
       return;
     }
 
-    this.reposition(true);
+    // we set the property instead of the attribute to ensure popover's open/close events are emitted properly
+    this.popoverEl.open = this.open;
   }
 
   /** When `true`, interaction is prevented and the component is displayed with lower opacity. */
@@ -395,10 +392,6 @@ export class InputTimePicker
 
   private referenceElementId = `input-time-picker-${guid()}`;
 
-  openTransitionProp = "opacity";
-
-  transitionEl: HTMLCalciteInputElement;
-
   //--------------------------------------------------------------------------
   //
   //  State
@@ -559,21 +552,42 @@ export class InputTimePicker
   //
   // --------------------------------------------------------------------------
 
-  onBeforeOpen(): void {
+  private popoverBeforeOpenHandler = (event: CustomEvent<void>): void => {
+    event.stopPropagation();
     this.calciteInputTimePickerBeforeOpen.emit();
-  }
+  };
 
-  onOpen(): void {
+  private popoverOpenHandler = (event: CustomEvent<void>): void => {
+    event.stopPropagation();
     this.calciteInputTimePickerOpen.emit();
-  }
 
-  onBeforeClose(): void {
+    activateFocusTrap(this, {
+      onActivate: () => {
+        if (this.focusOnOpen) {
+          this.calciteTimePickerEl.setFocus();
+          this.focusOnOpen = false;
+        }
+      },
+    });
+  };
+
+  private popoverBeforeCloseHandler = (event: CustomEvent<void>): void => {
+    event.stopPropagation();
     this.calciteInputTimePickerBeforeClose.emit();
-  }
+  };
 
-  onClose(): void {
+  private popoverCloseHandler = (event: CustomEvent<void>): void => {
+    event.stopPropagation();
     this.calciteInputTimePickerClose.emit();
-  }
+
+    deactivateFocusTrap(this, {
+      onDeactivate: () => {
+        this.calciteInputEl.setFocus();
+        this.focusOnOpen = false;
+      },
+    });
+    this.open = false;
+  };
 
   syncHiddenFormInput(input: HTMLInputElement): void {
     syncHiddenFormInput("time", this, input);
@@ -685,27 +699,6 @@ export class InputTimePicker
     return timeString;
   }
 
-  private popoverCloseHandler = () => {
-    deactivateFocusTrap(this, {
-      onDeactivate: () => {
-        this.calciteInputEl.setFocus();
-        this.focusOnOpen = false;
-      },
-    });
-    this.open = false;
-  };
-
-  private popoverOpenHandler = () => {
-    activateFocusTrap(this, {
-      onActivate: () => {
-        if (this.focusOnOpen) {
-          this.calciteTimePickerEl.setFocus();
-          this.focusOnOpen = false;
-        }
-      },
-    });
-  };
-
   keyDownHandler = (event: KeyboardEvent): void => {
     const { defaultPrevented, key } = event;
 
@@ -867,9 +860,8 @@ export class InputTimePicker
     this.popoverEl = el;
   };
 
-  private setInputAndTransitionEl = (el: HTMLCalciteInputElement): void => {
+  private setInputEl = (el: HTMLCalciteInputElement): void => {
     this.calciteInputEl = el;
-    this.transitionEl = el;
   };
 
   private setCalciteTimePickerEl = (el: HTMLCalciteTimePickerElement): void => {
@@ -978,9 +970,6 @@ export class InputTimePicker
   async componentWillLoad(): Promise<void> {
     setUpLoadableComponent(this);
     await Promise.all([setUpMessages(this), this.loadDateTimeLocaleData()]);
-    if (this.open) {
-      onToggleOpenCloseComponent(this);
-    }
   }
 
   componentDidLoad() {
@@ -1034,7 +1023,7 @@ export class InputTimePicker
               onCalciteInputTextInput={this.calciteInternalInputInputHandler}
               onCalciteInternalInputTextFocus={this.calciteInternalInputFocusHandler}
               readOnly={readOnly}
-              ref={this.setInputAndTransitionEl}
+              ref={this.setInputEl}
               role="combobox"
               scale={this.scale}
               status={this.status}
@@ -1046,9 +1035,10 @@ export class InputTimePicker
             id={dialogId}
             label={messages.chooseTime}
             lang={this.effectiveLocale}
+            onCalcitePopoverBeforeClose={this.popoverBeforeCloseHandler}
+            onCalcitePopoverBeforeOpen={this.popoverBeforeOpenHandler}
             onCalcitePopoverClose={this.popoverCloseHandler}
             onCalcitePopoverOpen={this.popoverOpenHandler}
-            open={this.open}
             overlayPositioning={this.overlayPositioning}
             placement={this.placement}
             ref={this.setCalcitePopoverEl}

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

@@ -75,13 +75,14 @@
     pointer-events-none
     my-0
     box-border
-    hidden
+    flex
     w-full
-    opacity-0
-    transition-default;
+    opacity-0;
   max-block-size: 0;
+  transition-property: opacity, max-block-size;
+  transition-duration: var(--calcite-animation-timing);
   text-align: start;
-  border-inline-start: 0 solid;
+  border-inline-start: var(--calcite-border-width-md) solid;
   box-shadow: 0 0 0 0 transparent;
 }
 
@@ -100,10 +101,8 @@
 :host([open]) .container {
   @apply shadow-1
     pointer-events-auto
-    flex
     max-h-full
     items-center
-    border-2
     opacity-100;
 }
 

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

@@ -1,6 +1,6 @@
 import { newE2EPage } from "@stencil/core/testing";
 import { html } from "../../../support/formatting";
-import { focusable, renders, hidden, defaults, accessible } from "../../tests/commonTests";
+import { accessible, defaults, focusable, hidden, openClose, renders } from "../../tests/commonTests";
 import { GlobalTestProps, newProgrammaticE2EPage, skipAnimations } from "../../tests/utils";
 import { CSS } from "./resources";
 
@@ -79,6 +79,18 @@ describe("calcite-sheet properties", () => {
     });
   });
 
+  describe("openClose", () => {
+    describe("default", () => {
+      openClose("calcite-sheet");
+    });
+
+    describe("initially open", () => {
+      openClose("calcite-sheet", {
+        initialToggleValue: true,
+      });
+    });
+  });
+
   it("sets custom width correctly", async () => {
     const page = await newE2EPage();
     // set large page to ensure test sheet isn't becoming fullscreen

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

@@ -178,13 +178,14 @@ export class Sheet implements OpenCloseComponent, FocusTrapComponent, LoadableCo
             [CSS.containerEmbedded]: this.embedded,
             [CSS_UTILITY.rtl]: dir === "rtl",
           }}
+          ref={this.setTransitionEl}
         >
           <calcite-scrim class={CSS.scrim} onClick={this.handleOutsideClose} />
           <div
             class={{
               [CSS.content]: true,
             }}
-            ref={this.setTransitionEl}
+            ref={this.setContentId}
           >
             <slot />
           </div>
@@ -297,9 +298,12 @@ export class Sheet implements OpenCloseComponent, FocusTrapComponent, LoadableCo
     deactivateFocusTrap(this);
   }
 
+  private setContentId = (el: HTMLDivElement): void => {
+    this.contentId = ensureId(el);
+  };
+
   private setTransitionEl = (el: HTMLDivElement): void => {
     this.transitionEl = el;
-    this.contentId = ensureId(el);
   };
 
   private openEnd = (): void => {

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

@@ -167,7 +167,10 @@ describe("calcite-tooltip", () => {
 
   describe("openClose", () => {
     openClose(simpleTooltipHtml);
-    openClose(tooltipDisplayNoneHtml);
+
+    describe("parent has display none", () => {
+      openClose(tooltipDisplayNoneHtml, { willUseFallback: true });
+    });
   });
 
   it("should have zIndex of 901", async () => {