From 4c55427fe174fb3fc5ae539bf84308e8ff7a2bbb Mon Sep 17 00:00:00 2001 From: JC Franco Date: Tue, 28 May 2024 10:10:11 -0700 Subject: [PATCH 1/6] 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) **Related Issue:** #9321 ## Summary This updates the combobox window-click listener to use an internal state property for its text instead of getting the value of the internal input. The `componentOnReady` util helps normalize waiting for a component to be ready in both output targets (based on [Ionic's helper](https://github.com/ionic-team/ionic-framework/blob/5cdfa1aaf47a6160cd1bd2be434dcfa8390b56e1/core/src/utils/helpers.ts#L60-L79)). This is sufficient for most scenarios, but for this particular case, it was running earlier than `connectedCallback` due to the emitted click as the component is appended and initialized, so the component is not yet rendered by the time the util resolves. **Note**: there are no accompanying tests as this is not reproducible in the test environment, which uses the lazy-loaded output. --- .../calcite-components/src/components/combobox/combobox.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/calcite-components/src/components/combobox/combobox.tsx b/packages/calcite-components/src/components/combobox/combobox.tsx index 32c09d60ceb..9941f87aa9b 100644 --- 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); From 4b30d7118c2452152d646017a1b1af4cdc5f7259 Mon Sep 17 00:00:00 2001 From: JC Franco Date: Tue, 28 May 2024 14:12:21 -0700 Subject: [PATCH 2/6] fix: defer floating-ui updating until component is connected and open (#9443) **Related Issue:** #9397 ## Summary This updates the `FloatingUIComponent` implementation to defer calling `autoUpdate` until the component is open and connected (following `floating-ui` [usage notes](https://floating-ui.com/docs/autoupdate#usage)). --- .../src/components/combobox/combobox.tsx | 6 +- .../src/components/dropdown/dropdown.tsx | 6 +- .../input-date-picker/input-date-picker.tsx | 8 +- .../src/components/popover/popover.tsx | 17 +-- .../src/components/tooltip/tooltip.tsx | 18 +-- .../src/utils/floating-ui.spec.ts | 127 +++++++++++------- .../src/utils/floating-ui.ts | 93 ++++++++++--- 7 files changed, 174 insertions(+), 101 deletions(-) diff --git a/packages/calcite-components/src/components/combobox/combobox.tsx b/packages/calcite-components/src/components/combobox/combobox.tsx index 9941f87aa9b..2aa5bc9bb56 100644 --- a/packages/calcite-components/src/components/combobox/combobox.tsx +++ b/packages/calcite-components/src/components/combobox/combobox.tsx @@ -452,7 +452,7 @@ export class Combobox // // -------------------------------------------------------------------------- - connectedCallback(): void { + async connectedCallback(): Promise { 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 { @@ -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 index 5287df4b7b4..ad0a054680e 100644 --- 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 { 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 index 7d8088c69eb..156ac9dd9c5 100644 --- 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 { 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 { @@ -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 index e0dd92c3c1c..c34fba1339a 100644 --- 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 { 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 { @@ -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 index 13c843321a7..ebb760f83d2 100644 --- 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 { + await componentOnReady(this.el); + this.setUpReferenceElement(true); + if (this.open) { onToggleOpenCloseComponent(this); } - connectFloatingUI(this, this.effectiveReferenceElement, this.el); } async componentWillLoad(): Promise { @@ -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); diff --git a/packages/calcite-components/src/utils/floating-ui.spec.ts b/packages/calcite-components/src/utils/floating-ui.spec.ts index dd65a4bf420..6069b8f3350 100644 --- a/packages/calcite-components/src/utils/floating-ui.spec.ts +++ b/packages/calcite-components/src/utils/floating-ui.spec.ts @@ -3,7 +3,7 @@ import * as floatingUI from "./floating-ui"; import { FloatingUIComponent } from "./floating-ui"; const { - cleanupMap, + autoUpdatingComponentMap, connectFloatingUI, defaultOffsetDistance, disconnectFloatingUI, @@ -36,28 +36,40 @@ it("should set calcite placement to FloatingUI placement", () => { expect(getEffectivePlacement(el, "trailing-end")).toBe("left-end"); }); +function createFakeFloatingUiComponent(referenceEl: HTMLElement, floatingEl: HTMLElement): FloatingUIComponent { + const fake: FloatingUIComponent = { + open: false, + reposition: async () => { + await reposition(fake, { + floatingEl, + referenceEl, + overlayPositioning: fake.overlayPositioning, + placement: "top", + flipPlacements: [], + type: "menu", + }); + }, + overlayPositioning: "absolute", + placement: "auto", + }; + + return fake; +} + describe("repositioning", () => { let fakeFloatingUiComponent: FloatingUIComponent; let floatingEl: HTMLDivElement; let referenceEl: HTMLButtonElement; let positionOptions: Parameters[1]; - function createFakeFloatingUiComponent(): FloatingUIComponent { - return { - open: false, - reposition: async () => { - /* noop */ - }, - overlayPositioning: "absolute", - placement: "auto", - }; - } - beforeEach(() => { - fakeFloatingUiComponent = createFakeFloatingUiComponent(); - - floatingEl = document.createElement("div"); referenceEl = document.createElement("button"); + floatingEl = document.createElement("div"); + + document.body.append(floatingEl); + document.body.append(referenceEl); + + fakeFloatingUiComponent = createFakeFloatingUiComponent(referenceEl, floatingEl); positionOptions = { floatingEl, @@ -66,6 +78,8 @@ describe("repositioning", () => { placement: fakeFloatingUiComponent.placement, type: "popover", }; + + connectFloatingUI(fakeFloatingUiComponent, referenceEl, floatingEl); }); function assertPreOpenPositioning(floatingEl: HTMLElement): void { @@ -112,55 +126,70 @@ describe("repositioning", () => { assertOpenPositioning(floatingEl); }); - describe("connect/disconnect helpers", () => { - it("has connectedCallback and disconnectedCallback helpers", () => { - expect(cleanupMap.has(fakeFloatingUiComponent)).toBe(false); - expect(floatingEl.style.position).toBe(""); - expect(floatingEl.style.visibility).toBe(""); - expect(floatingEl.style.pointerEvents).toBe(""); + it("debounces positioning per instance", async () => { + const positionSpy = jest.spyOn(floatingUI, "positionFloatingUI"); + fakeFloatingUiComponent.open = true; - connectFloatingUI(fakeFloatingUiComponent, referenceEl, floatingEl); + const anotherFakeFloatingUiComponent = createFakeFloatingUiComponent(referenceEl, floatingEl); + anotherFakeFloatingUiComponent.open = true; - expect(cleanupMap.has(fakeFloatingUiComponent)).toBe(true); - expect(floatingEl.style.position).toBe("absolute"); - expect(floatingEl.style.visibility).toBe("hidden"); - expect(floatingEl.style.pointerEvents).toBe("none"); + floatingUI.reposition(fakeFloatingUiComponent, positionOptions, true); + expect(positionSpy).toHaveBeenCalledTimes(1); - disconnectFloatingUI(fakeFloatingUiComponent, referenceEl, floatingEl); + floatingUI.reposition(anotherFakeFloatingUiComponent, positionOptions, true); + expect(positionSpy).toHaveBeenCalledTimes(2); - expect(cleanupMap.has(fakeFloatingUiComponent)).toBe(false); - expect(floatingEl.style.position).toBe("absolute"); + await new Promise((resolve) => setTimeout(resolve, repositionDebounceTimeout)); + expect(positionSpy).toHaveBeenCalledTimes(2); + }); +}); - fakeFloatingUiComponent.overlayPositioning = "fixed"; - connectFloatingUI(fakeFloatingUiComponent, referenceEl, floatingEl); +describe("connect/disconnect helpers", () => { + let fakeFloatingUiComponent: FloatingUIComponent; + let floatingEl: HTMLDivElement; + let referenceEl: HTMLButtonElement; - expect(cleanupMap.has(fakeFloatingUiComponent)).toBe(true); - expect(floatingEl.style.position).toBe("fixed"); - expect(floatingEl.style.visibility).toBe("hidden"); - expect(floatingEl.style.pointerEvents).toBe("none"); + beforeEach(() => { + referenceEl = document.createElement("button"); + floatingEl = document.createElement("div"); - disconnectFloatingUI(fakeFloatingUiComponent, referenceEl, floatingEl); + document.body.append(floatingEl); + document.body.append(referenceEl); - expect(cleanupMap.has(fakeFloatingUiComponent)).toBe(false); - expect(floatingEl.style.position).toBe("fixed"); - }); + fakeFloatingUiComponent = createFakeFloatingUiComponent(referenceEl, floatingEl); }); - it("debounces positioning per instance", async () => { - const positionSpy = jest.spyOn(floatingUI, "positionFloatingUI"); + it("has connectedCallback and disconnectedCallback helpers", async () => { fakeFloatingUiComponent.open = true; + expect(autoUpdatingComponentMap.has(fakeFloatingUiComponent)).toBe(false); + expect(floatingEl.style.position).toBe(""); + expect(floatingEl.style.visibility).toBe(""); + expect(floatingEl.style.pointerEvents).toBe(""); - const anotherFakeFloatingUiComponent = createFakeFloatingUiComponent(); - anotherFakeFloatingUiComponent.open = true; + await connectFloatingUI(fakeFloatingUiComponent, referenceEl, floatingEl); - floatingUI.reposition(fakeFloatingUiComponent, positionOptions, true); - expect(positionSpy).toHaveBeenCalledTimes(1); + expect(autoUpdatingComponentMap.has(fakeFloatingUiComponent)).toBe(true); + expect(floatingEl.style.position).toBe("absolute"); + expect(floatingEl.style.visibility).toBe("hidden"); + expect(floatingEl.style.pointerEvents).toBe("none"); - floatingUI.reposition(anotherFakeFloatingUiComponent, positionOptions, true); - expect(positionSpy).toHaveBeenCalledTimes(2); + disconnectFloatingUI(fakeFloatingUiComponent, referenceEl, floatingEl); - await new Promise((resolve) => setTimeout(resolve, repositionDebounceTimeout)); - expect(positionSpy).toHaveBeenCalledTimes(2); + expect(autoUpdatingComponentMap.has(fakeFloatingUiComponent)).toBe(false); + expect(floatingEl.style.position).toBe("absolute"); + + fakeFloatingUiComponent.overlayPositioning = "fixed"; + await connectFloatingUI(fakeFloatingUiComponent, referenceEl, floatingEl); + + expect(autoUpdatingComponentMap.has(fakeFloatingUiComponent)).toBe(true); + expect(floatingEl.style.position).toBe("fixed"); + expect(floatingEl.style.visibility).toBe("hidden"); + expect(floatingEl.style.pointerEvents).toBe("none"); + + disconnectFloatingUI(fakeFloatingUiComponent, referenceEl, floatingEl); + + expect(autoUpdatingComponentMap.has(fakeFloatingUiComponent)).toBe(false); + expect(floatingEl.style.position).toBe("fixed"); }); }); diff --git a/packages/calcite-components/src/utils/floating-ui.ts b/packages/calcite-components/src/utils/floating-ui.ts index 2687c46e999..9d921f4f100 100644 --- a/packages/calcite-components/src/utils/floating-ui.ts +++ b/packages/calcite-components/src/utils/floating-ui.ts @@ -427,13 +427,19 @@ export async function reposition( options: Parameters[1], delayed = false, ): Promise { - if (!component.open) { + if (!component.open || !options.floatingEl || !options.referenceEl) { return; } + const trackedState = autoUpdatingComponentMap.get(component); + + if (!trackedState) { + return runAutoUpdate(component, options.referenceEl, options.floatingEl); + } + const positionFunction = delayed ? getDebouncedReposition(component) : positionFloatingUI; - return positionFunction(component, options); + await positionFunction(component, options); } function getDebouncedReposition(component: FloatingUIComponent): DebouncedFunc { @@ -460,15 +466,67 @@ const ARROW_CSS_TRANSFORM = { right: "rotate(90deg)", }; +type PendingFloatingUIState = { + state: "pending"; +}; + +type ActiveFloatingUIState = { + state: "active"; + cleanUp: () => void; +}; + +type TrackedFloatingUIState = PendingFloatingUIState | ActiveFloatingUIState; + /** * Exported for testing purposes only * * @internal */ -export const cleanupMap = new WeakMap void>(); +export const autoUpdatingComponentMap = new WeakMap(); const componentToDebouncedRepositionMap = new WeakMap>(); +async function runAutoUpdate( + component: FloatingUIComponent, + referenceEl: ReferenceElement, + floatingEl: HTMLElement, +): Promise { + if (!floatingEl.isConnected) { + return; + } + + const effectiveAutoUpdate = Build.isBrowser + ? autoUpdate + : (_refEl: HTMLElement, _floatingEl: HTMLElement, updateCallback: () => void): (() => void) => { + updateCallback(); + return () => { + /* noop */ + }; + }; + + // we set initial state here to make it available for `reposition` calls + autoUpdatingComponentMap.set(component, { state: "pending" }); + + let repositionPromise: Promise; + + const cleanUp = effectiveAutoUpdate( + referenceEl, + floatingEl, + // callback is invoked immediately + () => { + const promise = component.reposition(); + + if (!repositionPromise) { + repositionPromise = promise; + } + }, + ); + + autoUpdatingComponentMap.set(component, { state: "active", cleanUp }); + + return repositionPromise; +} + /** * Helper to set up floating element interactions on connectedCallback. * @@ -476,11 +534,11 @@ const componentToDebouncedRepositionMap = new WeakMap { if (!floatingEl || !referenceEl) { return; } @@ -495,19 +553,11 @@ export function connectFloatingUI( position: component.overlayPositioning, }); - const runAutoUpdate = Build.isBrowser - ? autoUpdate - : (_refEl: HTMLElement, _floatingEl: HTMLElement, updateCallback: () => void): (() => void) => { - updateCallback(); - return () => { - /* noop */ - }; - }; + if (!component.open) { + return; + } - cleanupMap.set( - component, - runAutoUpdate(referenceEl, floatingEl, () => component.reposition()), - ); + return runAutoUpdate(component, referenceEl, floatingEl); } /** @@ -526,8 +576,13 @@ export function disconnectFloatingUI( return; } - cleanupMap.get(component)?.(); - cleanupMap.delete(component); + const trackedState = autoUpdatingComponentMap.get(component); + + if (trackedState?.state === "active") { + trackedState.cleanUp(); + } + + autoUpdatingComponentMap.delete(component); componentToDebouncedRepositionMap.get(component)?.cancel(); componentToDebouncedRepositionMap.delete(component); From a13b0e60af084c3271d30b1ced96e271a5e6647e Mon Sep 17 00:00:00 2001 From: Calcite Admin Date: Tue, 28 May 2024 18:54:38 -0700 Subject: [PATCH 3/6] chore: release hotfix (#9438) :robot: I have created a release *beep* *boop* ---
@esri/calcite-components: 2.8.4 [2.8.4](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components@2.8.3...@esri/calcite-components@2.8.4) (2024-05-28) * **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))
@esri/calcite-components-angular: 2.8.4 [2.8.4](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components-angular@2.8.3...@esri/calcite-components-angular@2.8.4) (2024-05-28) * **@esri/calcite-components-angular:** Synchronize components versions * The following workspace dependencies were updated * dependencies * @esri/calcite-components bumped from ^2.8.3 to ^2.8.4
@esri/calcite-components-react: 2.8.4 [2.8.4](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components-react@2.8.3...@esri/calcite-components-react@2.8.4) (2024-05-28) * **@esri/calcite-components-react:** Synchronize components versions * The following workspace dependencies were updated * dependencies * @esri/calcite-components bumped from ^2.8.3 to ^2.8.4
--- This PR was generated with [Release Please](https://github.com/googleapis/release-please). See [documentation](https://github.com/googleapis/release-please#release-please). --- .release-please-manifest.json | 6 +++--- .../projects/component-library/CHANGELOG.md | 12 ++++++++++++ packages/calcite-components-react/CHANGELOG.md | 12 ++++++++++++ packages/calcite-components/CHANGELOG.md | 7 +++++++ packages/calcite-components/readme.md | 4 ++-- 5 files changed, 36 insertions(+), 5 deletions(-) diff --git a/.release-please-manifest.json b/.release-please-manifest.json index 8235abf0ee3..d109e7a8a17 100644 --- a/.release-please-manifest.json +++ b/.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" } diff --git a/packages/calcite-components-angular/projects/component-library/CHANGELOG.md b/packages/calcite-components-angular/projects/component-library/CHANGELOG.md index 4043f51bcda..e03e678cf8b 100644 --- a/packages/calcite-components-angular/projects/component-library/CHANGELOG.md +++ b/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/calcite-components-angular@2.8.3...@esri/calcite-components-angular@2.8.4) (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/calcite-components-angular@2.9.0-next.22...@esri/calcite-components-angular@2.9.0-next.23) (2024-05-25) **Note:** Version bump only for package @esri/calcite-components-angular diff --git a/packages/calcite-components-react/CHANGELOG.md b/packages/calcite-components-react/CHANGELOG.md index 76b6fea623b..acc56e0b7f0 100644 --- a/packages/calcite-components-react/CHANGELOG.md +++ b/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/calcite-components-react@2.8.3...@esri/calcite-components-react@2.8.4) (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/calcite-components-react@2.9.0-next.22...@esri/calcite-components-react@2.9.0-next.23) (2024-05-25) **Note:** Version bump only for package @esri/calcite-components-react diff --git a/packages/calcite-components/CHANGELOG.md b/packages/calcite-components/CHANGELOG.md index 57b7fcdc338..ee343ced74b 100644 --- a/packages/calcite-components/CHANGELOG.md +++ b/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/calcite-components@2.8.3...@esri/calcite-components@2.8.4) (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/calcite-components@2.9.0-next.22...@esri/calcite-components@2.9.0-next.23) (2024-05-25) ### Bug Fixes diff --git a/packages/calcite-components/readme.md b/packages/calcite-components/readme.md index 3a39b2ba984..fb0ebf93aab 100644 --- a/packages/calcite-components/readme.md +++ b/packages/calcite-components/readme.md @@ -17,12 +17,12 @@ The most common approach for loading Calcite Components is to use the version ho ```html ``` From b390cd439f557b32f600e98f486d65eef6221a4b Mon Sep 17 00:00:00 2001 From: Ben Elan Date: Tue, 28 May 2024 20:39:02 -0700 Subject: [PATCH 4/6] ci(provenance): add missing options from setup doc (#9433) **Related Issue:** #9429 ## Summary Update the deployment GitHub Actions according to steps in the [npm provenance doc](https://docs.npmjs.com/generating-provenance-statements#publishing-packages-with-provenance-via-github-actions), which I missed because I was looking at the 3rd party section below it. The [GitHub provenance doc](https://docs.github.com/en/actions/publishing-packages/publishing-nodejs-packages#publishing-packages-to-the-npm-registry) doesn't mention permissions, so it might not be required. We had originally hardcoded an older version of Ubuntu in #5942 due to errors, but it was resolved in Stencil v4. --- .github/workflows/deploy-latest.yml | 4 +++- .github/workflows/deploy-next.yml | 4 +++- 2 files changed, 6 insertions(+), 2 deletions(-) diff --git a/.github/workflows/deploy-latest.yml b/.github/workflows/deploy-latest.yml index 5a5c6f504e2..4bf8d49bb64 100644 --- 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/release-please-action@v3.7.13 id: release diff --git a/.github/workflows/deploy-next.yml b/.github/workflows/deploy-next.yml index 906ea45c20e..7213f6a42a9 100644 --- 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: From 892f263ab1581cc2fd5d39622555c7e8b777ba2f Mon Sep 17 00:00:00 2001 From: Ben Elan Date: Tue, 28 May 2024 21:35:00 -0700 Subject: [PATCH 5/6] ci: add repo url to package.json files for provenance (#9449) ## Summary - Add repository URL to package.json files that were missing the field, which is [required for provenance](https://github.com/Esri/calcite-design-system/actions/runs/9279905717/job/25533608990#step:4:16776). - Sort the package.json files with `npx sort-package-json`. This is the last missing configuration for provenance; Calcite components and the angular wrapper already published successfully: https://www.npmjs.com/package/@esri/calcite-components/v/2.9.0-next.24#provenance --- .../calcite-components-react/package.json | 23 +++++++++++-------- .../package.json | 13 +++++++---- 2 files changed, 23 insertions(+), 13 deletions(-) diff --git a/packages/calcite-components-react/package.json b/packages/calcite-components-react/package.json index d9260dd2e8e..4d2a5aa285e 100644 --- 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-next.23", - "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-next.23" }, diff --git a/packages/eslint-plugin-calcite-components/package.json b/packages/eslint-plugin-calcite-components/package.json index 6700f3de1e2..89e0e4bbd74 100644 --- a/packages/eslint-plugin-calcite-components/package.json +++ b/packages/eslint-plugin-calcite-components/package.json @@ -2,6 +2,12 @@ "name": "@esri/eslint-plugin-calcite-components", "version": "1.2.1-next.0", "description": "ESLint rules for @esri/calcite-components", + "repository": { + "type": "git", + "url": "git+https://github.com/Esri/calcite-design-system.git", + "directory": "packages/eslint-plugin-calcite-components" + }, + "license": "SEE LICENSE.md", "main": "dist/index.js", "files": [ "dist/index.js" @@ -16,15 +22,14 @@ "dependencies": { "stencil-eslint-core": "0.4.1" }, + "devDependencies": { + "ts-node": "10.9.2" + }, "peerDependencies": { "eslint": ">=8.0.0" }, - "license": "SEE LICENSE.md", "packageManager": "npm@8.19.4", "volta": { "extends": "../../package.json" - }, - "devDependencies": { - "ts-node": "10.9.2" } } From cac21a21ec620b6c42d8169638170d0b97fa7cda Mon Sep 17 00:00:00 2001 From: "github-actions[bot]" Date: Wed, 29 May 2024 04:36:31 +0000 Subject: [PATCH 6/6] chore: release next --- package-lock.json | 14 +++++++------- .../projects/component-library/CHANGELOG.md | 4 ++++ .../projects/component-library/package.json | 4 ++-- packages/calcite-components-react/CHANGELOG.md | 4 ++++ packages/calcite-components-react/package.json | 4 ++-- packages/calcite-components/CHANGELOG.md | 7 +++++++ packages/calcite-components/package.json | 4 ++-- .../eslint-plugin-calcite-components/CHANGELOG.md | 4 ++++ .../eslint-plugin-calcite-components/package.json | 2 +- 9 files changed, 33 insertions(+), 14 deletions(-) diff --git a/package-lock.json b/package-lock.json index 7925843c9d6..0c6f5057f95 100644 --- a/package-lock.json +++ b/package-lock.json @@ -36292,7 +36292,7 @@ }, "packages/calcite-components": { "name": "@esri/calcite-components", - "version": "2.9.0-next.23", + "version": "2.9.0-next.24", "license": "SEE LICENSE.md", "dependencies": { "@floating-ui/dom": "1.6.5", @@ -36310,7 +36310,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", @@ -37543,10 +37543,10 @@ }, "packages/calcite-components-angular/projects/component-library": { "name": "@esri/calcite-components-angular", - "version": "2.9.0-next.23", + "version": "2.9.0-next.24", "license": "SEE LICENSE.md", "dependencies": { - "@esri/calcite-components": "^2.9.0-next.23", + "@esri/calcite-components": "^2.9.0-next.24", "tslib": "2.6.2" }, "peerDependencies": { @@ -37556,10 +37556,10 @@ }, "packages/calcite-components-react": { "name": "@esri/calcite-components-react", - "version": "2.9.0-next.23", + "version": "2.9.0-next.24", "license": "SEE LICENSE.md", "dependencies": { - "@esri/calcite-components": "^2.9.0-next.23" + "@esri/calcite-components": "^2.9.0-next.24" }, "peerDependencies": { "react": ">=16.7", @@ -37893,7 +37893,7 @@ }, "packages/eslint-plugin-calcite-components": { "name": "@esri/eslint-plugin-calcite-components", - "version": "1.2.1-next.0", + "version": "1.2.1-next.1", "license": "SEE LICENSE.md", "dependencies": { "stencil-eslint-core": "0.4.1" diff --git a/packages/calcite-components-angular/projects/component-library/CHANGELOG.md b/packages/calcite-components-angular/projects/component-library/CHANGELOG.md index e03e678cf8b..516586ad1ac 100644 --- a/packages/calcite-components-angular/projects/component-library/CHANGELOG.md +++ b/packages/calcite-components-angular/projects/component-library/CHANGELOG.md @@ -3,6 +3,10 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +## [2.9.0-next.24](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components-angular@2.9.0-next.23...@esri/calcite-components-angular@2.9.0-next.24) (2024-05-29) + +**Note:** Version bump only for package @esri/calcite-components-angular + ## [2.8.4](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components-angular@2.8.3...@esri/calcite-components-angular@2.8.4) (2024-05-28) ### Miscellaneous Chores diff --git a/packages/calcite-components-angular/projects/component-library/package.json b/packages/calcite-components-angular/projects/component-library/package.json index de7a27e9746..d58f349c2f2 100644 --- a/packages/calcite-components-angular/projects/component-library/package.json +++ b/packages/calcite-components-angular/projects/component-library/package.json @@ -1,6 +1,6 @@ { "name": "@esri/calcite-components-angular", - "version": "2.9.0-next.23", + "version": "2.9.0-next.24", "description": "A set of Angular components that wrap Esri's Calcite Components.", "homepage": "https://developers.arcgis.com/calcite-design-system/", "bugs": { @@ -20,7 +20,7 @@ "dist" ], "dependencies": { - "@esri/calcite-components": "^2.9.0-next.23", + "@esri/calcite-components": "^2.9.0-next.24", "tslib": "2.6.2" }, "peerDependencies": { diff --git a/packages/calcite-components-react/CHANGELOG.md b/packages/calcite-components-react/CHANGELOG.md index acc56e0b7f0..118633b1e18 100644 --- a/packages/calcite-components-react/CHANGELOG.md +++ b/packages/calcite-components-react/CHANGELOG.md @@ -3,6 +3,10 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +## [2.9.0-next.24](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components-react@2.9.0-next.23...@esri/calcite-components-react@2.9.0-next.24) (2024-05-29) + +**Note:** Version bump only for package @esri/calcite-components-react + ## [2.8.4](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components-react@2.8.3...@esri/calcite-components-react@2.8.4) (2024-05-28) ### Miscellaneous Chores diff --git a/packages/calcite-components-react/package.json b/packages/calcite-components-react/package.json index 4d2a5aa285e..b83cfcbfaaa 100644 --- a/packages/calcite-components-react/package.json +++ b/packages/calcite-components-react/package.json @@ -1,6 +1,6 @@ { "name": "@esri/calcite-components-react", - "version": "2.9.0-next.23", + "version": "2.9.0-next.24", "description": "A set of React components that wrap calcite components", "homepage": "https://developers.arcgis.com/calcite-design-system/", "repository": { @@ -28,7 +28,7 @@ "tsc": "tsc" }, "dependencies": { - "@esri/calcite-components": "^2.9.0-next.23" + "@esri/calcite-components": "^2.9.0-next.24" }, "peerDependencies": { "react": ">=16.7", diff --git a/packages/calcite-components/CHANGELOG.md b/packages/calcite-components/CHANGELOG.md index ee343ced74b..d1b59ab61dc 100644 --- a/packages/calcite-components/CHANGELOG.md +++ b/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.9.0-next.24](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components@2.9.0-next.23...@esri/calcite-components@2.9.0-next.24) (2024-05-29) + +### 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)) ([4c55427](https://github.com/Esri/calcite-design-system/commit/4c55427fe174fb3fc5ae539bf84308e8ff7a2bbb)), closes [#9321](https://github.com/Esri/calcite-design-system/issues/9321) [/github.com/ionic-team/ionic-framework/blob/5cdfa1aaf47a6160cd1bd2be434dcfa8390b56e1/core/src/utils/helpers.ts#L60-L79](https://github.com/Esri//github.com/ionic-team/ionic-framework/blob/5cdfa1aaf47a6160cd1bd2be434dcfa8390b56e1/core/src/utils/helpers.ts/issues/L60-L79) +- defer floating-ui updating until component is connected and open ([#9443](https://github.com/Esri/calcite-design-system/issues/9443)) ([4b30d71](https://github.com/Esri/calcite-design-system/commit/4b30d7118c2452152d646017a1b1af4cdc5f7259)), closes [#9397](https://github.com/Esri/calcite-design-system/issues/9397) + ## [2.8.4](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components@2.8.3...@esri/calcite-components@2.8.4) (2024-05-28) ### Bug Fixes diff --git a/packages/calcite-components/package.json b/packages/calcite-components/package.json index 3a7fef0d2f8..4d33bbb4ab1 100644 --- a/packages/calcite-components/package.json +++ b/packages/calcite-components/package.json @@ -1,6 +1,6 @@ { "name": "@esri/calcite-components", - "version": "2.9.0-next.23", + "version": "2.9.0-next.24", "homepage": "https://developers.arcgis.com/calcite-design-system/", "description": "Web Components for Esri's Calcite Design System.", "main": "dist/index.cjs.js", @@ -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/eslint-plugin-calcite-components/CHANGELOG.md b/packages/eslint-plugin-calcite-components/CHANGELOG.md index 683724c84b1..72a0c90a7ce 100644 --- a/packages/eslint-plugin-calcite-components/CHANGELOG.md +++ b/packages/eslint-plugin-calcite-components/CHANGELOG.md @@ -3,6 +3,10 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +## [1.2.1-next.1](https://github.com/Esri/calcite-design-system/compare/@esri/eslint-plugin-calcite-components@1.2.1-next.0...@esri/eslint-plugin-calcite-components@1.2.1-next.1) (2024-05-29) + +**Note:** Version bump only for package @esri/eslint-plugin-calcite-components + ## [1.2.1-next.0](https://github.com/Esri/calcite-design-system/compare/@esri/eslint-plugin-calcite-components@1.2.0...@esri/eslint-plugin-calcite-components@1.2.1-next.0) (2024-05-01) **Note:** Version bump only for package @esri/eslint-plugin-calcite-components diff --git a/packages/eslint-plugin-calcite-components/package.json b/packages/eslint-plugin-calcite-components/package.json index 89e0e4bbd74..a60e50f40b9 100644 --- a/packages/eslint-plugin-calcite-components/package.json +++ b/packages/eslint-plugin-calcite-components/package.json @@ -1,6 +1,6 @@ { "name": "@esri/eslint-plugin-calcite-components", - "version": "1.2.1-next.0", + "version": "1.2.1-next.1", "description": "ESLint rules for @esri/calcite-components", "repository": { "type": "git",