Merge remote-tracking branch 'origin/main' into release-please--branc…

…hes--main * origin/main: chore: release next ci: add repo url to package.json files for provenance (#9449) ci(provenance): add missing options from setup doc (#9433) chore: release hotfix (#9438) fix: defer floating-ui updating until component is connected and open (#9443) fix(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)
Esri · May 29, 2024 · f8c31bf · f8c31bf
2 parents fdc0d30 + cac21a2
commit f8c31bf
Show file tree

Hide file tree

Showing 13 changed files with 208 additions and 121 deletions.
diff --git a/.github/workflows/deploy-latest.yml b/.github/workflows/deploy-latest.yml
@@ -8,7 +8,9 @@ permissions:
   pull-requests: write
 jobs:
   release-please:
-    runs-on: ubuntu-20.04
+    runs-on: ubuntu-latest
+    permissions:
+      id-token: write
     steps:
       - uses: google-github-actions/[email protected]
         id: release

diff --git a/.github/workflows/deploy-next.yml b/.github/workflows/deploy-next.yml
@@ -8,7 +8,9 @@ on:
     branches: [main]
 jobs:
   build:
-    runs-on: ubuntu-20.04
+    runs-on: ubuntu-latest
+    permissions:
+      id-token: write
     steps:
       - uses: actions/checkout@v4
         with:

diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/calcite-components-react/package.json b/packages/calcite-components-react/package.json
@@ -1,13 +1,24 @@
 {
   "name": "@esri/calcite-components-react",
-  "sideEffects": false,
   "version": "2.9.0",
-  "homepage": "https://developers.arcgis.com/calcite-design-system/",
   "description": "A set of React components that wrap calcite components",
+  "homepage": "https://developers.arcgis.com/calcite-design-system/",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/Esri/calcite-design-system.git",
+    "directory": "packages/calcite-components-react"
+  },
   "license": "SEE LICENSE.md",
+  "sideEffects": false,
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "files": [
+    "dist/"
+  ],
   "scripts": {
-    "build": "rimraf dist && npm run compile",
     "prebuild": "npm run patch:jsx-import",
+    "build": "rimraf dist && npm run compile",
     "clean": "rimraf dist node_modules .turbo",
     "compile": "npm run tsc",
     "lint": "concurrently npm:lint:*",
@@ -16,12 +27,6 @@
     "patch:jsx-import": "tsx support/patchJSXImport.ts",
     "tsc": "tsc"
   },
-  "main": "./dist/index.js",
-  "module": "./dist/index.js",
-  "types": "./dist/index.d.ts",
-  "files": [
-    "dist/"
-  ],
   "dependencies": {
     "@esri/calcite-components": "^2.9.0"
   },

diff --git a/packages/calcite-components/package.json b/packages/calcite-components/package.json
@@ -78,7 +78,7 @@
   "devDependencies": {
     "@esri/calcite-design-tokens": "^2.2.1-next.0",
     "@esri/calcite-ui-icons": "3.28.2",
-    "@esri/eslint-plugin-calcite-components": "^1.2.1-next.0",
+    "@esri/eslint-plugin-calcite-components": "^1.2.1-next.1",
     "@stencil-community/eslint-plugin": "0.7.2",
     "@stencil-community/postcss": "2.2.0",
     "@stencil/angular-output-target": "0.8.4",

diff --git a/packages/calcite-components/src/components/combobox/combobox.tsx b/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);
   }
 

diff --git a/packages/calcite-components/src/components/dropdown/dropdown.tsx b/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 {

diff --git a/packages/calcite-components/src/components/input-date-picker/input-date-picker.tsx b/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 {

diff --git a/packages/calcite-components/src/components/popover/popover.tsx b/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 {

diff --git a/packages/calcite-components/src/components/tooltip/tooltip.tsx b/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);