chore: sync hotfix to main

.release-please-manifest.json

@@ -1,7 +1,7 @@
 {
-  "packages/calcite-components": "2.8.3",
-  "packages/calcite-components-react": "2.8.3",
+  "packages/calcite-components": "2.8.4",
+  "packages/calcite-components-react": "2.8.4",
   "packages/calcite-design-tokens": "2.2.0",
   "packages/eslint-plugin-calcite-components": "1.2.0",
-  "packages/calcite-components-angular/projects/component-library": "2.8.3"
+  "packages/calcite-components-angular/projects/component-library": "2.8.4"
 }

packages/calcite-components-angular/projects/component-library/CHANGELOG.md

@@ -3,6 +3,18 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [2.8.4](https://github.com/Esri/calcite-design-system/compare/@esri/[email protected]...@esri/[email protected]) (2024-05-28)
+
+### Miscellaneous Chores
+
+- **@esri/calcite-components-angular:** Synchronize components versions
+
+### Dependencies
+
+- The following workspace dependencies were updated
+  - dependencies
+    - @esri/calcite-components bumped from ^2.8.3 to ^2.8.4
+
 ## [2.9.0-next.23](https://github.com/Esri/calcite-design-system/compare/@esri/[email protected]...@esri/[email protected]) (2024-05-25)
 
 **Note:** Version bump only for package @esri/calcite-components-angular

packages/calcite-components-react/CHANGELOG.md

@@ -3,6 +3,18 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [2.8.4](https://github.com/Esri/calcite-design-system/compare/@esri/[email protected]...@esri/[email protected]) (2024-05-28)
+
+### Miscellaneous Chores
+
+- **@esri/calcite-components-react:** Synchronize components versions
+
+### Dependencies
+
+- The following workspace dependencies were updated
+  - dependencies
+    - @esri/calcite-components bumped from ^2.8.3 to ^2.8.4
+
 ## [2.9.0-next.23](https://github.com/Esri/calcite-design-system/compare/@esri/[email protected]...@esri/[email protected]) (2024-05-25)
 
 **Note:** Version bump only for package @esri/calcite-components-react

packages/calcite-components/CHANGELOG.md

@@ -3,6 +3,13 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [2.8.4](https://github.com/Esri/calcite-design-system/compare/@esri/[email protected]...@esri/[email protected]) (2024-05-28)
+
+### Bug Fixes
+
+- **combobox:** Fix error that occurs in dist-custom-elements (components) output when a click is emitted when the component is appended to the DOM ([#9423](https://github.com/Esri/calcite-design-system/issues/9423)) ([ab521c9](https://github.com/Esri/calcite-design-system/commit/ab521c94598657faf1b042143bec1a5975bce7fe))
+- Defer floating-ui updating until component is connected and open ([#9443](https://github.com/Esri/calcite-design-system/issues/9443)) ([6e09589](https://github.com/Esri/calcite-design-system/commit/6e095890b284bf091d758ce442653cb7760bc773))
+
 ## [2.9.0-next.23](https://github.com/Esri/calcite-design-system/compare/@esri/[email protected]...@esri/[email protected]) (2024-05-25)
 
 ### Bug Fixes

packages/calcite-components/readme.md

@@ -17,12 +17,12 @@ The most common approach for loading Calcite Components is to use the version ho
 ```html
 <script
   type="module"
-  src="https://cdn.jsdelivr.net/npm/@esri/[email protected].3/dist/calcite/calcite.esm.js"
+  src="https://cdn.jsdelivr.net/npm/@esri/[email protected].4/dist/calcite/calcite.esm.js"
 ></script>
 <link
   rel="stylesheet"
   type="text/css"
-  href="https://cdn.jsdelivr.net/npm/@esri/[email protected].3/dist/calcite/calcite.css"
+  href="https://cdn.jsdelivr.net/npm/@esri/[email protected].4/dist/calcite/calcite.css"
 />
 ```
 

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

@@ -350,7 +350,7 @@ export class Combobox
 
     await componentOnReady(this.el);
 
-    if (!this.allowCustomValues && this.textInput.value) {
+    if (!this.allowCustomValues && this.text) {
       this.clearInputValue();
       this.filterItems("");
       this.updateActiveItemIndex(-1);
@@ -452,7 +452,7 @@ export class Combobox
   //
   // --------------------------------------------------------------------------
 
-  connectedCallback(): void {
+  async connectedCallback(): Promise<void> {
     connectInteractive(this);
     connectLocalized(this);
     connectMessages(this);
@@ -472,7 +472,9 @@ export class Combobox
       onToggleOpenCloseComponent(this);
     }
 
+    await componentOnReady(this.el);
     connectFloatingUI(this, this.referenceEl, this.floatingEl);
+    afterConnectDefaultValueSet(this, this.getValue());
   }
 
   async componentWillLoad(): Promise<void> {
@@ -482,8 +484,6 @@ export class Combobox
   }
 
   componentDidLoad(): void {
-    afterConnectDefaultValueSet(this, this.getValue());
-    connectFloatingUI(this, this.referenceEl, this.floatingEl);
     setComponentLoaded(this);
   }
 

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

@@ -43,6 +43,7 @@ import { createObserver } from "../../utils/observers";
 import { onToggleOpenCloseComponent, OpenCloseComponent } from "../../utils/openCloseComponent";
 import { RequestedItem } from "../dropdown-group/interfaces";
 import { Scale } from "../interfaces";
+import { componentOnReady } from "../../utils/component";
 import { ItemKeyboardEvent } from "./interfaces";
 import { SLOTS } from "./resources";
 
@@ -197,7 +198,7 @@ export class Dropdown
   //
   //--------------------------------------------------------------------------
 
-  connectedCallback(): void {
+  async connectedCallback(): Promise<void> {
     this.mutationObserver?.observe(this.el, { childList: true, subtree: true });
     this.setFilteredPlacements();
     if (this.open) {
@@ -206,6 +207,8 @@ export class Dropdown
     }
     connectInteractive(this);
     this.updateItems();
+
+    await componentOnReady(this.el);
     connectFloatingUI(this, this.referenceEl, this.floatingEl);
   }
 
@@ -215,7 +218,6 @@ export class Dropdown
 
   componentDidLoad(): void {
     setComponentLoaded(this);
-    connectFloatingUI(this, this.referenceEl, this.floatingEl);
   }
 
   componentDidRender(): void {

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

@@ -85,7 +85,7 @@ import {
   FocusTrapComponent,
 } from "../../utils/focusTrapComponent";
 import { guid } from "../../utils/guid";
-import { getIconScale } from "../../utils/component";
+import { componentOnReady, getIconScale } from "../../utils/component";
 import { Status } from "../interfaces";
 import { Validation } from "../functional/Validation";
 import { normalizeToCurrentCentury, isTwoDigitYear } from "./utils";
@@ -461,7 +461,7 @@ export class InputDatePicker
   //
   // --------------------------------------------------------------------------
 
-  connectedCallback(): void {
+  async connectedCallback(): Promise<void> {
     connectInteractive(this);
     connectLocalized(this);
 
@@ -508,7 +508,9 @@ export class InputDatePicker
       onToggleOpenCloseComponent(this);
     }
 
+    await componentOnReady(this.el);
     connectFloatingUI(this, this.referenceEl, this.floatingEl);
+    this.localizeInputValues();
   }
 
   async componentWillLoad(): Promise<void> {
@@ -520,8 +522,6 @@ export class InputDatePicker
 
   componentDidLoad(): void {
     setComponentLoaded(this);
-    this.localizeInputValues();
-    connectFloatingUI(this, this.referenceEl, this.floatingEl);
   }
 
   disconnectedCallback(): void {

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

@@ -55,7 +55,7 @@ import {
 } from "../../utils/loadable";
 import { createObserver } from "../../utils/observers";
 import { FloatingArrow } from "../functional/FloatingArrow";
-import { getIconScale } from "../../utils/component";
+import { componentOnReady, getIconScale } from "../../utils/component";
 import PopoverManager from "./PopoverManager";
 import { PopoverMessages } from "./assets/popover/t9n";
 import { ARIA_CONTROLS, ARIA_EXPANDED, CSS, defaultPopoverPlacement } from "./resources";
@@ -278,8 +278,6 @@ export class Popover
 
   transitionEl: HTMLDivElement;
 
-  hasLoaded = false;
-
   focusTrap: FocusTrap;
 
   // --------------------------------------------------------------------------
@@ -288,16 +286,18 @@ export class Popover
   //
   // --------------------------------------------------------------------------
 
-  connectedCallback(): void {
+  async connectedCallback(): Promise<void> {
     this.setFilteredPlacements();
     connectLocalized(this);
     connectMessages(this);
-    this.setUpReferenceElement(this.hasLoaded);
+
+    await componentOnReady(this.el);
+    this.setUpReferenceElement();
     connectFocusTrap(this);
+
     if (this.open) {
       onToggleOpenCloseComponent(this);
     }
-    connectFloatingUI(this, this.effectiveReferenceElement, this.el);
   }
 
   async componentWillLoad(): Promise<void> {
@@ -307,11 +307,6 @@ export class Popover
 
   componentDidLoad(): void {
     setComponentLoaded(this);
-    if (this.referenceElement && !this.effectiveReferenceElement) {
-      this.setUpReferenceElement();
-    }
-    connectFloatingUI(this, this.effectiveReferenceElement, this.el);
-    this.hasLoaded = true;
   }
 
   disconnectedCallback(): void {

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

@@ -27,6 +27,7 @@ import {
 import { guid } from "../../utils/guid";
 import { onToggleOpenCloseComponent, OpenCloseComponent } from "../../utils/openCloseComponent";
 import { FloatingArrow } from "../functional/FloatingArrow";
+import { componentOnReady } from "../../utils/component";
 import { ARIA_DESCRIBED_BY, CSS } from "./resources";
 import TooltipManager from "./TooltipManager";
 import { getEffectiveReferenceElement } from "./utils";
@@ -146,8 +147,6 @@ export class Tooltip implements FloatingUIComponent, OpenCloseComponent {
 
   guid = `calcite-tooltip-${guid()}`;
 
-  hasLoaded = false;
-
   openTransitionProp = "opacity";
 
   transitionEl: HTMLDivElement;
@@ -158,12 +157,13 @@ export class Tooltip implements FloatingUIComponent, OpenCloseComponent {
   //
   // --------------------------------------------------------------------------
 
-  connectedCallback(): void {
-    this.setUpReferenceElement(this.hasLoaded);
+  async connectedCallback(): Promise<void> {
+    await componentOnReady(this.el);
+    this.setUpReferenceElement(true);
+
     if (this.open) {
       onToggleOpenCloseComponent(this);
     }
-    connectFloatingUI(this, this.effectiveReferenceElement, this.el);
   }
 
   async componentWillLoad(): Promise<void> {
@@ -172,14 +172,6 @@ export class Tooltip implements FloatingUIComponent, OpenCloseComponent {
     }
   }
 
-  componentDidLoad(): void {
-    if (this.referenceElement && !this.effectiveReferenceElement) {
-      this.setUpReferenceElement();
-    }
-    connectFloatingUI(this, this.effectiveReferenceElement, this.el);
-    this.hasLoaded = true;
-  }
-
   disconnectedCallback(): void {
     this.removeReferences();
     disconnectFloatingUI(this, this.effectiveReferenceElement, this.el);