refactor: add useOpenClose controller

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

@@ -219,24 +219,21 @@ export class Alert extends LitElement implements OpenCloseComponent, LoadableCom
 
   async load(): Promise<void> {
     setUpLoadableComponent(this);
-    if (this.open) {
-      onToggleOpenCloseComponent(this);
-    }
   }
 
   override willUpdate(changes: PropertyValues<this>): void {
     /* TODO: [MIGRATION] First time Lit calls willUpdate(), changes will include not just properties provided by the user, but also any default values your component set.
     To account for this semantics change, the checks for (this.hasUpdated || value != defaultValue) was added in this method
     Please refactor your code to reduce the need for this check.
     Docs: https://qawebgis.esri.com/arcgis-components/?path=/docs/lumina-transition-from-stencil--docs#watching-for-property-changes */
-    if (changes.has("active") && (this.hasUpdated || this.active !== false)) {
-      this.handleActiveChange();
-    }
-
     if (changes.has("open") && (this.hasUpdated || this.open !== false)) {
       this.openHandler();
     }
 
+    if (changes.has("active") && (this.hasUpdated || this.active !== false)) {
+      this.handleActiveChange();
+    }
+
     if (
       changes.has("autoCloseDuration") &&
       (this.hasUpdated || this.autoCloseDuration !== "medium")
@@ -272,6 +269,7 @@ export class Alert extends LitElement implements OpenCloseComponent, LoadableCom
   // #region Private Methods
 
   private handleActiveChange(): void {
+    onToggleOpenCloseComponent(this);
     this.clearAutoCloseTimeout();
     if (this.active && this.autoClose && !this.autoCloseTimeoutId) {
       this.initialOpenTime = Date.now();
@@ -283,7 +281,6 @@ export class Alert extends LitElement implements OpenCloseComponent, LoadableCom
   }
 
   private openHandler(): void {
-    onToggleOpenCloseComponent(this);
     if (this.open) {
       manager.registerElement(this.el);
     } else {

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

@@ -421,24 +421,13 @@ export class Autocomplete
     connectLabel(this);
     connectForm(this);
     this.defaultInputValue = this.inputValue || "";
-
     this.getAllItemsDebounced();
-
-    if (this.open) {
-      this.openHandler();
-      onToggleOpenCloseComponent(this);
-    }
-
     connectFloatingUI(this);
   }
 
   async load(): Promise<void> {
     setUpLoadableComponent(this);
     this.getAllItemsDebounced();
-
-    if (this.open) {
-      onToggleOpenCloseComponent(this);
-    }
   }
 
   override willUpdate(changes: PropertyValues<this>): void {

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

@@ -195,10 +195,6 @@ export class Block
   load(): void {
     setUpLoadableComponent(this);
 
-    if (this.open) {
-      onToggleOpenCloseComponent(this);
-    }
-
     if (!this.heading && !this.label) {
       logger.warn(
         `${this.el.tagName} is missing both heading & label. Please provide a heading or label for the component to be accessible.`,

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

@@ -556,12 +556,6 @@ export class Combobox
     this.mutationObserver?.observe(this.el, { childList: true, subtree: true });
 
     this.setFilteredPlacements();
-
-    if (this.open) {
-      this.openHandler();
-      onToggleOpenCloseComponent(this);
-    }
-
     connectFloatingUI(this);
   }
 

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

@@ -236,10 +236,6 @@ export class Dropdown
   override connectedCallback(): void {
     this.mutationObserver?.observe(this.el, { childList: true, subtree: true });
     this.setFilteredPlacements();
-    if (this.open) {
-      this.openHandler();
-      onToggleOpenCloseComponent(this);
-    }
     this.updateItems();
     connectFloatingUI(this);
   }

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

@@ -435,10 +435,6 @@ export class InputDatePicker
       useGrouping: false,
     };
 
-    if (this.open) {
-      onToggleOpenCloseComponent(this);
-    }
-
     connectFloatingUI(this);
   }
 

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

@@ -152,9 +152,6 @@ export class Notice extends LitElement implements LoadableComponent, OpenCloseCo
   async load(): Promise<void> {
     setUpLoadableComponent(this);
     this.requestedIcon = setRequestedIcon(KindIcons, this.icon, this.kind);
-    if (this.open) {
-      onToggleOpenCloseComponent(this);
-    }
   }
 
   override willUpdate(changes: PropertyValues<this>): void {

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

@@ -341,9 +341,6 @@ export class Popover
       this.setUpReferenceElement();
     }
 
-    if (this.open) {
-      onToggleOpenCloseComponent(this);
-    }
     this.hasLoaded = true;
   }
 

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

@@ -174,15 +174,6 @@ export class Tooltip extends LitElement implements FloatingUIComponent, OpenClos
 
   override connectedCallback(): void {
     this.setUpReferenceElement(true);
-    if (this.open) {
-      onToggleOpenCloseComponent(this);
-    }
-  }
-
-  load(): void {
-    if (this.open) {
-      onToggleOpenCloseComponent(this);
-    }
   }
 
   override willUpdate(changes: PropertyValues<this>): void {

packages/calcite-components/src/controllers/useOpenClose

@@ -0,0 +1,14 @@
+import { makeGenericController } from "@arcgis/components-controllers";
+import { onToggleOpenCloseComponent, OpenCloseComponent } from "../utils/openCloseComponent";
+
+export interface UseOpenClose {
+  afterToggle: () => void;
+}
+
+export const useOpenClose = makeGenericController<UseOpenClose, OpenCloseComponent>((component, controller) => {
+  return {
+    afterToggle: () => {
+      onToggleOpenCloseComponent(component);
+    },
+  };
+});

packages/calcite-components/src/demos/flow.html

@@ -27,6 +27,10 @@
         text-align: right;
         flex: 0 0 15%;
       }
+
+      :root {
+        --calcite-duration-factor: 1;
+      }
     </style>
 
     <script src="./_assets/head.ts"></script>