From 271d9855eef4aa94cb7131381c98ab03eea57e4e Mon Sep 17 00:00:00 2001 From: JC Franco Date: Fri, 16 Jun 2023 11:27:08 -0700 Subject: [PATCH 01/32] fix: ensure mouse events are blocked for disabled components in Firefox (#7107) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit **Related Issue:** #7043 ## Summary This applies a workaround for Firefox not firing capture events before non-capture ones to block mouse events when components are disabled. ### Notable changes * added `connectInteractive`/`disconnectInteractive` utils, solely to support Firefox * moved user agent utils to `browser.ts` ### Additional info * [Firefox recently fixed this](https://bugzilla.mozilla.org/show_bug.cgi?id=1731504) to follow the spec and it should ship in version 116. * https://wpt.live/dom/events/EventTarget-dispatchEvent.html is the relevant web platform test. * https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener#useCapture 👇 > Note: For event listeners attached to the event target, the event is in the target phase, rather than the capturing and bubbling phases. Event listeners in the capturing phase are called before event listeners in any non-capturing phases. --- .../src/components/action/action.tsx | 9 +- .../src/components/block/block.tsx | 9 +- .../src/components/button/button.tsx | 9 +- .../src/components/checkbox/checkbox.tsx | 9 +- .../src/components/chip-group/chip-group.tsx | 9 +- .../src/components/chip/chip.tsx | 9 +- .../components/color-picker/color-picker.tsx | 9 +- .../combobox-item/combobox-item.tsx | 9 +- .../src/components/combobox/combobox.tsx | 9 +- .../date-picker-day/date-picker-day.tsx | 15 ++- .../src/components/dropdown/dropdown.tsx | 11 +- .../src/components/fab/fab.tsx | 15 ++- .../src/components/filter/filter.tsx | 9 +- .../src/components/flow-item/flow-item.tsx | 9 +- .../inline-editable/inline-editable.tsx | 9 +- .../input-date-picker/input-date-picker.tsx | 9 +- .../components/input-number/input-number.tsx | 9 +- .../src/components/input-text/input-text.tsx | 9 +- .../input-time-picker/input-time-picker.tsx | 11 +- .../src/components/input/input.tsx | 9 +- .../src/components/link/link.tsx | 15 ++- .../list-item-group/list-item-group.tsx | 12 +- .../src/components/list-item/list-item.tsx | 9 +- .../src/components/list/list.tsx | 9 +- .../src/components/panel/panel.tsx | 9 +- .../pick-list-item/pick-list-item.tsx | 9 +- .../src/components/pick-list/pick-list.tsx | 9 +- .../components/radio-button/radio-button.tsx | 9 +- .../src/components/rating/rating.tsx | 9 +- .../segmented-control/segmented-control.tsx | 9 +- .../src/components/select/select.tsx | 9 +- .../src/components/slider/slider.tsx | 9 +- .../sortable-list/sortable-list.tsx | 9 +- .../components/split-button/split-button.tsx | 15 ++- .../components/stepper-item/stepper-item.tsx | 9 +- .../src/components/switch/switch.tsx | 9 +- .../src/components/tab-title/tab-title.tsx | 9 +- .../src/components/text-area/text-area.tsx | 9 +- .../tile-select-group/tile-select-group.tsx | 15 ++- .../components/tile-select/tile-select.tsx | 9 +- .../src/components/tile/tile.tsx | 9 +- .../src/components/tree-item/tree-item.tsx | 9 +- .../value-list-item/value-list-item.tsx | 9 +- .../src/components/value-list/value-list.tsx | 9 +- .../calcite-components/src/utils/browser.ts | 17 +++ .../src/utils/floating-ui.ts | 45 +++---- .../src/utils/interactive.ts | 114 ++++++++++++++++-- 47 files changed, 520 insertions(+), 89 deletions(-) create mode 100644 packages/calcite-components/src/utils/browser.ts diff --git a/packages/calcite-components/src/components/action/action.tsx b/packages/calcite-components/src/components/action/action.tsx index 2b7817d2133..e1befb94e76 100644 --- a/packages/calcite-components/src/components/action/action.tsx +++ b/packages/calcite-components/src/components/action/action.tsx @@ -13,7 +13,12 @@ import { } from "@stencil/core"; import { toAriaBoolean } from "../../utils/dom"; import { guid } from "../../utils/guid"; -import { InteractiveComponent, updateHostInteraction } from "../../utils/interactive"; +import { + connectInteractive, + disconnectInteractive, + InteractiveComponent, + updateHostInteraction +} from "../../utils/interactive"; import { componentLoaded, LoadableComponent, @@ -163,6 +168,7 @@ export class Action // -------------------------------------------------------------------------- connectedCallback(): void { + connectInteractive(this); connectLocalized(this); connectMessages(this); this.mutationObserver?.observe(this.el, { childList: true, subtree: true }); @@ -180,6 +186,7 @@ export class Action } disconnectedCallback(): void { + disconnectInteractive(this); disconnectLocalized(this); disconnectMessages(this); this.mutationObserver?.disconnect(); diff --git a/packages/calcite-components/src/components/block/block.tsx b/packages/calcite-components/src/components/block/block.tsx index 1d73440c9ca..36f7b5de257 100644 --- a/packages/calcite-components/src/components/block/block.tsx +++ b/packages/calcite-components/src/components/block/block.tsx @@ -17,7 +17,12 @@ import { } from "../../utils/conditionalSlot"; import { getSlotted, toAriaBoolean } from "../../utils/dom"; import { guid } from "../../utils/guid"; -import { InteractiveComponent, updateHostInteraction } from "../../utils/interactive"; +import { + connectInteractive, + disconnectInteractive, + InteractiveComponent, + updateHostInteraction +} from "../../utils/interactive"; import { connectLocalized, disconnectLocalized, LocalizedComponent } from "../../utils/locale"; import { connectMessages, @@ -143,11 +148,13 @@ export class Block connectedCallback(): void { connectConditionalSlotComponent(this); + connectInteractive(this); connectLocalized(this); connectMessages(this); } disconnectedCallback(): void { + disconnectInteractive(this); disconnectLocalized(this); disconnectMessages(this); disconnectConditionalSlotComponent(this); diff --git a/packages/calcite-components/src/components/button/button.tsx b/packages/calcite-components/src/components/button/button.tsx index 95acdf08a2a..15f2121e849 100644 --- a/packages/calcite-components/src/components/button/button.tsx +++ b/packages/calcite-components/src/components/button/button.tsx @@ -1,6 +1,11 @@ import { Build, Component, Element, h, Method, Prop, State, VNode, Watch } from "@stencil/core"; import { findAssociatedForm, FormOwner, resetForm, submitForm } from "../../utils/form"; -import { InteractiveComponent, updateHostInteraction } from "../../utils/interactive"; +import { + connectInteractive, + disconnectInteractive, + InteractiveComponent, + updateHostInteraction +} from "../../utils/interactive"; import { connectLabel, disconnectLabel, getLabelText, LabelableComponent } from "../../utils/label"; import { componentLoaded, @@ -175,6 +180,7 @@ export class Button //-------------------------------------------------------------------------- async connectedCallback(): Promise { + connectInteractive(this); connectLocalized(this); connectMessages(this); this.hasLoader = this.loading; @@ -185,6 +191,7 @@ export class Button disconnectedCallback(): void { this.mutationObserver?.disconnect(); + disconnectInteractive(this); disconnectLabel(this); disconnectLocalized(this); disconnectMessages(this); diff --git a/packages/calcite-components/src/components/checkbox/checkbox.tsx b/packages/calcite-components/src/components/checkbox/checkbox.tsx index 7aba245cba9..363b4588cda 100644 --- a/packages/calcite-components/src/components/checkbox/checkbox.tsx +++ b/packages/calcite-components/src/components/checkbox/checkbox.tsx @@ -17,7 +17,12 @@ import { HiddenFormInputSlot } from "../../utils/form"; import { guid } from "../../utils/guid"; -import { InteractiveComponent, updateHostInteraction } from "../../utils/interactive"; +import { + connectInteractive, + disconnectInteractive, + InteractiveComponent, + updateHostInteraction +} from "../../utils/interactive"; import { isActivationKey } from "../../utils/key"; import { connectLabel, disconnectLabel, getLabelText, LabelableComponent } from "../../utils/label"; import { @@ -226,11 +231,13 @@ export class Checkbox connectedCallback(): void { this.guid = this.el.id || `calcite-checkbox-${guid()}`; + connectInteractive(this); connectLabel(this); connectForm(this); } disconnectedCallback(): void { + disconnectInteractive(this); disconnectLabel(this); disconnectForm(this); } diff --git a/packages/calcite-components/src/components/chip-group/chip-group.tsx b/packages/calcite-components/src/components/chip-group/chip-group.tsx index 527c6805412..1b3f8d3ed84 100644 --- a/packages/calcite-components/src/components/chip-group/chip-group.tsx +++ b/packages/calcite-components/src/components/chip-group/chip-group.tsx @@ -11,7 +11,12 @@ import { Watch } from "@stencil/core"; import { focusElementInGroup, toAriaBoolean } from "../../utils/dom"; -import { InteractiveComponent, updateHostInteraction } from "../../utils/interactive"; +import { + connectInteractive, + disconnectInteractive, + InteractiveComponent, + updateHostInteraction +} from "../../utils/interactive"; import { createObserver } from "../../utils/observers"; import { Scale, SelectionMode } from "../interfaces"; import { componentLoaded, setComponentLoaded, setUpLoadableComponent } from "../../utils/loadable"; @@ -93,10 +98,12 @@ export class ChipGroup implements InteractiveComponent { //-------------------------------------------------------------------------- connectedCallback(): void { + connectInteractive(this); this.mutationObserver?.observe(this.el, { childList: true, subtree: true }); } componentDidRender(): void { + disconnectInteractive(this); updateHostInteraction(this); } diff --git a/packages/calcite-components/src/components/chip/chip.tsx b/packages/calcite-components/src/components/chip/chip.tsx index 2179a6064a6..86345fb2c31 100644 --- a/packages/calcite-components/src/components/chip/chip.tsx +++ b/packages/calcite-components/src/components/chip/chip.tsx @@ -35,7 +35,12 @@ import { T9nComponent, updateMessages } from "../../utils/t9n"; -import { InteractiveComponent, updateHostInteraction } from "../../utils/interactive"; +import { + connectInteractive, + disconnectInteractive, + InteractiveComponent, + updateHostInteraction +} from "../../utils/interactive"; import { connectLocalized, disconnectLocalized, LocalizedComponent } from "../../utils/locale"; import { createObserver } from "../../utils/observers"; import { isActivationKey } from "../../utils/key"; @@ -196,6 +201,7 @@ export class Chip connectedCallback(): void { connectConditionalSlotComponent(this); + connectInteractive(this); connectLocalized(this); connectMessages(this); this.setupTextContentObserver(); @@ -211,6 +217,7 @@ export class Chip disconnectedCallback(): void { disconnectConditionalSlotComponent(this); + disconnectInteractive(this); disconnectLocalized(this); disconnectMessages(this); } diff --git a/packages/calcite-components/src/components/color-picker/color-picker.tsx b/packages/calcite-components/src/components/color-picker/color-picker.tsx index 63a5be34f89..fdbe88c8364 100644 --- a/packages/calcite-components/src/components/color-picker/color-picker.tsx +++ b/packages/calcite-components/src/components/color-picker/color-picker.tsx @@ -43,7 +43,12 @@ import { toNonAlphaMode } from "./utils"; -import { InteractiveComponent, updateHostInteraction } from "../../utils/interactive"; +import { + connectInteractive, + disconnectInteractive, + InteractiveComponent, + updateHostInteraction +} from "../../utils/interactive"; import { isActivationKey } from "../../utils/key"; import { componentLoaded, @@ -687,6 +692,7 @@ export class ColorPicker } connectedCallback(): void { + connectInteractive(this); connectLocalized(this); connectMessages(this); } @@ -698,6 +704,7 @@ export class ColorPicker disconnectedCallback(): void { document.removeEventListener("pointermove", this.globalPointerMoveHandler); document.removeEventListener("pointerup", this.globalPointerUpHandler); + disconnectInteractive(this); disconnectLocalized(this); disconnectMessages(this); } diff --git a/packages/calcite-components/src/components/combobox-item/combobox-item.tsx b/packages/calcite-components/src/components/combobox-item/combobox-item.tsx index 684ce368714..698bad70a0b 100644 --- a/packages/calcite-components/src/components/combobox-item/combobox-item.tsx +++ b/packages/calcite-components/src/components/combobox-item/combobox-item.tsx @@ -16,7 +16,12 @@ import { } from "../../utils/conditionalSlot"; import { getElementProp, getSlotted } from "../../utils/dom"; import { guid } from "../../utils/guid"; -import { InteractiveComponent, updateHostInteraction } from "../../utils/interactive"; +import { + connectInteractive, + disconnectInteractive, + InteractiveComponent, + updateHostInteraction +} from "../../utils/interactive"; import { ComboboxChildElement } from "../combobox/interfaces"; import { getAncestors, getDepth } from "../combobox/utils"; import { Scale } from "../interfaces"; @@ -99,10 +104,12 @@ export class ComboboxItem implements ConditionalSlotComponent, InteractiveCompon this.ancestors = getAncestors(this.el); this.scale = getElementProp(this.el, "scale", this.scale); connectConditionalSlotComponent(this); + connectInteractive(this); } disconnectedCallback(): void { disconnectConditionalSlotComponent(this); + disconnectInteractive(this); } componentDidRender(): void { diff --git a/packages/calcite-components/src/components/combobox/combobox.tsx b/packages/calcite-components/src/components/combobox/combobox.tsx index e16bd81874b..827a8bb3074 100644 --- a/packages/calcite-components/src/components/combobox/combobox.tsx +++ b/packages/calcite-components/src/components/combobox/combobox.tsx @@ -37,7 +37,12 @@ import { submitForm } from "../../utils/form"; import { guid } from "../../utils/guid"; -import { InteractiveComponent, updateHostInteraction } from "../../utils/interactive"; +import { + connectInteractive, + disconnectInteractive, + InteractiveComponent, + updateHostInteraction +} from "../../utils/interactive"; import { connectLabel, disconnectLabel, getLabelText, LabelableComponent } from "../../utils/label"; import { componentLoaded, @@ -387,6 +392,7 @@ export class Combobox // -------------------------------------------------------------------------- connectedCallback(): void { + connectInteractive(this); connectLocalized(this); connectMessages(this); this.internalValueChangeFlag = true; @@ -427,6 +433,7 @@ export class Combobox disconnectedCallback(): void { this.mutationObserver?.disconnect(); this.resizeObserver?.disconnect(); + disconnectInteractive(this); disconnectLabel(this); disconnectForm(this); disconnectFloatingUI(this, this.referenceEl, this.floatingEl); diff --git a/packages/calcite-components/src/components/date-picker-day/date-picker-day.tsx b/packages/calcite-components/src/components/date-picker-day/date-picker-day.tsx index 0046d241000..792fd25bc93 100644 --- a/packages/calcite-components/src/components/date-picker-day/date-picker-day.tsx +++ b/packages/calcite-components/src/components/date-picker-day/date-picker-day.tsx @@ -12,7 +12,12 @@ import { import { dateToISO } from "../../utils/date"; import { closestElementCrossShadowBoundary, getElementDir, toAriaBoolean } from "../../utils/dom"; -import { InteractiveComponent, updateHostInteraction } from "../../utils/interactive"; +import { + connectInteractive, + disconnectInteractive, + InteractiveComponent, + updateHostInteraction +} from "../../utils/interactive"; import { isActivationKey } from "../../utils/key"; import { numberStringFormatter } from "../../utils/locale"; import { CSS_UTILITY } from "../../utils/resources"; @@ -185,10 +190,18 @@ export class DatePickerDay implements InteractiveComponent { ); } + connectedCallback(): void { + connectInteractive(this); + } + componentDidRender(): void { updateHostInteraction(this, this.isTabbable); } + disconnectedCallback(): void { + disconnectInteractive(this); + } + isTabbable(): boolean { return this.active; } diff --git a/packages/calcite-components/src/components/dropdown/dropdown.tsx b/packages/calcite-components/src/components/dropdown/dropdown.tsx index 2be288fe1ec..d4d14e23184 100644 --- a/packages/calcite-components/src/components/dropdown/dropdown.tsx +++ b/packages/calcite-components/src/components/dropdown/dropdown.tsx @@ -32,7 +32,12 @@ import { reposition } from "../../utils/floating-ui"; import { guid } from "../../utils/guid"; -import { InteractiveComponent, updateHostInteraction } from "../../utils/interactive"; +import { + connectInteractive, + disconnectInteractive, + InteractiveComponent, + updateHostInteraction +} from "../../utils/interactive"; import { isActivationKey } from "../../utils/key"; import { componentLoaded, @@ -212,6 +217,7 @@ export class Dropdown if (this.open) { this.openHandler(this.open); } + connectInteractive(this); connectOpenCloseComponent(this); } @@ -230,8 +236,9 @@ export class Dropdown disconnectedCallback(): void { this.mutationObserver?.disconnect(); - disconnectFloatingUI(this, this.referenceEl, this.floatingEl); this.resizeObserver?.disconnect(); + disconnectInteractive(this); + disconnectFloatingUI(this, this.referenceEl, this.floatingEl); disconnectOpenCloseComponent(this); } diff --git a/packages/calcite-components/src/components/fab/fab.tsx b/packages/calcite-components/src/components/fab/fab.tsx index c29adfcc020..586992f81dd 100755 --- a/packages/calcite-components/src/components/fab/fab.tsx +++ b/packages/calcite-components/src/components/fab/fab.tsx @@ -1,6 +1,11 @@ import { Component, Element, h, Method, Prop, VNode } from "@stencil/core"; import { focusElement } from "../../utils/dom"; -import { InteractiveComponent, updateHostInteraction } from "../../utils/interactive"; +import { + connectInteractive, + disconnectInteractive, + InteractiveComponent, + updateHostInteraction +} from "../../utils/interactive"; import { componentLoaded, LoadableComponent, @@ -89,6 +94,10 @@ export class Fab implements InteractiveComponent, LoadableComponent { // //-------------------------------------------------------------------------- + connectedCallback(): void { + connectInteractive(this); + } + componentWillLoad(): void { setUpLoadableComponent(this); } @@ -101,6 +110,10 @@ export class Fab implements InteractiveComponent, LoadableComponent { updateHostInteraction(this); } + disconnectedCallback(): void { + disconnectInteractive(this); + } + // -------------------------------------------------------------------------- // // Methods diff --git a/packages/calcite-components/src/components/filter/filter.tsx b/packages/calcite-components/src/components/filter/filter.tsx index 882c55b1742..c57fe268d59 100644 --- a/packages/calcite-components/src/components/filter/filter.tsx +++ b/packages/calcite-components/src/components/filter/filter.tsx @@ -13,7 +13,12 @@ import { } from "@stencil/core"; import { debounce } from "lodash-es"; import { filter } from "../../utils/filter"; -import { InteractiveComponent, updateHostInteraction } from "../../utils/interactive"; +import { + connectInteractive, + disconnectInteractive, + InteractiveComponent, + updateHostInteraction +} from "../../utils/interactive"; import { componentLoaded, LoadableComponent, @@ -158,6 +163,7 @@ export class Filter } connectedCallback(): void { + connectInteractive(this); connectLocalized(this); connectMessages(this); } @@ -167,6 +173,7 @@ export class Filter } disconnectedCallback(): void { + disconnectInteractive(this); disconnectLocalized(this); disconnectMessages(this); } diff --git a/packages/calcite-components/src/components/flow-item/flow-item.tsx b/packages/calcite-components/src/components/flow-item/flow-item.tsx index a9be13ef72d..255ee9e076c 100644 --- a/packages/calcite-components/src/components/flow-item/flow-item.tsx +++ b/packages/calcite-components/src/components/flow-item/flow-item.tsx @@ -12,7 +12,12 @@ import { Watch } from "@stencil/core"; import { getElementDir } from "../../utils/dom"; -import { InteractiveComponent, updateHostInteraction } from "../../utils/interactive"; +import { + connectInteractive, + disconnectInteractive, + InteractiveComponent, + updateHostInteraction +} from "../../utils/interactive"; import { componentLoaded, LoadableComponent, @@ -130,6 +135,7 @@ export class FlowItem //-------------------------------------------------------------------------- connectedCallback(): void { + connectInteractive(this); connectLocalized(this); connectMessages(this); } @@ -144,6 +150,7 @@ export class FlowItem } disconnectedCallback(): void { + disconnectInteractive(this); disconnectLocalized(this); disconnectMessages(this); } diff --git a/packages/calcite-components/src/components/inline-editable/inline-editable.tsx b/packages/calcite-components/src/components/inline-editable/inline-editable.tsx index c71762554ed..ffb84e5e12e 100644 --- a/packages/calcite-components/src/components/inline-editable/inline-editable.tsx +++ b/packages/calcite-components/src/components/inline-editable/inline-editable.tsx @@ -12,7 +12,12 @@ import { Watch } from "@stencil/core"; import { getSlotted } from "../../utils/dom"; -import { InteractiveComponent, updateHostInteraction } from "../../utils/interactive"; +import { + connectInteractive, + disconnectInteractive, + InteractiveComponent, + updateHostInteraction +} from "../../utils/interactive"; import { connectLabel, disconnectLabel, getLabelText, LabelableComponent } from "../../utils/label"; import { componentLoaded, @@ -131,6 +136,7 @@ export class InlineEditable //-------------------------------------------------------------------------- connectedCallback() { + connectInteractive(this); connectLabel(this); connectLocalized(this); connectMessages(this); @@ -148,6 +154,7 @@ export class InlineEditable } disconnectedCallback() { + disconnectInteractive(this); disconnectLabel(this); disconnectLocalized(this); disconnectMessages(this); 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 63bc29aa81d..9ee4ae2b328 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 @@ -41,7 +41,12 @@ import { HiddenFormInputSlot, submitForm } from "../../utils/form"; -import { InteractiveComponent, updateHostInteraction } from "../../utils/interactive"; +import { + connectInteractive, + disconnectInteractive, + InteractiveComponent, + updateHostInteraction +} from "../../utils/interactive"; import { numberKeys } from "../../utils/key"; import { connectLabel, disconnectLabel, LabelableComponent } from "../../utils/label"; import { @@ -433,6 +438,7 @@ export class InputDatePicker // -------------------------------------------------------------------------- connectedCallback(): void { + connectInteractive(this); connectLocalized(this); const { open } = this; @@ -488,6 +494,7 @@ export class InputDatePicker disconnectedCallback(): void { deactivateFocusTrap(this); + disconnectInteractive(this); disconnectLabel(this); disconnectForm(this); disconnectFloatingUI(this, this.referenceEl, this.floatingEl); diff --git a/packages/calcite-components/src/components/input-number/input-number.tsx b/packages/calcite-components/src/components/input-number/input-number.tsx index 231564451fa..8bef5603a7e 100644 --- a/packages/calcite-components/src/components/input-number/input-number.tsx +++ b/packages/calcite-components/src/components/input-number/input-number.tsx @@ -26,7 +26,12 @@ import { HiddenFormInputSlot, submitForm } from "../../utils/form"; -import { InteractiveComponent, updateHostInteraction } from "../../utils/interactive"; +import { + connectInteractive, + disconnectInteractive, + InteractiveComponent, + updateHostInteraction +} from "../../utils/interactive"; import { numberKeys } from "../../utils/key"; import { connectLabel, disconnectLabel, getLabelText, LabelableComponent } from "../../utils/label"; import { @@ -402,6 +407,7 @@ export class InputNumber //-------------------------------------------------------------------------- connectedCallback(): void { + connectInteractive(this); connectLocalized(this); connectMessages(this); this.inlineEditableEl = this.el.closest("calcite-inline-editable"); @@ -429,6 +435,7 @@ export class InputNumber } disconnectedCallback(): void { + disconnectInteractive(this); disconnectLabel(this); disconnectForm(this); disconnectLocalized(this); diff --git a/packages/calcite-components/src/components/input-text/input-text.tsx b/packages/calcite-components/src/components/input-text/input-text.tsx index d5dbcbab50c..fb87486e378 100644 --- a/packages/calcite-components/src/components/input-text/input-text.tsx +++ b/packages/calcite-components/src/components/input-text/input-text.tsx @@ -19,7 +19,12 @@ import { HiddenFormInputSlot, submitForm } from "../../utils/form"; -import { InteractiveComponent, updateHostInteraction } from "../../utils/interactive"; +import { + connectInteractive, + disconnectInteractive, + InteractiveComponent, + updateHostInteraction +} from "../../utils/interactive"; import { connectLabel, disconnectLabel, getLabelText, LabelableComponent } from "../../utils/label"; import { componentLoaded, @@ -312,6 +317,7 @@ export class InputText //-------------------------------------------------------------------------- connectedCallback(): void { + connectInteractive(this); connectLocalized(this); connectMessages(this); @@ -330,6 +336,7 @@ export class InputText } disconnectedCallback(): void { + disconnectInteractive(this); disconnectLabel(this); disconnectForm(this); disconnectLocalized(this); diff --git a/packages/calcite-components/src/components/input-time-picker/input-time-picker.tsx b/packages/calcite-components/src/components/input-time-picker/input-time-picker.tsx index a70d7fa9964..20a1eea3017 100644 --- a/packages/calcite-components/src/components/input-time-picker/input-time-picker.tsx +++ b/packages/calcite-components/src/components/input-time-picker/input-time-picker.tsx @@ -20,7 +20,12 @@ import { submitForm } from "../../utils/form"; import { guid } from "../../utils/guid"; -import { InteractiveComponent, updateHostInteraction } from "../../utils/interactive"; +import { + connectInteractive, + disconnectInteractive, + InteractiveComponent, + updateHostInteraction +} from "../../utils/interactive"; import { numberKeys } from "../../utils/key"; import { connectLabel, disconnectLabel, getLabelText, LabelableComponent } from "../../utils/label"; import { @@ -576,7 +581,7 @@ export class InputTimePicker private getExtendedLocaleConfig( locale: string - ): Parameters<(typeof dayjs)["updateLocale"]>[1] | undefined { + ): Parameters[1] | undefined { if (locale === "ar") { return { meridiem: (hour) => (hour > 12 ? "م" : "ص"), @@ -752,6 +757,7 @@ export class InputTimePicker //-------------------------------------------------------------------------- connectedCallback() { + connectInteractive(this); connectLocalized(this); if (isValidTime(this.value)) { @@ -785,6 +791,7 @@ export class InputTimePicker } disconnectedCallback() { + disconnectInteractive(this); disconnectLabel(this); disconnectForm(this); disconnectLocalized(this); diff --git a/packages/calcite-components/src/components/input/input.tsx b/packages/calcite-components/src/components/input/input.tsx index 033b9ca833a..97b4580f616 100644 --- a/packages/calcite-components/src/components/input/input.tsx +++ b/packages/calcite-components/src/components/input/input.tsx @@ -26,7 +26,12 @@ import { HiddenFormInputSlot, submitForm } from "../../utils/form"; -import { InteractiveComponent, updateHostInteraction } from "../../utils/interactive"; +import { + connectInteractive, + disconnectInteractive, + InteractiveComponent, + updateHostInteraction +} from "../../utils/interactive"; import { numberKeys } from "../../utils/key"; import { connectLabel, disconnectLabel, getLabelText, LabelableComponent } from "../../utils/label"; import { @@ -466,6 +471,7 @@ export class Input //-------------------------------------------------------------------------- connectedCallback(): void { + connectInteractive(this); connectLocalized(this); connectMessages(this); @@ -494,6 +500,7 @@ export class Input } disconnectedCallback(): void { + disconnectInteractive(this); disconnectLabel(this); disconnectForm(this); disconnectLocalized(this); diff --git a/packages/calcite-components/src/components/link/link.tsx b/packages/calcite-components/src/components/link/link.tsx index 8a84d467a2f..2d1201e8f93 100644 --- a/packages/calcite-components/src/components/link/link.tsx +++ b/packages/calcite-components/src/components/link/link.tsx @@ -1,6 +1,11 @@ import { Component, Element, h, Host, Listen, Method, Prop, VNode } from "@stencil/core"; import { focusElement, getElementDir } from "../../utils/dom"; -import { InteractiveComponent, updateHostInteraction } from "../../utils/interactive"; +import { + connectInteractive, + disconnectInteractive, + InteractiveComponent, + updateHostInteraction +} from "../../utils/interactive"; import { componentLoaded, LoadableComponent, @@ -69,6 +74,10 @@ export class Link implements InteractiveComponent, LoadableComponent { // //-------------------------------------------------------------------------- + connectedCallback(): void { + connectInteractive(this); + } + componentWillLoad(): void { setUpLoadableComponent(this); } @@ -81,6 +90,10 @@ export class Link implements InteractiveComponent, LoadableComponent { updateHostInteraction(this); } + disconnectedCallback(): void { + disconnectInteractive(this); + } + render(): VNode { const { download, el } = this; const dir = getElementDir(el); diff --git a/packages/calcite-components/src/components/list-item-group/list-item-group.tsx b/packages/calcite-components/src/components/list-item-group/list-item-group.tsx index fb68acff73e..851b8819d93 100644 --- a/packages/calcite-components/src/components/list-item-group/list-item-group.tsx +++ b/packages/calcite-components/src/components/list-item-group/list-item-group.tsx @@ -1,5 +1,10 @@ import { Component, Element, h, Host, Prop, State, VNode } from "@stencil/core"; -import { InteractiveComponent, updateHostInteraction } from "../../utils/interactive"; +import { + connectInteractive, + disconnectInteractive, + InteractiveComponent, + updateHostInteraction +} from "../../utils/interactive"; import { MAX_COLUMNS } from "../list-item/resources"; import { getDepth } from "../list-item/utils"; import { CSS } from "./resources"; @@ -38,12 +43,17 @@ export class ListItemGroup implements InteractiveComponent { connectedCallback(): void { const { el } = this; this.visualLevel = getDepth(el, true); + connectInteractive(this); } componentDidRender(): void { updateHostInteraction(this); } + disconnectedCallback(): void { + disconnectInteractive(this); + } + // -------------------------------------------------------------------------- // // Private Properties diff --git a/packages/calcite-components/src/components/list-item/list-item.tsx b/packages/calcite-components/src/components/list-item/list-item.tsx index c5df924156f..8a88d94b3e3 100644 --- a/packages/calcite-components/src/components/list-item/list-item.tsx +++ b/packages/calcite-components/src/components/list-item/list-item.tsx @@ -12,7 +12,12 @@ import { Watch } from "@stencil/core"; import { getElementDir, slotChangeHasAssignedElement, toAriaBoolean } from "../../utils/dom"; -import { InteractiveComponent, updateHostInteraction } from "../../utils/interactive"; +import { + connectInteractive, + disconnectInteractive, + InteractiveComponent, + updateHostInteraction +} from "../../utils/interactive"; import { SelectionMode } from "../interfaces"; import { SelectionAppearance } from "../list/resources"; import { CSS, ICONS, SLOTS } from "./resources"; @@ -251,6 +256,7 @@ export class ListItem actionsEndEl: HTMLTableCellElement; connectedCallback(): void { + connectInteractive(this); connectLocalized(this); connectMessages(this); const { el } = this; @@ -274,6 +280,7 @@ export class ListItem } disconnectedCallback(): void { + disconnectInteractive(this); disconnectLocalized(this); disconnectMessages(this); } diff --git a/packages/calcite-components/src/components/list/list.tsx b/packages/calcite-components/src/components/list/list.tsx index 490b777d9a0..fca1e5dae50 100755 --- a/packages/calcite-components/src/components/list/list.tsx +++ b/packages/calcite-components/src/components/list/list.tsx @@ -13,7 +13,12 @@ import { } from "@stencil/core"; import { debounce } from "lodash-es"; import { toAriaBoolean } from "../../utils/dom"; -import { InteractiveComponent, updateHostInteraction } from "../../utils/interactive"; +import { + connectInteractive, + disconnectInteractive, + InteractiveComponent, + updateHostInteraction +} from "../../utils/interactive"; import { createObserver } from "../../utils/observers"; import { SelectionMode } from "../interfaces"; import { ItemData } from "../list-item/interfaces"; @@ -203,10 +208,12 @@ export class List implements InteractiveComponent, LoadableComponent { connectedCallback(): void { this.mutationObserver?.observe(this.el, { childList: true, subtree: true }); this.updateListItems(); + connectInteractive(this); } disconnectedCallback(): void { this.mutationObserver?.disconnect(); + disconnectInteractive(this); } componentWillLoad(): void { diff --git a/packages/calcite-components/src/components/panel/panel.tsx b/packages/calcite-components/src/components/panel/panel.tsx index 89e2270e5fd..cbc61fcfe9c 100644 --- a/packages/calcite-components/src/components/panel/panel.tsx +++ b/packages/calcite-components/src/components/panel/panel.tsx @@ -12,7 +12,12 @@ import { Watch } from "@stencil/core"; import { focusFirstTabbable, slotChangeGetAssignedElements, toAriaBoolean } from "../../utils/dom"; -import { InteractiveComponent, updateHostInteraction } from "../../utils/interactive"; +import { + connectInteractive, + disconnectInteractive, + InteractiveComponent, + updateHostInteraction +} from "../../utils/interactive"; import { componentLoaded, LoadableComponent, @@ -120,6 +125,7 @@ export class Panel //-------------------------------------------------------------------------- connectedCallback(): void { + connectInteractive(this); connectLocalized(this); connectMessages(this); } @@ -138,6 +144,7 @@ export class Panel } disconnectedCallback(): void { + disconnectInteractive(this); disconnectLocalized(this); disconnectMessages(this); this.resizeObserver?.disconnect(); diff --git a/packages/calcite-components/src/components/pick-list-item/pick-list-item.tsx b/packages/calcite-components/src/components/pick-list-item/pick-list-item.tsx index fc582f7ae8a..1a4aa8b9971 100644 --- a/packages/calcite-components/src/components/pick-list-item/pick-list-item.tsx +++ b/packages/calcite-components/src/components/pick-list-item/pick-list-item.tsx @@ -17,7 +17,12 @@ import { disconnectConditionalSlotComponent } from "../../utils/conditionalSlot"; import { getSlotted, toAriaBoolean } from "../../utils/dom"; -import { InteractiveComponent, updateHostInteraction } from "../../utils/interactive"; +import { + connectInteractive, + disconnectInteractive, + InteractiveComponent, + updateHostInteraction +} from "../../utils/interactive"; import { componentLoaded, LoadableComponent, @@ -191,6 +196,7 @@ export class PickListItem // -------------------------------------------------------------------------- connectedCallback(): void { + connectInteractive(this); connectLocalized(this); connectMessages(this); connectConditionalSlotComponent(this); @@ -206,6 +212,7 @@ export class PickListItem } disconnectedCallback(): void { + disconnectInteractive(this); disconnectLocalized(this); disconnectMessages(this); disconnectConditionalSlotComponent(this); diff --git a/packages/calcite-components/src/components/pick-list/pick-list.tsx b/packages/calcite-components/src/components/pick-list/pick-list.tsx index 823d625a3d3..3d54fc60a99 100644 --- a/packages/calcite-components/src/components/pick-list/pick-list.tsx +++ b/packages/calcite-components/src/components/pick-list/pick-list.tsx @@ -10,7 +10,12 @@ import { State, VNode } from "@stencil/core"; -import { InteractiveComponent, updateHostInteraction } from "../../utils/interactive"; +import { + connectInteractive, + disconnectInteractive, + InteractiveComponent, + updateHostInteraction +} from "../../utils/interactive"; import { componentLoaded, LoadableComponent, @@ -156,10 +161,12 @@ export class PickList< connectedCallback(): void { initialize.call(this); initializeObserver.call(this); + connectInteractive(this); } disconnectedCallback(): void { cleanUpObserver.call(this); + disconnectInteractive(this); } componentWillLoad(): void { diff --git a/packages/calcite-components/src/components/radio-button/radio-button.tsx b/packages/calcite-components/src/components/radio-button/radio-button.tsx index beef04e3f75..def598595a6 100644 --- a/packages/calcite-components/src/components/radio-button/radio-button.tsx +++ b/packages/calcite-components/src/components/radio-button/radio-button.tsx @@ -20,7 +20,12 @@ import { HiddenFormInputSlot } from "../../utils/form"; import { guid } from "../../utils/guid"; -import { InteractiveComponent, updateHostInteraction } from "../../utils/interactive"; +import { + connectInteractive, + disconnectInteractive, + InteractiveComponent, + updateHostInteraction +} from "../../utils/interactive"; import { connectLabel, disconnectLabel, getLabelText, LabelableComponent } from "../../utils/label"; import { componentLoaded, @@ -438,6 +443,7 @@ export class RadioButton if (this.name) { this.checkLastRadioButton(); } + connectInteractive(this); connectLabel(this); connectForm(this); } @@ -455,6 +461,7 @@ export class RadioButton } disconnectedCallback(): void { + disconnectInteractive(this); disconnectLabel(this); disconnectForm(this); } diff --git a/packages/calcite-components/src/components/rating/rating.tsx b/packages/calcite-components/src/components/rating/rating.tsx index a6de56b96bb..f100fa59be3 100644 --- a/packages/calcite-components/src/components/rating/rating.tsx +++ b/packages/calcite-components/src/components/rating/rating.tsx @@ -12,7 +12,12 @@ import { } from "@stencil/core"; import { connectForm, disconnectForm, FormComponent, HiddenFormInputSlot } from "../../utils/form"; import { guid } from "../../utils/guid"; -import { InteractiveComponent, updateHostInteraction } from "../../utils/interactive"; +import { + connectInteractive, + disconnectInteractive, + InteractiveComponent, + updateHostInteraction +} from "../../utils/interactive"; import { connectLabel, disconnectLabel, LabelableComponent } from "../../utils/label"; import { componentLoaded, @@ -174,6 +179,7 @@ export class Rating //-------------------------------------------------------------------------- connectedCallback(): void { + connectInteractive(this); connectLocalized(this); connectMessages(this); connectLabel(this); @@ -229,6 +235,7 @@ export class Rating } disconnectedCallback(): void { + disconnectInteractive(this); disconnectLocalized(this); disconnectMessages(this); disconnectLabel(this); diff --git a/packages/calcite-components/src/components/segmented-control/segmented-control.tsx b/packages/calcite-components/src/components/segmented-control/segmented-control.tsx index b3e6f118343..0c287517db0 100644 --- a/packages/calcite-components/src/components/segmented-control/segmented-control.tsx +++ b/packages/calcite-components/src/components/segmented-control/segmented-control.tsx @@ -21,7 +21,12 @@ import { FormComponent, HiddenFormInputSlot } from "../../utils/form"; -import { InteractiveComponent, updateHostInteraction } from "../../utils/interactive"; +import { + connectInteractive, + disconnectInteractive, + InteractiveComponent, + updateHostInteraction +} from "../../utils/interactive"; import { connectLabel, disconnectLabel, LabelableComponent } from "../../utils/label"; import { componentLoaded, @@ -154,11 +159,13 @@ export class SegmentedControl } connectedCallback(): void { + connectInteractive(this); connectLabel(this); connectForm(this); } disconnectedCallback(): void { + disconnectInteractive(this); disconnectLabel(this); disconnectForm(this); } diff --git a/packages/calcite-components/src/components/select/select.tsx b/packages/calcite-components/src/components/select/select.tsx index 30b544e3503..f9df6bfebef 100644 --- a/packages/calcite-components/src/components/select/select.tsx +++ b/packages/calcite-components/src/components/select/select.tsx @@ -19,7 +19,12 @@ import { FormComponent, HiddenFormInputSlot } from "../../utils/form"; -import { InteractiveComponent, updateHostInteraction } from "../../utils/interactive"; +import { + connectInteractive, + disconnectInteractive, + InteractiveComponent, + updateHostInteraction +} from "../../utils/interactive"; import { connectLabel, disconnectLabel, LabelableComponent, getLabelText } from "../../utils/label"; import { componentLoaded, @@ -159,12 +164,14 @@ export class Select childList: true }); + connectInteractive(this); connectLabel(this); connectForm(this); } disconnectedCallback(): void { this.mutationObserver?.disconnect(); + disconnectInteractive(this); disconnectLabel(this); disconnectForm(this); } diff --git a/packages/calcite-components/src/components/slider/slider.tsx b/packages/calcite-components/src/components/slider/slider.tsx index ec2afbeadf7..7a42b1ad94c 100644 --- a/packages/calcite-components/src/components/slider/slider.tsx +++ b/packages/calcite-components/src/components/slider/slider.tsx @@ -22,7 +22,12 @@ import { FormComponent, HiddenFormInputSlot } from "../../utils/form"; -import { InteractiveComponent, updateHostInteraction } from "../../utils/interactive"; +import { + connectInteractive, + disconnectInteractive, + InteractiveComponent, + updateHostInteraction +} from "../../utils/interactive"; import { isActivationKey } from "../../utils/key"; import { connectLabel, disconnectLabel, LabelableComponent, getLabelText } from "../../utils/label"; import { @@ -203,6 +208,7 @@ export class Slider //-------------------------------------------------------------------------- connectedCallback(): void { + connectInteractive(this); connectLocalized(this); this.setMinMaxFromValue(); this.setValueFromMinMax(); @@ -211,6 +217,7 @@ export class Slider } disconnectedCallback(): void { + disconnectInteractive(this); disconnectLabel(this); disconnectForm(this); disconnectLocalized(this); diff --git a/packages/calcite-components/src/components/sortable-list/sortable-list.tsx b/packages/calcite-components/src/components/sortable-list/sortable-list.tsx index 6eb6ace2e11..5418296434f 100644 --- a/packages/calcite-components/src/components/sortable-list/sortable-list.tsx +++ b/packages/calcite-components/src/components/sortable-list/sortable-list.tsx @@ -1,6 +1,11 @@ import { Component, Element, Event, EventEmitter, h, Listen, Prop, VNode } from "@stencil/core"; import Sortable from "sortablejs"; -import { InteractiveComponent, updateHostInteraction } from "../../utils/interactive"; +import { + connectInteractive, + disconnectInteractive, + InteractiveComponent, + updateHostInteraction +} from "../../utils/interactive"; import { createObserver } from "../../utils/observers"; import { HandleNudge } from "../handle/interfaces"; import { Layout } from "../interfaces"; @@ -86,9 +91,11 @@ export class SortableList implements InteractiveComponent, SortableComponent { connectedCallback(): void { this.setUpSorting(); this.beginObserving(); + connectInteractive(this); } disconnectedCallback(): void { + disconnectInteractive(this); disconnectSortableComponent(this); this.endObserving(); } diff --git a/packages/calcite-components/src/components/split-button/split-button.tsx b/packages/calcite-components/src/components/split-button/split-button.tsx index ba7355bca25..7f45aee0183 100644 --- a/packages/calcite-components/src/components/split-button/split-button.tsx +++ b/packages/calcite-components/src/components/split-button/split-button.tsx @@ -10,7 +10,12 @@ import { Watch } from "@stencil/core"; import { OverlayPositioning } from "../../utils/floating-ui"; -import { InteractiveComponent, updateHostInteraction } from "../../utils/interactive"; +import { + connectInteractive, + disconnectInteractive, + InteractiveComponent, + updateHostInteraction +} from "../../utils/interactive"; import { componentLoaded, LoadableComponent, @@ -141,6 +146,10 @@ export class SplitButton implements InteractiveComponent, LoadableComponent { // //-------------------------------------------------------------------------- + connectedCallback(): void { + connectInteractive(this); + } + componentWillLoad(): void { setUpLoadableComponent(this); } @@ -153,6 +162,10 @@ export class SplitButton implements InteractiveComponent, LoadableComponent { updateHostInteraction(this); } + disconnectedCallback(): void { + disconnectInteractive(this); + } + render(): VNode { const widthClasses = { [CSS.container]: true, diff --git a/packages/calcite-components/src/components/stepper-item/stepper-item.tsx b/packages/calcite-components/src/components/stepper-item/stepper-item.tsx index 75547153641..52fa081b89c 100644 --- a/packages/calcite-components/src/components/stepper-item/stepper-item.tsx +++ b/packages/calcite-components/src/components/stepper-item/stepper-item.tsx @@ -14,7 +14,12 @@ import { } from "@stencil/core"; import { getElementProp, toAriaBoolean } from "../../utils/dom"; import { Layout, Scale } from "../interfaces"; -import { InteractiveComponent, updateHostInteraction } from "../../utils/interactive"; +import { + connectInteractive, + disconnectInteractive, + InteractiveComponent, + updateHostInteraction +} from "../../utils/interactive"; import { StepperItemChangeEventDetail, StepperItemEventDetail, @@ -172,6 +177,7 @@ export class StepperItem implements InteractiveComponent, LocalizedComponent, Lo //-------------------------------------------------------------------------- connectedCallback(): void { + connectInteractive(this); connectLocalized(this); } @@ -199,6 +205,7 @@ export class StepperItem implements InteractiveComponent, LocalizedComponent, Lo } disconnectedCallback(): void { + disconnectInteractive(this); disconnectLocalized(this); } diff --git a/packages/calcite-components/src/components/switch/switch.tsx b/packages/calcite-components/src/components/switch/switch.tsx index 36c7837a684..44e934037dd 100644 --- a/packages/calcite-components/src/components/switch/switch.tsx +++ b/packages/calcite-components/src/components/switch/switch.tsx @@ -16,7 +16,12 @@ import { disconnectForm, HiddenFormInputSlot } from "../../utils/form"; -import { InteractiveComponent, updateHostInteraction } from "../../utils/interactive"; +import { + connectInteractive, + disconnectInteractive, + InteractiveComponent, + updateHostInteraction +} from "../../utils/interactive"; import { isActivationKey } from "../../utils/key"; import { connectLabel, disconnectLabel, getLabelText, LabelableComponent } from "../../utils/label"; import { @@ -168,6 +173,7 @@ export class Switch //-------------------------------------------------------------------------- connectedCallback(): void { + connectInteractive(this); connectLabel(this); connectForm(this); } @@ -181,6 +187,7 @@ export class Switch } disconnectedCallback(): void { + disconnectInteractive(this); disconnectLabel(this); disconnectForm(this); } diff --git a/packages/calcite-components/src/components/tab-title/tab-title.tsx b/packages/calcite-components/src/components/tab-title/tab-title.tsx index 6244ee52cdb..c78f8b732f4 100644 --- a/packages/calcite-components/src/components/tab-title/tab-title.tsx +++ b/packages/calcite-components/src/components/tab-title/tab-title.tsx @@ -15,7 +15,12 @@ import { } from "@stencil/core"; import { getElementDir, getElementProp, toAriaBoolean, nodeListToArray } from "../../utils/dom"; import { guid } from "../../utils/guid"; -import { InteractiveComponent, updateHostInteraction } from "../../utils/interactive"; +import { + connectInteractive, + disconnectInteractive, + InteractiveComponent, + updateHostInteraction +} from "../../utils/interactive"; import { createObserver } from "../../utils/observers"; import { FlipContext, Scale } from "../interfaces"; import { TabChangeEventDetail, TabCloseEventDetail } from "../tab/interfaces"; @@ -144,6 +149,7 @@ export class TabTitle implements InteractiveComponent, LocalizedComponent, T9nCo //-------------------------------------------------------------------------- connectedCallback(): void { + connectInteractive(this); connectLocalized(this); connectMessages(this); this.setupTextContentObserver(); @@ -160,6 +166,7 @@ export class TabTitle implements InteractiveComponent, LocalizedComponent, T9nCo }) ); this.resizeObserver?.disconnect(); + disconnectInteractive(this); disconnectLocalized(this); disconnectMessages(this); } diff --git a/packages/calcite-components/src/components/text-area/text-area.tsx b/packages/calcite-components/src/components/text-area/text-area.tsx index 3236911e4b3..aaabaa04026 100644 --- a/packages/calcite-components/src/components/text-area/text-area.tsx +++ b/packages/calcite-components/src/components/text-area/text-area.tsx @@ -38,7 +38,12 @@ import { } from "../../utils/t9n"; import { TextAreaMessages } from "./assets/text-area/t9n"; import { throttle } from "lodash-es"; -import { InteractiveComponent, updateHostInteraction } from "../../utils/interactive"; +import { + connectInteractive, + disconnectInteractive, + InteractiveComponent, + updateHostInteraction +} from "../../utils/interactive"; /** * @slot - A slot for adding text. @@ -218,6 +223,7 @@ export class TextArea //-------------------------------------------------------------------------- connectedCallback(): void { + connectInteractive(this); connectLabel(this); connectForm(this); connectLocalized(this); @@ -239,6 +245,7 @@ export class TextArea } disconnectedCallback(): void { + disconnectInteractive(this); disconnectLabel(this); disconnectForm(this); disconnectLocalized(this); diff --git a/packages/calcite-components/src/components/tile-select-group/tile-select-group.tsx b/packages/calcite-components/src/components/tile-select-group/tile-select-group.tsx index 23d21620f40..f2e8664004b 100644 --- a/packages/calcite-components/src/components/tile-select-group/tile-select-group.tsx +++ b/packages/calcite-components/src/components/tile-select-group/tile-select-group.tsx @@ -1,5 +1,10 @@ import { Component, Element, h, Prop, VNode } from "@stencil/core"; -import { InteractiveComponent, updateHostInteraction } from "../../utils/interactive"; +import { + connectInteractive, + disconnectInteractive, + InteractiveComponent, + updateHostInteraction +} from "../../utils/interactive"; import { TileSelectGroupLayout } from "./interfaces"; /** @@ -41,10 +46,18 @@ export class TileSelectGroup implements InteractiveComponent { // //-------------------------------------------------------------------------- + connectedCallback(): void { + connectInteractive(this); + } + componentDidRender(): void { updateHostInteraction(this); } + disconnectedCallback(): void { + disconnectInteractive(this); + } + render(): VNode { return ; } diff --git a/packages/calcite-components/src/components/tile-select/tile-select.tsx b/packages/calcite-components/src/components/tile-select/tile-select.tsx index 46e089b7083..98336c56b59 100644 --- a/packages/calcite-components/src/components/tile-select/tile-select.tsx +++ b/packages/calcite-components/src/components/tile-select/tile-select.tsx @@ -12,7 +12,12 @@ import { Watch } from "@stencil/core"; import { guid } from "../../utils/guid"; -import { InteractiveComponent, updateHostInteraction } from "../../utils/interactive"; +import { + connectInteractive, + disconnectInteractive, + InteractiveComponent, + updateHostInteraction +} from "../../utils/interactive"; import { componentLoaded, LoadableComponent, @@ -249,6 +254,7 @@ export class TileSelect implements InteractiveComponent, LoadableComponent { connectedCallback(): void { this.renderInput(); + connectInteractive(this); } componentWillLoad(): void { @@ -261,6 +267,7 @@ export class TileSelect implements InteractiveComponent, LoadableComponent { disconnectedCallback(): void { this.input.parentNode.removeChild(this.input); + disconnectInteractive(this); } componentDidRender(): void { diff --git a/packages/calcite-components/src/components/tile/tile.tsx b/packages/calcite-components/src/components/tile/tile.tsx index a116b65240f..f04646e9ffe 100644 --- a/packages/calcite-components/src/components/tile/tile.tsx +++ b/packages/calcite-components/src/components/tile/tile.tsx @@ -5,7 +5,12 @@ import { disconnectConditionalSlotComponent } from "../../utils/conditionalSlot"; import { getSlotted } from "../../utils/dom"; -import { InteractiveComponent, updateHostInteraction } from "../../utils/interactive"; +import { + connectInteractive, + disconnectInteractive, + InteractiveComponent, + updateHostInteraction +} from "../../utils/interactive"; import { SLOTS } from "./resources"; /** @@ -84,10 +89,12 @@ export class Tile implements ConditionalSlotComponent, InteractiveComponent { connectedCallback(): void { connectConditionalSlotComponent(this); + connectInteractive(this); } disconnectedCallback(): void { disconnectConditionalSlotComponent(this); + disconnectInteractive(this); } componentDidRender(): void { diff --git a/packages/calcite-components/src/components/tree-item/tree-item.tsx b/packages/calcite-components/src/components/tree-item/tree-item.tsx index 92b170db5eb..3f6ed880c4f 100644 --- a/packages/calcite-components/src/components/tree-item/tree-item.tsx +++ b/packages/calcite-components/src/components/tree-item/tree-item.tsx @@ -24,7 +24,12 @@ import { connectConditionalSlotComponent, disconnectConditionalSlotComponent } from "../../utils/conditionalSlot"; -import { InteractiveComponent, updateHostInteraction } from "../../utils/interactive"; +import { + connectInteractive, + disconnectInteractive, + InteractiveComponent, + updateHostInteraction +} from "../../utils/interactive"; import { onToggleOpenCloseComponent, OpenCloseComponent } from "../../utils/openCloseComponent"; import { CSS_UTILITY } from "../../utils/resources"; import { FlipContext, Scale, SelectionMode } from "../interfaces"; @@ -174,10 +179,12 @@ export class TreeItem this.updateParentIsExpanded(this.parentTreeItem, expanded); } connectConditionalSlotComponent(this); + connectInteractive(this); } disconnectedCallback(): void { disconnectConditionalSlotComponent(this); + disconnectInteractive(this); } componentWillRender(): void { diff --git a/packages/calcite-components/src/components/value-list-item/value-list-item.tsx b/packages/calcite-components/src/components/value-list-item/value-list-item.tsx index f455c0a174e..e97bb06f2cd 100644 --- a/packages/calcite-components/src/components/value-list-item/value-list-item.tsx +++ b/packages/calcite-components/src/components/value-list-item/value-list-item.tsx @@ -17,7 +17,12 @@ import { } from "../../utils/conditionalSlot"; import { getSlotted } from "../../utils/dom"; import { guid } from "../../utils/guid"; -import { InteractiveComponent, updateHostInteraction } from "../../utils/interactive"; +import { + connectInteractive, + disconnectInteractive, + InteractiveComponent, + updateHostInteraction +} from "../../utils/interactive"; import { componentLoaded, LoadableComponent, @@ -130,10 +135,12 @@ export class ValueListItem connectedCallback(): void { connectConditionalSlotComponent(this); + connectInteractive(this); } disconnectedCallback(): void { disconnectConditionalSlotComponent(this); + disconnectInteractive(this); } componentWillLoad(): void { diff --git a/packages/calcite-components/src/components/value-list/value-list.tsx b/packages/calcite-components/src/components/value-list/value-list.tsx index 18ee29427a8..19f4cbdbd06 100644 --- a/packages/calcite-components/src/components/value-list/value-list.tsx +++ b/packages/calcite-components/src/components/value-list/value-list.tsx @@ -12,7 +12,12 @@ import { Watch } from "@stencil/core"; import Sortable from "sortablejs"; -import { InteractiveComponent, updateHostInteraction } from "../../utils/interactive"; +import { + connectInteractive, + disconnectInteractive, + InteractiveComponent, + updateHostInteraction +} from "../../utils/interactive"; import { componentLoaded, LoadableComponent, @@ -220,6 +225,7 @@ export class ValueList< // -------------------------------------------------------------------------- connectedCallback(): void { + connectInteractive(this); connectLocalized(this); connectMessages(this); initialize.call(this); @@ -242,6 +248,7 @@ export class ValueList< } disconnectedCallback(): void { + disconnectInteractive(this); disconnectSortableComponent(this); disconnectLocalized(this); disconnectMessages(this); diff --git a/packages/calcite-components/src/utils/browser.ts b/packages/calcite-components/src/utils/browser.ts new file mode 100644 index 00000000000..6bb779dbc05 --- /dev/null +++ b/packages/calcite-components/src/utils/browser.ts @@ -0,0 +1,17 @@ +interface NavigatorUAData { + brands: Array<{ brand: string; version: string }>; + mobile: boolean; + platform: string; +} + +export function getUserAgentData(): NavigatorUAData | undefined { + return (navigator as any).userAgentData; +} + +export function getUserAgentString(): string { + const uaData = getUserAgentData(); + + return uaData?.brands + ? uaData.brands.map(({ brand, version }) => `${brand}/${version}`).join(" ") + : navigator.userAgent; +} diff --git a/packages/calcite-components/src/utils/floating-ui.ts b/packages/calcite-components/src/utils/floating-ui.ts index 9e3267be703..9a66171a50e 100644 --- a/packages/calcite-components/src/utils/floating-ui.ts +++ b/packages/calcite-components/src/utils/floating-ui.ts @@ -19,49 +19,32 @@ import { debounce } from "lodash-es"; import { config } from "./config"; import { getElementDir } from "./dom"; import { Layout } from "../components/interfaces"; +import { getUserAgentData, getUserAgentString } from "./browser"; const floatingUIBrowserCheck = patchFloatingUiForNonChromiumBrowsers(); -async function patchFloatingUiForNonChromiumBrowsers(): Promise { - interface NavigatorUAData { - brands: Array<{ brand: string; version: string }>; - mobile: boolean; - platform: string; - } - - function getUAData(): NavigatorUAData | undefined { - return (navigator as any).userAgentData; - } +export function isChrome109OrAbove(): boolean { + const uaData = getUserAgentData(); - function getUAString(): string { - const uaData = getUAData(); - - return uaData?.brands - ? uaData.brands.map(({ brand, version }) => `${brand}/${version}`).join(" ") - : navigator.userAgent; + if (uaData?.brands) { + return !!uaData.brands.find( + ({ brand, version }) => (brand === "Google Chrome" || brand === "Chromium") && Number(version) >= 109 + ); } - function isChrome109OrAbove(): boolean { - const uaData = getUAData(); + return !!navigator.userAgent.split(" ").find((ua) => { + const [browser, version] = ua.split("/"); - if (uaData?.brands) { - return !!uaData.brands.find( - ({ brand, version }) => (brand === "Google Chrome" || brand === "Chromium") && Number(version) >= 109 - ); - } - - return !!navigator.userAgent.split(" ").find((ua) => { - const [browser, version] = ua.split("/"); - - return browser === "Chrome" && parseInt(version) >= 109; - }); - } + return browser === "Chrome" && parseInt(version) >= 109; + }); +} +async function patchFloatingUiForNonChromiumBrowsers(): Promise { if ( Build.isBrowser && config.floatingUINonChromiumPositioningFix && // ⚠️ browser-sniffing is not a best practice and should be avoided ⚠️ - (/firefox|safari/i.test(getUAString()) || isChrome109OrAbove()) + (/firefox|safari/i.test(getUserAgentString()) || isChrome109OrAbove()) ) { const { offsetParent } = await import("composed-offset-position"); diff --git a/packages/calcite-components/src/utils/interactive.ts b/packages/calcite-components/src/utils/interactive.ts index 8734cefb340..bc2d4c29695 100644 --- a/packages/calcite-components/src/utils/interactive.ts +++ b/packages/calcite-components/src/utils/interactive.ts @@ -1,3 +1,5 @@ +import { getUserAgentString } from "./browser"; + export interface InteractiveComponent { /** * The host element. @@ -24,6 +26,15 @@ type HostIsTabbablePredicate = () => boolean; */ export type InteractiveHTMLElement = HTMLElement & Pick; +// ⚠️ browser-sniffing is not a best practice and should be avoided ⚠️ +const isFirefox = /firefox/i.test(getUserAgentString()); + +type ParentElement = T | null; + +const interactiveElementToParent: WeakMap | null = isFirefox + ? new WeakMap() + : null; + function interceptedClick(): void { const { disabled } = this as InteractiveHTMLElement; @@ -33,13 +44,27 @@ function interceptedClick(): void { } function onPointerDown(event: PointerEvent): void { - // prevent click from moving focus on host - event.preventDefault(); + const interactiveElement = event.target as InteractiveHTMLElement; + + if (isFirefox && !interactiveElementToParent.get(interactiveElement)) { + return; + } + + const { disabled } = interactiveElement; + + if (disabled) { + // prevent click from moving focus on host + event.preventDefault(); + } } const nonBubblingWhenDisabledMouseEvents = ["mousedown", "mouseup", "click"]; function onNonBubblingWhenDisabledMouseEvent(event: MouseEvent): void { + if (isFirefox && !interactiveElementToParent.get(event.target as InteractiveHTMLElement)) { + return; + } + const { disabled } = event.target as InteractiveHTMLElement; // prevent disallowed mouse events from being emitted on the disabled host (per https://github.com/whatwg/html/issues/5886) @@ -77,20 +102,12 @@ export function updateHostInteraction( (document.activeElement as HTMLElement).blur(); } - component.el.click = interceptedClick; - component.el.addEventListener("pointerdown", onPointerDown, captureOnlyOptions); - nonBubblingWhenDisabledMouseEvents.forEach((event) => - component.el.addEventListener(event, onNonBubblingWhenDisabledMouseEvent, captureOnlyOptions) - ); + blockInteraction(component); return; } - component.el.click = HTMLElement.prototype.click; - component.el.removeEventListener("pointerdown", onPointerDown, captureOnlyOptions); - nonBubblingWhenDisabledMouseEvents.forEach((event) => - component.el.removeEventListener(event, onNonBubblingWhenDisabledMouseEvent, captureOnlyOptions) - ); + restoreInteraction(component); if (typeof hostIsTabbable === "function") { component.el.setAttribute("tabindex", hostIsTabbable.call(component) ? "0" : "-1"); @@ -104,3 +121,76 @@ export function updateHostInteraction( component.el.removeAttribute("aria-disabled"); } + +function blockInteraction(component: InteractiveComponent): void { + component.el.click = interceptedClick; + addInteractionListeners(isFirefox ? getParentElement(component) : component.el); +} + +function addInteractionListeners(element: HTMLElement): void { + if (!element) { + // this path is only applicable to Firefox + return; + } + + element.addEventListener("pointerdown", onPointerDown, captureOnlyOptions); + nonBubblingWhenDisabledMouseEvents.forEach((event) => + element.addEventListener(event, onNonBubblingWhenDisabledMouseEvent, captureOnlyOptions) + ); +} + +function getParentElement(component: InteractiveComponent): ParentElement { + return interactiveElementToParent.get(component.el as InteractiveHTMLElement); +} + +function restoreInteraction(component: InteractiveComponent): void { + delete component.el.click; // fallback on HTMLElement.prototype.click + removeInteractionListeners(isFirefox ? getParentElement(component) : component.el); +} + +function removeInteractionListeners(element: HTMLElement): void { + if (!element) { + // this path is only applicable to Firefox + return; + } + + element.removeEventListener("pointerdown", onPointerDown, captureOnlyOptions); + nonBubblingWhenDisabledMouseEvents.forEach((event) => + element.removeEventListener(event, onNonBubblingWhenDisabledMouseEvent, captureOnlyOptions) + ); +} + +/** + * This utility helps disable components consistently in Firefox. + * + * It needs to be called in `connectedCallback` and is only needed for Firefox as it does not call capture event listeners before non-capture ones (see https://bugzilla.mozilla.org/show_bug.cgi?id=1731504). + * + * @param component + */ +export function connectInteractive(component: InteractiveComponent): void { + if (!component.disabled || !isFirefox) { + return; + } + + const parent = + component.el.parentElement || component.el; /* assume element is host if it has no parent when connected */ + interactiveElementToParent.set(component.el as InteractiveHTMLElement, parent); + blockInteraction(component); +} + +/** + * This utility restores interactivity to disabled components consistently in Firefox. + * + * It needs to be called in `disconnectedCallback` and is only needed for Firefox as it does not call capture event listeners before non-capture ones (see https://bugzilla.mozilla.org/show_bug.cgi?id=1731504). + * + * @param component + */ +export function disconnectInteractive(component: InteractiveComponent): void { + if (!isFirefox) { + return; + } + + // always remove on disconnect as render or connect will restore it + interactiveElementToParent.delete(component.el as InteractiveHTMLElement); + restoreInteraction(component); +} From acebe4674b413f326ec5cd2a6de24889c42ea50e Mon Sep 17 00:00:00 2001 From: "github-actions[bot]" Date: Fri, 16 Jun 2023 18:43:32 +0000 Subject: [PATCH 02/32] chore: release next --- package-lock.json | 8 ++++---- packages/calcite-components-react/CHANGELOG.md | 4 ++++ packages/calcite-components-react/package.json | 4 ++-- packages/calcite-components/CHANGELOG.md | 10 ++++++++++ packages/calcite-components/package.json | 2 +- 5 files changed, 21 insertions(+), 7 deletions(-) diff --git a/package-lock.json b/package-lock.json index e0d51d33265..ea45e8c3651 100644 --- a/package-lock.json +++ b/package-lock.json @@ -43836,7 +43836,7 @@ }, "packages/calcite-components": { "name": "@esri/calcite-components", - "version": "1.5.0-next.0", + "version": "1.5.0-next.1", "license": "SEE LICENSE.md", "dependencies": { "@floating-ui/dom": "1.3.0", @@ -43862,10 +43862,10 @@ }, "packages/calcite-components-react": { "name": "@esri/calcite-components-react", - "version": "1.5.0-next.0", + "version": "1.5.0-next.1", "license": "SEE LICENSE.md", "dependencies": { - "@esri/calcite-components": "^1.5.0-next.0" + "@esri/calcite-components": "^1.5.0-next.1" }, "peerDependencies": { "react": ">=16.7", @@ -45694,7 +45694,7 @@ "@esri/calcite-components-react": { "version": "file:packages/calcite-components-react", "requires": { - "@esri/calcite-components": "^1.5.0-next.0" + "@esri/calcite-components": "^1.5.0-next.1" } }, "@esri/calcite-design-tokens": { diff --git a/packages/calcite-components-react/CHANGELOG.md b/packages/calcite-components-react/CHANGELOG.md index 78c11da3cab..7f8bf51d693 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. +## [1.5.0-next.1](https://github.com/Esri/calcite-components/compare/@esri/calcite-components-react@1.5.0-next.0...@esri/calcite-components-react@1.5.0-next.1) (2023-06-16) + +**Note:** Version bump only for package @esri/calcite-components-react + ## [1.5.0-next.0](https://github.com/Esri/calcite-components/compare/@esri/calcite-components-react@1.4.3-next.7...@esri/calcite-components-react@1.5.0-next.0) (2023-06-15) **Note:** Version bump only for package @esri/calcite-components-react diff --git a/packages/calcite-components-react/package.json b/packages/calcite-components-react/package.json index e6dc5d7a6f0..6396d2b8588 100644 --- a/packages/calcite-components-react/package.json +++ b/packages/calcite-components-react/package.json @@ -1,7 +1,7 @@ { "name": "@esri/calcite-components-react", "sideEffects": false, - "version": "1.5.0-next.0", + "version": "1.5.0-next.1", "description": "A set of React components that wrap calcite components", "license": "SEE LICENSE.md", "scripts": { @@ -17,7 +17,7 @@ "dist/" ], "dependencies": { - "@esri/calcite-components": "^1.5.0-next.0" + "@esri/calcite-components": "^1.5.0-next.1" }, "peerDependencies": { "react": ">=16.7", diff --git a/packages/calcite-components/CHANGELOG.md b/packages/calcite-components/CHANGELOG.md index 136dda7d46d..b9afaf88b36 100644 --- a/packages/calcite-components/CHANGELOG.md +++ b/packages/calcite-components/CHANGELOG.md @@ -3,6 +3,16 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +## [1.5.0-next.1](https://github.com/Esri/calcite-components/compare/@esri/calcite-components@1.5.0-next.0...@esri/calcite-components@1.5.0-next.1) (2023-06-16) + +### Bug Fixes + +- ensure mouse events are blocked for disabled components in Firefox ([#7107](https://github.com/Esri/calcite-components/issues/7107)) ([271d985](https://github.com/Esri/calcite-components/commit/271d9855eef4aa94cb7131381c98ab03eea57e4e)), closes [#7043](https://github.com/Esri/calcite-components/issues/7043) + +### Reverts + +- Add slots for filter actions" ([#7179](https://github.com/Esri/calcite-components/issues/7179)) ([667ee47](https://github.com/Esri/calcite-components/commit/667ee4766ced8994ebf8e8af270661f75573c83c)), closes [Esri/calcite-components#7148](https://github.com/Esri/calcite-components/issues/7148) + ## [1.5.0-next.0](https://github.com/Esri/calcite-components/compare/@esri/calcite-components@1.4.3-next.7...@esri/calcite-components@1.5.0-next.0) (2023-06-15) ### Features diff --git a/packages/calcite-components/package.json b/packages/calcite-components/package.json index 4d59d5142fd..50a1d3f525b 100644 --- a/packages/calcite-components/package.json +++ b/packages/calcite-components/package.json @@ -1,6 +1,6 @@ { "name": "@esri/calcite-components", - "version": "1.5.0-next.0", + "version": "1.5.0-next.1", "description": "Web Components for Esri's Calcite Design System.", "main": "dist/index.cjs.js", "module": "dist/index.js", From 6191788a639be9546480d3e2e2900936e8f326ee Mon Sep 17 00:00:00 2001 From: Anveshreddy mekala Date: Fri, 16 Jun 2023 15:18:12 -0500 Subject: [PATCH 03/32] chore(t9n): move manifest file to root level. (#7134) **Related Issue:** # ## Summary This PR will move the `t9nmanifest.txt` file from `packages/calcite-components/support` to the root directory as requested by the t9n team and updates the paths in `t9nmanifest.txt` --- .../support/generateT9nTypes.ts | 6 ++- .../support/syncEnT9nBundles.ts | 2 +- packages/calcite-components/t9nmanifest.txt | 41 ------------------- t9nmanifest.txt | 41 +++++++++++++++++++ 4 files changed, 46 insertions(+), 44 deletions(-) delete mode 100644 packages/calcite-components/t9nmanifest.txt create mode 100644 t9nmanifest.txt diff --git a/packages/calcite-components/support/generateT9nTypes.ts b/packages/calcite-components/support/generateT9nTypes.ts index 2d92fa4e77f..098cd7eee47 100644 --- a/packages/calcite-components/support/generateT9nTypes.ts +++ b/packages/calcite-components/support/generateT9nTypes.ts @@ -9,6 +9,7 @@ import { InputData, jsonInputForTargetLanguage, quicktype } from "quicktype-core const rootBundleFile = "messages.json"; const rootBundlePattern = `src/components/**/t9n/${rootBundleFile}`; + const rootManifestFilePath = "packages/calcite-components/"; const rootBundles = await globby([rootBundlePattern]); const manifestFilePathSeparator = "\\"; @@ -53,7 +54,8 @@ import { InputData, jsonInputForTargetLanguage, quicktype } from "quicktype-core }) ); const t9nPath = `${bundle.split("/t9n")[0]}/t9n`; - return t9nPath.replace(/\//g, manifestFilePathSeparator); + const relativeT9nPathh = `${rootManifestFilePath}${t9nPath}`; + return relativeT9nPathh.replace(/\//g, manifestFilePathSeparator); }) ); @@ -67,6 +69,6 @@ import { InputData, jsonInputForTargetLanguage, quicktype } from "quicktype-core return componentAName.localeCompare(componentBName); }) .join("\n"); - await writeFile("t9nmanifest.txt", manifestFileContents); + await writeFile("../../t9nmanifest.txt", manifestFileContents); console.log("finished writing manifest"); })(); diff --git a/packages/calcite-components/support/syncEnT9nBundles.ts b/packages/calcite-components/support/syncEnT9nBundles.ts index 279c183493a..2c339c0c7eb 100644 --- a/packages/calcite-components/support/syncEnT9nBundles.ts +++ b/packages/calcite-components/support/syncEnT9nBundles.ts @@ -4,7 +4,7 @@ } = await import("fs"); const { resolve, sep, win32 } = await import("path"); - const t9nManifestPath = "./t9nmanifest.txt"; + const t9nManifestPath = "../../t9nmanifest.txt"; const contents = await readFile(t9nManifestPath, { encoding: "utf-8" }); const entries = contents.split("\n"); const synchronized: string[] = []; diff --git a/packages/calcite-components/t9nmanifest.txt b/packages/calcite-components/t9nmanifest.txt deleted file mode 100644 index 8412835b080..00000000000 --- a/packages/calcite-components/t9nmanifest.txt +++ /dev/null @@ -1,41 +0,0 @@ -src\components\action\assets\action\t9n -src\components\action-bar\assets\action-bar\t9n -src\components\action-group\assets\action-group\t9n -src\components\action-pad\assets\action-pad\t9n -src\components\alert\assets\alert\t9n -src\components\block\assets\block\t9n -src\components\block-section\assets\block-section\t9n -src\components\button\assets\button\t9n -src\components\card\assets\card\t9n -src\components\chip\assets\chip\t9n -src\components\color-picker\assets\color-picker\t9n -src\components\combobox\assets\combobox\t9n -src\components\date-picker\assets\date-picker\t9n -src\components\filter\assets\filter\t9n -src\components\flow-item\assets\flow-item\t9n -src\components\handle\assets\handle\t9n -src\components\inline-editable\assets\inline-editable\t9n -src\components\input\assets\input\t9n -src\components\input-date-picker\assets\input-date-picker\t9n -src\components\input-number\assets\input-number\t9n -src\components\input-text\assets\input-text\t9n -src\components\input-time-picker\assets\input-time-picker\t9n -src\components\input-time-zone\assets\input-time-zone\t9n -src\components\list-item\assets\list-item\t9n -src\components\menu\assets\menu\t9n -src\components\menu-item\assets\menu-item\t9n -src\components\modal\assets\modal\t9n -src\components\notice\assets\notice\t9n -src\components\pagination\assets\pagination\t9n -src\components\panel\assets\panel\t9n -src\components\pick-list-item\assets\pick-list-item\t9n -src\components\popover\assets\popover\t9n -src\components\rating\assets\rating\t9n -src\components\scrim\assets\scrim\t9n -src\components\shell-panel\assets\shell-panel\t9n -src\components\tab-title\assets\tab-title\t9n -src\components\text-area\assets\text-area\t9n -src\components\time-picker\assets\time-picker\t9n -src\components\tip\assets\tip\t9n -src\components\tip-manager\assets\tip-manager\t9n -src\components\value-list\assets\value-list\t9n \ No newline at end of file diff --git a/t9nmanifest.txt b/t9nmanifest.txt new file mode 100644 index 00000000000..a5f704b03b9 --- /dev/null +++ b/t9nmanifest.txt @@ -0,0 +1,41 @@ +packages\calcite-components\src\components\action\assets\action\t9n +packages\calcite-components\src\components\action-bar\assets\action-bar\t9n +packages\calcite-components\src\components\action-group\assets\action-group\t9n +packages\calcite-components\src\components\action-pad\assets\action-pad\t9n +packages\calcite-components\src\components\block\assets\block\t9n +packages\calcite-components\src\components\alert\assets\alert\t9n +packages\calcite-components\src\components\block-section\assets\block-section\t9n +packages\calcite-components\src\components\button\assets\button\t9n +packages\calcite-components\src\components\card\assets\card\t9n +packages\calcite-components\src\components\chip\assets\chip\t9n +packages\calcite-components\src\components\color-picker\assets\color-picker\t9n +packages\calcite-components\src\components\combobox\assets\combobox\t9n +packages\calcite-components\src\components\date-picker\assets\date-picker\t9n +packages\calcite-components\src\components\filter\assets\filter\t9n +packages\calcite-components\src\components\flow-item\assets\flow-item\t9n +packages\calcite-components\src\components\handle\assets\handle\t9n +packages\calcite-components\src\components\inline-editable\assets\inline-editable\t9n +packages\calcite-components\src\components\input\assets\input\t9n +packages\calcite-components\src\components\input-date-picker\assets\input-date-picker\t9n +packages\calcite-components\src\components\input-number\assets\input-number\t9n +packages\calcite-components\src\components\input-text\assets\input-text\t9n +packages\calcite-components\src\components\input-time-picker\assets\input-time-picker\t9n +packages\calcite-components\src\components\input-time-zone\assets\input-time-zone\t9n +packages\calcite-components\src\components\list-item\assets\list-item\t9n +packages\calcite-components\src\components\menu\assets\menu\t9n +packages\calcite-components\src\components\menu-item\assets\menu-item\t9n +packages\calcite-components\src\components\modal\assets\modal\t9n +packages\calcite-components\src\components\notice\assets\notice\t9n +packages\calcite-components\src\components\panel\assets\panel\t9n +packages\calcite-components\src\components\pick-list-item\assets\pick-list-item\t9n +packages\calcite-components\src\components\pagination\assets\pagination\t9n +packages\calcite-components\src\components\popover\assets\popover\t9n +packages\calcite-components\src\components\rating\assets\rating\t9n +packages\calcite-components\src\components\scrim\assets\scrim\t9n +packages\calcite-components\src\components\shell-panel\assets\shell-panel\t9n +packages\calcite-components\src\components\tab-title\assets\tab-title\t9n +packages\calcite-components\src\components\text-area\assets\text-area\t9n +packages\calcite-components\src\components\time-picker\assets\time-picker\t9n +packages\calcite-components\src\components\tip\assets\tip\t9n +packages\calcite-components\src\components\tip-manager\assets\tip-manager\t9n +packages\calcite-components\src\components\value-list\assets\value-list\t9n \ No newline at end of file From 72c59434113a550e849c77caf8d622bd50e5769e Mon Sep 17 00:00:00 2001 From: Matt Driscoll Date: Fri, 16 Jun 2023 17:16:06 -0700 Subject: [PATCH 04/32] fix(scrim): Responsively set the scale of the loading spinner (#7182) **Related Issue:** #7147 ## Summary - Updates the scrim to set the scale of the internal loading spinner based on the scrim size. - Scrim is now responsive with a resize observer. - Breakpoints added based on design. These could maybe go into some kind of component token in the future. - Breakpoint is based on the minimum value of width or height. - Adds test --- .../src/components/scrim/resources.ts | 6 ++ .../src/components/scrim/scrim.e2e.ts | 63 ++++++++++++++++++- .../src/components/scrim/scrim.tsx | 49 ++++++++++++--- 3 files changed, 110 insertions(+), 8 deletions(-) diff --git a/packages/calcite-components/src/components/scrim/resources.ts b/packages/calcite-components/src/components/scrim/resources.ts index 3b943747318..8e2ffbaa012 100644 --- a/packages/calcite-components/src/components/scrim/resources.ts +++ b/packages/calcite-components/src/components/scrim/resources.ts @@ -2,3 +2,9 @@ export const CSS = { scrim: "scrim", content: "content" }; + +export const BREAKPOINTS = { + s: 72, // Less than 72px. + // medium is assumed default. + l: 480 // Greater than or equal to 480px. +}; diff --git a/packages/calcite-components/src/components/scrim/scrim.e2e.ts b/packages/calcite-components/src/components/scrim/scrim.e2e.ts index 4d3c5509344..49513f4a494 100644 --- a/packages/calcite-components/src/components/scrim/scrim.e2e.ts +++ b/packages/calcite-components/src/components/scrim/scrim.e2e.ts @@ -1,6 +1,8 @@ import { newE2EPage } from "@stencil/core/testing"; import { accessible, defaults, hidden, renders, t9n } from "../../tests/commonTests"; -import { CSS } from "./resources"; +import { BREAKPOINTS, CSS } from "./resources"; +import { html } from "../../../support/formatting"; +import { Scale } from "../interfaces"; describe("calcite-scrim", () => { describe("renders", () => { @@ -107,6 +109,65 @@ describe("calcite-scrim", () => { expect(contentNode).not.toBeNull(); }); + describe("Responsive loading spinner", () => { + const testValues: { width: number; height: number; scale: Scale }[] = [ + { + width: BREAKPOINTS.s - 1, + height: 800, + scale: "s" + }, + { + width: 800, + height: BREAKPOINTS.s - 1, + scale: "s" + }, + { + width: BREAKPOINTS.l - 1, + height: 800, + scale: "m" + }, + { + width: 800, + height: BREAKPOINTS.l - 1, + scale: "m" + }, + { + width: BREAKPOINTS.l, + height: 800, + scale: "l" + }, + { + width: 800, + height: BREAKPOINTS.l, + scale: "l" + } + ]; + + testValues.forEach((scaleSize) => { + it(`should have a scale="${scaleSize.scale}" loading spinner`, async () => { + const page = await newE2EPage(); + await page.setContent(html` +
+

I'm a panel that is loading.

 +
`); + await page.waitForChanges(); + + const loader = await page.find("calcite-scrim >>> calcite-loader"); + + expect(loader).toBeDefined(); + expect(await loader.isVisible()).toBe(true); + expect(await loader.getProperty("scale")).toBe(scaleSize.scale); + }); + }); + }); + describe("CSS properties for light/dark modes", () => { const scrimSnippet = `
diff --git a/packages/calcite-components/src/components/scrim/scrim.tsx b/packages/calcite-components/src/components/scrim/scrim.tsx index abcf440e63c..7e1b80bd823 100644 --- a/packages/calcite-components/src/components/scrim/scrim.tsx +++ b/packages/calcite-components/src/components/scrim/scrim.tsx @@ -8,7 +8,9 @@ import { updateMessages } from "../../utils/t9n"; import { ScrimMessages } from "./assets/scrim/t9n"; -import { CSS } from "./resources"; +import { CSS, BREAKPOINTS } from "./resources"; +import { createObserver } from "../../utils/observers"; +import { Scale } from "../interfaces"; /** * @slot - A slot for adding custom content, primarily loading information. @@ -58,11 +60,11 @@ export class Scrim implements LocalizedComponent, T9nComponent { @Element() el: HTMLCalciteScrimElement; - // -------------------------------------------------------------------------- - // - // Private State / Properties - // - // -------------------------------------------------------------------------- + resizeObserver = createObserver("resize", () => this.handleResize()); + + loaderEl: HTMLCalciteLoaderElement; + + @State() loaderScale: Scale; @State() defaultMessages: ScrimMessages; @@ -102,7 +104,9 @@ export class Scrim implements LocalizedComponent, T9nComponent { render(): VNode { const { el, loading, messages } = this; const hasContent = el.innerHTML.trim().length > 0; - const loaderNode = loading ? : null; + const loaderNode = loading ? ( + + ) : null; const contentNode = hasContent ? (
@@ -116,4 +120,35 @@ export class Scrim implements LocalizedComponent, T9nComponent {
); } + + // -------------------------------------------------------------------------- + // + // Private Methods + // + // -------------------------------------------------------------------------- + + private storeLoaderEl = (el: HTMLCalciteLoaderElement): void => { + this.loaderEl = el; + this.handleResize(); + }; + + private getScale(size: number): Scale { + if (size < BREAKPOINTS.s) { + return "s"; + } else if (size >= BREAKPOINTS.l) { + return "l"; + } else { + return "m"; + } + } + + private handleResize(): void { + const { loaderEl, el } = this; + + if (!loaderEl) { + return; + } + + this.loaderScale = this.getScale(Math.min(el.clientHeight, el.clientWidth) ?? 0); + } } From 1b9a8edc1b7fab87899bd59c74ad036b5f53140c Mon Sep 17 00:00:00 2001 From: Matt Driscoll Date: Fri, 16 Jun 2023 17:17:02 -0700 Subject: [PATCH 05/32] fix(alert): Sets autoCloseDuration to "medium" by default (#7157) **Related Issue:** #6363 ## Summary fix(alert): Sets autoCloseDuration to "medium" by default. #6363 @jcfranco ~~can we have linting to prevent having any conditional defaults? If not, we should maybe update conventions to say not to do this~~ Lets discuss how we can properly document and test this pattern. --- .../src/components/alert/alert.e2e.ts | 11 ++++++++++- .../calcite-components/src/components/alert/alert.tsx | 2 +- 2 files changed, 11 insertions(+), 2 deletions(-) diff --git a/packages/calcite-components/src/components/alert/alert.e2e.ts b/packages/calcite-components/src/components/alert/alert.e2e.ts index 1c266cf3a89..aad265b893e 100644 --- a/packages/calcite-components/src/components/alert/alert.e2e.ts +++ b/packages/calcite-components/src/components/alert/alert.e2e.ts @@ -1,9 +1,18 @@ import { E2EElement, E2EPage, newE2EPage } from "@stencil/core/testing"; import { html } from "../../../support/formatting"; -import { accessible, hidden, HYDRATED_ATTR, renders, t9n } from "../../tests/commonTests"; +import { accessible, defaults, hidden, HYDRATED_ATTR, renders, t9n } from "../../tests/commonTests"; import { getElementXY } from "../../tests/utils"; import { CSS, DURATIONS } from "./resources"; +describe("defaults", () => { + defaults("calcite-alert", [ + { + propertyName: "autoCloseDuration", + defaultValue: "medium" + } + ]); +}); + describe("calcite-alert", () => { const alertContent = `
Title Text
diff --git a/packages/calcite-components/src/components/alert/alert.tsx b/packages/calcite-components/src/components/alert/alert.tsx index d748079d228..a5c84406150 100644 --- a/packages/calcite-components/src/components/alert/alert.tsx +++ b/packages/calcite-components/src/components/alert/alert.tsx @@ -100,7 +100,7 @@ export class Alert implements OpenCloseComponent, LoadableComponent, T9nComponen @Prop({ reflect: true }) autoClose = false; /** Specifies the duration before the component automatically closes (only use with `autoClose`). */ - @Prop({ reflect: true }) autoCloseDuration: AlertDuration = this.autoClose ? "medium" : null; + @Prop({ reflect: true }) autoCloseDuration: AlertDuration = "medium"; /** Specifies the kind of the component (will apply to top border and icon). */ @Prop({ reflect: true }) kind: Extract< From dbddb4fe467b51a3bf25101c7e90760e758acfe5 Mon Sep 17 00:00:00 2001 From: Anveshreddy mekala Date: Tue, 20 Jun 2023 09:38:12 -0500 Subject: [PATCH 06/32] chore(t9n): corrects name of the path constant (#7187) **Related Issue:** # ## Summary This will correct the misspelled file name constant. --- packages/calcite-components/support/generateT9nTypes.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/calcite-components/support/generateT9nTypes.ts b/packages/calcite-components/support/generateT9nTypes.ts index 098cd7eee47..51b414fe7dd 100644 --- a/packages/calcite-components/support/generateT9nTypes.ts +++ b/packages/calcite-components/support/generateT9nTypes.ts @@ -54,8 +54,8 @@ import { InputData, jsonInputForTargetLanguage, quicktype } from "quicktype-core }) ); const t9nPath = `${bundle.split("/t9n")[0]}/t9n`; - const relativeT9nPathh = `${rootManifestFilePath}${t9nPath}`; - return relativeT9nPathh.replace(/\//g, manifestFilePathSeparator); + const relativeT9nPath = `${rootManifestFilePath}${t9nPath}`; + return relativeT9nPath.replace(/\//g, manifestFilePathSeparator); }) ); From b1c46adec4c2926e8b95f55337ff529028c1b12c Mon Sep 17 00:00:00 2001 From: "github-actions[bot]" Date: Tue, 20 Jun 2023 14:54:21 +0000 Subject: [PATCH 07/32] chore: release next --- package-lock.json | 8 ++++---- 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 | 2 +- 5 files changed, 18 insertions(+), 7 deletions(-) diff --git a/package-lock.json b/package-lock.json index ea45e8c3651..057daacac3f 100644 --- a/package-lock.json +++ b/package-lock.json @@ -43836,7 +43836,7 @@ }, "packages/calcite-components": { "name": "@esri/calcite-components", - "version": "1.5.0-next.1", + "version": "1.5.0-next.2", "license": "SEE LICENSE.md", "dependencies": { "@floating-ui/dom": "1.3.0", @@ -43862,10 +43862,10 @@ }, "packages/calcite-components-react": { "name": "@esri/calcite-components-react", - "version": "1.5.0-next.1", + "version": "1.5.0-next.2", "license": "SEE LICENSE.md", "dependencies": { - "@esri/calcite-components": "^1.5.0-next.1" + "@esri/calcite-components": "^1.5.0-next.2" }, "peerDependencies": { "react": ">=16.7", @@ -45694,7 +45694,7 @@ "@esri/calcite-components-react": { "version": "file:packages/calcite-components-react", "requires": { - "@esri/calcite-components": "^1.5.0-next.1" + "@esri/calcite-components": "^1.5.0-next.2" } }, "@esri/calcite-design-tokens": { diff --git a/packages/calcite-components-react/CHANGELOG.md b/packages/calcite-components-react/CHANGELOG.md index 7f8bf51d693..7b8ec2e8e4d 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. +## [1.5.0-next.2](https://github.com/Esri/calcite-components/compare/@esri/calcite-components-react@1.5.0-next.1...@esri/calcite-components-react@1.5.0-next.2) (2023-06-20) + +**Note:** Version bump only for package @esri/calcite-components-react + ## [1.5.0-next.1](https://github.com/Esri/calcite-components/compare/@esri/calcite-components-react@1.5.0-next.0...@esri/calcite-components-react@1.5.0-next.1) (2023-06-16) **Note:** Version bump only for package @esri/calcite-components-react diff --git a/packages/calcite-components-react/package.json b/packages/calcite-components-react/package.json index 6396d2b8588..e7726c75c51 100644 --- a/packages/calcite-components-react/package.json +++ b/packages/calcite-components-react/package.json @@ -1,7 +1,7 @@ { "name": "@esri/calcite-components-react", "sideEffects": false, - "version": "1.5.0-next.1", + "version": "1.5.0-next.2", "description": "A set of React components that wrap calcite components", "license": "SEE LICENSE.md", "scripts": { @@ -17,7 +17,7 @@ "dist/" ], "dependencies": { - "@esri/calcite-components": "^1.5.0-next.1" + "@esri/calcite-components": "^1.5.0-next.2" }, "peerDependencies": { "react": ">=16.7", diff --git a/packages/calcite-components/CHANGELOG.md b/packages/calcite-components/CHANGELOG.md index b9afaf88b36..dbf05cecff0 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. +## [1.5.0-next.2](https://github.com/Esri/calcite-components/compare/@esri/calcite-components@1.5.0-next.1...@esri/calcite-components@1.5.0-next.2) (2023-06-20) + +### Bug Fixes + +- **alert:** Sets autoCloseDuration to "medium" by default ([#7157](https://github.com/Esri/calcite-components/issues/7157)) ([1b9a8ed](https://github.com/Esri/calcite-components/commit/1b9a8edc1b7fab87899bd59c74ad036b5f53140c)), closes [#6363](https://github.com/Esri/calcite-components/issues/6363) [#6363](https://github.com/Esri/calcite-components/issues/6363) +- **scrim:** Responsively set the scale of the loading spinner ([#7182](https://github.com/Esri/calcite-components/issues/7182)) ([72c5943](https://github.com/Esri/calcite-components/commit/72c59434113a550e849c77caf8d622bd50e5769e)), closes [#7147](https://github.com/Esri/calcite-components/issues/7147) + ## [1.5.0-next.1](https://github.com/Esri/calcite-components/compare/@esri/calcite-components@1.5.0-next.0...@esri/calcite-components@1.5.0-next.1) (2023-06-16) ### Bug Fixes diff --git a/packages/calcite-components/package.json b/packages/calcite-components/package.json index 50a1d3f525b..5369b50052b 100644 --- a/packages/calcite-components/package.json +++ b/packages/calcite-components/package.json @@ -1,6 +1,6 @@ { "name": "@esri/calcite-components", - "version": "1.5.0-next.1", + "version": "1.5.0-next.2", "description": "Web Components for Esri's Calcite Design System.", "main": "dist/index.cjs.js", "module": "dist/index.js", From 4d51f2601c9920aec6d5e03879aecc4c0ba975cf Mon Sep 17 00:00:00 2001 From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com> Date: Tue, 20 Jun 2023 09:20:49 -0700 Subject: [PATCH 08/32] build(deps): Bump eslint from 8.41.0 to 8.43.0 (#7193) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Bumps [eslint](https://github.com/eslint/eslint) from 8.41.0 to 8.43.0.
Release notes

Sourced from eslint's releases.

v8.43.0

Features

  • 14581ff feat: directive prologue detection and autofix condition in quotes (#17284) (Francesco Trotta)
  • e50fac3 feat: add declaration loc to message in block-scoped-var (#17252) (Milos Djermanovic)
  • 1b7faf0 feat: add skipJSXText option to no-irregular-whitespace rule (#17182) (Azat S)

Bug Fixes

  • 5338b56 fix: normalize cwd passed to ESLint/FlatESLint constructor (#17277) (Milos Djermanovic)
  • 54383e6 fix: Remove no-extra-parens autofix for potential directives (#17022) (Francesco Trotta)

Documentation

  • 8b855ea docs: resubmit pr17061 doc changes (#17292) (唯然)
  • 372722e docs: resubmit pr17012 doc changes (#17293) (唯然)
  • 67e7af3 docs: resubmit custom-rules doc changes (#17294) (唯然)
  • 9e3d77c docs: Resubmit Fix formatting in Custom Rules docs (#17281) (Milos Djermanovic)
  • 503647a docs: Resubmit markVariableAsUsed docs (#17280) (Nicholas C. Zakas)
  • e0cf0d8 docs: Custom rule & plugin tutorial (#17024) (Ben Perlmutter)
  • 8e51ea9 docs: resubmit no-new rule documentation (#17264) (Nitin Kumar)
  • 1b217f8 docs: resubmit Custom Processors documentation (#17265) (Nitin Kumar)
  • 428fc76 docs: resubmit Create Plugins documentation (#17268) (Nitin Kumar)
  • bdca88c docs: resubmit Configuration Files documentation (#17267) (Nitin Kumar)
  • f5c01f2 docs: resubmit Manage Issues documentation (#17266) (Nitin Kumar)
  • b199295 docs: Resubmit custom rules update docs (#17273) (Ben Perlmutter)
  • 0e9980c docs: add new omitLastInOneLineClassBody option to the semi rule (#17263) (Nitin Kumar)
  • cb2560f docs: Resubmit getScope/getDeclaredVariables docs (#17262) (Nicholas C. Zakas)
  • 85d2b30 docs: explain how to include predefined globals (#17261) (Marcus Wyatt)
  • de4d3c1 docs: update flat config default ignore patterns (#17258) (Milos Djermanovic)
  • 3912f3a docs: Improve ignores documentation (#17239) (Francesco Trotta)
  • 35e11d3 docs: fix typos and missing info (#17257) (Ed Lucas)
  • 0bc257c docs: Clarify no-div-regex rule docs (#17051) (#17255) (Francesco Trotta)
  • 788d836 docs: add references to MIT License (#17248) (Milos Djermanovic)
  • 58aab6b docs: Update README (GitHub Actions Bot)
  • 3ef5814 docs: Revert all changes after the license change (#17227) (Milos Djermanovic)
  • 03fc4aa docs: Update README (GitHub Actions Bot)

Chores

  • 78350f6 chore: upgrade @​eslint/js@​8.43.0 (#17295) (Milos Djermanovic)
  • 62bf759 chore: package.json update for @​eslint/js release (ESLint Jenkins)
  • e0a2448 chore: docs package.license ISC => MIT (#17254) (唯然)
  • 6a0196c chore: use eslint-plugin-eslint-plugin flat configs (#17204) (Milos Djermanovic)

v8.42.0

Features

  • b8448ff feat: correct no-useless-return behaviour in try statements (#16996) (Nitin Kumar)

Bug Fixes

  • a589636 fix: Config with ignores and without files should not always apply (#17181) (Milos Djermanovic)
  • c4fad17 fix: Correct ignore message for "node_modules" subfolders (#17217) (Francesco Trotta)

Documentation

... (truncated)

Changelog

Sourced from eslint's changelog.

v8.43.0 - June 16, 2023

  • 78350f6 chore: upgrade @​eslint/js@​8.43.0 (#17295) (Milos Djermanovic)
  • 8b855ea docs: resubmit pr17061 doc changes (#17292) (唯然)
  • 62bf759 chore: package.json update for @​eslint/js release (ESLint Jenkins)
  • 14581ff feat: directive prologue detection and autofix condition in quotes (#17284) (Francesco Trotta)
  • 372722e docs: resubmit pr17012 doc changes (#17293) (唯然)
  • 67e7af3 docs: resubmit custom-rules doc changes (#17294) (唯然)
  • 5338b56 fix: normalize cwd passed to ESLint/FlatESLint constructor (#17277) (Milos Djermanovic)
  • 9e3d77c docs: Resubmit Fix formatting in Custom Rules docs (#17281) (Milos Djermanovic)
  • 503647a docs: Resubmit markVariableAsUsed docs (#17280) (Nicholas C. Zakas)
  • 54383e6 fix: Remove no-extra-parens autofix for potential directives (#17022) (Francesco Trotta)
  • e0cf0d8 docs: Custom rule & plugin tutorial (#17024) (Ben Perlmutter)
  • 8e51ea9 docs: resubmit no-new rule documentation (#17264) (Nitin Kumar)
  • 1b217f8 docs: resubmit Custom Processors documentation (#17265) (Nitin Kumar)
  • 428fc76 docs: resubmit Create Plugins documentation (#17268) (Nitin Kumar)
  • bdca88c docs: resubmit Configuration Files documentation (#17267) (Nitin Kumar)
  • f5c01f2 docs: resubmit Manage Issues documentation (#17266) (Nitin Kumar)
  • b199295 docs: Resubmit custom rules update docs (#17273) (Ben Perlmutter)
  • e50fac3 feat: add declaration loc to message in block-scoped-var (#17252) (Milos Djermanovic)
  • 0e9980c docs: add new omitLastInOneLineClassBody option to the semi rule (#17263) (Nitin Kumar)
  • cb2560f docs: Resubmit getScope/getDeclaredVariables docs (#17262) (Nicholas C. Zakas)
  • 85d2b30 docs: explain how to include predefined globals (#17261) (Marcus Wyatt)
  • de4d3c1 docs: update flat config default ignore patterns (#17258) (Milos Djermanovic)
  • 3912f3a docs: Improve ignores documentation (#17239) (Francesco Trotta)
  • 35e11d3 docs: fix typos and missing info (#17257) (Ed Lucas)
  • e0a2448 chore: docs package.license ISC => MIT (#17254) (唯然)
  • 0bc257c docs: Clarify no-div-regex rule docs (#17051) (#17255) (Francesco Trotta)
  • 1b7faf0 feat: add skipJSXText option to no-irregular-whitespace rule (#17182) (Azat S)
  • 788d836 docs: add references to MIT License (#17248) (Milos Djermanovic)
  • 58aab6b docs: Update README (GitHub Actions Bot)
  • 6a0196c chore: use eslint-plugin-eslint-plugin flat configs (#17204) (Milos Djermanovic)
  • 030a827 Revert "feat: docs license (#17010)" (#17231) (唯然)
  • 3ef5814 docs: Revert all changes after the license change (#17227) (Milos Djermanovic)
  • 03fc4aa docs: Update README (GitHub Actions Bot)

v8.42.0 - June 2, 2023

  • 6ca5b7c chore: upgrade @​eslint/js@​8.42.0 (#17236) (Milos Djermanovic)
  • 67fc5e7 chore: package.json update for @​eslint/js release (ESLint Jenkins)
  • 0892412 refactor: remove Identifier listener in no-irregular-whitespace (#17235) (Milos Djermanovic)
  • a589636 fix: Config with ignores and without files should not always apply (#17181) (Milos Djermanovic)
  • 01d7142 docs: Update README (GitHub Actions Bot)
  • f67d298 test: Add FlatESLint tests with missing config files (#17164) (Milos Djermanovic)
  • e5182b7 docs: Update README (GitHub Actions Bot)
  • c4fad17 fix: Correct ignore message for "node_modules" subfolders (#17217) (Francesco Trotta)
  • 5b68d51 chore: Fix fixedsize attribute in code path analysis DOT debug output (#17202) (Milos Djermanovic)
  • b8448ff feat: correct no-useless-return behaviour in try statements (#16996) (Nitin Kumar)
  • 37432f2 chore: update descriptions in key-spacing tests (#17195) (Milos Djermanovic)
Commits

[![Dependabot compatibility score](https://dependabot-badges.githubapp.com/badges/compatibility_score?dependency-name=eslint&package-manager=npm_and_yarn&previous-version=8.41.0&new-version=8.43.0)](https://docs.github.com/en/github/managing-security-vulnerabilities/about-dependabot-security-updates#about-compatibility-scores) Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting `@dependabot rebase`. [//]: # (dependabot-automerge-start) [//]: # (dependabot-automerge-end) ---
Dependabot commands and options
You can trigger Dependabot actions by commenting on this PR: - `@dependabot rebase` will rebase this PR - `@dependabot recreate` will recreate this PR, overwriting any edits that have been made to it - `@dependabot merge` will merge this PR after your CI passes on it - `@dependabot squash and merge` will squash and merge this PR after your CI passes on it - `@dependabot cancel merge` will cancel a previously requested merge and block automerging - `@dependabot reopen` will reopen this PR if it is closed - `@dependabot close` will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually - `@dependabot ignore this major version` will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself) - `@dependabot ignore this minor version` will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself) - `@dependabot ignore this dependency` will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
Signed-off-by: dependabot[bot] Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> --- package-lock.json | 34 +++++++++++++++++----------------- package.json | 2 +- 2 files changed, 18 insertions(+), 18 deletions(-) diff --git a/package-lock.json b/package-lock.json index 057daacac3f..845aabd82d0 100644 --- a/package-lock.json +++ b/package-lock.json @@ -48,7 +48,7 @@ "cpy": "10.0.0", "cpy-cli": "4.2.0", "dedent": "0.7.0", - "eslint": "8.41.0", + "eslint": "8.43.0", "eslint-config-prettier": "8.8.0", "eslint-plugin-import": "2.27.5", "eslint-plugin-jest": "27.2.1", @@ -2591,9 +2591,9 @@ } }, "node_modules/@eslint/js": { - "version": "8.41.0", - "resolved": "https://registry.npmjs.org/@eslint/js/-/js-8.41.0.tgz", - "integrity": "sha512-LxcyMGxwmTh2lY9FwHPGWOHmYFCZvbrFCBZL4FzSSsxsRPuhrYUg/49/0KDfW8tnIEaEHtfmn6+NPN+1DqaNmA==", + "version": "8.43.0", + "resolved": "https://registry.npmjs.org/@eslint/js/-/js-8.43.0.tgz", + "integrity": "sha512-s2UHCoiXfxMvmfzqoN+vrQ84ahUSYde9qNO1MdxmoEhyHWsfmwOpFlwYV+ePJEVc7gFnATGUi376WowX1N7tFg==", "dev": true, "engines": { "node": "^12.22.0 || ^14.17.0 || >=16.0.0" @@ -19228,16 +19228,16 @@ } }, "node_modules/eslint": { - "version": "8.41.0", - "resolved": "https://registry.npmjs.org/eslint/-/eslint-8.41.0.tgz", - "integrity": "sha512-WQDQpzGBOP5IrXPo4Hc0814r4/v2rrIsB0rhT7jtunIalgg6gYXWhRMOejVO8yH21T/FGaxjmFjBMNqcIlmH1Q==", + "version": "8.43.0", + "resolved": "https://registry.npmjs.org/eslint/-/eslint-8.43.0.tgz", + "integrity": "sha512-aaCpf2JqqKesMFGgmRPessmVKjcGXqdlAYLLC3THM8t5nBRZRQ+st5WM/hoJXkdioEXLLbXgclUpM0TXo5HX5Q==", "dev": true, "dependencies": { "@eslint-community/eslint-utils": "^4.2.0", "@eslint-community/regexpp": "^4.4.0", "@eslint/eslintrc": "^2.0.3", - "@eslint/js": "8.41.0", - "@humanwhocodes/config-array": "^0.11.8", + "@eslint/js": "8.43.0", + "@humanwhocodes/config-array": "^0.11.10", "@humanwhocodes/module-importer": "^1.0.1", "@nodelib/fs.walk": "^1.2.8", "ajv": "^6.10.0", @@ -45652,9 +45652,9 @@ } }, "@eslint/js": { - "version": "8.41.0", - "resolved": "https://registry.npmjs.org/@eslint/js/-/js-8.41.0.tgz", - "integrity": "sha512-LxcyMGxwmTh2lY9FwHPGWOHmYFCZvbrFCBZL4FzSSsxsRPuhrYUg/49/0KDfW8tnIEaEHtfmn6+NPN+1DqaNmA==", + "version": "8.43.0", + "resolved": "https://registry.npmjs.org/@eslint/js/-/js-8.43.0.tgz", + "integrity": "sha512-s2UHCoiXfxMvmfzqoN+vrQ84ahUSYde9qNO1MdxmoEhyHWsfmwOpFlwYV+ePJEVc7gFnATGUi376WowX1N7tFg==", "dev": true }, "@esri/calcite-base": { @@ -58332,16 +58332,16 @@ } }, "eslint": { - "version": "8.41.0", - "resolved": "https://registry.npmjs.org/eslint/-/eslint-8.41.0.tgz", - "integrity": "sha512-WQDQpzGBOP5IrXPo4Hc0814r4/v2rrIsB0rhT7jtunIalgg6gYXWhRMOejVO8yH21T/FGaxjmFjBMNqcIlmH1Q==", + "version": "8.43.0", + "resolved": "https://registry.npmjs.org/eslint/-/eslint-8.43.0.tgz", + "integrity": "sha512-aaCpf2JqqKesMFGgmRPessmVKjcGXqdlAYLLC3THM8t5nBRZRQ+st5WM/hoJXkdioEXLLbXgclUpM0TXo5HX5Q==", "dev": true, "requires": { "@eslint-community/eslint-utils": "^4.2.0", "@eslint-community/regexpp": "^4.4.0", "@eslint/eslintrc": "^2.0.3", - "@eslint/js": "8.41.0", - "@humanwhocodes/config-array": "^0.11.8", + "@eslint/js": "8.43.0", + "@humanwhocodes/config-array": "^0.11.10", "@humanwhocodes/module-importer": "^1.0.1", "@nodelib/fs.walk": "^1.2.8", "ajv": "^6.10.0", diff --git a/package.json b/package.json index 8aa4cb9dec9..4d7f0cea380 100644 --- a/package.json +++ b/package.json @@ -60,7 +60,7 @@ "cpy": "10.0.0", "cpy-cli": "4.2.0", "dedent": "0.7.0", - "eslint": "8.41.0", + "eslint": "8.43.0", "eslint-config-prettier": "8.8.0", "eslint-plugin-import": "2.27.5", "eslint-plugin-jest": "27.2.1", From d1ad702f33de1168057edbc557f06633d55ecb90 Mon Sep 17 00:00:00 2001 From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com> Date: Tue, 20 Jun 2023 09:32:23 -0700 Subject: [PATCH 09/32] build(deps): Bump @floating-ui/dom from 1.3.0 to 1.4.1 in /packages/calcite-components (#7194) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Bumps [@floating-ui/dom](https://github.com/floating-ui/floating-ui/tree/HEAD/packages/dom) from 1.3.0 to 1.4.1.
Release notes

Sourced from @​floating-ui/dom's releases.

@​floating-ui/dom@​1.4.1

Bug Fixes

  • fix(autoUpdate): layoutShift checks (#2384)

@​floating-ui/dom@​1.4.0

New Features

  • feat(autoUpdate): add layoutShift option (true by default) to detect when the reference element moves on the screen. Thank you to @​samthor for the technique using IntersectionObserver. (#2373)

    If you were using animationFrame: true for this purpose, you can now disable the option and use the defaults for layout shift checks. That option should now only be used if you need the floating element to stay anchored either during an animation using transform of the reference element, or for nested portaled floating elements (if necessary).

Bug Fixes

  • fix: loop in tests with mocked Node (#2383)

  • fix(autoUpdate): animationFrame: true preventing updates if reference element is fixed (#2373)

Commits

[![Dependabot compatibility score](https://dependabot-badges.githubapp.com/badges/compatibility_score?dependency-name=@floating-ui/dom&package-manager=npm_and_yarn&previous-version=1.3.0&new-version=1.4.1)](https://docs.github.com/en/github/managing-security-vulnerabilities/about-dependabot-security-updates#about-compatibility-scores) Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting `@dependabot rebase`. [//]: # (dependabot-automerge-start) [//]: # (dependabot-automerge-end) ---
Dependabot commands and options
You can trigger Dependabot actions by commenting on this PR: - `@dependabot rebase` will rebase this PR - `@dependabot recreate` will recreate this PR, overwriting any edits that have been made to it - `@dependabot merge` will merge this PR after your CI passes on it - `@dependabot squash and merge` will squash and merge this PR after your CI passes on it - `@dependabot cancel merge` will cancel a previously requested merge and block automerging - `@dependabot reopen` will reopen this PR if it is closed - `@dependabot close` will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually - `@dependabot ignore this major version` will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself) - `@dependabot ignore this minor version` will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself) - `@dependabot ignore this dependency` will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
Signed-off-by: dependabot[bot] Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> --- packages/calcite-components/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/calcite-components/package.json b/packages/calcite-components/package.json index 5369b50052b..68321893005 100644 --- a/packages/calcite-components/package.json +++ b/packages/calcite-components/package.json @@ -59,7 +59,7 @@ "url": "git+https://github.com/Esri/calcite-components.git" }, "dependencies": { - "@floating-ui/dom": "1.3.0", + "@floating-ui/dom": "1.4.1", "@stencil/core": "2.22.3", "@types/color": "3.0.3", "color": "4.2.3", From eb1a11c9400ea74ce058854524046c49ddb81562 Mon Sep 17 00:00:00 2001 From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com> Date: Tue, 20 Jun 2023 09:43:32 -0700 Subject: [PATCH 10/32] build(deps): Bump eslint-plugin-jsdoc from 46.2.4 to 46.2.6 (#7198) Bumps [eslint-plugin-jsdoc](https://github.com/gajus/eslint-plugin-jsdoc) from 46.2.4 to 46.2.6.
Release notes

Sourced from eslint-plugin-jsdoc's releases.

v46.2.6

46.2.6 (2023-06-07)

Bug Fixes

  • imports-as-dependencies: do not log missing package.json when rule is not active; fixes #1117 (3a5dd7d)

v46.2.5

46.2.5 (2023-06-06)

Bug Fixes

  • imports-as-dependencies: support Node builtins; fixes #1112 (ab00592)
Commits
  • 3a5dd7d fix(imports-as-dependencies): do not log missing package.json when rule is ...
  • ab00592 fix(imports-as-dependencies): support Node builtins; fixes #1112
  • See full diff in compare view

[![Dependabot compatibility score](https://dependabot-badges.githubapp.com/badges/compatibility_score?dependency-name=eslint-plugin-jsdoc&package-manager=npm_and_yarn&previous-version=46.2.4&new-version=46.2.6)](https://docs.github.com/en/github/managing-security-vulnerabilities/about-dependabot-security-updates#about-compatibility-scores) Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting `@dependabot rebase`. [//]: # (dependabot-automerge-start) [//]: # (dependabot-automerge-end) ---
Dependabot commands and options
You can trigger Dependabot actions by commenting on this PR: - `@dependabot rebase` will rebase this PR - `@dependabot recreate` will recreate this PR, overwriting any edits that have been made to it - `@dependabot merge` will merge this PR after your CI passes on it - `@dependabot squash and merge` will squash and merge this PR after your CI passes on it - `@dependabot cancel merge` will cancel a previously requested merge and block automerging - `@dependabot reopen` will reopen this PR if it is closed - `@dependabot close` will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually - `@dependabot ignore this major version` will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself) - `@dependabot ignore this minor version` will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself) - `@dependabot ignore this dependency` will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
Signed-off-by: dependabot[bot] Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> Co-authored-by: Matt Driscoll --- package-lock.json | 16 +++++++++------- package.json | 2 +- 2 files changed, 10 insertions(+), 8 deletions(-) diff --git a/package-lock.json b/package-lock.json index 845aabd82d0..9ec0fe96541 100644 --- a/package-lock.json +++ b/package-lock.json @@ -52,7 +52,7 @@ "eslint-config-prettier": "8.8.0", "eslint-plugin-import": "2.27.5", "eslint-plugin-jest": "27.2.1", - "eslint-plugin-jsdoc": "46.2.4", + "eslint-plugin-jsdoc": "46.2.6", "eslint-plugin-prettier": "4.2.1", "eslint-plugin-react": "7.32.2", "eslint-plugin-unicorn": "46.0.0", @@ -19425,9 +19425,9 @@ } }, "node_modules/eslint-plugin-jsdoc": { - "version": "46.2.4", - "resolved": "https://registry.npmjs.org/eslint-plugin-jsdoc/-/eslint-plugin-jsdoc-46.2.4.tgz", - "integrity": "sha512-QVURyOFEqkUswFOou0w1rfHshRfah7EeTd9laVllO6tb/+ymjPY1IkP16e24yX0BB7jRy8krJi99jHG2UWAPog==", + "version": "46.2.6", + "resolved": "https://registry.npmjs.org/eslint-plugin-jsdoc/-/eslint-plugin-jsdoc-46.2.6.tgz", + "integrity": "sha512-zIaK3zbSrKuH12bP+SPybPgcHSM6MFzh3HFeaODzmsF1N8C1l8dzJ22cW1aq4g0+nayU1VMjmNf7hg0dpShLrA==", "dev": true, "dependencies": { "@es-joy/jsdoccomment": "~0.39.4", @@ -19436,6 +19436,7 @@ "debug": "^4.3.4", "escape-string-regexp": "^4.0.0", "esquery": "^1.5.0", + "is-builtin-module": "^3.2.1", "semver": "^7.5.1", "spdx-expression-parse": "^3.0.1" }, @@ -58592,9 +58593,9 @@ } }, "eslint-plugin-jsdoc": { - "version": "46.2.4", - "resolved": "https://registry.npmjs.org/eslint-plugin-jsdoc/-/eslint-plugin-jsdoc-46.2.4.tgz", - "integrity": "sha512-QVURyOFEqkUswFOou0w1rfHshRfah7EeTd9laVllO6tb/+ymjPY1IkP16e24yX0BB7jRy8krJi99jHG2UWAPog==", + "version": "46.2.6", + "resolved": "https://registry.npmjs.org/eslint-plugin-jsdoc/-/eslint-plugin-jsdoc-46.2.6.tgz", + "integrity": "sha512-zIaK3zbSrKuH12bP+SPybPgcHSM6MFzh3HFeaODzmsF1N8C1l8dzJ22cW1aq4g0+nayU1VMjmNf7hg0dpShLrA==", "dev": true, "requires": { "@es-joy/jsdoccomment": "~0.39.4", @@ -58603,6 +58604,7 @@ "debug": "^4.3.4", "escape-string-regexp": "^4.0.0", "esquery": "^1.5.0", + "is-builtin-module": "^3.2.1", "semver": "^7.5.1", "spdx-expression-parse": "^3.0.1" }, diff --git a/package.json b/package.json index 4d7f0cea380..29739a54f59 100644 --- a/package.json +++ b/package.json @@ -64,7 +64,7 @@ "eslint-config-prettier": "8.8.0", "eslint-plugin-import": "2.27.5", "eslint-plugin-jest": "27.2.1", - "eslint-plugin-jsdoc": "46.2.4", + "eslint-plugin-jsdoc": "46.2.6", "eslint-plugin-prettier": "4.2.1", "eslint-plugin-react": "7.32.2", "eslint-plugin-unicorn": "46.0.0", From 5e59d9da020078e6fa41ed8bc62c27550528bbdc Mon Sep 17 00:00:00 2001 From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com> Date: Tue, 20 Jun 2023 10:10:17 -0700 Subject: [PATCH 11/32] build(deps): Bump lint-staged from 13.2.1 to 13.2.2 (#7197) Bumps [lint-staged](https://github.com/okonet/lint-staged) from 13.2.1 to 13.2.2.
Release notes

Sourced from lint-staged's releases.

v13.2.2

13.2.2 (2023-04-26)

Bug Fixes

  • dependencies: update yaml@2.2.2 (GHSA-f9xv-q969-pqx4) (#1290) (cf691aa)
Commits

[![Dependabot compatibility score](https://dependabot-badges.githubapp.com/badges/compatibility_score?dependency-name=lint-staged&package-manager=npm_and_yarn&previous-version=13.2.1&new-version=13.2.2)](https://docs.github.com/en/github/managing-security-vulnerabilities/about-dependabot-security-updates#about-compatibility-scores) Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting `@dependabot rebase`. [//]: # (dependabot-automerge-start) [//]: # (dependabot-automerge-end) ---
Dependabot commands and options
You can trigger Dependabot actions by commenting on this PR: - `@dependabot rebase` will rebase this PR - `@dependabot recreate` will recreate this PR, overwriting any edits that have been made to it - `@dependabot merge` will merge this PR after your CI passes on it - `@dependabot squash and merge` will squash and merge this PR after your CI passes on it - `@dependabot cancel merge` will cancel a previously requested merge and block automerging - `@dependabot reopen` will reopen this PR if it is closed - `@dependabot close` will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually - `@dependabot ignore this major version` will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself) - `@dependabot ignore this minor version` will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself) - `@dependabot ignore this dependency` will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
Signed-off-by: dependabot[bot] Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> Co-authored-by: Matt Driscoll --- package-lock.json | 18 +++++++++--------- package.json | 2 +- 2 files changed, 10 insertions(+), 10 deletions(-) diff --git a/package-lock.json b/package-lock.json index 9ec0fe96541..8cffeaed6ef 100644 --- a/package-lock.json +++ b/package-lock.json @@ -61,7 +61,7 @@ "jest-axe": "7.0.1", "jest-cli": "27.4.5", "lerna": "6.6.1", - "lint-staged": "13.2.1", + "lint-staged": "13.2.2", "markdownlint-cli": "0.34.0", "postcss": "8.4.21", "prettier": "2.8.4", @@ -29107,9 +29107,9 @@ } }, "node_modules/lint-staged": { - "version": "13.2.1", - "resolved": "https://registry.npmjs.org/lint-staged/-/lint-staged-13.2.1.tgz", - "integrity": "sha512-8gfzinVXoPfga5Dz/ZOn8I2GOhf81Wvs+KwbEXQn/oWZAvCVS2PivrXfVbFJc93zD16uC0neS47RXHIjXKYZQw==", + "version": "13.2.2", + "resolved": "https://registry.npmjs.org/lint-staged/-/lint-staged-13.2.2.tgz", + "integrity": "sha512-71gSwXKy649VrSU09s10uAT0rWCcY3aewhMaHyl2N84oBk4Xs9HgxvUp3AYu+bNsK4NrOYYxvSgg7FyGJ+jGcA==", "dev": true, "dependencies": { "chalk": "5.2.0", @@ -29124,7 +29124,7 @@ "object-inspect": "^1.12.3", "pidtree": "^0.6.0", "string-argv": "^0.3.1", - "yaml": "^2.2.1" + "yaml": "^2.2.2" }, "bin": { "lint-staged": "bin/lint-staged.js" @@ -65851,9 +65851,9 @@ } }, "lint-staged": { - "version": "13.2.1", - "resolved": "https://registry.npmjs.org/lint-staged/-/lint-staged-13.2.1.tgz", - "integrity": "sha512-8gfzinVXoPfga5Dz/ZOn8I2GOhf81Wvs+KwbEXQn/oWZAvCVS2PivrXfVbFJc93zD16uC0neS47RXHIjXKYZQw==", + "version": "13.2.2", + "resolved": "https://registry.npmjs.org/lint-staged/-/lint-staged-13.2.2.tgz", + "integrity": "sha512-71gSwXKy649VrSU09s10uAT0rWCcY3aewhMaHyl2N84oBk4Xs9HgxvUp3AYu+bNsK4NrOYYxvSgg7FyGJ+jGcA==", "dev": true, "requires": { "chalk": "5.2.0", @@ -65868,7 +65868,7 @@ "object-inspect": "^1.12.3", "pidtree": "^0.6.0", "string-argv": "^0.3.1", - "yaml": "^2.2.1" + "yaml": "^2.2.2" }, "dependencies": { "chalk": { diff --git a/package.json b/package.json index 29739a54f59..11f72b64ee7 100644 --- a/package.json +++ b/package.json @@ -73,7 +73,7 @@ "jest-axe": "7.0.1", "jest-cli": "27.4.5", "lerna": "6.6.1", - "lint-staged": "13.2.1", + "lint-staged": "13.2.2", "markdownlint-cli": "0.34.0", "postcss": "8.4.21", "prettier": "2.8.4", From 0e4c6bb994b4ed9b05ae427a5eb0c4fa9154a5ba Mon Sep 17 00:00:00 2001 From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com> Date: Tue, 20 Jun 2023 11:30:00 -0700 Subject: [PATCH 12/32] build(deps): Bump tailwindcss from 3.3.1 to 3.3.2 (#7196) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Bumps [tailwindcss](https://github.com/tailwindlabs/tailwindcss) from 3.3.1 to 3.3.2.
Release notes

Sourced from tailwindcss's releases.

v3.3.2

Fixed

  • Don’t move unknown pseudo-elements to the end of selectors (#10943, #10962)
  • Inherit gradient stop positions when using variants (#11002)
  • Honor default to position of gradient when using implicit transparent colors (#11002)
  • Ensure @tailwindcss/oxide doesn't leak in the stable engine (#10988)
  • Ensure multiple theme(spacing[5]) calls with bracket notation in arbitrary properties work (#11039)
  • Normalize arbitrary modifiers (#11057)

Changed

  • Drop support for Node.js v12 (#11089)
Changelog

Sourced from tailwindcss's changelog.

[3.3.2] - 2023-04-25

Fixed

  • Don’t move unknown pseudo-elements to the end of selectors (#10943, #10962)
  • Inherit gradient stop positions when using variants (#11002)
  • Honor default to position of gradient when using implicit transparent colors (#11002)
  • Ensure @tailwindcss/oxide doesn't leak in the stable engine (#10988)
  • Ensure multiple theme(spacing[5]) calls with bracket notation in arbitrary properties work (#11039)
  • Normalize arbitrary modifiers (#11057)

Changed

  • Drop support for Node.js v12 (#11089)
Commits
  • 1867744 3.3.2
  • 48ff773 Update test
  • adc8334 Disable SWC “unused” minification
  • 7bd1a3f Revert "Fix standalone CLI tests"
  • 0e539a7 Fix standalone CLI tests
  • bd0497f Drop support for Node.js v12 (#11089)
  • 9bb45cd Normalize arbitrary modifiers (#11057)
  • 0e2b451 Ensure multiple theme(spacing[5]) calls with bracket notation in arbitrary ...
  • defdc4b tweak changelog
  • 72bc318 Replace __OXIDE__ at build time to prevent @tailwindcss/oxide leaks in th...
  • Additional commits viewable in compare view

[![Dependabot compatibility score](https://dependabot-badges.githubapp.com/badges/compatibility_score?dependency-name=tailwindcss&package-manager=npm_and_yarn&previous-version=3.3.1&new-version=3.3.2)](https://docs.github.com/en/github/managing-security-vulnerabilities/about-dependabot-security-updates#about-compatibility-scores) Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting `@dependabot rebase`. [//]: # (dependabot-automerge-start) [//]: # (dependabot-automerge-end) ---
Dependabot commands and options
You can trigger Dependabot actions by commenting on this PR: - `@dependabot rebase` will rebase this PR - `@dependabot recreate` will recreate this PR, overwriting any edits that have been made to it - `@dependabot merge` will merge this PR after your CI passes on it - `@dependabot squash and merge` will squash and merge this PR after your CI passes on it - `@dependabot cancel merge` will cancel a previously requested merge and block automerging - `@dependabot reopen` will reopen this PR if it is closed - `@dependabot close` will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually - `@dependabot ignore this major version` will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself) - `@dependabot ignore this minor version` will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself) - `@dependabot ignore this dependency` will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
Signed-off-by: dependabot[bot] Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> Co-authored-by: Matt Driscoll --- package-lock.json | 195 ++++++++++++++++++++++++++++++---------------- package.json | 2 +- 2 files changed, 127 insertions(+), 70 deletions(-) diff --git a/package-lock.json b/package-lock.json index 8cffeaed6ef..62bae42b281 100644 --- a/package-lock.json +++ b/package-lock.json @@ -79,7 +79,7 @@ "stylelint": "14.16.1", "stylelint-config-recommended-scss": "8.0.0", "stylelint-use-logical-spec": "5.0.0", - "tailwindcss": "3.3.1", + "tailwindcss": "3.3.2", "ts-jest": "27.1.5", "ts-node": "10.9.1", "turbo": "1.10.1", @@ -93,6 +93,18 @@ "node": ">=14.0.0" } }, + "node_modules/@alloc/quick-lru": { + "version": "5.2.0", + "resolved": "https://registry.npmjs.org/@alloc/quick-lru/-/quick-lru-5.2.0.tgz", + "integrity": "sha512-UrcABB+4bUrFABwbluTIBErXwvbsU/V7TZWfmbgJfbkwiBuziS9gxdODUyuiecfdGQ85jglMW6juS3+z5TsKLw==", + "dev": true, + "engines": { + "node": ">=10" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, "node_modules/@ampproject/remapping": { "version": "2.2.1", "resolved": "https://registry.npmjs.org/@ampproject/remapping/-/remapping-2.2.1.tgz", @@ -34094,9 +34106,9 @@ } }, "node_modules/postcss-import": { - "version": "14.1.0", - "resolved": "https://registry.npmjs.org/postcss-import/-/postcss-import-14.1.0.tgz", - "integrity": "sha512-flwI+Vgm4SElObFVPpTIT7SU7R3qk2L7PyduMcokiaVKuWv9d/U+Gm/QAd8NDLuykTWTkcrjOeD2Pp1rMeBTGw==", + "version": "15.1.0", + "resolved": "https://registry.npmjs.org/postcss-import/-/postcss-import-15.1.0.tgz", + "integrity": "sha512-hpr+J05B2FVYUAXHeK1YyI267J/dDDhMU6B6civm8hSY1jYJnBXxzKDKDswzJmtLHryrjhnDjqqp/49t8FALew==", "dev": true, "dependencies": { "postcss-value-parser": "^4.0.0", @@ -34104,7 +34116,7 @@ "resolve": "^1.1.7" }, "engines": { - "node": ">=10.0.0" + "node": ">=14.0.0" }, "peerDependencies": { "postcss": "^8.0.0" @@ -34130,16 +34142,16 @@ } }, "node_modules/postcss-load-config": { - "version": "3.1.4", - "resolved": "https://registry.npmjs.org/postcss-load-config/-/postcss-load-config-3.1.4.tgz", - "integrity": "sha512-6DiM4E7v4coTE4uzA8U//WhtPwyhiim3eyjEMFCnUpzbrkK9wJHgKDT2mR+HbtSrd/NubVaYTOpSpjUl8NQeRg==", + "version": "4.0.1", + "resolved": "https://registry.npmjs.org/postcss-load-config/-/postcss-load-config-4.0.1.tgz", + "integrity": "sha512-vEJIc8RdiBRu3oRAI0ymerOn+7rPuMvRXslTvZUKZonDHFIczxztIyJ1urxM1x9JXEikvpWWTUUqal5j/8QgvA==", "dev": true, "dependencies": { "lilconfig": "^2.0.5", - "yaml": "^1.10.2" + "yaml": "^2.1.1" }, "engines": { - "node": ">= 10" + "node": ">= 14" }, "funding": { "type": "opencollective", @@ -34158,6 +34170,15 @@ } } }, + "node_modules/postcss-load-config/node_modules/yaml": { + "version": "2.3.1", + "resolved": "https://registry.npmjs.org/yaml/-/yaml-2.3.1.tgz", + "integrity": "sha512-2eHWfjaoXgTBC2jNM1LRef62VQa0umtvRiDSk6HSzW7RvS5YtkabJrwYLLEKWBc8a5U2PTSCs+dJjUTJdlHsWQ==", + "dev": true, + "engines": { + "node": ">= 14" + } + }, "node_modules/postcss-loader": { "version": "4.3.0", "resolved": "https://registry.npmjs.org/postcss-loader/-/postcss-loader-4.3.0.tgz", @@ -34349,12 +34370,12 @@ } }, "node_modules/postcss-nested": { - "version": "6.0.0", - "resolved": "https://registry.npmjs.org/postcss-nested/-/postcss-nested-6.0.0.tgz", - "integrity": "sha512-0DkamqrPcmkBDsLn+vQDIrtkSbNkv5AD/M322ySo9kqFkCIYklym2xEmWkwo+Y3/qZo34tzEPNUw4y7yMCdv5w==", + "version": "6.0.1", + "resolved": "https://registry.npmjs.org/postcss-nested/-/postcss-nested-6.0.1.tgz", + "integrity": "sha512-mEp4xPMi5bSWiMbsgoPfcP74lsWLHkQbZc3sY+jWYd65CUwXrUaTp0fmNpa01ZcETKlIgUdFN/MpS2xZtqL9dQ==", "dev": true, "dependencies": { - "postcss-selector-parser": "^6.0.10" + "postcss-selector-parser": "^6.0.11" }, "engines": { "node": ">=12.0" @@ -39364,53 +39385,43 @@ } }, "node_modules/tailwindcss": { - "version": "3.3.1", - "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.3.1.tgz", - "integrity": "sha512-Vkiouc41d4CEq0ujXl6oiGFQ7bA3WEhUZdTgXAhtKxSy49OmKs8rEfQmupsfF0IGW8fv2iQkp1EVUuapCFrZ9g==", + "version": "3.3.2", + "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.3.2.tgz", + "integrity": "sha512-9jPkMiIBXvPc2KywkraqsUfbfj+dHDb+JPWtSJa9MLFdrPyazI7q6WX2sUrm7R9eVR7qqv3Pas7EvQFzxKnI6w==", "dev": true, "dependencies": { + "@alloc/quick-lru": "^5.2.0", "arg": "^5.0.2", "chokidar": "^3.5.3", - "color-name": "^1.1.4", "didyoumean": "^1.2.2", "dlv": "^1.1.3", "fast-glob": "^3.2.12", "glob-parent": "^6.0.2", "is-glob": "^4.0.3", - "jiti": "^1.17.2", - "lilconfig": "^2.0.6", + "jiti": "^1.18.2", + "lilconfig": "^2.1.0", "micromatch": "^4.0.5", "normalize-path": "^3.0.0", "object-hash": "^3.0.0", "picocolors": "^1.0.0", - "postcss": "^8.0.9", - "postcss-import": "^14.1.0", - "postcss-js": "^4.0.0", - "postcss-load-config": "^3.1.4", - "postcss-nested": "6.0.0", + "postcss": "^8.4.23", + "postcss-import": "^15.1.0", + "postcss-js": "^4.0.1", + "postcss-load-config": "^4.0.1", + "postcss-nested": "^6.0.1", "postcss-selector-parser": "^6.0.11", "postcss-value-parser": "^4.2.0", - "quick-lru": "^5.1.1", - "resolve": "^1.22.1", - "sucrase": "^3.29.0" + "resolve": "^1.22.2", + "sucrase": "^3.32.0" }, "bin": { "tailwind": "lib/cli.js", "tailwindcss": "lib/cli.js" }, "engines": { - "node": ">=12.13.0" - }, - "peerDependencies": { - "postcss": "^8.0.9" + "node": ">=14.0.0" } }, - "node_modules/tailwindcss/node_modules/color-name": { - "version": "1.1.4", - "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz", - "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==", - "dev": true - }, "node_modules/tailwindcss/node_modules/glob-parent": { "version": "6.0.2", "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-6.0.2.tgz", @@ -39423,6 +39434,34 @@ "node": ">=10.13.0" } }, + "node_modules/tailwindcss/node_modules/postcss": { + "version": "8.4.24", + "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.24.tgz", + "integrity": "sha512-M0RzbcI0sO/XJNucsGjvWU9ERWxb/ytp1w6dKtxTKgixdtQDq4rmx/g8W1hnaheq9jgwL/oyEdH5Bc4WwJKMqg==", + "dev": true, + "funding": [ + { + "type": "opencollective", + "url": "https://opencollective.com/postcss/" + }, + { + "type": "tidelift", + "url": "https://tidelift.com/funding/github/npm/postcss" + }, + { + "type": "github", + "url": "https://github.com/sponsors/ai" + } + ], + "dependencies": { + "nanoid": "^3.3.6", + "picocolors": "^1.0.0", + "source-map-js": "^1.0.2" + }, + "engines": { + "node": "^10 || ^12 || >=14" + } + }, "node_modules/tapable": { "version": "1.1.3", "resolved": "https://registry.npmjs.org/tapable/-/tapable-1.1.3.tgz", @@ -43875,6 +43914,12 @@ } }, "dependencies": { + "@alloc/quick-lru": { + "version": "5.2.0", + "resolved": "https://registry.npmjs.org/@alloc/quick-lru/-/quick-lru-5.2.0.tgz", + "integrity": "sha512-UrcABB+4bUrFABwbluTIBErXwvbsU/V7TZWfmbgJfbkwiBuziS9gxdODUyuiecfdGQ85jglMW6juS3+z5TsKLw==", + "dev": true + }, "@ampproject/remapping": { "version": "2.2.1", "resolved": "https://registry.npmjs.org/@ampproject/remapping/-/remapping-2.2.1.tgz", @@ -69730,9 +69775,9 @@ } }, "postcss-import": { - "version": "14.1.0", - "resolved": "https://registry.npmjs.org/postcss-import/-/postcss-import-14.1.0.tgz", - "integrity": "sha512-flwI+Vgm4SElObFVPpTIT7SU7R3qk2L7PyduMcokiaVKuWv9d/U+Gm/QAd8NDLuykTWTkcrjOeD2Pp1rMeBTGw==", + "version": "15.1.0", + "resolved": "https://registry.npmjs.org/postcss-import/-/postcss-import-15.1.0.tgz", + "integrity": "sha512-hpr+J05B2FVYUAXHeK1YyI267J/dDDhMU6B6civm8hSY1jYJnBXxzKDKDswzJmtLHryrjhnDjqqp/49t8FALew==", "dev": true, "requires": { "postcss-value-parser": "^4.0.0", @@ -69750,13 +69795,21 @@ } }, "postcss-load-config": { - "version": "3.1.4", - "resolved": "https://registry.npmjs.org/postcss-load-config/-/postcss-load-config-3.1.4.tgz", - "integrity": "sha512-6DiM4E7v4coTE4uzA8U//WhtPwyhiim3eyjEMFCnUpzbrkK9wJHgKDT2mR+HbtSrd/NubVaYTOpSpjUl8NQeRg==", + "version": "4.0.1", + "resolved": "https://registry.npmjs.org/postcss-load-config/-/postcss-load-config-4.0.1.tgz", + "integrity": "sha512-vEJIc8RdiBRu3oRAI0ymerOn+7rPuMvRXslTvZUKZonDHFIczxztIyJ1urxM1x9JXEikvpWWTUUqal5j/8QgvA==", "dev": true, "requires": { "lilconfig": "^2.0.5", - "yaml": "^1.10.2" + "yaml": "^2.1.1" + }, + "dependencies": { + "yaml": { + "version": "2.3.1", + "resolved": "https://registry.npmjs.org/yaml/-/yaml-2.3.1.tgz", + "integrity": "sha512-2eHWfjaoXgTBC2jNM1LRef62VQa0umtvRiDSk6HSzW7RvS5YtkabJrwYLLEKWBc8a5U2PTSCs+dJjUTJdlHsWQ==", + "dev": true + } } }, "postcss-loader": { @@ -69905,12 +69958,12 @@ } }, "postcss-nested": { - "version": "6.0.0", - "resolved": "https://registry.npmjs.org/postcss-nested/-/postcss-nested-6.0.0.tgz", - "integrity": "sha512-0DkamqrPcmkBDsLn+vQDIrtkSbNkv5AD/M322ySo9kqFkCIYklym2xEmWkwo+Y3/qZo34tzEPNUw4y7yMCdv5w==", + "version": "6.0.1", + "resolved": "https://registry.npmjs.org/postcss-nested/-/postcss-nested-6.0.1.tgz", + "integrity": "sha512-mEp4xPMi5bSWiMbsgoPfcP74lsWLHkQbZc3sY+jWYd65CUwXrUaTp0fmNpa01ZcETKlIgUdFN/MpS2xZtqL9dQ==", "dev": true, "requires": { - "postcss-selector-parser": "^6.0.10" + "postcss-selector-parser": "^6.0.11" } }, "postcss-resolve-nested-selector": { @@ -73805,43 +73858,36 @@ } }, "tailwindcss": { - "version": "3.3.1", - "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.3.1.tgz", - "integrity": "sha512-Vkiouc41d4CEq0ujXl6oiGFQ7bA3WEhUZdTgXAhtKxSy49OmKs8rEfQmupsfF0IGW8fv2iQkp1EVUuapCFrZ9g==", + "version": "3.3.2", + "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.3.2.tgz", + "integrity": "sha512-9jPkMiIBXvPc2KywkraqsUfbfj+dHDb+JPWtSJa9MLFdrPyazI7q6WX2sUrm7R9eVR7qqv3Pas7EvQFzxKnI6w==", "dev": true, "requires": { + "@alloc/quick-lru": "^5.2.0", "arg": "^5.0.2", "chokidar": "^3.5.3", - "color-name": "^1.1.4", "didyoumean": "^1.2.2", "dlv": "^1.1.3", "fast-glob": "^3.2.12", "glob-parent": "^6.0.2", "is-glob": "^4.0.3", - "jiti": "^1.17.2", - "lilconfig": "^2.0.6", + "jiti": "^1.18.2", + "lilconfig": "^2.1.0", "micromatch": "^4.0.5", "normalize-path": "^3.0.0", "object-hash": "^3.0.0", "picocolors": "^1.0.0", - "postcss": "^8.0.9", - "postcss-import": "^14.1.0", - "postcss-js": "^4.0.0", - "postcss-load-config": "^3.1.4", - "postcss-nested": "6.0.0", + "postcss": "^8.4.23", + "postcss-import": "^15.1.0", + "postcss-js": "^4.0.1", + "postcss-load-config": "^4.0.1", + "postcss-nested": "^6.0.1", "postcss-selector-parser": "^6.0.11", "postcss-value-parser": "^4.2.0", - "quick-lru": "^5.1.1", - "resolve": "^1.22.1", - "sucrase": "^3.29.0" + "resolve": "^1.22.2", + "sucrase": "^3.32.0" }, "dependencies": { - "color-name": { - "version": "1.1.4", - "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz", - "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==", - "dev": true - }, "glob-parent": { "version": "6.0.2", "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-6.0.2.tgz", @@ -73850,6 +73896,17 @@ "requires": { "is-glob": "^4.0.3" } + }, + "postcss": { + "version": "8.4.24", + "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.24.tgz", + "integrity": "sha512-M0RzbcI0sO/XJNucsGjvWU9ERWxb/ytp1w6dKtxTKgixdtQDq4rmx/g8W1hnaheq9jgwL/oyEdH5Bc4WwJKMqg==", + "dev": true, + "requires": { + "nanoid": "^3.3.6", + "picocolors": "^1.0.0", + "source-map-js": "^1.0.2" + } } } }, diff --git a/package.json b/package.json index 11f72b64ee7..b854277192b 100644 --- a/package.json +++ b/package.json @@ -91,7 +91,7 @@ "stylelint": "14.16.1", "stylelint-config-recommended-scss": "8.0.0", "stylelint-use-logical-spec": "5.0.0", - "tailwindcss": "3.3.1", + "tailwindcss": "3.3.2", "ts-jest": "27.1.5", "ts-node": "10.9.1", "turbo": "1.10.1", From edd59eb0bff21aa41fc7e537a2df2dbd2143a15a Mon Sep 17 00:00:00 2001 From: Matt Driscoll Date: Tue, 20 Jun 2023 17:01:35 -0700 Subject: [PATCH 13/32] fix(alert): update alert queue when an alert is removed from the DOM (#7189) **Related Issue:** #6616 ## Summary - Adds new internal event `calciteInternalAlertUnregister` to dispatch when an alert is removed from the DOM. - Event is dispatched on the window since that is where the listeners are and dispatching on the element won't reach the window since the element would no longer be in the DOM. - When the event is received, the queue is updated to remove the removed alert element. - queue is kept n'sync. ![giphy](https://github.com/Esri/calcite-components/assets/1231455/691e1744-6045-48b2-8e55-97479a2b8a5b) --- .../src/components/alert/alert.e2e.ts | 71 +++++++++++++++++++ .../src/components/alert/alert.tsx | 20 +++++- .../src/components/alert/interfaces.ts | 5 ++ 3 files changed, 95 insertions(+), 1 deletion(-) diff --git a/packages/calcite-components/src/components/alert/alert.e2e.ts b/packages/calcite-components/src/components/alert/alert.e2e.ts index aad265b893e..3c98f1d01bf 100644 --- a/packages/calcite-components/src/components/alert/alert.e2e.ts +++ b/packages/calcite-components/src/components/alert/alert.e2e.ts @@ -328,6 +328,77 @@ describe("calcite-alert", () => { expect(await container.isVisible()).toBe(false); }); + it("should update number of queued alerts with a calcite-chip when removing an alert", async () => { + const page = await newE2EPage(); + await page.setContent(html` + open alert + open alert + + open alert + + +
Title of alert Uno
+
Message text of the alert Uno
+ Retry + + + +
Title of alert Dos
+
Message text of the alert Dos
+ Retry + + + +
Title of alert Dos
+
Message text of the alert Dos
+ Retry + + `); + const buttonOne = await page.find("#buttonOne"); + const buttonTwo = await page.find("#buttonTwo"); + const buttonThree = await page.find("#buttonThree"); + const alertOne = await page.find("#first-open"); + const alertTwo = await page.find("#second-open"); + const alertThree = await page.find("#third-open"); + + await buttonOne.click(); + await page.waitForTimeout(animationDurationInMs); + expect(await alertOne.isVisible()).toBe(true); + + await buttonTwo.click(); + expect(await alertTwo.isVisible()).toBe(true); + + await buttonThree.click(); + expect(await alertThree.isVisible()).toBe(true); + + const chip = await page.find("calcite-alert[id='first-open'] >>> calcite-chip"); + const chipQueueCount2 = "+2"; + expect(await chip.getProperty("value")).toEqual(chipQueueCount2); + expect(chip.textContent).toEqual(chipQueueCount2); + + await page.$eval("#third-open", (alert: HTMLCalciteAlertElement) => { + alert.remove(); + }); + await page.waitForChanges(); + + const chipQueueCount1 = "+1"; + expect(await chip.getProperty("value")).toEqual(chipQueueCount1); + expect(chip.textContent).toEqual(chipQueueCount1); + + await page.$eval("#second-open", (alert: HTMLCalciteAlertElement) => { + alert.remove(); + }); + await page.waitForChanges(); + + expect(await page.find("calcite-alert[id='first-open'] >>> calcite-chip")).toBeNull(); + }); + describe("auto-close behavior on queued items", () => { it("should display number of queued alerts with a calcite-chip", async () => { const page = await newE2EPage(); diff --git a/packages/calcite-components/src/components/alert/alert.tsx b/packages/calcite-components/src/components/alert/alert.tsx index a5c84406150..c4f3acec46c 100644 --- a/packages/calcite-components/src/components/alert/alert.tsx +++ b/packages/calcite-components/src/components/alert/alert.tsx @@ -46,7 +46,7 @@ import { import { Kind, Scale } from "../interfaces"; import { KindIcons } from "../resources"; import { AlertMessages } from "./assets/alert/t9n"; -import { AlertDuration, Sync } from "./interfaces"; +import { AlertDuration, Sync, Unregister } from "./interfaces"; import { CSS, DURATIONS, SLOTS } from "./resources"; /** @@ -203,6 +203,11 @@ export class Alert implements OpenCloseComponent, LoadableComponent, T9nComponen } disconnectedCallback(): void { + window.dispatchEvent( + new CustomEvent("calciteInternalAlertUnregister", { + detail: { alert: this.el } + }) + ); window.clearTimeout(this.autoCloseTimeoutId); window.clearTimeout(this.queueTimeout); disconnectOpenCloseComponent(this); @@ -353,6 +358,19 @@ export class Alert implements OpenCloseComponent, LoadableComponent, T9nComponen this.determineActiveAlert(); } + // Event is dispatched on the window because the element is not in the DOM so bubbling won't occur. + @Listen("calciteInternalAlertUnregister", { target: "window" }) + alertUnregister(event: CustomEvent): void { + const queue = this.queue.filter((el) => el !== event.detail.alert); + this.queue = queue; + + window.dispatchEvent( + new CustomEvent("calciteInternalAlertSync", { + detail: { queue } + }) + ); + } + //-------------------------------------------------------------------------- // // Public Methods diff --git a/packages/calcite-components/src/components/alert/interfaces.ts b/packages/calcite-components/src/components/alert/interfaces.ts index 0ffe0b27966..f3ac1d8bb90 100644 --- a/packages/calcite-components/src/components/alert/interfaces.ts +++ b/packages/calcite-components/src/components/alert/interfaces.ts @@ -1,4 +1,9 @@ export type AlertDuration = "fast" | "medium" | "slow"; + export interface Sync { queue: HTMLCalciteAlertElement[]; } + +export interface Unregister { + alert: HTMLCalciteAlertElement; +} From c2eb43ff3de88aaffb5ec659388c20938df04f07 Mon Sep 17 00:00:00 2001 From: "github-actions[bot]" Date: Wed, 21 Jun 2023 00:21:55 +0000 Subject: [PATCH 14/32] chore: release next --- package-lock.json | 40 +++++++++---------- .../calcite-components-react/CHANGELOG.md | 4 ++ .../calcite-components-react/package.json | 4 +- packages/calcite-components/CHANGELOG.md | 6 +++ packages/calcite-components/package.json | 2 +- 5 files changed, 33 insertions(+), 23 deletions(-) diff --git a/package-lock.json b/package-lock.json index 62bae42b281..6e894057cc1 100644 --- a/package-lock.json +++ b/package-lock.json @@ -2664,16 +2664,16 @@ } }, "node_modules/@floating-ui/core": { - "version": "1.3.0", - "resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.3.0.tgz", - "integrity": "sha512-vX1WVAdPjZg9DkDkC+zEx/tKtnST6/qcNpwcjeBgco3XRNHz5PUA+ivi/yr6G3o0kMR60uKBJcfOdfzOFI7PMQ==" + "version": "1.3.1", + "resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.3.1.tgz", + "integrity": "sha512-Bu+AMaXNjrpjh41znzHqaz3r2Nr8hHuHZT6V2LBKMhyMl0FgKA62PNYbqnfgmzOhoWZj70Zecisbo4H1rotP5g==" }, "node_modules/@floating-ui/dom": { - "version": "1.3.0", - "resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.3.0.tgz", - "integrity": "sha512-qIAwejE3r6NeA107u4ELDKkH8+VtgRKdXqtSPaKflL2S2V+doyN+Wt9s5oHKXPDo4E8TaVXaHT3+6BbagH31xw==", + "version": "1.4.1", + "resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.4.1.tgz", + "integrity": "sha512-loCXUOLzIC3jp50RFOKXZ/kQjjz26ryr/23M+FWG9jrmAv8lRf3DUfC2AiVZ3+K316GOhB08CR+Povwz8e9mDw==", "dependencies": { - "@floating-ui/core": "^1.3.0" + "@floating-ui/core": "^1.3.1" } }, "node_modules/@gar/promisify": { @@ -43876,10 +43876,10 @@ }, "packages/calcite-components": { "name": "@esri/calcite-components", - "version": "1.5.0-next.2", + "version": "1.5.0-next.3", "license": "SEE LICENSE.md", "dependencies": { - "@floating-ui/dom": "1.3.0", + "@floating-ui/dom": "1.4.1", "@stencil/core": "2.22.3", "@types/color": "3.0.3", "color": "4.2.3", @@ -43902,10 +43902,10 @@ }, "packages/calcite-components-react": { "name": "@esri/calcite-components-react", - "version": "1.5.0-next.2", + "version": "1.5.0-next.3", "license": "SEE LICENSE.md", "dependencies": { - "@esri/calcite-components": "^1.5.0-next.2" + "@esri/calcite-components": "^1.5.0-next.3" }, "peerDependencies": { "react": ">=16.7", @@ -45720,7 +45720,7 @@ "requires": { "@esri/calcite-design-tokens": "1.0.0", "@esri/calcite-ui-icons": "3.23.1", - "@floating-ui/dom": "1.3.0", + "@floating-ui/dom": "1.4.1", "@stencil-community/eslint-plugin": "0.5.0", "@stencil/core": "2.22.3", "@stencil/postcss": "2.1.0", @@ -45740,7 +45740,7 @@ "@esri/calcite-components-react": { "version": "file:packages/calcite-components-react", "requires": { - "@esri/calcite-components": "^1.5.0-next.2" + "@esri/calcite-components": "^1.5.0-next.3" } }, "@esri/calcite-design-tokens": { @@ -45766,16 +45766,16 @@ } }, "@floating-ui/core": { - "version": "1.3.0", - "resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.3.0.tgz", - "integrity": "sha512-vX1WVAdPjZg9DkDkC+zEx/tKtnST6/qcNpwcjeBgco3XRNHz5PUA+ivi/yr6G3o0kMR60uKBJcfOdfzOFI7PMQ==" + "version": "1.3.1", + "resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.3.1.tgz", + "integrity": "sha512-Bu+AMaXNjrpjh41znzHqaz3r2Nr8hHuHZT6V2LBKMhyMl0FgKA62PNYbqnfgmzOhoWZj70Zecisbo4H1rotP5g==" }, "@floating-ui/dom": { - "version": "1.3.0", - "resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.3.0.tgz", - "integrity": "sha512-qIAwejE3r6NeA107u4ELDKkH8+VtgRKdXqtSPaKflL2S2V+doyN+Wt9s5oHKXPDo4E8TaVXaHT3+6BbagH31xw==", + "version": "1.4.1", + "resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.4.1.tgz", + "integrity": "sha512-loCXUOLzIC3jp50RFOKXZ/kQjjz26ryr/23M+FWG9jrmAv8lRf3DUfC2AiVZ3+K316GOhB08CR+Povwz8e9mDw==", "requires": { - "@floating-ui/core": "^1.3.0" + "@floating-ui/core": "^1.3.1" } }, "@gar/promisify": { diff --git a/packages/calcite-components-react/CHANGELOG.md b/packages/calcite-components-react/CHANGELOG.md index 7b8ec2e8e4d..750e346706f 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. +## [1.5.0-next.3](https://github.com/Esri/calcite-components/compare/@esri/calcite-components-react@1.5.0-next.2...@esri/calcite-components-react@1.5.0-next.3) (2023-06-21) + +**Note:** Version bump only for package @esri/calcite-components-react + ## [1.5.0-next.2](https://github.com/Esri/calcite-components/compare/@esri/calcite-components-react@1.5.0-next.1...@esri/calcite-components-react@1.5.0-next.2) (2023-06-20) **Note:** Version bump only for package @esri/calcite-components-react diff --git a/packages/calcite-components-react/package.json b/packages/calcite-components-react/package.json index e7726c75c51..a7b1dc2351f 100644 --- a/packages/calcite-components-react/package.json +++ b/packages/calcite-components-react/package.json @@ -1,7 +1,7 @@ { "name": "@esri/calcite-components-react", "sideEffects": false, - "version": "1.5.0-next.2", + "version": "1.5.0-next.3", "description": "A set of React components that wrap calcite components", "license": "SEE LICENSE.md", "scripts": { @@ -17,7 +17,7 @@ "dist/" ], "dependencies": { - "@esri/calcite-components": "^1.5.0-next.2" + "@esri/calcite-components": "^1.5.0-next.3" }, "peerDependencies": { "react": ">=16.7", diff --git a/packages/calcite-components/CHANGELOG.md b/packages/calcite-components/CHANGELOG.md index dbf05cecff0..d17cd8ecbbc 100644 --- a/packages/calcite-components/CHANGELOG.md +++ b/packages/calcite-components/CHANGELOG.md @@ -3,6 +3,12 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +## [1.5.0-next.3](https://github.com/Esri/calcite-components/compare/@esri/calcite-components@1.5.0-next.2...@esri/calcite-components@1.5.0-next.3) (2023-06-21) + +### Bug Fixes + +- **alert:** update alert queue when an alert is removed from the DOM ([#7189](https://github.com/Esri/calcite-components/issues/7189)) ([edd59eb](https://github.com/Esri/calcite-components/commit/edd59eb0bff21aa41fc7e537a2df2dbd2143a15a)), closes [#6616](https://github.com/Esri/calcite-components/issues/6616) + ## [1.5.0-next.2](https://github.com/Esri/calcite-components/compare/@esri/calcite-components@1.5.0-next.1...@esri/calcite-components@1.5.0-next.2) (2023-06-20) ### Bug Fixes diff --git a/packages/calcite-components/package.json b/packages/calcite-components/package.json index 68321893005..b876667cf82 100644 --- a/packages/calcite-components/package.json +++ b/packages/calcite-components/package.json @@ -1,6 +1,6 @@ { "name": "@esri/calcite-components", - "version": "1.5.0-next.2", + "version": "1.5.0-next.3", "description": "Web Components for Esri's Calcite Design System.", "main": "dist/index.cjs.js", "module": "dist/index.js", From dd7ec608779f1a34ad3c77a36b6f8fcf6fd1365a Mon Sep 17 00:00:00 2001 From: Anveshreddy mekala Date: Wed, 21 Jun 2023 10:45:48 -0500 Subject: [PATCH 15/32] fix(radio-button): focuses first focusable radio-button element in group. (#7152) **Related Issue:** #7113 ## Summary This PR will focus the first focusable `calcite-radio-button` when the user `Tab` in to the group. --- .../radio-button/radio-button.e2e.ts | 97 +++++++++++++++++++ .../components/radio-button/radio-button.tsx | 31 +++++- 2 files changed, 125 insertions(+), 3 deletions(-) diff --git a/packages/calcite-components/src/components/radio-button/radio-button.e2e.ts b/packages/calcite-components/src/components/radio-button/radio-button.e2e.ts index 2c6ec4317f9..0b62988f31b 100644 --- a/packages/calcite-components/src/components/radio-button/radio-button.e2e.ts +++ b/packages/calcite-components/src/components/radio-button/radio-button.e2e.ts @@ -11,6 +11,7 @@ import { renders } from "../../tests/commonTests"; import { html } from "../../../support/formatting"; +import { getFocusedElementProp } from "../../tests/utils"; describe("calcite-radio-button", () => { describe("renders", () => { @@ -66,6 +67,102 @@ describe("calcite-radio-button", () => { focusable("calcite-radio-button", { shadowFocusTargetSelector: ".container" }); + + it("focuses first focusable item on Tab when new radio-button is added", async () => { + const page = await newE2EPage(); + await page.setContent(html` +
+ + + Trees + + + + Shrubs + + + + Flowers + + submit +
+ `); + + await page.keyboard.press("Tab"); + await page.waitForChanges(); + expect(await getFocusedElementProp(page, "id")).toBe("shrubs"); + await page.keyboard.press("Tab"); + await page.waitForChanges(); + expect(await getFocusedElementProp(page, "id")).toBe("submit"); + + await page.evaluate(() => { + const firstRadioButton = document.querySelector('calcite-label[id="1"]'); + const newRadioButton = ` + + Plants + `; + firstRadioButton.insertAdjacentHTML("beforebegin", newRadioButton); + }); + + await page.keyboard.press("Tab"); + await page.waitForChanges(); + await page.keyboard.press("Tab"); + await page.waitForChanges(); + expect(await getFocusedElementProp(page, "id")).toBe("plants"); + await page.keyboard.press("Tab"); + await page.waitForChanges(); + expect(await getFocusedElementProp(page, "id")).toBe("submit"); + + const radioButtonElement = await page.find('calcite-radio-button[id="plants"]'); + radioButtonElement.setProperty("disabled", true); + await page.keyboard.press("Tab"); + await page.waitForChanges(); + await page.keyboard.press("Tab"); + await page.waitForChanges(); + expect(await getFocusedElementProp(page, "id")).toBe("shrubs"); + }); + + it("focuses checked item on Tab when new radio-button is added", async () => { + const page = await newE2EPage(); + await page.setContent(html` +
+ + + Trees + + + + Shrubs + + + + Flowers + + submit +
+ `); + + await page.keyboard.press("Tab"); + await page.waitForChanges(); + expect(await getFocusedElementProp(page, "id")).toBe("flowers"); + await page.keyboard.press("Tab"); + expect(await getFocusedElementProp(page, "id")).toBe("submit"); + + await page.evaluate(() => { + const firstRadioButton = document.querySelector('calcite-label[id="1"]'); + const newRadioButton = ` + + Plants + `; + firstRadioButton.insertAdjacentHTML("beforebegin", newRadioButton); + }); + + await page.keyboard.press("Tab"); + await page.waitForChanges(); + await page.keyboard.press("Tab"); + await page.waitForChanges(); + expect(await getFocusedElementProp(page, "id")).toBe("flowers"); + }); }); describe("reflects", () => { diff --git a/packages/calcite-components/src/components/radio-button/radio-button.tsx b/packages/calcite-components/src/components/radio-button/radio-button.tsx index def598595a6..0bd2b514338 100644 --- a/packages/calcite-components/src/components/radio-button/radio-button.tsx +++ b/packages/calcite-components/src/components/radio-button/radio-button.tsx @@ -3,6 +3,7 @@ import { Element, Event, EventEmitter, + forceUpdate, h, Host, Listen, @@ -73,6 +74,11 @@ export class RadioButton /** When `true`, interaction is prevented and the component is displayed with lower opacity. */ @Prop({ reflect: true }) disabled = false; + @Watch("disabled") + disabledChanged(): void { + this.updateTabIndexOfOtherRadioButtonsInGroup(); + } + /** * The focused state of the component. * @@ -94,6 +100,11 @@ export class RadioButton /** When `true`, the component is not displayed and is not focusable or checkable. */ @Prop({ reflect: true }) hidden = false; + @Watch("hidden") + hiddenChanged(): void { + this.updateTabIndexOfOtherRadioButtonsInGroup(); + } + /** * The hovered state of the component. * @@ -184,9 +195,11 @@ export class RadioButton ) as HTMLCalciteRadioButtonElement[]; }; - isDefaultSelectable = (): boolean => { + isFocusable = (): boolean => { const radioButtons = this.queryButtons(); - return !radioButtons.some((radioButton) => radioButton.checked) && radioButtons[0] === this.el; + const firstFocusable = radioButtons.find((radioButton) => !radioButton.disabled); + const checked = radioButtons.find((radioButton) => radioButton.checked); + return firstFocusable === this.el && !checked; }; check = (): void => { @@ -291,11 +304,21 @@ export class RadioButton }); } + private updateTabIndexOfOtherRadioButtonsInGroup(): void { + const radioButtons = this.queryButtons(); + const otherFocusableRadioButtons = radioButtons.filter( + (radioButton) => radioButton.guid !== this.guid && !radioButton.disabled + ); + otherFocusableRadioButtons.forEach((radioButton) => { + forceUpdate(radioButton); + }); + } + private getTabIndex(): number | undefined { if (this.disabled) { return undefined; } - return this.checked || this.isDefaultSelectable() ? 0 : -1; + return this.checked || this.isFocusable() ? 0 : -1; } //-------------------------------------------------------------------------- @@ -446,6 +469,7 @@ export class RadioButton connectInteractive(this); connectLabel(this); connectForm(this); + this.updateTabIndexOfOtherRadioButtonsInGroup(); } componentWillLoad(): void { @@ -464,6 +488,7 @@ export class RadioButton disconnectInteractive(this); disconnectLabel(this); disconnectForm(this); + this.updateTabIndexOfOtherRadioButtonsInGroup(); } componentDidRender(): void { From 47620ba2dad6dfc2b0a64f0960c7f9de53a755ba Mon Sep 17 00:00:00 2001 From: JC Franco Date: Wed, 21 Jun 2023 09:52:08 -0700 Subject: [PATCH 16/32] chore: fix sorting logic for t9nmanifest entries (#7203) **Related Issue:** N/A ## Summary Fixes `t9nmanifest.txt` entry sorting by changing where it looks for the component name in the t9n dir. This broke when the paths were updated to the new monorepo structure. --- packages/calcite-components/support/generateT9nTypes.ts | 5 +++-- t9nmanifest.txt | 4 ++-- 2 files changed, 5 insertions(+), 4 deletions(-) diff --git a/packages/calcite-components/support/generateT9nTypes.ts b/packages/calcite-components/support/generateT9nTypes.ts index 51b414fe7dd..e844d1c5907 100644 --- a/packages/calcite-components/support/generateT9nTypes.ts +++ b/packages/calcite-components/support/generateT9nTypes.ts @@ -64,8 +64,9 @@ import { InputData, jsonInputForTargetLanguage, quicktype } from "quicktype-core const manifestFileContents = paths .sort((pathA, pathB) => { // ensure paths are sorted per component-name as `globby` does not guarantee order (see https://github.com/sindresorhus/globby/issues/131) - const componentAName = pathA.split(manifestFilePathSeparator)[2]; - const componentBName = pathB.split(manifestFilePathSeparator)[2]; + const componentAName = pathA.split(manifestFilePathSeparator).at(-2); + const componentBName = pathB.split(manifestFilePathSeparator).at(-2); + return componentAName.localeCompare(componentBName); }) .join("\n"); diff --git a/t9nmanifest.txt b/t9nmanifest.txt index a5f704b03b9..0fa58306416 100644 --- a/t9nmanifest.txt +++ b/t9nmanifest.txt @@ -2,8 +2,8 @@ packages\calcite-components\src\components\action\assets\action\t9n packages\calcite-components\src\components\action-bar\assets\action-bar\t9n packages\calcite-components\src\components\action-group\assets\action-group\t9n packages\calcite-components\src\components\action-pad\assets\action-pad\t9n -packages\calcite-components\src\components\block\assets\block\t9n packages\calcite-components\src\components\alert\assets\alert\t9n +packages\calcite-components\src\components\block\assets\block\t9n packages\calcite-components\src\components\block-section\assets\block-section\t9n packages\calcite-components\src\components\button\assets\button\t9n packages\calcite-components\src\components\card\assets\card\t9n @@ -26,9 +26,9 @@ packages\calcite-components\src\components\menu\assets\menu\t9n packages\calcite-components\src\components\menu-item\assets\menu-item\t9n packages\calcite-components\src\components\modal\assets\modal\t9n packages\calcite-components\src\components\notice\assets\notice\t9n +packages\calcite-components\src\components\pagination\assets\pagination\t9n packages\calcite-components\src\components\panel\assets\panel\t9n packages\calcite-components\src\components\pick-list-item\assets\pick-list-item\t9n -packages\calcite-components\src\components\pagination\assets\pagination\t9n packages\calcite-components\src\components\popover\assets\popover\t9n packages\calcite-components\src\components\rating\assets\rating\t9n packages\calcite-components\src\components\scrim\assets\scrim\t9n From da048f618a987801d8ab5c284ab0f8c549e70a16 Mon Sep 17 00:00:00 2001 From: Matt Driscoll Date: Wed, 21 Jun 2023 10:47:56 -0700 Subject: [PATCH 17/32] fix(list): update selectedItems property on all item selection changes (#7204) **Related Issue:** #7202 ## Summary - Updates `selectedItems` when an item's selection is toggled. - Fixes current logic which depends on value being `true`. - Adds test coverage --- .../src/components/list-item/list-item.tsx | 6 ++---- .../src/components/list/list.e2e.ts | 12 ++++++++++++ .../calcite-components/src/components/list/list.tsx | 8 +++----- 3 files changed, 17 insertions(+), 9 deletions(-) diff --git a/packages/calcite-components/src/components/list-item/list-item.tsx b/packages/calcite-components/src/components/list-item/list-item.tsx index 8a88d94b3e3..2a640e48c65 100644 --- a/packages/calcite-components/src/components/list-item/list-item.tsx +++ b/packages/calcite-components/src/components/list-item/list-item.tsx @@ -131,10 +131,8 @@ export class ListItem @Prop({ reflect: true, mutable: true }) selected = false; @Watch("selected") - handleSelectedChange(value: boolean): void { - if (value) { - this.calciteInternalListItemSelect.emit(); - } + handleSelectedChange(): void { + this.calciteInternalListItemSelect.emit(); } /** diff --git a/packages/calcite-components/src/components/list/list.e2e.ts b/packages/calcite-components/src/components/list/list.e2e.ts index 5d4a14b541a..c05574f4285 100755 --- a/packages/calcite-components/src/components/list/list.e2e.ts +++ b/packages/calcite-components/src/components/list/list.e2e.ts @@ -328,5 +328,17 @@ describe("calcite-list", () => { await calciteListChangeEvent2; expect(await listItemOne.getProperty("selected")).toBe(false); expect(await list.getProperty("selectedItems")).toHaveLength(0); + + listItemOne.setProperty("selected", true); + await page.waitForChanges(); + await page.waitForTimeout(listDebounceTimeout); + expect(await listItemOne.getProperty("selected")).toBe(true); + expect(await list.getProperty("selectedItems")).toHaveLength(1); + + listItemOne.setProperty("selected", false); + await page.waitForChanges(); + await page.waitForTimeout(listDebounceTimeout); + expect(await listItemOne.getProperty("selected")).toBe(false); + expect(await list.getProperty("selectedItems")).toHaveLength(0); }); }); diff --git a/packages/calcite-components/src/components/list/list.tsx b/packages/calcite-components/src/components/list/list.tsx index fca1e5dae50..41cc08d8a40 100755 --- a/packages/calcite-components/src/components/list/list.tsx +++ b/packages/calcite-components/src/components/list/list.tsx @@ -185,11 +185,9 @@ export class List implements InteractiveComponent, LoadableComponent { const target = event.target as HTMLCalciteListItemElement; const { listItems, selectionMode } = this; - listItems.forEach((listItem) => { - if (selectionMode === "single" || selectionMode === "single-persist") { - listItem.selected = listItem === target; - } - }); + if (target.selected && (selectionMode === "single" || selectionMode === "single-persist")) { + listItems.forEach((listItem) => (listItem.selected = listItem === target)); + } this.updateSelectedItems(); } From 2c662dc40731cf0e0c3f253e716fdb915ab7c67e Mon Sep 17 00:00:00 2001 From: "github-actions[bot]" Date: Wed, 21 Jun 2023 18:06:28 +0000 Subject: [PATCH 18/32] chore: release next --- package-lock.json | 8 ++++---- 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 | 2 +- 5 files changed, 18 insertions(+), 7 deletions(-) diff --git a/package-lock.json b/package-lock.json index 6e894057cc1..d021bf3dfad 100644 --- a/package-lock.json +++ b/package-lock.json @@ -43876,7 +43876,7 @@ }, "packages/calcite-components": { "name": "@esri/calcite-components", - "version": "1.5.0-next.3", + "version": "1.5.0-next.4", "license": "SEE LICENSE.md", "dependencies": { "@floating-ui/dom": "1.4.1", @@ -43902,10 +43902,10 @@ }, "packages/calcite-components-react": { "name": "@esri/calcite-components-react", - "version": "1.5.0-next.3", + "version": "1.5.0-next.4", "license": "SEE LICENSE.md", "dependencies": { - "@esri/calcite-components": "^1.5.0-next.3" + "@esri/calcite-components": "^1.5.0-next.4" }, "peerDependencies": { "react": ">=16.7", @@ -45740,7 +45740,7 @@ "@esri/calcite-components-react": { "version": "file:packages/calcite-components-react", "requires": { - "@esri/calcite-components": "^1.5.0-next.3" + "@esri/calcite-components": "^1.5.0-next.4" } }, "@esri/calcite-design-tokens": { diff --git a/packages/calcite-components-react/CHANGELOG.md b/packages/calcite-components-react/CHANGELOG.md index 750e346706f..b4ddd84a182 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. +## [1.5.0-next.4](https://github.com/Esri/calcite-components/compare/@esri/calcite-components-react@1.5.0-next.3...@esri/calcite-components-react@1.5.0-next.4) (2023-06-21) + +**Note:** Version bump only for package @esri/calcite-components-react + ## [1.5.0-next.3](https://github.com/Esri/calcite-components/compare/@esri/calcite-components-react@1.5.0-next.2...@esri/calcite-components-react@1.5.0-next.3) (2023-06-21) **Note:** Version bump only for package @esri/calcite-components-react diff --git a/packages/calcite-components-react/package.json b/packages/calcite-components-react/package.json index a7b1dc2351f..17e0281590b 100644 --- a/packages/calcite-components-react/package.json +++ b/packages/calcite-components-react/package.json @@ -1,7 +1,7 @@ { "name": "@esri/calcite-components-react", "sideEffects": false, - "version": "1.5.0-next.3", + "version": "1.5.0-next.4", "description": "A set of React components that wrap calcite components", "license": "SEE LICENSE.md", "scripts": { @@ -17,7 +17,7 @@ "dist/" ], "dependencies": { - "@esri/calcite-components": "^1.5.0-next.3" + "@esri/calcite-components": "^1.5.0-next.4" }, "peerDependencies": { "react": ">=16.7", diff --git a/packages/calcite-components/CHANGELOG.md b/packages/calcite-components/CHANGELOG.md index d17cd8ecbbc..62991258714 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. +## [1.5.0-next.4](https://github.com/Esri/calcite-components/compare/@esri/calcite-components@1.5.0-next.3...@esri/calcite-components@1.5.0-next.4) (2023-06-21) + +### Bug Fixes + +- **list:** update selectedItems property on all item selection changes ([#7204](https://github.com/Esri/calcite-components/issues/7204)) ([da048f6](https://github.com/Esri/calcite-components/commit/da048f618a987801d8ab5c284ab0f8c549e70a16)), closes [#7202](https://github.com/Esri/calcite-components/issues/7202) +- **radio-button:** focuses first focusable radio-button element in group. ([#7152](https://github.com/Esri/calcite-components/issues/7152)) ([dd7ec60](https://github.com/Esri/calcite-components/commit/dd7ec608779f1a34ad3c77a36b6f8fcf6fd1365a)), closes [#7113](https://github.com/Esri/calcite-components/issues/7113) + ## [1.5.0-next.3](https://github.com/Esri/calcite-components/compare/@esri/calcite-components@1.5.0-next.2...@esri/calcite-components@1.5.0-next.3) (2023-06-21) ### Bug Fixes diff --git a/packages/calcite-components/package.json b/packages/calcite-components/package.json index b876667cf82..a98a8a2688a 100644 --- a/packages/calcite-components/package.json +++ b/packages/calcite-components/package.json @@ -1,6 +1,6 @@ { "name": "@esri/calcite-components", - "version": "1.5.0-next.3", + "version": "1.5.0-next.4", "description": "Web Components for Esri's Calcite Design System.", "main": "dist/index.cjs.js", "module": "dist/index.js", From 6777b06c5dbad5441ed651d676cd9562d79e6986 Mon Sep 17 00:00:00 2001 From: Kitty Hurley Date: Wed, 21 Jun 2023 15:42:06 -0500 Subject: [PATCH 19/32] ci: set design complete label conditionals (#7206) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit **Related Issue:** n/a ## Summary Updates the design complete workflow for conditions, in the event labels are not present. In this case, will continue to run if the `design` and/or `1 - assigned` label(s) are not included in the issue. 🤖 --- .github/workflows/design-complete.yml | 32 ++++++++++++++++++--------- 1 file changed, 22 insertions(+), 10 deletions(-) diff --git a/.github/workflows/design-complete.yml b/.github/workflows/design-complete.yml index 2afe530a666..a700ec13c3d 100644 --- a/.github/workflows/design-complete.yml +++ b/.github/workflows/design-complete.yml @@ -40,17 +40,29 @@ jobs: /* Modify labels */ - // Remove "Design" label - await github.rest.issues.removeLabel({ - ...issueProps, - name: "design" - }); + /* Tries to remove labels */ + /* If the label is not associated with the issue, + the error is logged and the script will continue. */ - // Remove "1 - assigned" label - await github.rest.issues.removeLabel({ - ...issueProps, - name: "1 - assigned" - }); + // Tries to remove "Design" label + try { + await github.rest.issues.removeLabel({ + ...issueProps, + name: "design" + }); + } catch(err) { + console.log("The 'design' label is not associated with the issue", err); + } + + // Try to remove "1 - assigned" label + try { + await github.rest.issues.removeLabel({ + ...issueProps, + name: "1 - assigned" + }); + } catch(err) { + console.log("The '1 - assigned' label is not associated with the issue", err); + } // Add labels await github.rest.issues.addLabels({ From abc0b3b5961284a08e1479c61f59028ad725f94f Mon Sep 17 00:00:00 2001 From: Eliza Khachatryan Date: Thu, 22 Jun 2023 09:25:01 -0700 Subject: [PATCH 20/32] test: set up `disabled` helper to run a test per use case (#7089) --- .../src/components/action/action.e2e.ts | 4 +- .../src/components/block/block.e2e.ts | 5 +- .../src/components/button/button.e2e.ts | 4 +- .../src/components/checkbox/checkbox.e2e.ts | 4 +- .../components/chip-group/chip-group.e2e.ts | 5 +- .../src/components/chip/chip.e2e.ts | 4 +- .../color-picker/color-picker.e2e.ts | 4 +- .../combobox-item/combobox-item.e2e.ts | 4 +- .../src/components/combobox/combobox.e2e.ts | 4 +- .../date-picker-day/date-picker-day.e2e.ts | 25 +- .../src/components/dropdown/dropdown.e2e.ts | 4 +- .../src/components/fab/fab.e2e.ts | 4 +- .../src/components/filter/filter.e2e.ts | 4 +- .../src/components/flow-item/flow-item.e2e.ts | 4 +- .../inline-editable/inline-editable.e2e.ts | 5 +- .../input-date-picker.e2e.ts | 4 +- .../input-number/input-number.e2e.ts | 4 +- .../components/input-text/input-text.e2e.ts | 4 +- .../input-time-picker.e2e.ts | 4 +- .../src/components/input/input.e2e.ts | 4 +- .../src/components/link/link.e2e.ts | 4 +- .../list-item-group/list-item-group.e2e.ts | 4 +- .../src/components/list-item/list-item.e2e.ts | 4 +- .../src/components/list/list.e2e.ts | 5 +- .../src/components/panel/panel.e2e.ts | 4 +- .../pick-list-item/pick-list-item.e2e.ts | 4 +- .../components/pick-list/shared-list-tests.ts | 6 +- .../radio-button/radio-button.e2e.ts | 4 +- .../src/components/rating/rating.e2e.ts | 4 +- .../segmented-control.e2e.ts | 5 +- .../src/components/select/select.e2e.ts | 4 +- .../src/components/slider/slider.e2e.ts | 4 +- .../sortable-list/sortable-list.e2e.ts | 5 +- .../split-button/split-button.e2e.ts | 4 +- .../stepper-item/stepper-item.e2e.ts | 4 +- .../src/components/switch/switch.e2e.ts | 4 +- .../src/components/tab-title/tab-title.e2e.ts | 4 +- .../src/components/text-area/text-area.e2e.ts | 4 +- .../tile-select-group.e2e.ts | 5 +- .../components/tile-select/tile-select.e2e.ts | 5 +- .../src/components/tile/tile.e2e.ts | 4 +- .../src/components/tree-item/tree-item.e2e.ts | 21 +- .../value-list-item/value-list-item.e2e.ts | 4 +- .../src/tests/commonTests.ts | 287 ++++++++++-------- 44 files changed, 307 insertions(+), 200 deletions(-) diff --git a/packages/calcite-components/src/components/action/action.e2e.ts b/packages/calcite-components/src/components/action/action.e2e.ts index 902614c8e90..41266274735 100755 --- a/packages/calcite-components/src/components/action/action.e2e.ts +++ b/packages/calcite-components/src/components/action/action.e2e.ts @@ -48,7 +48,9 @@ describe("calcite-action", () => { hidden("calcite-action"); }); - it("can be disabled", () => disabled("calcite-action")); + describe("disabled", () => { + disabled("calcite-action"); + }); describe("slots", () => { slots("calcite-action", SLOTS); diff --git a/packages/calcite-components/src/components/block/block.e2e.ts b/packages/calcite-components/src/components/block/block.e2e.ts index dd4934e0b42..1d0b9dc8954 100644 --- a/packages/calcite-components/src/components/block/block.e2e.ts +++ b/packages/calcite-components/src/components/block/block.e2e.ts @@ -43,8 +43,9 @@ describe("calcite-block", () => { `); }); - it("can be disabled", () => - disabled(html``)); + describe("disabled", () => { + disabled(html``); + }); it("has a loading state", async () => { const page = await newE2EPage({ diff --git a/packages/calcite-components/src/components/button/button.e2e.ts b/packages/calcite-components/src/components/button/button.e2e.ts index d2f99543171..ddaf316512b 100644 --- a/packages/calcite-components/src/components/button/button.e2e.ts +++ b/packages/calcite-components/src/components/button/button.e2e.ts @@ -139,7 +139,9 @@ describe("calcite-button", () => { labelable("calcite-button"); }); - it("can be disabled", () => disabled("calcite-button")); + describe("disabled", () => { + disabled("calcite-button"); + }); it("should update childElType when href changes", async () => { const page = await newE2EPage({ html: `Continue` }); diff --git a/packages/calcite-components/src/components/checkbox/checkbox.e2e.ts b/packages/calcite-components/src/components/checkbox/checkbox.e2e.ts index c4b4a3f3312..6490f4c0556 100644 --- a/packages/calcite-components/src/components/checkbox/checkbox.e2e.ts +++ b/packages/calcite-components/src/components/checkbox/checkbox.e2e.ts @@ -32,7 +32,9 @@ describe("calcite-checkbox", () => { formAssociated("calcite-checkbox", { testValue: true, inputType: "checkbox" }); }); - it("can be disabled", () => disabled("calcite-checkbox")); + describe("disabled", () => { + disabled("calcite-checkbox"); + }); it("renders with correct default attributes", async () => { const page = await newE2EPage(); diff --git a/packages/calcite-components/src/components/chip-group/chip-group.e2e.ts b/packages/calcite-components/src/components/chip-group/chip-group.e2e.ts index 8738b09b00b..f4ec65eec7d 100644 --- a/packages/calcite-components/src/components/chip-group/chip-group.e2e.ts +++ b/packages/calcite-components/src/components/chip-group/chip-group.e2e.ts @@ -15,10 +15,11 @@ describe("calcite-chip-group", () => { hidden("calcite-chip-group"); }); - it("can be disabled", () => + describe("disabled", () => { disabled("", { focusTarget: "child" - })); + }); + }); describe("is accessible in selection mode none (default)", () => { accessible( diff --git a/packages/calcite-components/src/components/chip/chip.e2e.ts b/packages/calcite-components/src/components/chip/chip.e2e.ts index ee6c5c4f047..0bea3df3d3b 100644 --- a/packages/calcite-components/src/components/chip/chip.e2e.ts +++ b/packages/calcite-components/src/components/chip/chip.e2e.ts @@ -23,7 +23,9 @@ describe("calcite-chip", () => { focusable("doritos"); }); - it("can be disabled when interactive", () => disabled("doritos")); + describe("can be disabled when interactive", () => { + disabled("doritos"); + }); it("should not emit event after the chip is clicked if interactive if not set", async () => { const page = await newE2EPage(); diff --git a/packages/calcite-components/src/components/color-picker/color-picker.e2e.ts b/packages/calcite-components/src/components/color-picker/color-picker.e2e.ts index d046834c932..cf722467fd7 100644 --- a/packages/calcite-components/src/components/color-picker/color-picker.e2e.ts +++ b/packages/calcite-components/src/components/color-picker/color-picker.e2e.ts @@ -109,7 +109,9 @@ describe("calcite-color-picker", () => { }); // #408047 is a color in the middle of the color field - it("can be disabled", () => disabled("")); + describe("disabled", () => { + disabled(""); + }); describe("translation support", () => { t9n(""); diff --git a/packages/calcite-components/src/components/combobox-item/combobox-item.e2e.ts b/packages/calcite-components/src/components/combobox-item/combobox-item.e2e.ts index ce5b722cc8c..6402ca27746 100644 --- a/packages/calcite-components/src/components/combobox-item/combobox-item.e2e.ts +++ b/packages/calcite-components/src/components/combobox-item/combobox-item.e2e.ts @@ -13,5 +13,7 @@ describe("calcite-combobox-item", () => { slots("calcite-combobox-item", [], true); }); - it("can be disabled", () => disabled("calcite-combobox-item", { focusTarget: "none" })); + describe("disabled", () => { + disabled("calcite-combobox-item", { focusTarget: "none" }); + }); }); diff --git a/packages/calcite-components/src/components/combobox/combobox.e2e.ts b/packages/calcite-components/src/components/combobox/combobox.e2e.ts index ae7c5c293b7..60471a02faa 100644 --- a/packages/calcite-components/src/components/combobox/combobox.e2e.ts +++ b/packages/calcite-components/src/components/combobox/combobox.e2e.ts @@ -131,7 +131,9 @@ describe("calcite-combobox", () => { labelable("calcite-combobox"); }); - it("can be disabled", () => disabled("calcite-combobox")); + describe("disabled", () => { + disabled("calcite-combobox"); + }); it("filtering does not match property with value of undefined", async () => { const page = await newE2EPage({ diff --git a/packages/calcite-components/src/components/date-picker-day/date-picker-day.e2e.ts b/packages/calcite-components/src/components/date-picker-day/date-picker-day.e2e.ts index 4cde755b3b8..ff7f711402f 100644 --- a/packages/calcite-components/src/components/date-picker-day/date-picker-day.e2e.ts +++ b/packages/calcite-components/src/components/date-picker-day/date-picker-day.e2e.ts @@ -1,21 +1,26 @@ +import { E2EPage } from "@stencil/core/testing"; import { disabled } from "../../tests/commonTests"; import { newProgrammaticE2EPage } from "../../tests/utils"; import { DATE_PICKER_FORMAT_OPTIONS } from "../date-picker/resources"; import { Serializable } from "puppeteer"; describe("calcite-date-picker-day", () => { - it("can be disabled", async () => { - const page = await newProgrammaticE2EPage(); - await page.evaluate(() => { - const dateEl = document.createElement("calcite-date-picker-day") as HTMLCalciteDatePickerDayElement; - dateEl.active = true; - dateEl.dateTimeFormat = new Intl.DateTimeFormat("en"); // options not needed as this is only needed for rendering - dateEl.day = 3; - document.body.append(dateEl); + describe("disabled within a tree", () => { + let page: E2EPage; + + beforeEach(async () => { + page = await newProgrammaticE2EPage(); + await page.evaluate(() => { + const dateEl = document.createElement("calcite-date-picker-day") as HTMLCalciteDatePickerDayElement; + dateEl.active = true; + dateEl.dateTimeFormat = new Intl.DateTimeFormat("en"); // options not needed as this is only needed for rendering + dateEl.day = 3; + document.body.append(dateEl); + }); + await page.waitForChanges(); }); - await page.waitForChanges(); - return disabled({ tag: "calcite-date-picker-day", page }); + disabled(() => ({ tag: "calcite-date-picker-day", page })); }); describe("accessibility", () => { diff --git a/packages/calcite-components/src/components/dropdown/dropdown.e2e.ts b/packages/calcite-components/src/components/dropdown/dropdown.e2e.ts index 6bb6174ddf0..a0f123aa7e2 100644 --- a/packages/calcite-components/src/components/dropdown/dropdown.e2e.ts +++ b/packages/calcite-components/src/components/dropdown/dropdown.e2e.ts @@ -42,7 +42,9 @@ describe("calcite-dropdown", () => { ]); }); - it("can be disabled", () => disabled(simpleDropdownHTML, { focusTarget: "child" })); + describe("disabled", () => { + disabled(simpleDropdownHTML, { focusTarget: "child" }); + }); interface SelectedItemsAssertionOptions { /** diff --git a/packages/calcite-components/src/components/fab/fab.e2e.ts b/packages/calcite-components/src/components/fab/fab.e2e.ts index 8ae872440ae..d632a981033 100755 --- a/packages/calcite-components/src/components/fab/fab.e2e.ts +++ b/packages/calcite-components/src/components/fab/fab.e2e.ts @@ -24,7 +24,9 @@ describe("calcite-fab", () => { ]); }); - it("can be disabled", () => disabled("calcite-fab")); + describe("disabled", () => { + disabled("calcite-fab"); + }); it(`should set all internal calcite-button types to 'button'`, async () => { const page = await newE2EPage({ diff --git a/packages/calcite-components/src/components/filter/filter.e2e.ts b/packages/calcite-components/src/components/filter/filter.e2e.ts index aec61bf27f3..3b728e43050 100644 --- a/packages/calcite-components/src/components/filter/filter.e2e.ts +++ b/packages/calcite-components/src/components/filter/filter.e2e.ts @@ -20,7 +20,9 @@ describe("calcite-filter", () => { focusable("calcite-filter"); }); - it("can be disabled", () => disabled("calcite-filter")); + describe("disabled", () => { + disabled("calcite-filter"); + }); describe("reflects", () => { reflects("calcite-filter", [ diff --git a/packages/calcite-components/src/components/flow-item/flow-item.e2e.ts b/packages/calcite-components/src/components/flow-item/flow-item.e2e.ts index e188802b69e..9a69c9c3461 100644 --- a/packages/calcite-components/src/components/flow-item/flow-item.e2e.ts +++ b/packages/calcite-components/src/components/flow-item/flow-item.e2e.ts @@ -45,7 +45,9 @@ describe("calcite-flow-item", () => { slots("calcite-flow-item", SLOTS); }); - it("can be disabled", () => disabled(`scrolling content`)); + describe("disabled", () => { + disabled(`scrolling content`); + }); describe("accessible", () => { accessible(` diff --git a/packages/calcite-components/src/components/inline-editable/inline-editable.e2e.ts b/packages/calcite-components/src/components/inline-editable/inline-editable.e2e.ts index 77ba9764afb..b18807ecbc5 100644 --- a/packages/calcite-components/src/components/inline-editable/inline-editable.e2e.ts +++ b/packages/calcite-components/src/components/inline-editable/inline-editable.e2e.ts @@ -19,7 +19,7 @@ describe("calcite-inline-editable", () => { hidden("calcite-inline-editable"); }); - it("can be disabled", () => + describe("disabled", () => { disabled( html` @@ -27,7 +27,8 @@ describe("calcite-inline-editable", () => { `, { focusTarget: { tab: "calcite-inline-editable", click: "calcite-input" } } - )); + ); + }); describe("rendering permutations", () => { let page: E2EPage; diff --git a/packages/calcite-components/src/components/input-date-picker/input-date-picker.e2e.ts b/packages/calcite-components/src/components/input-date-picker/input-date-picker.e2e.ts index 5c721ab68ee..a8df2a9f218 100644 --- a/packages/calcite-components/src/components/input-date-picker/input-date-picker.e2e.ts +++ b/packages/calcite-components/src/components/input-date-picker/input-date-picker.e2e.ts @@ -51,7 +51,9 @@ describe("calcite-input-date-picker", () => { labelable("calcite-input-date-picker"); }); - it("can be disabled", () => disabled("calcite-input-date-picker")); + describe("disabled", () => { + disabled("calcite-input-date-picker"); + }); it.skip("supports t9n", () => t9n("calcite-input-date-picker")); diff --git a/packages/calcite-components/src/components/input-number/input-number.e2e.ts b/packages/calcite-components/src/components/input-number/input-number.e2e.ts index 74b66aac61d..8a39db66f00 100644 --- a/packages/calcite-components/src/components/input-number/input-number.e2e.ts +++ b/packages/calcite-components/src/components/input-number/input-number.e2e.ts @@ -87,7 +87,9 @@ describe("calcite-input-number", () => { ]); }); - it("can be disabled", () => disabled("calcite-input-number")); + describe("disabled", () => { + disabled("calcite-input-number"); + }); it("when disabled, spinner buttons should not be interactive/should not nudge the number", async () => { const page = await newE2EPage(); diff --git a/packages/calcite-components/src/components/input-text/input-text.e2e.ts b/packages/calcite-components/src/components/input-text/input-text.e2e.ts index 7222cbfa91c..7bd52a2b49e 100644 --- a/packages/calcite-components/src/components/input-text/input-text.e2e.ts +++ b/packages/calcite-components/src/components/input-text/input-text.e2e.ts @@ -64,7 +64,9 @@ describe("calcite-input-text", () => { ]); }); - it("can be disabled", () => disabled("calcite-input-text")); + describe("disabled", () => { + disabled("calcite-input-text"); + }); it("renders an icon when explicit Calcite UI is requested, and is a type without a default icon", async () => { const page = await newE2EPage(); diff --git a/packages/calcite-components/src/components/input-time-picker/input-time-picker.e2e.ts b/packages/calcite-components/src/components/input-time-picker/input-time-picker.e2e.ts index 405aa452a00..dca309635f3 100644 --- a/packages/calcite-components/src/components/input-time-picker/input-time-picker.e2e.ts +++ b/packages/calcite-components/src/components/input-time-picker/input-time-picker.e2e.ts @@ -86,7 +86,9 @@ describe("calcite-input-time-picker", () => { }); }); - it("can be disabled", () => disabled("calcite-input-time-picker")); + describe("disabled", () => { + disabled("calcite-input-time-picker"); + }); it("when set to readOnly, element still focusable but won't display the controls or allow for changing the value", async () => { const page = await newE2EPage(); diff --git a/packages/calcite-components/src/components/input/input.e2e.ts b/packages/calcite-components/src/components/input/input.e2e.ts index 0d488c59625..b7a67aaa485 100644 --- a/packages/calcite-components/src/components/input/input.e2e.ts +++ b/packages/calcite-components/src/components/input/input.e2e.ts @@ -95,7 +95,9 @@ describe("calcite-input", () => { ]); }); - it("can be disabled", () => disabled("calcite-input")); + describe("disabled", () => { + disabled("calcite-input"); + }); it("spinner buttons on disabled number input should not be interactive/should not nudge the number", async () => { const page = await newE2EPage(); diff --git a/packages/calcite-components/src/components/link/link.e2e.ts b/packages/calcite-components/src/components/link/link.e2e.ts index df1bf07e3e8..1a5577f70d3 100644 --- a/packages/calcite-components/src/components/link/link.e2e.ts +++ b/packages/calcite-components/src/components/link/link.e2e.ts @@ -25,7 +25,9 @@ describe("calcite-link", () => { accessible("Go"); }); - it("can be disabled", () => disabled(`link`)); + describe("disabled", () => { + disabled(`link`); + }); it("sets download attribute on internal anchor", async () => { const page = await newE2EPage(); diff --git a/packages/calcite-components/src/components/list-item-group/list-item-group.e2e.ts b/packages/calcite-components/src/components/list-item-group/list-item-group.e2e.ts index 4aa916a33b3..ea54ae52403 100644 --- a/packages/calcite-components/src/components/list-item-group/list-item-group.e2e.ts +++ b/packages/calcite-components/src/components/list-item-group/list-item-group.e2e.ts @@ -9,7 +9,9 @@ describe("calcite-list-item-group", () => { hidden("calcite-list-item-group"); }); - it("can be disabled", () => disabled("calcite-list-item-group", { focusTarget: "none" })); + describe("disabled", () => { + disabled("calcite-list-item-group", { focusTarget: "none" }); + }); describe("defaults", () => { defaults("calcite-list-item-group", [ diff --git a/packages/calcite-components/src/components/list-item/list-item.e2e.ts b/packages/calcite-components/src/components/list-item/list-item.e2e.ts index db78530ddae..3f4561d505e 100755 --- a/packages/calcite-components/src/components/list-item/list-item.e2e.ts +++ b/packages/calcite-components/src/components/list-item/list-item.e2e.ts @@ -50,7 +50,9 @@ describe("calcite-list-item", () => { slots("calcite-list-item", SLOTS); }); - it("can be disabled", () => disabled(``)); + describe("disabled", () => { + disabled(``); + }); it("renders content node when label is provided", async () => { const page = await newE2EPage({ html: `` }); diff --git a/packages/calcite-components/src/components/list/list.e2e.ts b/packages/calcite-components/src/components/list/list.e2e.ts index c05574f4285..09889c18a01 100755 --- a/packages/calcite-components/src/components/list/list.e2e.ts +++ b/packages/calcite-components/src/components/list/list.e2e.ts @@ -96,13 +96,14 @@ describe("calcite-list", () => { `); }); - it("can be disabled", () => + describe("disabled", () => { disabled( html` `, { focusTarget: "child" } - )); + ); + }); it.skip("navigating items after filtering", async () => { const page = await newE2EPage({ diff --git a/packages/calcite-components/src/components/panel/panel.e2e.ts b/packages/calcite-components/src/components/panel/panel.e2e.ts index 6ede6820603..bd978bb66ce 100644 --- a/packages/calcite-components/src/components/panel/panel.e2e.ts +++ b/packages/calcite-components/src/components/panel/panel.e2e.ts @@ -38,7 +38,9 @@ describe("calcite-panel", () => { slots("calcite-panel", SLOTS); }); - it("can be disabled", () => disabled(`scrolling content`)); + describe("disabled", () => { + disabled(`scrolling content`); + }); describe("translation support", () => { t9n("calcite-panel"); diff --git a/packages/calcite-components/src/components/pick-list-item/pick-list-item.e2e.ts b/packages/calcite-components/src/components/pick-list-item/pick-list-item.e2e.ts index 47953e9e91d..e167c9f70de 100644 --- a/packages/calcite-components/src/components/pick-list-item/pick-list-item.e2e.ts +++ b/packages/calcite-components/src/components/pick-list-item/pick-list-item.e2e.ts @@ -37,7 +37,9 @@ describe("calcite-pick-list-item", () => { slots("calcite-pick-list-item", SLOTS); }); - it("can be disabled", async () => disabled("calcite-pick-list-item")); + describe("disabled", () => { + disabled("calcite-pick-list-item"); + }); describe("translation support", () => { t9n("calcite-pick-list-item"); diff --git a/packages/calcite-components/src/components/pick-list/shared-list-tests.ts b/packages/calcite-components/src/components/pick-list/shared-list-tests.ts index df823dc3097..015a76bdf73 100644 --- a/packages/calcite-components/src/components/pick-list/shared-list-tests.ts +++ b/packages/calcite-components/src/components/pick-list/shared-list-tests.ts @@ -626,8 +626,9 @@ export function focusing(listType: ListType): void { }); } +/* eslint-disable-next-line jest/no-export -- util functions are now imported to be used as `it` blocks within `describe` instead of assertions within `it` blocks */ export function disabling(listType: ListType): void { - it("can be disabled", () => + describe("disabled", () => { disabled( html` @@ -637,5 +638,6 @@ export function disabling(listType: ListType): void { { focusTarget: "child" } - )); + ); + }); } diff --git a/packages/calcite-components/src/components/radio-button/radio-button.e2e.ts b/packages/calcite-components/src/components/radio-button/radio-button.e2e.ts index 0b62988f31b..912cc02b89b 100644 --- a/packages/calcite-components/src/components/radio-button/radio-button.e2e.ts +++ b/packages/calcite-components/src/components/radio-button/radio-button.e2e.ts @@ -43,7 +43,9 @@ describe("calcite-radio-button", () => { }); }); - it("can be disabled", () => disabled("calcite-radio-button")); + describe("disabled", () => { + disabled("calcite-radio-button"); + }); it("focusing skips over hidden radio-buttons", async () => { const page = await newE2EPage(); diff --git a/packages/calcite-components/src/components/rating/rating.e2e.ts b/packages/calcite-components/src/components/rating/rating.e2e.ts index c6508350b65..953f8b26ded 100644 --- a/packages/calcite-components/src/components/rating/rating.e2e.ts +++ b/packages/calcite-components/src/components/rating/rating.e2e.ts @@ -28,7 +28,9 @@ describe("calcite-rating", () => { labelable("calcite-rating"); }); - it("can be disabled", () => disabled("")); + describe("disabled", () => { + disabled(""); + }); describe("translation support", () => { t9n("calcite-rating"); diff --git a/packages/calcite-components/src/components/segmented-control/segmented-control.e2e.ts b/packages/calcite-components/src/components/segmented-control/segmented-control.e2e.ts index 7b755e62caf..a8ff7356ef5 100644 --- a/packages/calcite-components/src/components/segmented-control/segmented-control.e2e.ts +++ b/packages/calcite-components/src/components/segmented-control/segmented-control.e2e.ts @@ -22,7 +22,7 @@ describe("calcite-segmented-control", () => { ); }); - it("can be disabled", () => + describe("disabled", () => { disabled( html` @@ -30,7 +30,8 @@ describe("calcite-segmented-control", () => { `, { focusTarget: "child" } - )); + ); + }); it("sets value from selected item", async () => { const page = await newE2EPage(); diff --git a/packages/calcite-components/src/components/select/select.e2e.ts b/packages/calcite-components/src/components/select/select.e2e.ts index 2afd6a0983d..76fae872e34 100644 --- a/packages/calcite-components/src/components/select/select.e2e.ts +++ b/packages/calcite-components/src/components/select/select.e2e.ts @@ -63,7 +63,9 @@ describe("calcite-select", () => { labelable("calcite-select"); }); - it("can be disabled", () => disabled("calcite-select")); + describe("disabled", () => { + disabled("calcite-select"); + }); describe("flat options", () => { it("allows selecting items", async () => { diff --git a/packages/calcite-components/src/components/slider/slider.e2e.ts b/packages/calcite-components/src/components/slider/slider.e2e.ts index 7e8ba27701c..ed8733a1bbc 100644 --- a/packages/calcite-components/src/components/slider/slider.e2e.ts +++ b/packages/calcite-components/src/components/slider/slider.e2e.ts @@ -64,7 +64,9 @@ describe("calcite-slider", () => { labelable("calcite-slider"); }); - it("can be disabled", () => disabled("calcite-slider")); + describe("disabled", () => { + disabled("calcite-slider"); + }); it("sets aria attributes properly for single value", async () => { const page = await newE2EPage(); diff --git a/packages/calcite-components/src/components/sortable-list/sortable-list.e2e.ts b/packages/calcite-components/src/components/sortable-list/sortable-list.e2e.ts index da8767de49d..18e6b1a5806 100644 --- a/packages/calcite-components/src/components/sortable-list/sortable-list.e2e.ts +++ b/packages/calcite-components/src/components/sortable-list/sortable-list.e2e.ts @@ -16,7 +16,7 @@ describe("calcite-sortable-list", () => { accessible(``); }); - it("can be disabled", () => + describe("disabled", () => { disabled( html`
1
@@ -24,7 +24,8 @@ describe("calcite-sortable-list", () => {
3
`, { focusTarget: "child" } - )); + ); + }); const worksUsingMouse = async (page: E2EPage): Promise => { await dragAndDrop(page, `#one calcite-handle`, `#two calcite-handle`); diff --git a/packages/calcite-components/src/components/split-button/split-button.e2e.ts b/packages/calcite-components/src/components/split-button/split-button.e2e.ts index 1b7ea592b96..c0d04674a86 100644 --- a/packages/calcite-components/src/components/split-button/split-button.e2e.ts +++ b/packages/calcite-components/src/components/split-button/split-button.e2e.ts @@ -72,7 +72,9 @@ describe("calcite-split-button", () => { `); }); - it("can be disabled", () => disabled("calcite-split-button")); + describe("disabled", () => { + disabled("calcite-split-button"); + }); it("renders default props when none are provided", async () => { const page = await newE2EPage(); diff --git a/packages/calcite-components/src/components/stepper-item/stepper-item.e2e.ts b/packages/calcite-components/src/components/stepper-item/stepper-item.e2e.ts index eae8648d657..21241c2116d 100644 --- a/packages/calcite-components/src/components/stepper-item/stepper-item.e2e.ts +++ b/packages/calcite-components/src/components/stepper-item/stepper-item.e2e.ts @@ -9,5 +9,7 @@ describe("calcite-stepper-item", () => { hidden("calcite-stepper-item"); }); - it("can be disabled", () => disabled("calcite-stepper-item")); + describe("disabled", () => { + disabled("calcite-stepper-item"); + }); }); diff --git a/packages/calcite-components/src/components/switch/switch.e2e.ts b/packages/calcite-components/src/components/switch/switch.e2e.ts index c531fde612d..3d764bb6d1b 100644 --- a/packages/calcite-components/src/components/switch/switch.e2e.ts +++ b/packages/calcite-components/src/components/switch/switch.e2e.ts @@ -32,7 +32,9 @@ describe("calcite-switch", () => { formAssociated("calcite-switch", { testValue: true, inputType: "checkbox" }); }); - it("can be disabled", () => disabled("calcite-switch")); + describe("disabled", () => { + disabled("calcite-switch"); + }); it("toggles the checked attributes appropriately when clicked", async () => { const page = await newE2EPage(); diff --git a/packages/calcite-components/src/components/tab-title/tab-title.e2e.ts b/packages/calcite-components/src/components/tab-title/tab-title.e2e.ts index 2c14eba1d28..8b638df1ff3 100644 --- a/packages/calcite-components/src/components/tab-title/tab-title.e2e.ts +++ b/packages/calcite-components/src/components/tab-title/tab-title.e2e.ts @@ -49,7 +49,9 @@ describe("calcite-tab-title", () => { hidden("calcite-tab-title"); }); - it("can be disabled", () => disabled("")); + describe("disabled", () => { + disabled(""); + }); it("renders with an icon-start", async () => { const page = await newE2EPage(); diff --git a/packages/calcite-components/src/components/text-area/text-area.e2e.ts b/packages/calcite-components/src/components/text-area/text-area.e2e.ts index d941cb01bd9..2392840471c 100644 --- a/packages/calcite-components/src/components/text-area/text-area.e2e.ts +++ b/packages/calcite-components/src/components/text-area/text-area.e2e.ts @@ -40,7 +40,9 @@ describe("calcite-text-area", () => { labelable("calcite-text-area"); }); - it("can be disabled", () => disabled("calcite-text-area")); + describe("disabled", () => { + disabled("calcite-text-area"); + }); describe("reflects", () => { reflects("calcite-text-area", [ diff --git a/packages/calcite-components/src/components/tile-select-group/tile-select-group.e2e.ts b/packages/calcite-components/src/components/tile-select-group/tile-select-group.e2e.ts index d8b22202842..a5106244f86 100644 --- a/packages/calcite-components/src/components/tile-select-group/tile-select-group.e2e.ts +++ b/packages/calcite-components/src/components/tile-select-group/tile-select-group.e2e.ts @@ -22,7 +22,7 @@ describe("calcite-tile-select-group", () => { reflects("calcite-tile-select-group", [{ propertyName: "layout", value: "horizontal" }]); }); - it("can be disabled", () => + describe("disabled", () => { disabled( html` @@ -30,5 +30,6 @@ describe("calcite-tile-select-group", () => { `, { focusTarget: "child" } - )); + ); + }); }); diff --git a/packages/calcite-components/src/components/tile-select/tile-select.e2e.ts b/packages/calcite-components/src/components/tile-select/tile-select.e2e.ts index fafddbb6b07..39139bff133 100644 --- a/packages/calcite-components/src/components/tile-select/tile-select.e2e.ts +++ b/packages/calcite-components/src/components/tile-select/tile-select.e2e.ts @@ -40,13 +40,14 @@ describe("calcite-tile-select", () => { hidden("calcite-tile-select"); }); - it("can be disabled", () => + describe("disabled", () => { disabled( "calcite-tile-select", /* focusing on child since tile appends to light DOM */ { focusTarget: "child" } - )); + ); + }); it("renders a calcite-tile", async () => { const page = await newE2EPage(); diff --git a/packages/calcite-components/src/components/tile/tile.e2e.ts b/packages/calcite-components/src/components/tile/tile.e2e.ts index dffa54de053..d95a7d81f02 100644 --- a/packages/calcite-components/src/components/tile/tile.e2e.ts +++ b/packages/calcite-components/src/components/tile/tile.e2e.ts @@ -39,7 +39,9 @@ describe("calcite-tile", () => { ]); }); - it("can be disabled", () => disabled("")); + describe("disabled", () => { + disabled(""); + }); it("renders without a link by default", async () => { const page = await newE2EPage(); diff --git a/packages/calcite-components/src/components/tree-item/tree-item.e2e.ts b/packages/calcite-components/src/components/tree-item/tree-item.e2e.ts index a577b9b3ec3..580a4c26b58 100644 --- a/packages/calcite-components/src/components/tree-item/tree-item.e2e.ts +++ b/packages/calcite-components/src/components/tree-item/tree-item.e2e.ts @@ -1,4 +1,4 @@ -import { newE2EPage } from "@stencil/core/testing"; +import { E2EPage, newE2EPage } from "@stencil/core/testing"; import { accessible, defaults, disabled, hidden, renders, slots } from "../../tests/commonTests"; import { html } from "../../../support/formatting"; import { SLOTS } from "./resources"; @@ -62,13 +62,20 @@ describe("calcite-tree-item", () => { slots("calcite-tree-item", SLOTS); }); - it("can be disabled (within a tree)", async () => { - const page = await newE2EPage(); - await page.setContent(html` - 😃 - `); + describe("disabled within a tree", () => { + let page: E2EPage; + + beforeEach(async () => { + page = await newE2EPage(); + await page.setContent(html` + + 😃 + + `); + await page.waitForChanges(); + }); - await disabled({ page, tag: "calcite-tree-item" }); + disabled(() => ({ tag: "calcite-tree-item", page })); }); it("should expand/collapse children when the icon is clicked, but not select/deselect group", async () => { diff --git a/packages/calcite-components/src/components/value-list-item/value-list-item.e2e.ts b/packages/calcite-components/src/components/value-list-item/value-list-item.e2e.ts index e8a938cdc2e..85fc83bb115 100644 --- a/packages/calcite-components/src/components/value-list-item/value-list-item.e2e.ts +++ b/packages/calcite-components/src/components/value-list-item/value-list-item.e2e.ts @@ -35,7 +35,9 @@ describe("calcite-value-list-item", () => { focusable("calcite-value-list-item"); }); - it("can be disabled", async () => disabled("calcite-value-list-item")); + describe("disabled", () => { + disabled("calcite-value-list-item"); + }); it("should toggle selected attribute when clicked", async () => { const page = await newE2EPage({ html: `` }); diff --git a/packages/calcite-components/src/tests/commonTests.ts b/packages/calcite-components/src/tests/commonTests.ts index 7a09e36649a..c88d393ed79 100644 --- a/packages/calcite-components/src/tests/commonTests.ts +++ b/packages/calcite-components/src/tests/commonTests.ts @@ -1,4 +1,5 @@ -/* eslint-disable jest/no-export -- util functions are now imported to be used as `it` blocks within `describe` instead of assertions within `it` blocks */ +/* eslint-disable jest/no-conditional-expect -- Using conditional logic in a confined test helper to handle specific scenarios, reducing duplication, balancing test readability and maintainability. **/ +/* eslint-disable jest/no-export -- Util functions are now imported to be used as `it` blocks within `describe` instead of assertions within `it` blocks. */ import { E2EElement, E2EPage, EventSpy, newE2EPage } from "@stencil/core/testing"; import axe from "axe-core"; import { toHaveNoViolations } from "jest-axe"; @@ -159,13 +160,11 @@ export function reflects( element.setProperty(propertyName, negated); await page.waitForChanges(); - // eslint-disable-next-line jest/no-conditional-expect expect(element.getAttribute(attrName)).toBe(getExpectedValue(negated)); element.setProperty(propertyName, value); await page.waitForChanges(); - // eslint-disable-next-line jest/no-conditional-expect expect(element.getAttribute(attrName)).toBe(getExpectedValue(value)); } } @@ -284,7 +283,6 @@ export function focusable(componentTagOrHTML: TagOrHTML, options?: FocusableOpti await element.callMethod("setFocus", options?.focusId); // assumes element is FocusableElement if (options?.shadowFocusTargetSelector) { - // eslint-disable-next-line jest/no-conditional-expect expect( await page.$eval( tag, @@ -370,10 +368,6 @@ export function slots( return defaultSlotted.assignedSlot?.name === "" && defaultSlotted.slot === ""; }); - /* eslint-disable-next-line jest/no-conditional-expect -- - * Conditional logic here is confined to a test helper and its purpose is to handle specific scenarios/variations in the test setup. - * The goal is to reduce duplication and strike a balance between test readability and maintainability. - **/ expect(hasDefaultSlotted).toBe(true); } }); @@ -916,45 +910,39 @@ async function getTagAndPage(componentTestSetup: ComponentTestSetup): Promise { + * disabled("calcite-input") + * }); + * + * @param {ComponentTestSetup} componentTestSetup - A component tag, html, or the tag and e2e page for setting up a test. + * @param {DisabledOptions} [options={ focusTarget: "host" }] - Disabled options. */ -export async function disabled( +export function disabled( componentTestSetup: ComponentTestSetup, options: DisabledOptions = { focusTarget: "host" } -): Promise { - const { page, tag } = await getTagAndPage(componentTestSetup); - - const component = await page.find(tag); - await skipAnimations(page); - await page.$eval(tag, (el) => { - el.addEventListener( - "click", - (event) => { - const path = event.composedPath() as HTMLElement[]; - const anchor = path.find((el) => el?.tagName === "A"); - - if (anchor) { - // we prevent the default behavior to avoid a page redirect - anchor.addEventListener("click", (event) => event.preventDefault(), { once: true }); - } - }, - true - ); - }); - - // only testing events from https://github.com/web-platform-tests/wpt/blob/master/html/semantics/disabled-elements/event-propagate-disabled.tentative.html#L66 - const eventsExpectedToBubble = ["mousemove", "pointermove", "pointerdown", "pointerup"]; - const eventsExpectedToNotBubble = ["mousedown", "mouseup", "click"]; - const allExpectedEvents = [...eventsExpectedToBubble, ...eventsExpectedToNotBubble]; - - const eventSpies: EventSpy[] = []; - - for (const event of allExpectedEvents) { - eventSpies.push(await component.spyOnEvent(event)); - } +): void { + const addRedirectPrevention = async (page: E2EPage, tag: string): Promise => { + await page.$eval(tag, (el) => { + el.addEventListener( + "click", + (event) => { + const path = event.composedPath() as HTMLElement[]; + const anchor = path.find((el) => el?.tagName === "A"); + + if (anchor) { + // we prevent the default behavior to avoid a page redirect + anchor.addEventListener("click", (event) => event.preventDefault(), { once: true }); + } + }, + true + ); + }); + }; - async function expectToBeFocused(tag: string): Promise { + async function expectToBeFocused(page: E2EPage, tag: string): Promise { const focusedTag = await page.evaluate(() => document.activeElement?.tagName.toLowerCase()); expect(focusedTag).toBe(tag); } @@ -965,125 +953,158 @@ export async function disabled( } } - expect(component.getAttribute("aria-disabled")).toBeNull(); + // only testing events from https://github.com/web-platform-tests/wpt/blob/master/html/semantics/disabled-elements/event-propagate-disabled.tentative.html#L66 + const eventsExpectedToBubble = ["mousemove", "pointermove", "pointerdown", "pointerup"]; + const eventsExpectedToNotBubble = ["mousedown", "mouseup", "click"]; + const allExpectedEvents = [...eventsExpectedToBubble, ...eventsExpectedToNotBubble]; - if (options.focusTarget === "none") { - await page.click(tag); - await expectToBeFocused("body"); + const createEventSpiesForExpectedEvents = async (component: E2EElement): Promise => { + const eventSpies: EventSpy[] = []; - assertOnMouseAndPointerEvents(eventSpies, (spy) => expect(spy).toHaveReceivedEventTimes(1)); + for (const event of allExpectedEvents) { + eventSpies.push(await component.spyOnEvent(event)); + } - component.setProperty("disabled", true); - await page.waitForChanges(); + return eventSpies; + }; - expect(component.getAttribute("aria-disabled")).toBe("true"); + async function getFocusTarget(page: E2EPage, tag: string, focusTarget: FocusTarget): Promise { + return focusTarget === "host" ? tag : await page.evaluate(() => document.activeElement?.tagName.toLowerCase()); + } - await page.click(tag); - await expectToBeFocused("body"); + const getTabAndClickFocusTarget = async (page: E2EPage, tag: string): Promise => { + const focusTarget = options.focusTarget; + const focusTargetString = await getFocusTarget(page, tag, focusTarget as FocusTarget); - await component.callMethod("click"); - await expectToBeFocused("body"); + const [tabFocusTarget, clickFocusTarget] = + typeof focusTarget === "object" ? [focusTarget.tab, focusTarget.click] : [focusTargetString, focusTargetString]; - assertOnMouseAndPointerEvents(eventSpies, (spy) => - expect(spy).toHaveReceivedEventTimes(eventsExpectedToBubble.includes(spy.eventName) ? 2 : 1) - ); + return [tabFocusTarget, clickFocusTarget]; + }; - return; - } + const getShadowFocusableCenterCoordinates = async (page: E2EPage, tabFocusTarget: string): Promise => { + return await page.$eval(tabFocusTarget, (element: HTMLElement) => { + const focusTarget = element.shadowRoot.activeElement || element; + const rect = focusTarget.getBoundingClientRect(); - async function getFocusTarget(focusTarget: FocusTarget): Promise { - return focusTarget === "host" ? tag : await page.evaluate(() => document.activeElement?.tagName.toLowerCase()); - } + return [rect.x + rect.width / 2, rect.y + rect.height / 2]; + }); + }; - await page.keyboard.press("Tab"); + it("prevents focusing via keyboard and mouse", async () => { + const { page, tag } = await getTagAndPage(componentTestSetup); - let tabFocusTarget: string; - let clickFocusTarget: string; + const component = await page.find(tag); + await skipAnimations(page); + await addRedirectPrevention(page, tag); - if (typeof options.focusTarget === "object") { - tabFocusTarget = options.focusTarget.tab; - clickFocusTarget = options.focusTarget.click; - } else { - tabFocusTarget = clickFocusTarget = await getFocusTarget(options.focusTarget); - } + const eventSpies = await createEventSpiesForExpectedEvents(component); - expect(tabFocusTarget).not.toBe("body"); - await expectToBeFocused(tabFocusTarget); + expect(component.getAttribute("aria-disabled")).toBeNull(); - const [shadowFocusableCenterX, shadowFocusableCenterY] = await page.$eval(tabFocusTarget, (element: HTMLElement) => { - const focusTarget = element.shadowRoot.activeElement || element; - const rect = focusTarget.getBoundingClientRect(); + if (options.focusTarget === "none") { + await page.click(tag); + await expectToBeFocused(page, "body"); - return [rect.x + rect.width / 2, rect.y + rect.height / 2]; - }); + assertOnMouseAndPointerEvents(eventSpies, (spy) => expect(spy).toHaveReceivedEventTimes(1)); - async function resetFocusOrder(): Promise { - // test page has default margin, so clicking on 0,0 will not hit the test element - await page.mouse.click(0, 0); - } + component.setProperty("disabled", true); + await page.waitForChanges(); - await resetFocusOrder(); - await expectToBeFocused("body"); + expect(component.getAttribute("aria-disabled")).toBe("true"); - await page.mouse.click(shadowFocusableCenterX, shadowFocusableCenterY); - await expectToBeFocused(clickFocusTarget); + await page.click(tag); + await expectToBeFocused(page, "body"); - await component.callMethod("click"); - await expectToBeFocused(clickFocusTarget); + await component.callMethod("click"); + await expectToBeFocused(page, "body"); - assertOnMouseAndPointerEvents(eventSpies, (spy) => { - if (spy.eventName === "click") { - // some components emit more than one click event (e.g., from calling `click()`), - // so we check if at least one event is received - expect(spy.length).toBeGreaterThanOrEqual(2); - } else { - expect(spy).toHaveReceivedEventTimes(1); + assertOnMouseAndPointerEvents(eventSpies, (spy) => { + expect(spy).toHaveReceivedEventTimes(eventsExpectedToBubble.includes(spy.eventName) ? 2 : 1); + }); + + return; } - }); - component.setProperty("disabled", true); - await page.waitForChanges(); + await page.keyboard.press("Tab"); - expect(component.getAttribute("aria-disabled")).toBe("true"); + const [tabFocusTarget, clickFocusTarget] = await getTabAndClickFocusTarget(page, tag); - await resetFocusOrder(); - await page.keyboard.press("Tab"); - await expectToBeFocused("body"); + expect(tabFocusTarget).not.toBe("body"); + await expectToBeFocused(page, tabFocusTarget); - await page.mouse.click(shadowFocusableCenterX, shadowFocusableCenterY); - await expectToBeFocused("body"); + const [shadowFocusableCenterX, shadowFocusableCenterY] = await getShadowFocusableCenterCoordinates( + page, + tabFocusTarget + ); - assertOnMouseAndPointerEvents(eventSpies, (spy) => { - if (spy.eventName === "click") { - // some components emit more than one click event (e.g., from calling `click()`), - // so we check if at least one event is received - expect(spy.length).toBeGreaterThanOrEqual(2); - } else { - expect(spy).toHaveReceivedEventTimes(eventsExpectedToBubble.includes(spy.eventName) ? 2 : 1); + async function resetFocusOrder(): Promise { + // test page has default margin, so clicking on 0,0 will not hit the test element + await page.mouse.click(0, 0); } + + await resetFocusOrder(); + await expectToBeFocused(page, "body"); + + await page.mouse.click(shadowFocusableCenterX, shadowFocusableCenterY); + await expectToBeFocused(page, clickFocusTarget); + + await component.callMethod("click"); + await expectToBeFocused(page, clickFocusTarget); + + assertOnMouseAndPointerEvents(eventSpies, (spy) => { + if (spy.eventName === "click") { + // some components emit more than one click event (e.g., from calling `click()`), + // so we check if at least one event is received + expect(spy.length).toBeGreaterThanOrEqual(2); + } else { + expect(spy).toHaveReceivedEventTimes(1); + } + }); }); - // this needs to run in the browser context to ensure disabling and events fire immediately after being set - await page.$eval( - tag, - (component: InteractiveHTMLElement, allExpectedEvents: string[]) => { - component.disabled = false; - allExpectedEvents.forEach((event) => component.dispatchEvent(new MouseEvent(event))); - - component.disabled = true; - allExpectedEvents.forEach((event) => component.dispatchEvent(new MouseEvent(event))); - }, - allExpectedEvents - ); - - assertOnMouseAndPointerEvents(eventSpies, (spy) => { - if (spy.eventName === "click") { - // some components emit more than one click event (e.g., from calling `click()`), - // so we check if at least one event is received - expect(spy.length).toBeGreaterThanOrEqual(3); - } else { - expect(spy).toHaveReceivedEventTimes(eventsExpectedToBubble.includes(spy.eventName) ? 4 : 2); - } + it("events are no longer blocked right after enabling", async () => { + const { page, tag } = await getTagAndPage(componentTestSetup); + + const component = await page.find(tag); + await skipAnimations(page); + await addRedirectPrevention(page, tag); + + const eventSpies = await createEventSpiesForExpectedEvents(component); + + component.setProperty("disabled", true); + await page.waitForChanges(); + + expect(component.getAttribute("aria-disabled")).toBe("true"); + + await page.click(tag); + + assertOnMouseAndPointerEvents(eventSpies, (spy) => { + expect(spy).toHaveReceivedEventTimes(eventsExpectedToBubble.includes(spy.eventName) ? 1 : 0); + }); + + // this needs to run in the browser context to ensure disabling and events fire immediately after being set + await page.$eval( + tag, + (component: InteractiveHTMLElement, allExpectedEvents: string[]) => { + component.disabled = false; + allExpectedEvents.forEach((event) => component.dispatchEvent(new MouseEvent(event))); + + component.disabled = true; + allExpectedEvents.forEach((event) => component.dispatchEvent(new MouseEvent(event))); + }, + allExpectedEvents + ); + + assertOnMouseAndPointerEvents(eventSpies, (spy) => { + if (spy.eventName === "click") { + // some components emit more than one click event (e.g., from calling `click()`), + // so we check if at least one event is received + expect(spy.length).toBeGreaterThanOrEqual(1); + } else { + expect(spy).toHaveReceivedEventTimes(eventsExpectedToBubble.includes(spy.eventName) ? 3 : 1); + } + }); }); } From 52fdd43b0d9033a7d1e42d1cb23cc933092580d0 Mon Sep 17 00:00:00 2001 From: Ben Elan Date: Thu, 22 Jun 2023 12:18:17 -0700 Subject: [PATCH 21/32] build: ignore node_modules and build outputs when watching for changes during stencil tests (#7209) ## Summary Currently our `npm run test:watch` script watches files in `node_modules`, `dist`, and other build outputs, which doesn't make sense unless you're monkey patching stuff. I've been getting an error due to watching too many files since we transitioned to a monorepo: ```log [ ERROR ] runJest: Error: EMFILE: too many open files, watch '/app/packages/calcite-components' npm ERR! Lifecycle script `test` failed with error: npm ERR! Error: command failed npm ERR! in workspace: @esri/calcite-components@1.5.0-next.4 npm ERR! at location: /app/packages/calcite-components ``` Ignoring `node_modules` and the build outputs resolved the issue for me (ref: https://github.com/jestjs/jest/issues/8088#issuecomment-473101715). If anyone still experiences this error, installing watchman is another option (ref: https://github.com/jestjs/jest/issues/3436#issuecomment-299894570). [Jest uses watchman by default](https://jestjs.io/docs/configuration#watchman-boolean) if it is installed. --- packages/calcite-components/stencil.config.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/calcite-components/stencil.config.ts b/packages/calcite-components/stencil.config.ts index c9ae5734c90..0442b7d992c 100644 --- a/packages/calcite-components/stencil.config.ts +++ b/packages/calcite-components/stencil.config.ts @@ -127,6 +127,7 @@ export const create: () => Config = () => ({ }) ], testing: { + watchPathIgnorePatterns: ["/../../node_modules", "/dist", "/www", "/hydrate"], moduleNameMapper: { "^/assets/(.*)$": "/src/tests/iconPathDataStub.ts", "^lodash-es$": "lodash" From cbf399b48a3f6dbf083fd23642d9b9e666bfbe53 Mon Sep 17 00:00:00 2001 From: Calcite Admin Date: Thu, 22 Jun 2023 15:17:31 -0700 Subject: [PATCH 22/32] build: update browserslist db (#7192) This PR was automatically generated by the update-browserslist-db GitHub action Co-authored-by: jcfranco Co-authored-by: JC Franco --- package-lock.json | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/package-lock.json b/package-lock.json index d021bf3dfad..3f81e992f68 100644 --- a/package-lock.json +++ b/package-lock.json @@ -15282,9 +15282,9 @@ } }, "node_modules/caniuse-lite": { - "version": "1.0.30001498", - "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001498.tgz", - "integrity": "sha512-LFInN2zAwx3ANrGCDZ5AKKJroHqNKyjXitdV5zRIVIaQlXKj3GmxUKagoKsjqUfckpAObPCEWnk5EeMlyMWcgw==", + "version": "1.0.30001504", + "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001504.tgz", + "integrity": "sha512-5uo7eoOp2mKbWyfMXnGO9rJWOGU8duvzEiYITW+wivukL7yHH4gX9yuRaobu6El4jPxo6jKZfG+N6fB621GD/Q==", "dev": true, "funding": [ { @@ -55345,9 +55345,9 @@ } }, "caniuse-lite": { - "version": "1.0.30001498", - "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001498.tgz", - "integrity": "sha512-LFInN2zAwx3ANrGCDZ5AKKJroHqNKyjXitdV5zRIVIaQlXKj3GmxUKagoKsjqUfckpAObPCEWnk5EeMlyMWcgw==", + "version": "1.0.30001504", + "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001504.tgz", + "integrity": "sha512-5uo7eoOp2mKbWyfMXnGO9rJWOGU8duvzEiYITW+wivukL7yHH4gX9yuRaobu6El4jPxo6jKZfG+N6fB621GD/Q==", "dev": true }, "capture-exit": { From 1b02dae4ef4e9594ece0a72bb8bc69fd2f7cf84a Mon Sep 17 00:00:00 2001 From: Matt Driscoll Date: Fri, 23 Jun 2023 13:32:41 -0700 Subject: [PATCH 23/32] fix(combobox, dropdown, input-date-picker, input-time-picker, popover, tooltip): Prevent repositioning from affecting other floating components (#7178) **Related Issue:** #7158 ## Summary This prevent repositioning from affecting other floating components caused by using a shared, debounced reposition function. Additionally, this will cancel any in-progress debounced calls if the component is disconnected. --------- Co-authored-by: JC Franco --- .../input-time-picker/input-time-picker.tsx | 2 +- .../src/utils/floating-ui.spec.ts | 33 +- .../src/utils/floating-ui.ts | 302 +++++++++--------- 3 files changed, 188 insertions(+), 149 deletions(-) diff --git a/packages/calcite-components/src/components/input-time-picker/input-time-picker.tsx b/packages/calcite-components/src/components/input-time-picker/input-time-picker.tsx index 20a1eea3017..1f4e8565ae3 100644 --- a/packages/calcite-components/src/components/input-time-picker/input-time-picker.tsx +++ b/packages/calcite-components/src/components/input-time-picker/input-time-picker.tsx @@ -581,7 +581,7 @@ export class InputTimePicker private getExtendedLocaleConfig( locale: string - ): Parameters[1] | undefined { + ): Parameters<(typeof dayjs)["updateLocale"]>[1] | undefined { if (locale === "ar") { return { meridiem: (hour) => (hour > 12 ? "م" : "ص"), diff --git a/packages/calcite-components/src/utils/floating-ui.spec.ts b/packages/calcite-components/src/utils/floating-ui.spec.ts index 3d3e2e08da1..1eb894da7bc 100644 --- a/packages/calcite-components/src/utils/floating-ui.spec.ts +++ b/packages/calcite-components/src/utils/floating-ui.spec.ts @@ -1,18 +1,20 @@ import { waitForAnimationFrame } from "../tests/utils"; -import { +import * as floatingUI from "./floating-ui"; +import { FloatingUIComponent } from "./floating-ui"; + +const { cleanupMap, connectFloatingUI, defaultOffsetDistance, disconnectFloatingUI, effectivePlacements, filterComputedPlacements, - FloatingUIComponent, getEffectivePlacement, placements, positionFloatingUI, reposition, repositionDebounceTimeout -} from "./floating-ui"; +} = floatingUI; import * as floatingUIDOM from "@floating-ui/dom"; @@ -56,8 +58,8 @@ describe("repositioning", () => { let referenceEl: HTMLButtonElement; let positionOptions: Parameters[1]; - beforeEach(() => { - fakeFloatingUiComponent = { + function createFakeFloatingUiComponent(): FloatingUIComponent { + return { open: false, reposition: async () => { /* noop */ @@ -65,6 +67,10 @@ describe("repositioning", () => { overlayPositioning: "absolute", placement: "auto" }; + } + + beforeEach(() => { + fakeFloatingUiComponent = createFakeFloatingUiComponent(); floatingEl = document.createElement("div"); referenceEl = document.createElement("button"); @@ -155,6 +161,23 @@ describe("repositioning", () => { expect(floatingEl.style.position).toBe("fixed"); }); }); + + it("debounces positioning per instance", async () => { + const positionSpy = jest.spyOn(floatingUI, "positionFloatingUI"); + fakeFloatingUiComponent.open = true; + + const anotherFakeFloatingUiComponent = createFakeFloatingUiComponent(); + anotherFakeFloatingUiComponent.open = true; + + floatingUI.reposition(fakeFloatingUiComponent, positionOptions, true); + expect(positionSpy).toHaveBeenCalledTimes(1); + + floatingUI.reposition(anotherFakeFloatingUiComponent, positionOptions, true); + expect(positionSpy).toHaveBeenCalledTimes(2); + + await new Promise((resolve) => setTimeout(resolve, repositionDebounceTimeout)); + expect(positionSpy).toHaveBeenCalledTimes(2); + }); }); it("should have correct value for defaultOffsetDistance", () => { diff --git a/packages/calcite-components/src/utils/floating-ui.ts b/packages/calcite-components/src/utils/floating-ui.ts index 9a66171a50e..c3ee1ee8cbf 100644 --- a/packages/calcite-components/src/utils/floating-ui.ts +++ b/packages/calcite-components/src/utils/floating-ui.ts @@ -15,7 +15,7 @@ import { VirtualElement } from "@floating-ui/dom"; import { Build } from "@stencil/core"; -import { debounce } from "lodash-es"; +import { debounce, DebouncedFunc } from "lodash-es"; import { config } from "./config"; import { getElementDir } from "./dom"; import { Layout } from "../components/interfaces"; @@ -23,7 +23,7 @@ import { getUserAgentData, getUserAgentString } from "./browser"; const floatingUIBrowserCheck = patchFloatingUiForNonChromiumBrowsers(); -export function isChrome109OrAbove(): boolean { +function isChrome109OrAbove(): boolean { const uaData = getUserAgentData(); if (uaData?.brands) { @@ -53,6 +53,138 @@ async function patchFloatingUiForNonChromiumBrowsers(): Promise { } } +/** + * Positions the floating element relative to the reference element. + * + * **Note:** exported for testing purposes only + * + * @param root0 + * @param root0.referenceEl + * @param root0.floatingEl + * @param root0.overlayPositioning + * @param root0.placement + * @param root0.flipDisabled + * @param root0.flipPlacements + * @param root0.offsetDistance + * @param root0.offsetSkidding + * @param root0.arrowEl + * @param root0.type + * @param component + * @param root0.referenceEl.referenceEl + * @param root0.referenceEl.floatingEl + * @param root0.referenceEl.overlayPositioning + * @param root0.referenceEl.placement + * @param root0.referenceEl.flipDisabled + * @param root0.referenceEl.flipPlacements + * @param root0.referenceEl.offsetDistance + * @param root0.referenceEl.offsetSkidding + * @param root0.referenceEl.arrowEl + * @param root0.referenceEl.type + * @param component.referenceEl + * @param component.floatingEl + * @param component.overlayPositioning + * @param component.placement + * @param component.flipDisabled + * @param component.flipPlacements + * @param component.offsetDistance + * @param component.offsetSkidding + * @param component.arrowEl + * @param component.type + */ +export const positionFloatingUI = + /* we export arrow function to allow us to spy on it during testing */ + async ( + component: FloatingUIComponent, + { + referenceEl, + floatingEl, + overlayPositioning = "absolute", + placement, + flipDisabled, + flipPlacements, + offsetDistance, + offsetSkidding, + arrowEl, + type + }: { + referenceEl: ReferenceElement; + floatingEl: HTMLElement; + overlayPositioning: Strategy; + placement: LogicalPlacement; + flipDisabled?: boolean; + flipPlacements?: EffectivePlacement[]; + offsetDistance?: number; + offsetSkidding?: number; + arrowEl?: SVGElement; + type: UIType; + } + ): Promise => { + if (!referenceEl || !floatingEl) { + return null; + } + + await floatingUIBrowserCheck; + + const { + x, + y, + placement: effectivePlacement, + strategy: position, + middlewareData + } = await computePosition(referenceEl, floatingEl, { + strategy: overlayPositioning, + placement: + placement === "auto" || placement === "auto-start" || placement === "auto-end" + ? undefined + : getEffectivePlacement(floatingEl, placement), + middleware: getMiddleware({ + placement, + flipDisabled, + flipPlacements, + offsetDistance, + offsetSkidding, + arrowEl, + type + }) + }); + + if (arrowEl && middlewareData.arrow) { + const { x, y } = middlewareData.arrow; + const side = effectivePlacement.split("-")[0] as Side; + const alignment = x != null ? "left" : "top"; + const transform = ARROW_CSS_TRANSFORM[side]; + const reset = { left: "", top: "", bottom: "", right: "" }; + + if ("floatingLayout" in component) { + component.floatingLayout = side === "left" || side === "right" ? "horizontal" : "vertical"; + } + + Object.assign(arrowEl.style, { + ...reset, + [alignment]: `${alignment == "left" ? x : y}px`, + [side]: "100%", + transform + }); + } + + const referenceHidden = middlewareData.hide?.referenceHidden; + const visibility = referenceHidden ? "hidden" : null; + const pointerEvents = visibility ? "none" : null; + + floatingEl.setAttribute(placementDataAttribute, effectivePlacement); + + const transform = `translate(${Math.round(x)}px,${Math.round(y)}px)`; + + Object.assign(floatingEl.style, { + visibility, + pointerEvents, + position, + top: "0", + left: "0", + transform + }); + }; + /** * Exported for testing purposes only */ @@ -321,151 +453,35 @@ export async function reposition( return; } - return delayed ? debouncedReposition(component, options) : positionFloatingUI(component, options); + const positionFunction = delayed ? getDebouncedReposition(component) : positionFloatingUI; + + return positionFunction(component, options); } -const debouncedReposition = debounce(positionFloatingUI, repositionDebounceTimeout, { - leading: true, - maxWait: repositionDebounceTimeout -}); +function getDebouncedReposition(component: FloatingUIComponent): DebouncedFunc { + let debounced = componentToDebouncedRepositionMap.get(component); -const ARROW_CSS_TRANSFORM = { - top: "", - left: "rotate(-90deg)", - bottom: "rotate(180deg)", - right: "rotate(90deg)" -}; - -/** - * Positions the floating element relative to the reference element. - * - * **Note:** exported for testing purposes only - * - * @param root0 - * @param root0.referenceEl - * @param root0.floatingEl - * @param root0.overlayPositioning - * @param root0.placement - * @param root0.flipDisabled - * @param root0.flipPlacements - * @param root0.offsetDistance - * @param root0.offsetSkidding - * @param root0.arrowEl - * @param root0.type - * @param component - * @param root0.referenceEl.referenceEl - * @param root0.referenceEl.floatingEl - * @param root0.referenceEl.overlayPositioning - * @param root0.referenceEl.placement - * @param root0.referenceEl.flipDisabled - * @param root0.referenceEl.flipPlacements - * @param root0.referenceEl.offsetDistance - * @param root0.referenceEl.offsetSkidding - * @param root0.referenceEl.arrowEl - * @param root0.referenceEl.type - * @param component.referenceEl - * @param component.floatingEl - * @param component.overlayPositioning - * @param component.placement - * @param component.flipDisabled - * @param component.flipPlacements - * @param component.offsetDistance - * @param component.offsetSkidding - * @param component.arrowEl - * @param component.type - */ -export async function positionFloatingUI( - component: FloatingUIComponent, - { - referenceEl, - floatingEl, - overlayPositioning = "absolute", - placement, - flipDisabled, - flipPlacements, - offsetDistance, - offsetSkidding, - arrowEl, - type - }: { - referenceEl: ReferenceElement; - floatingEl: HTMLElement; - overlayPositioning: Strategy; - placement: LogicalPlacement; - flipDisabled?: boolean; - flipPlacements?: EffectivePlacement[]; - offsetDistance?: number; - offsetSkidding?: number; - arrowEl?: SVGElement; - type: UIType; - } -): Promise { - if (!referenceEl || !floatingEl) { - return null; + if (debounced) { + return debounced; } - await floatingUIBrowserCheck; - - const { - x, - y, - placement: effectivePlacement, - strategy: position, - middlewareData - } = await computePosition(referenceEl, floatingEl, { - strategy: overlayPositioning, - placement: - placement === "auto" || placement === "auto-start" || placement === "auto-end" - ? undefined - : getEffectivePlacement(floatingEl, placement), - middleware: getMiddleware({ - placement, - flipDisabled, - flipPlacements, - offsetDistance, - offsetSkidding, - arrowEl, - type - }) + debounced = debounce(positionFloatingUI, repositionDebounceTimeout, { + leading: true, + maxWait: repositionDebounceTimeout }); - if (arrowEl && middlewareData.arrow) { - const { x, y } = middlewareData.arrow; - const side = effectivePlacement.split("-")[0] as Side; - const alignment = x != null ? "left" : "top"; - const transform = ARROW_CSS_TRANSFORM[side]; - const reset = { left: "", top: "", bottom: "", right: "" }; - - if ("floatingLayout" in component) { - component.floatingLayout = side === "left" || side === "right" ? "horizontal" : "vertical"; - } - - Object.assign(arrowEl.style, { - ...reset, - [alignment]: `${alignment == "left" ? x : y}px`, - [side]: "100%", - transform - }); - } - - const referenceHidden = middlewareData.hide?.referenceHidden; - const visibility = referenceHidden ? "hidden" : null; - const pointerEvents = visibility ? "none" : null; + componentToDebouncedRepositionMap.set(component, debounced); - floatingEl.setAttribute(placementDataAttribute, effectivePlacement); - - const transform = `translate(${Math.round(x)}px,${Math.round(y)}px)`; - - Object.assign(floatingEl.style, { - visibility, - pointerEvents, - position, - top: "0", - left: "0", - transform - }); + return debounced; } +const ARROW_CSS_TRANSFORM = { + top: "", + left: "rotate(-90deg)", + bottom: "rotate(180deg)", + right: "rotate(90deg)" +}; + /** * Exported for testing purposes only * @@ -473,6 +489,8 @@ export async function positionFloatingUI( */ export const cleanupMap = new WeakMap void>(); +const componentToDebouncedRepositionMap = new WeakMap>(); + /** * Helper to set up floating element interactions on connectedCallback. * @@ -532,13 +550,11 @@ export function disconnectFloatingUI( return; } - const cleanup = cleanupMap.get(component); - - if (cleanup) { - cleanup(); - } - + cleanupMap.get(component)?.(); cleanupMap.delete(component); + + componentToDebouncedRepositionMap.get(component)?.cancel(); + componentToDebouncedRepositionMap.delete(component); } const visiblePointerSize = 4; From 3ec84a636c09bb56793da831eaa5df9d3e9e94c5 Mon Sep 17 00:00:00 2001 From: "github-actions[bot]" Date: Fri, 23 Jun 2023 21:01:13 +0000 Subject: [PATCH 24/32] chore: release next --- package-lock.json | 8 ++++---- packages/calcite-components-react/CHANGELOG.md | 4 ++++ packages/calcite-components-react/package.json | 4 ++-- packages/calcite-components/CHANGELOG.md | 6 ++++++ packages/calcite-components/package.json | 2 +- 5 files changed, 17 insertions(+), 7 deletions(-) diff --git a/package-lock.json b/package-lock.json index 3f81e992f68..a45d5c422e4 100644 --- a/package-lock.json +++ b/package-lock.json @@ -43876,7 +43876,7 @@ }, "packages/calcite-components": { "name": "@esri/calcite-components", - "version": "1.5.0-next.4", + "version": "1.5.0-next.5", "license": "SEE LICENSE.md", "dependencies": { "@floating-ui/dom": "1.4.1", @@ -43902,10 +43902,10 @@ }, "packages/calcite-components-react": { "name": "@esri/calcite-components-react", - "version": "1.5.0-next.4", + "version": "1.5.0-next.5", "license": "SEE LICENSE.md", "dependencies": { - "@esri/calcite-components": "^1.5.0-next.4" + "@esri/calcite-components": "^1.5.0-next.5" }, "peerDependencies": { "react": ">=16.7", @@ -45740,7 +45740,7 @@ "@esri/calcite-components-react": { "version": "file:packages/calcite-components-react", "requires": { - "@esri/calcite-components": "^1.5.0-next.4" + "@esri/calcite-components": "^1.5.0-next.5" } }, "@esri/calcite-design-tokens": { diff --git a/packages/calcite-components-react/CHANGELOG.md b/packages/calcite-components-react/CHANGELOG.md index b4ddd84a182..9f750d00395 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. +## [1.5.0-next.5](https://github.com/Esri/calcite-components/compare/@esri/calcite-components-react@1.5.0-next.4...@esri/calcite-components-react@1.5.0-next.5) (2023-06-23) + +**Note:** Version bump only for package @esri/calcite-components-react + ## [1.5.0-next.4](https://github.com/Esri/calcite-components/compare/@esri/calcite-components-react@1.5.0-next.3...@esri/calcite-components-react@1.5.0-next.4) (2023-06-21) **Note:** Version bump only for package @esri/calcite-components-react diff --git a/packages/calcite-components-react/package.json b/packages/calcite-components-react/package.json index 17e0281590b..74b6e567b78 100644 --- a/packages/calcite-components-react/package.json +++ b/packages/calcite-components-react/package.json @@ -1,7 +1,7 @@ { "name": "@esri/calcite-components-react", "sideEffects": false, - "version": "1.5.0-next.4", + "version": "1.5.0-next.5", "description": "A set of React components that wrap calcite components", "license": "SEE LICENSE.md", "scripts": { @@ -17,7 +17,7 @@ "dist/" ], "dependencies": { - "@esri/calcite-components": "^1.5.0-next.4" + "@esri/calcite-components": "^1.5.0-next.5" }, "peerDependencies": { "react": ">=16.7", diff --git a/packages/calcite-components/CHANGELOG.md b/packages/calcite-components/CHANGELOG.md index 62991258714..32e410a4509 100644 --- a/packages/calcite-components/CHANGELOG.md +++ b/packages/calcite-components/CHANGELOG.md @@ -3,6 +3,12 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +## [1.5.0-next.5](https://github.com/Esri/calcite-components/compare/@esri/calcite-components@1.5.0-next.4...@esri/calcite-components@1.5.0-next.5) (2023-06-23) + +### Bug Fixes + +- **combobox, dropdown, input-date-picker, input-time-picker, popover, tooltip:** Prevent repositioning from affecting other floating components ([#7178](https://github.com/Esri/calcite-components/issues/7178)) ([1b02dae](https://github.com/Esri/calcite-components/commit/1b02dae4ef4e9594ece0a72bb8bc69fd2f7cf84a)), closes [#7158](https://github.com/Esri/calcite-components/issues/7158) + ## [1.5.0-next.4](https://github.com/Esri/calcite-components/compare/@esri/calcite-components@1.5.0-next.3...@esri/calcite-components@1.5.0-next.4) (2023-06-21) ### Bug Fixes diff --git a/packages/calcite-components/package.json b/packages/calcite-components/package.json index a98a8a2688a..d943c59b66c 100644 --- a/packages/calcite-components/package.json +++ b/packages/calcite-components/package.json @@ -1,6 +1,6 @@ { "name": "@esri/calcite-components", - "version": "1.5.0-next.4", + "version": "1.5.0-next.5", "description": "Web Components for Esri's Calcite Design System.", "main": "dist/index.cjs.js", "module": "dist/index.js", From 11d93b2fdee5a03dd41db9056af2e5fcf83d10b1 Mon Sep 17 00:00:00 2001 From: Ben Elan Date: Sun, 25 Jun 2023 14:52:32 -0700 Subject: [PATCH 25/32] build(t9n): generate json file containing t9n values (#7214) **Related Issue:** #6143 ## Summary Generates `dist/extras/translations-json.json` which contains the t9n values per component in the following format: ```jsonc { "components": { "calcite-action": { "loading": { "en": "Close", "es": "Cerrar" // ... }, "disabled": { "en": "Close", "es": "Cerrar" // ... } }, "calcite-alert": { "loading": { "en": "Close", "es": "Cerrar" // ... }, "disabled": { "en": "Close", "es": "Cerrar" // ... } } } } ``` --- packages/calcite-components/package.json | 3 +- .../support/generateT9nDocsJSON.ts | 46 +++++++++++++++++++ 2 files changed, 48 insertions(+), 1 deletion(-) create mode 100755 packages/calcite-components/support/generateT9nDocsJSON.ts diff --git a/packages/calcite-components/package.json b/packages/calcite-components/package.json index d943c59b66c..fa9e6e03015 100644 --- a/packages/calcite-components/package.json +++ b/packages/calcite-components/package.json @@ -19,7 +19,7 @@ ], "scripts": { "build": "npm run util:prep-build-reqs && stencil build", - "postbuild": "npm run util:patch && git restore src/components/*/readme.md", + "postbuild": "npm run util:patch && npm run util:generate-t9n-docs-json && git restore src/components/*/readme.md", "build:watch": "npm run util:prep-build-reqs && stencil build --no-docs --watch", "build:watch-dev": "npm run util:prep-build-reqs && stencil build --no-docs --dev --watch", "build-storybook": "npm run util:build-docs && build-storybook --output-dir ./docs --quiet", @@ -43,6 +43,7 @@ "util:clean-tested-build": "npm ci && npm test && npm run build", "util:copy-assets": "npm run util:copy-icons", "util:copy-icons": "cpy \"../../node_modules/@esri/calcite-ui-icons/js/*.json\" \"./src/components/icon/assets/icon/\" --flat", + "util:generate-t9n-docs-json": "ts-node --esm support/generateT9nDocsJSON.ts", "util:generate-t9n-types": "ts-node --esm support/generateT9nTypes.ts", "util:hydration-styles": "ts-node --esm support/hydrationStyles.ts", "util:patch": "npm run util:patch-esm-resolution && npm run util:patch-tree-shaking", diff --git a/packages/calcite-components/support/generateT9nDocsJSON.ts b/packages/calcite-components/support/generateT9nDocsJSON.ts new file mode 100755 index 00000000000..2be3d3dcc30 --- /dev/null +++ b/packages/calcite-components/support/generateT9nDocsJSON.ts @@ -0,0 +1,46 @@ +// generates a JSON file containing the per component t9n translation values +(async () => { + const { dirname, resolve } = await import("path"); + const { fileURLToPath } = await import("url"); + const { + existsSync, + promises: { readFile, readdir, writeFile } + } = await import("fs"); + try { + const __dirname = dirname(fileURLToPath(import.meta.url)); + + const outfile = resolve(__dirname, "..", "dist", "extras", "translations-json.json"); + const assetsPaths = resolve(__dirname, "..", "dist", "calcite", "assets"); + const components = await readdir(assetsPaths); + + const data = {}; + const messagesFilenameRegex = /messages_(.*)\.json/; + + for (const component of components) { + const t9nPath = resolve(assetsPaths, component, "t9n"); + if (existsSync(t9nPath)) { + data[component] = {}; + const messagesFileMain = JSON.parse(await readFile(resolve(t9nPath, "messages.json"), { encoding: "utf-8" })); + Object.keys(messagesFileMain).forEach((key) => (data[component][key] = {})); + + const messagesFilenames = (await readdir(t9nPath, { withFileTypes: true })).map((dirent) => dirent.name); + for (const messagesFilename of messagesFilenames) { + const messagesFilenameMatch = messagesFilename.match(messagesFilenameRegex); + + if (messagesFilenameMatch && messagesFilenameMatch.length > 1) { + const lang = messagesFilenameMatch[1]; + const messagesFile = JSON.parse(await readFile(resolve(t9nPath, messagesFilename), { encoding: "utf-8" })); + + for (const [key, value] of Object.entries(messagesFile)) { + data[component][key][lang] = value; + } + } + } + } + } + await writeFile(outfile, JSON.stringify(data), "utf-8"); + } catch (err) { + console.error(err); + process.exit(1); + } +})(); From 739f0af72eee0436cec7307a440e38532ee741cd Mon Sep 17 00:00:00 2001 From: Anveshreddy mekala Date: Mon, 26 Jun 2023 10:21:05 -0500 Subject: [PATCH 26/32] fix(input, input-number): allows numeric characters. (#7213) **Related Issue:** #6854 ## Summary This PR will support French AZERTY keyboard layout in `calcite-input` & `calcite-input-number` --- .../input-number/input-number.e2e.ts | 29 +++++++++++++------ .../components/input-number/input-number.tsx | 2 +- .../src/components/input/input.e2e.ts | 29 +++++++++++++------ .../src/components/input/input.tsx | 2 +- 4 files changed, 42 insertions(+), 20 deletions(-) diff --git a/packages/calcite-components/src/components/input-number/input-number.e2e.ts b/packages/calcite-components/src/components/input-number/input-number.e2e.ts index 8a39db66f00..b098fb6b80b 100644 --- a/packages/calcite-components/src/components/input-number/input-number.e2e.ts +++ b/packages/calcite-components/src/components/input-number/input-number.e2e.ts @@ -899,20 +899,12 @@ describe("calcite-input-number", () => { expect(Number(await element.getProperty("value"))).toBe(195); }); - it("disallows typing number with shift modifier key down", async () => { + it("disallows typing non-numeric characters with shift modifier key down", async () => { const page = await newE2EPage(); await page.setContent(html``); const calciteInput = await page.find("calcite-input-number"); const input = await page.find("calcite-input-number >>> input"); await calciteInput.callMethod("setFocus"); - - for (let i = 0; i < numberKeys.length; i++) { - await page.keyboard.down("Shift"); - await page.keyboard.press(numberKeys[i] as KeyInput); - await page.keyboard.up("Shift"); - expect(await calciteInput.getProperty("value")).toBeFalsy(); - expect(await input.getProperty("value")).toBeFalsy(); - } const nonELetterKeys = letterKeys.filter((key) => key !== "e"); for (let i = 0; i < nonELetterKeys.length; i++) { await page.keyboard.down("Shift"); @@ -923,6 +915,25 @@ describe("calcite-input-number", () => { } }); + it("allows typing numeric characters with shift modifier key down (#6854)", async () => { + const page = await newE2EPage(); + await page.setContent(html``); + const calciteInput = await page.find("calcite-input"); + const input = await page.find("calcite-input >>> input"); + await calciteInput.callMethod("setFocus"); + const numberKeysExcludingZero = numberKeys.slice(1); + + let result = ""; + for (let i = 0; i < numberKeysExcludingZero.length; i++) { + await page.keyboard.down("Shift"); + await page.keyboard.press(numberKeysExcludingZero[i] as KeyInput); + result += numberKeysExcludingZero[i]; + await page.keyboard.up("Shift"); + expect(await calciteInput.getProperty("value")).toBe(result); + expect(await input.getProperty("value")).toBe(result); + } + }); + it("allows shift tabbing", async () => { const page = await newE2EPage(); await page.setContent(html` diff --git a/packages/calcite-components/src/components/input-number/input-number.tsx b/packages/calcite-components/src/components/input-number/input-number.tsx index 8bef5603a7e..9893db14c39 100644 --- a/packages/calcite-components/src/components/input-number/input-number.tsx +++ b/packages/calcite-components/src/components/input-number/input-number.tsx @@ -668,7 +668,7 @@ export class InputNumber return; } const isShiftTabEvent = event.shiftKey && event.key === "Tab"; - if (supportedKeys.includes(event.key) && (!event.shiftKey || isShiftTabEvent)) { + if (supportedKeys.includes(event.key) || isShiftTabEvent) { if (event.key === "Enter") { this.emitChangeIfUserModified(); } diff --git a/packages/calcite-components/src/components/input/input.e2e.ts b/packages/calcite-components/src/components/input/input.e2e.ts index b7a67aaa485..b87f8c4e805 100644 --- a/packages/calcite-components/src/components/input/input.e2e.ts +++ b/packages/calcite-components/src/components/input/input.e2e.ts @@ -1055,20 +1055,12 @@ describe("calcite-input", () => { expect(Number(await element.getProperty("value"))).toBe(195); }); - it("disallows typing any letter or number with shift modifier key down", async () => { + it("disallows typing any non-numeric characters with shift modifier key down", async () => { const page = await newE2EPage(); await page.setContent(html``); const calciteInput = await page.find("calcite-input"); const input = await page.find("calcite-input >>> input"); await calciteInput.callMethod("setFocus"); - - for (let i = 0; i < numberKeys.length; i++) { - await page.keyboard.down("Shift"); - await page.keyboard.press(numberKeys[i] as KeyInput); - await page.keyboard.up("Shift"); - expect(await calciteInput.getProperty("value")).toBeFalsy(); - expect(await input.getProperty("value")).toBeFalsy(); - } const nonELetterKeys = letterKeys.filter((key) => key !== "e"); for (let i = 0; i < nonELetterKeys.length; i++) { await page.keyboard.down("Shift"); @@ -1079,6 +1071,25 @@ describe("calcite-input", () => { } }); + it("allows typing numeric characters with shift modifier key down (#6854)", async () => { + const page = await newE2EPage(); + await page.setContent(html``); + const calciteInput = await page.find("calcite-input"); + const input = await page.find("calcite-input >>> input"); + await calciteInput.callMethod("setFocus"); + const numberKeysExcludingZero = numberKeys.slice(1); + + let result = ""; + for (let i = 0; i < numberKeysExcludingZero.length; i++) { + await page.keyboard.down("Shift"); + await page.keyboard.press(numberKeysExcludingZero[i] as KeyInput); + result += numberKeysExcludingZero[i]; + await page.keyboard.up("Shift"); + expect(await calciteInput.getProperty("value")).toBe(result); + expect(await input.getProperty("value")).toBe(result); + } + }); + it("allows shift tabbing", async () => { const page = await newE2EPage(); await page.setContent(html` diff --git a/packages/calcite-components/src/components/input/input.tsx b/packages/calcite-components/src/components/input/input.tsx index 97b4580f616..c89165e1c19 100644 --- a/packages/calcite-components/src/components/input/input.tsx +++ b/packages/calcite-components/src/components/input/input.tsx @@ -784,7 +784,7 @@ export class Input return; } const isShiftTabEvent = event.shiftKey && event.key === "Tab"; - if (supportedKeys.includes(event.key) && (!event.shiftKey || isShiftTabEvent)) { + if (supportedKeys.includes(event.key) || isShiftTabEvent) { if (event.key === "Enter") { this.emitChangeIfUserModified(); } From 311e3b5f818e797b77b8465d7b2792298342c5d4 Mon Sep 17 00:00:00 2001 From: Ben Elan Date: Mon, 26 Jun 2023 15:29:59 -0700 Subject: [PATCH 27/32] ci(release-please): pin action version and allow manually running action (#7222) **Related Issue:** # ## Summary The release-please action randomly started failing 3 days ago with this [unhelpful error](https://github.com/Esri/calcite-components/actions/runs/5360304923/jobs/9725004712#step:2:234). It looks like they [released 3 days ago](https://github.com/google-github-actions/release-please-action/releases/tag/v3.7.10), so I'm pinning the version to the one before that and hoping it will fix it. I also added the [`workflow_dispatch`](https://github.blog/changelog/2020-07-06-github-actions-manual-triggers-with-workflow_dispatch/) trigger so we can run the action manually. --- .github/workflows/deploy-latest.yml | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/.github/workflows/deploy-latest.yml b/.github/workflows/deploy-latest.yml index 75e69c08744..745df9fca3f 100644 --- a/.github/workflows/deploy-latest.yml +++ b/.github/workflows/deploy-latest.yml @@ -1,5 +1,6 @@ name: Deploy Latest on: + workflow_dispatch: push: branches: [master] permissions: @@ -9,7 +10,7 @@ jobs: release-please: runs-on: ubuntu-20.04 steps: - - uses: google-github-actions/release-please-action@v3 + - uses: google-github-actions/release-please-action@v3.7.9 id: release with: command: manifest @@ -22,7 +23,7 @@ jobs: uses: actions/checkout@v3 with: token: ${{ secrets.ADMIN_TOKEN }} - ref: release-please + ref: master - name: Setup Node uses: actions/setup-node@v3 with: From 3c0fbf5f6789d7822a3c4050a5d56baee0a2f1a9 Mon Sep 17 00:00:00 2001 From: JC Franco Date: Mon, 26 Jun 2023 16:19:34 -0700 Subject: [PATCH 28/32] fix(tree-item): ensure expanded tree-item is displayed when expanded and made visible (#7216) **Related Issue:** #6575 ## Summary This updates the styling on tree items to ensure they are rendered regardless of its expand/collapse transition. **Note:** 7209f9bc9fa5aaad361532409bc129400643f459 removes `OpenCloseComponent` implementation since the hooks no longer did anything. We can reapply it once we add corresponding events to tree items. Release-As: 1.4.3 --------- Co-authored-by: Ben Elan --- .../src/components/tree-item/tree-item.e2e.ts | 24 +++++++++ .../src/components/tree-item/tree-item.scss | 8 ++- .../src/components/tree-item/tree-item.tsx | 54 +------------------ 3 files changed, 29 insertions(+), 57 deletions(-) diff --git a/packages/calcite-components/src/components/tree-item/tree-item.e2e.ts b/packages/calcite-components/src/components/tree-item/tree-item.e2e.ts index 580a4c26b58..99b2c0027ec 100644 --- a/packages/calcite-components/src/components/tree-item/tree-item.e2e.ts +++ b/packages/calcite-components/src/components/tree-item/tree-item.e2e.ts @@ -416,4 +416,28 @@ describe("calcite-tree-item", () => { expect(await page.evaluate(() => document.activeElement.id)).toBe("xlr"); }); + + it("displaying an expanded item is visible", async () => { + const page = await newE2EPage(); + await page.setContent( + html` + + ` + ); + + await page.$eval("#root", (root: HTMLCalciteTreeElement) => (root.style.display = "")); + await page.waitForChanges(); + + const item = await page.$("#child"); + const itemBounds = await item.boundingBox(); + + expect(itemBounds.height).not.toBe(0); + }); }); diff --git a/packages/calcite-components/src/components/tree-item/tree-item.scss b/packages/calcite-components/src/components/tree-item/tree-item.scss index 5514d402fb3..89011af4006 100644 --- a/packages/calcite-components/src/components/tree-item/tree-item.scss +++ b/packages/calcite-components/src/components/tree-item/tree-item.scss @@ -136,17 +136,15 @@ } .children-container { - @apply relative h-0 overflow-hidden; + @apply relative h-0 overflow-hidden opacity-0 origin-top; margin-inline-start: theme("margin.5"); transform: scaleY(0); - opacity: 0; transition: var(--calcite-animation-timing) $easing-function, opacity var(--calcite-animation-timing) $easing-function, all var(--calcite-animation-timing) ease-in-out; // note that we're transitioning transform, not height! - transform-origin: top; // keep the top of the element in the same place. this is optional. .item--expanded > & { - @apply overflow-visible; - opacity: 1; + @apply overflow-visible opacity-100; + transform: none; block-size: auto; } } diff --git a/packages/calcite-components/src/components/tree-item/tree-item.tsx b/packages/calcite-components/src/components/tree-item/tree-item.tsx index 3f6ed880c4f..b7733e7323b 100644 --- a/packages/calcite-components/src/components/tree-item/tree-item.tsx +++ b/packages/calcite-components/src/components/tree-item/tree-item.tsx @@ -30,7 +30,6 @@ import { InteractiveComponent, updateHostInteraction } from "../../utils/interactive"; -import { onToggleOpenCloseComponent, OpenCloseComponent } from "../../utils/openCloseComponent"; import { CSS_UTILITY } from "../../utils/resources"; import { FlipContext, Scale, SelectionMode } from "../interfaces"; import { TreeItemSelectDetail } from "./interfaces"; @@ -46,9 +45,7 @@ import { CSS, ICONS, SLOTS } from "./resources"; styleUrl: "tree-item.scss", shadow: true }) -export class TreeItem - implements ConditionalSlotComponent, InteractiveComponent, OpenCloseComponent -{ +export class TreeItem implements ConditionalSlotComponent, InteractiveComponent { //-------------------------------------------------------------------------- // // Element @@ -83,7 +80,6 @@ export class TreeItem @Watch("expanded") expandedHandler(newValue: boolean): void { this.updateParentIsExpanded(this.el, newValue); - onToggleOpenCloseComponent(this, true); } /** @@ -124,48 +120,11 @@ export class TreeItem @Prop({ mutable: true, reflect: true }) selectionMode: SelectionMode; @Watch("selectionMode") - getselectionMode(): void { + getSelectionMode(): void { this.isSelectionMultiLike = this.selectionMode === "multiple" || this.selectionMode === "multichildren"; } - openTransitionProp = "opacity"; - - transitionProp = "expanded"; - - /** - * Specifies element that the transition is allowed to emit on. - */ - transitionEl: HTMLDivElement; - - /** - * Defines method for `beforeOpen` event handler. - */ - onBeforeOpen(): void { - this.transitionEl.style.transform = "scaleY(1)"; - } - - /** - * Defines method for `open` event handler: - */ - onOpen(): void { - this.transitionEl.style.transform = "none"; - } - - /** - * Defines method for `beforeClose` event handler: - */ - onBeforeClose(): void { - // pattern needs to be defined on how we emit events for components without `open` prop. - } - - /** - * Defines method for `close` event handler: - */ - onClose(): void { - this.transitionEl.style.transform = "scaleY(0)"; - } - //-------------------------------------------------------------------------- // // Lifecycle @@ -213,9 +172,6 @@ export class TreeItem } componentWillLoad(): void { - if (this.expanded) { - onToggleOpenCloseComponent(this, true); - } requestAnimationFrame(() => (this.updateAfterInitialRender = true)); } @@ -350,8 +306,6 @@ export class TreeItem data-test-id="calcite-tree-children" onClick={this.childrenClickHandler} role={this.hasChildren ? "group" : undefined} - // eslint-disable-next-line react/jsx-sort-props - ref={(el) => this.setTransitionEl(el)} >
@@ -360,10 +314,6 @@ export class TreeItem ); } - setTransitionEl(el: HTMLDivElement): void { - this.transitionEl = el; - } - //-------------------------------------------------------------------------- // // Event Listeners From 19ea2253c5587b49d4d1b435752ec103c3078fdb Mon Sep 17 00:00:00 2001 From: Ben Elan Date: Mon, 26 Jun 2023 16:53:06 -0700 Subject: [PATCH 29/32] ci: hardcode release version due to reverting feat (#7225) **Related Issue:** #7222 ## Summary Pinning the `release-please` Github Action version in the PR above fixed the error, so their release must have broken something for us. `release-please` is trying to release `v1.5.0` instead of `v1.4.3` because we installed a feat and subsequently reverted it, but our current version is still `1.5.0-next.5`. [The logs](https://github.com/Esri/calcite-components/actions/runs/5383995298/jobs/9771404018#step:2:102) say it's skipping the conventional commit versioning strategy and forcing `1.5.0`. I'm hoping I can force `1.4.3` instead, as described in their [manifest doc](https://github.com/googleapis/release-please/blob/main/docs/manifest-releaser.md#configfile). If this doesn't work I may need to change the package.json versions back to `1.4.3-next.7`. --- package-lock.json | 8 ++++---- packages/calcite-components-react/package.json | 4 ++-- packages/calcite-components/package.json | 2 +- release-please-config.json | 6 ++++-- 4 files changed, 11 insertions(+), 9 deletions(-) diff --git a/package-lock.json b/package-lock.json index a45d5c422e4..17f36009c4a 100644 --- a/package-lock.json +++ b/package-lock.json @@ -43876,7 +43876,7 @@ }, "packages/calcite-components": { "name": "@esri/calcite-components", - "version": "1.5.0-next.5", + "version": "1.4.3-next.7", "license": "SEE LICENSE.md", "dependencies": { "@floating-ui/dom": "1.4.1", @@ -43902,10 +43902,10 @@ }, "packages/calcite-components-react": { "name": "@esri/calcite-components-react", - "version": "1.5.0-next.5", + "version": "1.4.3-next.7", "license": "SEE LICENSE.md", "dependencies": { - "@esri/calcite-components": "^1.5.0-next.5" + "@esri/calcite-components": "1.4.3-next.7" }, "peerDependencies": { "react": ">=16.7", @@ -45740,7 +45740,7 @@ "@esri/calcite-components-react": { "version": "file:packages/calcite-components-react", "requires": { - "@esri/calcite-components": "^1.5.0-next.5" + "@esri/calcite-components": "1.4.3-next.7" } }, "@esri/calcite-design-tokens": { diff --git a/packages/calcite-components-react/package.json b/packages/calcite-components-react/package.json index 74b6e567b78..7b353ec4c22 100644 --- a/packages/calcite-components-react/package.json +++ b/packages/calcite-components-react/package.json @@ -1,7 +1,7 @@ { "name": "@esri/calcite-components-react", "sideEffects": false, - "version": "1.5.0-next.5", + "version": "1.4.3-next.7", "description": "A set of React components that wrap calcite components", "license": "SEE LICENSE.md", "scripts": { @@ -17,7 +17,7 @@ "dist/" ], "dependencies": { - "@esri/calcite-components": "^1.5.0-next.5" + "@esri/calcite-components": "1.4.3-next.7" }, "peerDependencies": { "react": ">=16.7", diff --git a/packages/calcite-components/package.json b/packages/calcite-components/package.json index fa9e6e03015..7a4bb762398 100644 --- a/packages/calcite-components/package.json +++ b/packages/calcite-components/package.json @@ -1,6 +1,6 @@ { "name": "@esri/calcite-components", - "version": "1.5.0-next.5", + "version": "1.4.3-next.7", "description": "Web Components for Esri's Calcite Design System.", "main": "dist/index.cjs.js", "module": "dist/index.js", diff --git a/release-please-config.json b/release-please-config.json index 4b39a3cf852..9e7fac96272 100644 --- a/release-please-config.json +++ b/release-please-config.json @@ -7,10 +7,12 @@ "packages": { "packages/calcite-components": { "component": "@esri/calcite-components", - "extra-files": ["readme.md"] + "extra-files": ["readme.md"], + "release-as": "1.4.3" }, "packages/calcite-components-react": { - "component": "@esri/calcite-components-react" + "component": "@esri/calcite-components-react", + "release-as": "1.4.3" } }, "plugins": [ From 2422120a941bdacb5db80a92f4829021f009c2aa Mon Sep 17 00:00:00 2001 From: Calcite Admin Date: Mon, 26 Jun 2023 17:23:05 -0700 Subject: [PATCH 30/32] chore: release latest (#7144) :robot: I have created a release *beep* *boop* ---
@esri/calcite-components: 1.4.3 ## [1.4.3](https://github.com/Esri/calcite-components/compare/@esri/calcite-components@1.4.2...@esri/calcite-components@1.4.3) (2023-06-26) ### Bug Fixes * **accordion-item:** support items working across shadowDOM ([#7035](https://github.com/Esri/calcite-components/issues/7035)) ([6378e35](https://github.com/Esri/calcite-components/commit/6378e351bad4aff1aefe62b7c52262ae57c48907)), closes [#6167](https://github.com/Esri/calcite-components/issues/6167) * **alert:** Sets autoCloseDuration to "medium" by default ([#7157](https://github.com/Esri/calcite-components/issues/7157)) ([1b9a8ed](https://github.com/Esri/calcite-components/commit/1b9a8edc1b7fab87899bd59c74ad036b5f53140c)) * **alert:** Update alert queue when an alert is removed from the DOM ([#7189](https://github.com/Esri/calcite-components/issues/7189)) ([edd59eb](https://github.com/Esri/calcite-components/commit/edd59eb0bff21aa41fc7e537a2df2dbd2143a15a)) * **combobox, dropdown, input-date-picker, input-time-picker, popover, tooltip:** Prevent repositioning from affecting other floating components ([#7178](https://github.com/Esri/calcite-components/issues/7178)) ([1b02dae](https://github.com/Esri/calcite-components/commit/1b02dae4ef4e9594ece0a72bb8bc69fd2f7cf84a)) * Ensure mouse events are blocked for disabled components in Firefox ([#7107](https://github.com/Esri/calcite-components/issues/7107)) ([271d985](https://github.com/Esri/calcite-components/commit/271d9855eef4aa94cb7131381c98ab03eea57e4e)) * **input-date-picker:** Fix showing the placeholder when resetting the value ([#7156](https://github.com/Esri/calcite-components/issues/7156)) ([8d60ffd](https://github.com/Esri/calcite-components/commit/8d60ffd1e68baf2b96006deaaec25c2e92df8d55)) * **input, input-number:** Allows numeric characters. ([#7213](https://github.com/Esri/calcite-components/issues/7213)) ([739f0af](https://github.com/Esri/calcite-components/commit/739f0af72eee0436cec7307a440e38532ee741cd)) * **input,input-number:** Allow typing decimal separator in firefox for arabic locale ([#7173](https://github.com/Esri/calcite-components/issues/7173)) ([595e6f2](https://github.com/Esri/calcite-components/commit/595e6f229f13facfd6f79f4069f01b2bab79fa40)) * **list:** No longer has incorrect border width ([a810943](https://github.com/Esri/calcite-components/commit/a810943fdea2c1f90f5deca35ab0501287e45489)) * **list:** Update selectedItems property on all item selection changes ([#7204](https://github.com/Esri/calcite-components/issues/7204)) ([da048f6](https://github.com/Esri/calcite-components/commit/da048f618a987801d8ab5c284ab0f8c549e70a16)) * **menu-item:** Ensure correct order of rendered icons ([#7098](https://github.com/Esri/calcite-components/issues/7098)) ([fd344e9](https://github.com/Esri/calcite-components/commit/fd344e91fb02b5dcb3e7ef6565fc679935c078c2)), closes [#7097](https://github.com/Esri/calcite-components/issues/7097) * **navigation:** Label is no longer a required property ([#7084](https://github.com/Esri/calcite-components/issues/7084)) ([ba2bd4d](https://github.com/Esri/calcite-components/commit/ba2bd4db32b3bfbc5403a75156d4fde6859114e3)) * **radio-button-group:** No longer focus first radio button on label click and adds `setFocus` method. ([#7050](https://github.com/Esri/calcite-components/issues/7050)) ([4267b8c](https://github.com/Esri/calcite-components/commit/4267b8ca26db8047d42659d6062b606a90819abc)) * **radio-button, radio-button-group:** Prevent emitting events when selecting a checked radio button ([#7102](https://github.com/Esri/calcite-components/issues/7102)) ([77fcc81](https://github.com/Esri/calcite-components/commit/77fcc818dd2d20805318cdb6030b8aa73ccb1a58)) * **radio-button:** Focuses first focusable radio-button element in group. ([#7152](https://github.com/Esri/calcite-components/issues/7152)) ([dd7ec60](https://github.com/Esri/calcite-components/commit/dd7ec608779f1a34ad3c77a36b6f8fcf6fd1365a)) * **scrim:** Responsively set the scale of the loading spinner ([#7182](https://github.com/Esri/calcite-components/issues/7182)) ([72c5943](https://github.com/Esri/calcite-components/commit/72c59434113a550e849c77caf8d622bd50e5769e)) * **tooltip:** Improve component timing ([#7172](https://github.com/Esri/calcite-components/issues/7172)) ([106f5d2](https://github.com/Esri/calcite-components/commit/106f5d27afc5d7363fa197a1f9fb0552864a15e4)) * **tree-item:** Ensure expanded tree-item is displayed when expanded and made visible ([#7216](https://github.com/Esri/calcite-components/issues/7216)) ([3c0fbf5](https://github.com/Esri/calcite-components/commit/3c0fbf5f6789d7822a3c4050a5d56baee0a2f1a9))
@esri/calcite-components-react: 1.4.3 ## [1.4.3](https://github.com/Esri/calcite-components/compare/@esri/calcite-components-react@1.4.2...@esri/calcite-components-react@1.4.3) (2023-06-26) ### Miscellaneous Chores * **@esri/calcite-components-react:** Synchronize undefined versions ### Dependencies * The following workspace dependencies were updated * dependencies * @esri/calcite-components bumped from 1.4.3-next.7 to 1.4.3
--- This PR was generated with [Release Please](https://github.com/googleapis/release-please). See [documentation](https://github.com/googleapis/release-please#release-please). --------- Co-authored-by: github-actions[bot] Co-authored-by: Ben Elan --- .release-please-manifest.json | 4 +- package-lock.json | 8 +- .../calcite-components-react/CHANGELOG.md | 50 ++------- .../calcite-components-react/package.json | 4 +- packages/calcite-components/CHANGELOG.md | 106 +++--------------- packages/calcite-components/package.json | 2 +- packages/calcite-components/readme.md | 4 +- release-please-config.json | 6 +- 8 files changed, 38 insertions(+), 146 deletions(-) diff --git a/.release-please-manifest.json b/.release-please-manifest.json index ee458d9160f..54d3bed72e7 100644 --- a/.release-please-manifest.json +++ b/.release-please-manifest.json @@ -1,4 +1,4 @@ { - "packages/calcite-components": "1.4.2", - "packages/calcite-components-react": "1.4.2" + "packages/calcite-components": "1.4.3", + "packages/calcite-components-react": "1.4.3" } diff --git a/package-lock.json b/package-lock.json index 17f36009c4a..a4d0adda2bf 100644 --- a/package-lock.json +++ b/package-lock.json @@ -43876,7 +43876,7 @@ }, "packages/calcite-components": { "name": "@esri/calcite-components", - "version": "1.4.3-next.7", + "version": "1.4.3", "license": "SEE LICENSE.md", "dependencies": { "@floating-ui/dom": "1.4.1", @@ -43902,10 +43902,10 @@ }, "packages/calcite-components-react": { "name": "@esri/calcite-components-react", - "version": "1.4.3-next.7", + "version": "1.4.3", "license": "SEE LICENSE.md", "dependencies": { - "@esri/calcite-components": "1.4.3-next.7" + "@esri/calcite-components": "1.4.3" }, "peerDependencies": { "react": ">=16.7", @@ -45740,7 +45740,7 @@ "@esri/calcite-components-react": { "version": "file:packages/calcite-components-react", "requires": { - "@esri/calcite-components": "1.4.3-next.7" + "@esri/calcite-components": "1.4.3" } }, "@esri/calcite-design-tokens": { diff --git a/packages/calcite-components-react/CHANGELOG.md b/packages/calcite-components-react/CHANGELOG.md index 9f750d00395..f945226406f 100644 --- a/packages/calcite-components-react/CHANGELOG.md +++ b/packages/calcite-components-react/CHANGELOG.md @@ -3,53 +3,17 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. -## [1.5.0-next.5](https://github.com/Esri/calcite-components/compare/@esri/calcite-components-react@1.5.0-next.4...@esri/calcite-components-react@1.5.0-next.5) (2023-06-23) +## [1.4.3](https://github.com/Esri/calcite-components/compare/@esri/calcite-components-react@1.4.2...@esri/calcite-components-react@1.4.3) (2023-06-26) -**Note:** Version bump only for package @esri/calcite-components-react +### Miscellaneous Chores -## [1.5.0-next.4](https://github.com/Esri/calcite-components/compare/@esri/calcite-components-react@1.5.0-next.3...@esri/calcite-components-react@1.5.0-next.4) (2023-06-21) +- **@esri/calcite-components-react:** Synchronize undefined versions -**Note:** Version bump only for package @esri/calcite-components-react +### Dependencies -## [1.5.0-next.3](https://github.com/Esri/calcite-components/compare/@esri/calcite-components-react@1.5.0-next.2...@esri/calcite-components-react@1.5.0-next.3) (2023-06-21) - -**Note:** Version bump only for package @esri/calcite-components-react - -## [1.5.0-next.2](https://github.com/Esri/calcite-components/compare/@esri/calcite-components-react@1.5.0-next.1...@esri/calcite-components-react@1.5.0-next.2) (2023-06-20) - -**Note:** Version bump only for package @esri/calcite-components-react - -## [1.5.0-next.1](https://github.com/Esri/calcite-components/compare/@esri/calcite-components-react@1.5.0-next.0...@esri/calcite-components-react@1.5.0-next.1) (2023-06-16) - -**Note:** Version bump only for package @esri/calcite-components-react - -## [1.5.0-next.0](https://github.com/Esri/calcite-components/compare/@esri/calcite-components-react@1.4.3-next.7...@esri/calcite-components-react@1.5.0-next.0) (2023-06-15) - -**Note:** Version bump only for package @esri/calcite-components-react - -## [1.4.3-next.7](https://github.com/Esri/calcite-components/compare/@esri/calcite-components-react@1.4.3-next.6...@esri/calcite-components-react@1.4.3-next.7) (2023-06-15) - -**Note:** Version bump only for package @esri/calcite-components-react - -## [1.4.3-next.6](https://github.com/Esri/calcite-components/compare/@esri/calcite-components-react@1.4.3-next.5...@esri/calcite-components-react@1.4.3-next.6) (2023-06-15) - -**Note:** Version bump only for package @esri/calcite-components-react - -## [1.4.3-next.5](https://github.com/Esri/calcite-components/compare/@esri/calcite-components-react@1.4.3-next.4...@esri/calcite-components-react@1.4.3-next.5) (2023-06-14) - -**Note:** Version bump only for package @esri/calcite-components-react - -## [1.4.3-next.4](https://github.com/Esri/calcite-components/compare/@esri/calcite-components-react@1.4.3-next.3...@esri/calcite-components-react@1.4.3-next.4) (2023-06-09) - -**Note:** Version bump only for package @esri/calcite-components-react - -## [1.4.3-next.3](https://github.com/Esri/calcite-components/compare/@esri/calcite-components-react@1.4.3-next.2...@esri/calcite-components-react@1.4.3-next.3) (2023-06-07) - -**Note:** Version bump only for package @esri/calcite-components-react - -## [1.4.3-next.2](https://github.com/Esri/calcite-components/compare/@esri/calcite-components-react@1.4.2...@esri/calcite-components-react@1.4.3-next.2) (2023-06-07) - -**Note:** Version bump only for package @esri/calcite-components-react +- The following workspace dependencies were updated + - dependencies + - @esri/calcite-components bumped from 1.4.3-next.7 to 1.4.3 ## v1.4.2 diff --git a/packages/calcite-components-react/package.json b/packages/calcite-components-react/package.json index 7b353ec4c22..271e0c7d516 100644 --- a/packages/calcite-components-react/package.json +++ b/packages/calcite-components-react/package.json @@ -1,7 +1,7 @@ { "name": "@esri/calcite-components-react", "sideEffects": false, - "version": "1.4.3-next.7", + "version": "1.4.3", "description": "A set of React components that wrap calcite components", "license": "SEE LICENSE.md", "scripts": { @@ -17,7 +17,7 @@ "dist/" ], "dependencies": { - "@esri/calcite-components": "1.4.3-next.7" + "@esri/calcite-components": "1.4.3" }, "peerDependencies": { "react": ">=16.7", diff --git a/packages/calcite-components/CHANGELOG.md b/packages/calcite-components/CHANGELOG.md index 32e410a4509..dcd67fcc734 100644 --- a/packages/calcite-components/CHANGELOG.md +++ b/packages/calcite-components/CHANGELOG.md @@ -3,99 +3,29 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. -## [1.5.0-next.5](https://github.com/Esri/calcite-components/compare/@esri/calcite-components@1.5.0-next.4...@esri/calcite-components@1.5.0-next.5) (2023-06-23) +## [1.4.3](https://github.com/Esri/calcite-components/compare/@esri/calcite-components@1.4.2...@esri/calcite-components@1.4.3) (2023-06-26) ### Bug Fixes -- **combobox, dropdown, input-date-picker, input-time-picker, popover, tooltip:** Prevent repositioning from affecting other floating components ([#7178](https://github.com/Esri/calcite-components/issues/7178)) ([1b02dae](https://github.com/Esri/calcite-components/commit/1b02dae4ef4e9594ece0a72bb8bc69fd2f7cf84a)), closes [#7158](https://github.com/Esri/calcite-components/issues/7158) - -## [1.5.0-next.4](https://github.com/Esri/calcite-components/compare/@esri/calcite-components@1.5.0-next.3...@esri/calcite-components@1.5.0-next.4) (2023-06-21) - -### Bug Fixes - -- **list:** update selectedItems property on all item selection changes ([#7204](https://github.com/Esri/calcite-components/issues/7204)) ([da048f6](https://github.com/Esri/calcite-components/commit/da048f618a987801d8ab5c284ab0f8c549e70a16)), closes [#7202](https://github.com/Esri/calcite-components/issues/7202) -- **radio-button:** focuses first focusable radio-button element in group. ([#7152](https://github.com/Esri/calcite-components/issues/7152)) ([dd7ec60](https://github.com/Esri/calcite-components/commit/dd7ec608779f1a34ad3c77a36b6f8fcf6fd1365a)), closes [#7113](https://github.com/Esri/calcite-components/issues/7113) - -## [1.5.0-next.3](https://github.com/Esri/calcite-components/compare/@esri/calcite-components@1.5.0-next.2...@esri/calcite-components@1.5.0-next.3) (2023-06-21) - -### Bug Fixes - -- **alert:** update alert queue when an alert is removed from the DOM ([#7189](https://github.com/Esri/calcite-components/issues/7189)) ([edd59eb](https://github.com/Esri/calcite-components/commit/edd59eb0bff21aa41fc7e537a2df2dbd2143a15a)), closes [#6616](https://github.com/Esri/calcite-components/issues/6616) - -## [1.5.0-next.2](https://github.com/Esri/calcite-components/compare/@esri/calcite-components@1.5.0-next.1...@esri/calcite-components@1.5.0-next.2) (2023-06-20) - -### Bug Fixes - -- **alert:** Sets autoCloseDuration to "medium" by default ([#7157](https://github.com/Esri/calcite-components/issues/7157)) ([1b9a8ed](https://github.com/Esri/calcite-components/commit/1b9a8edc1b7fab87899bd59c74ad036b5f53140c)), closes [#6363](https://github.com/Esri/calcite-components/issues/6363) [#6363](https://github.com/Esri/calcite-components/issues/6363) -- **scrim:** Responsively set the scale of the loading spinner ([#7182](https://github.com/Esri/calcite-components/issues/7182)) ([72c5943](https://github.com/Esri/calcite-components/commit/72c59434113a550e849c77caf8d622bd50e5769e)), closes [#7147](https://github.com/Esri/calcite-components/issues/7147) - -## [1.5.0-next.1](https://github.com/Esri/calcite-components/compare/@esri/calcite-components@1.5.0-next.0...@esri/calcite-components@1.5.0-next.1) (2023-06-16) - -### Bug Fixes - -- ensure mouse events are blocked for disabled components in Firefox ([#7107](https://github.com/Esri/calcite-components/issues/7107)) ([271d985](https://github.com/Esri/calcite-components/commit/271d9855eef4aa94cb7131381c98ab03eea57e4e)), closes [#7043](https://github.com/Esri/calcite-components/issues/7043) - -### Reverts - -- Add slots for filter actions" ([#7179](https://github.com/Esri/calcite-components/issues/7179)) ([667ee47](https://github.com/Esri/calcite-components/commit/667ee4766ced8994ebf8e8af270661f75573c83c)), closes [Esri/calcite-components#7148](https://github.com/Esri/calcite-components/issues/7148) - -## [1.5.0-next.0](https://github.com/Esri/calcite-components/compare/@esri/calcite-components@1.4.3-next.7...@esri/calcite-components@1.5.0-next.0) (2023-06-15) - -### Features - -- **list:** Add slots for filter actions ([#7148](https://github.com/Esri/calcite-components/issues/7148)) ([c9215c0](https://github.com/Esri/calcite-components/commit/c9215c05535c0d91582a73eabb9a587d39ba0422)), closes [#6600](https://github.com/Esri/calcite-components/issues/6600) - -### Bug Fixes - -- **radio-button, radio-button-group:** prevent emitting events when selecting a checked radio button ([#7102](https://github.com/Esri/calcite-components/issues/7102)) ([77fcc81](https://github.com/Esri/calcite-components/commit/77fcc818dd2d20805318cdb6030b8aa73ccb1a58)), closes [#6712](https://github.com/Esri/calcite-components/issues/6712) - -## [1.4.3-next.7](https://github.com/Esri/calcite-components/compare/@esri/calcite-components@1.4.3-next.6...@esri/calcite-components@1.4.3-next.7) (2023-06-15) - -### Bug Fixes - -- **tooltip:** improve component timing ([#7172](https://github.com/Esri/calcite-components/issues/7172)) ([106f5d2](https://github.com/Esri/calcite-components/commit/106f5d27afc5d7363fa197a1f9fb0552864a15e4)), closes [#6396](https://github.com/Esri/calcite-components/issues/6396) - -## [1.4.3-next.6](https://github.com/Esri/calcite-components/compare/@esri/calcite-components@1.4.3-next.5...@esri/calcite-components@1.4.3-next.6) (2023-06-15) - -### Bug Fixes - -- **input-date-picker:** Fix showing the placeholder when resetting the value ([#7156](https://github.com/Esri/calcite-components/issues/7156)) ([8d60ffd](https://github.com/Esri/calcite-components/commit/8d60ffd1e68baf2b96006deaaec25c2e92df8d55)), closes [#6378](https://github.com/Esri/calcite-components/issues/6378) - -## [1.4.3-next.5](https://github.com/Esri/calcite-components/compare/@esri/calcite-components@1.4.3-next.4...@esri/calcite-components@1.4.3-next.5) (2023-06-14) - -### Bug Fixes - -- **input,input-number:** allow typing decimal separator in firefox for arabic locale ([#7173](https://github.com/Esri/calcite-components/issues/7173)) ([595e6f2](https://github.com/Esri/calcite-components/commit/595e6f229f13facfd6f79f4069f01b2bab79fa40)), closes [#7130](https://github.com/Esri/calcite-components/issues/7130) - -## [1.4.3-next.4](https://github.com/Esri/calcite-components/compare/@esri/calcite-components@1.4.3-next.3...@esri/calcite-components@1.4.3-next.4) (2023-06-09) - -### Bug Fixes - -- **list:** No longer has incorrect border width ([#7160](https://github.com/Esri/calcite-components/issues/7160)) ([a810943](https://github.com/Esri/calcite-components/commit/a810943fdea2c1f90f5deca35ab0501287e45489)) - -## [1.4.3-next.3](https://github.com/Esri/calcite-components/compare/@esri/calcite-components@1.4.3-next.2...@esri/calcite-components@1.4.3-next.3) (2023-06-07) - -### Bug Fixes - -- **radio-button-group:** no longer focus first radio button on label click and adds `setFocus` method. ([#7050](https://github.com/Esri/calcite-components/issues/7050)) ([4267b8c](https://github.com/Esri/calcite-components/commit/4267b8ca26db8047d42659d6062b606a90819abc)), closes [#6698](https://github.com/Esri/calcite-components/issues/6698) [#6357](https://github.com/Esri/calcite-components/issues/6357) [#6698](https://github.com/Esri/calcite-components/issues/6698) - -## [1.4.3-next.2](https://github.com/Esri/calcite-components/compare/@esri/calcite-components@1.4.2...@esri/calcite-components@1.4.3-next.2) (2023-06-07) - -### Bug Fixes - -- **navigation:** label is no longer a required property ([#7084](https://github.com/Esri/calcite-components/issues/7084)) ([ba2bd4d](https://github.com/Esri/calcite-components/commit/ba2bd4db32b3bfbc5403a75156d4fde6859114e3)), closes [#7013](https://github.com/Esri/calcite-components/issues/7013) - -## [1.4.3-next.1](https://github.com/Esri/calcite-components/compare/v1.4.3-next.0...v1.4.3-next.1) (2023-06-02) - -### Bug Fixes +- **accordion-item:** support items working across shadowDOM ([#7035](https://github.com/Esri/calcite-components/issues/7035)) ([6378e35](https://github.com/Esri/calcite-components/commit/6378e351bad4aff1aefe62b7c52262ae57c48907)), closes [#6167](https://github.com/Esri/calcite-components/issues/6167) +- **alert:** Sets autoCloseDuration to "medium" by default ([#7157](https://github.com/Esri/calcite-components/issues/7157)) ([1b9a8ed](https://github.com/Esri/calcite-components/commit/1b9a8edc1b7fab87899bd59c74ad036b5f53140c)) +- **alert:** Update alert queue when an alert is removed from the DOM ([#7189](https://github.com/Esri/calcite-components/issues/7189)) ([edd59eb](https://github.com/Esri/calcite-components/commit/edd59eb0bff21aa41fc7e537a2df2dbd2143a15a)) +- **combobox, dropdown, input-date-picker, input-time-picker, popover, tooltip:** Prevent repositioning from affecting other floating components ([#7178](https://github.com/Esri/calcite-components/issues/7178)) ([1b02dae](https://github.com/Esri/calcite-components/commit/1b02dae4ef4e9594ece0a72bb8bc69fd2f7cf84a)) +- Ensure mouse events are blocked for disabled components in Firefox ([#7107](https://github.com/Esri/calcite-components/issues/7107)) ([271d985](https://github.com/Esri/calcite-components/commit/271d9855eef4aa94cb7131381c98ab03eea57e4e)) +- **input-date-picker:** Fix showing the placeholder when resetting the value ([#7156](https://github.com/Esri/calcite-components/issues/7156)) ([8d60ffd](https://github.com/Esri/calcite-components/commit/8d60ffd1e68baf2b96006deaaec25c2e92df8d55)) +- **input, input-number:** Allows numeric characters. ([#7213](https://github.com/Esri/calcite-components/issues/7213)) ([739f0af](https://github.com/Esri/calcite-components/commit/739f0af72eee0436cec7307a440e38532ee741cd)) +- **input,input-number:** Allow typing decimal separator in firefox for arabic locale ([#7173](https://github.com/Esri/calcite-components/issues/7173)) ([595e6f2](https://github.com/Esri/calcite-components/commit/595e6f229f13facfd6f79f4069f01b2bab79fa40)) +- **list:** No longer has incorrect border width ([a810943](https://github.com/Esri/calcite-components/commit/a810943fdea2c1f90f5deca35ab0501287e45489)) +- **list:** Update selectedItems property on all item selection changes ([#7204](https://github.com/Esri/calcite-components/issues/7204)) ([da048f6](https://github.com/Esri/calcite-components/commit/da048f618a987801d8ab5c284ab0f8c549e70a16)) - **menu-item:** Ensure correct order of rendered icons ([#7098](https://github.com/Esri/calcite-components/issues/7098)) ([fd344e9](https://github.com/Esri/calcite-components/commit/fd344e91fb02b5dcb3e7ef6565fc679935c078c2)), closes [#7097](https://github.com/Esri/calcite-components/issues/7097) - -## [1.4.3-next.0](https://github.com/Esri/calcite-components/compare/@esri/calcite-components@1.4.2...v1.4.3-next.0) (2023-05-31) - -### Bug Fixes - -- **accordion-item:** support items working across shadowDOM ([#7035](https://github.com/Esri/calcite-components/issues/7035)) ([6378e35](https://github.com/Esri/calcite-components/commit/6378e351bad4aff1aefe62b7c52262ae57c48907)), closes [#6167](https://github.com/Esri/calcite-components/issues/6167) +- **navigation:** Label is no longer a required property ([#7084](https://github.com/Esri/calcite-components/issues/7084)) ([ba2bd4d](https://github.com/Esri/calcite-components/commit/ba2bd4db32b3bfbc5403a75156d4fde6859114e3)) +- **radio-button-group:** No longer focus first radio button on label click and adds `setFocus` method. ([#7050](https://github.com/Esri/calcite-components/issues/7050)) ([4267b8c](https://github.com/Esri/calcite-components/commit/4267b8ca26db8047d42659d6062b606a90819abc)) +- **radio-button, radio-button-group:** Prevent emitting events when selecting a checked radio button ([#7102](https://github.com/Esri/calcite-components/issues/7102)) ([77fcc81](https://github.com/Esri/calcite-components/commit/77fcc818dd2d20805318cdb6030b8aa73ccb1a58)) +- **radio-button:** Focuses first focusable radio-button element in group. ([#7152](https://github.com/Esri/calcite-components/issues/7152)) ([dd7ec60](https://github.com/Esri/calcite-components/commit/dd7ec608779f1a34ad3c77a36b6f8fcf6fd1365a)) +- **scrim:** Responsively set the scale of the loading spinner ([#7182](https://github.com/Esri/calcite-components/issues/7182)) ([72c5943](https://github.com/Esri/calcite-components/commit/72c59434113a550e849c77caf8d622bd50e5769e)) +- **tooltip:** Improve component timing ([#7172](https://github.com/Esri/calcite-components/issues/7172)) ([106f5d2](https://github.com/Esri/calcite-components/commit/106f5d27afc5d7363fa197a1f9fb0552864a15e4)) +- **tree-item:** Ensure expanded tree-item is displayed when expanded and made visible ([#7216](https://github.com/Esri/calcite-components/issues/7216)) ([3c0fbf5](https://github.com/Esri/calcite-components/commit/3c0fbf5f6789d7822a3c4050a5d56baee0a2f1a9)) ## [v1.4.2](https://github.com/Esri/calcite-components/compare/@esri/calcite-components@1.4.1...@esri/calcite-components@1.4.2) (2023-05-30) diff --git a/packages/calcite-components/package.json b/packages/calcite-components/package.json index 7a4bb762398..dcd31156766 100644 --- a/packages/calcite-components/package.json +++ b/packages/calcite-components/package.json @@ -1,6 +1,6 @@ { "name": "@esri/calcite-components", - "version": "1.4.3-next.7", + "version": "1.4.3", "description": "Web Components for Esri's Calcite Design System.", "main": "dist/index.cjs.js", "module": "dist/index.js", diff --git a/packages/calcite-components/readme.md b/packages/calcite-components/readme.md index bea6b4b6d0e..70550a8915b 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 ``` diff --git a/release-please-config.json b/release-please-config.json index 9e7fac96272..4b39a3cf852 100644 --- a/release-please-config.json +++ b/release-please-config.json @@ -7,12 +7,10 @@ "packages": { "packages/calcite-components": { "component": "@esri/calcite-components", - "extra-files": ["readme.md"], - "release-as": "1.4.3" + "extra-files": ["readme.md"] }, "packages/calcite-components-react": { - "component": "@esri/calcite-components-react", - "release-as": "1.4.3" + "component": "@esri/calcite-components-react" } }, "plugins": [ From ac2fcb7a058bf907466bd79c7e488e09f8b459e0 Mon Sep 17 00:00:00 2001 From: Ben Elan Date: Tue, 27 Jun 2023 10:18:30 -0700 Subject: [PATCH 31/32] build: bump package versions back to 1.5.0-next.5 (#7228) **Related Issue:** # ## Summary A feat accidently snuck into our patch release, which we reverted. This PR changes the versions in `package.json` back to the highest `next` release so the CI doesn't get confused. --- package-lock.json | 8 ++++---- packages/calcite-components-react/package.json | 4 ++-- packages/calcite-components/package.json | 2 +- 3 files changed, 7 insertions(+), 7 deletions(-) diff --git a/package-lock.json b/package-lock.json index a4d0adda2bf..4700b2d325f 100644 --- a/package-lock.json +++ b/package-lock.json @@ -43876,7 +43876,7 @@ }, "packages/calcite-components": { "name": "@esri/calcite-components", - "version": "1.4.3", + "version": "1.5.0-next.5", "license": "SEE LICENSE.md", "dependencies": { "@floating-ui/dom": "1.4.1", @@ -43902,10 +43902,10 @@ }, "packages/calcite-components-react": { "name": "@esri/calcite-components-react", - "version": "1.4.3", + "version": "1.5.0-next.5", "license": "SEE LICENSE.md", "dependencies": { - "@esri/calcite-components": "1.4.3" + "@esri/calcite-components": "1.5.0-next.5" }, "peerDependencies": { "react": ">=16.7", @@ -45740,7 +45740,7 @@ "@esri/calcite-components-react": { "version": "file:packages/calcite-components-react", "requires": { - "@esri/calcite-components": "1.4.3" + "@esri/calcite-components": "1.5.0-next.5" } }, "@esri/calcite-design-tokens": { diff --git a/packages/calcite-components-react/package.json b/packages/calcite-components-react/package.json index 271e0c7d516..0d62961548e 100644 --- a/packages/calcite-components-react/package.json +++ b/packages/calcite-components-react/package.json @@ -1,7 +1,7 @@ { "name": "@esri/calcite-components-react", "sideEffects": false, - "version": "1.4.3", + "version": "1.5.0-next.5", "description": "A set of React components that wrap calcite components", "license": "SEE LICENSE.md", "scripts": { @@ -17,7 +17,7 @@ "dist/" ], "dependencies": { - "@esri/calcite-components": "1.4.3" + "@esri/calcite-components": "1.5.0-next.5" }, "peerDependencies": { "react": ">=16.7", diff --git a/packages/calcite-components/package.json b/packages/calcite-components/package.json index dcd31156766..fa9e6e03015 100644 --- a/packages/calcite-components/package.json +++ b/packages/calcite-components/package.json @@ -1,6 +1,6 @@ { "name": "@esri/calcite-components", - "version": "1.4.3", + "version": "1.5.0-next.5", "description": "Web Components for Esri's Calcite Design System.", "main": "dist/index.cjs.js", "module": "dist/index.js", From edb6781a58d8737ff066a10cd8d2fb5d525bfcc3 Mon Sep 17 00:00:00 2001 From: Ben Elan Date: Tue, 27 Jun 2023 12:15:12 -0700 Subject: [PATCH 32/32] ci: double build cc when publishing to workaround stencil types bug (#7227) **Related Issue:** # ## Summary Add a `prepublishOnly` npm script hook to calcite-components, which builds and makes sure the types aren't broken. In addition to the Stencil bug, Calcite Components also needs to be built after versioning so that the preamble is correct. It has been [a version behind in `next` releases](https://unpkg.com/browse/@esri/calcite-components@1.5.0-next.5/dist/calcite/calcite.esm.js). ref: https://github.com/lerna/lerna/tree/main/libs/commands/publish#lifecycle-scripts --- packages/calcite-components/package.json | 1 + .../stencilDoubleBuildTypesWorkaround.sh | 17 +++++++++++++++++ 2 files changed, 18 insertions(+) create mode 100755 packages/calcite-components/support/stencilDoubleBuildTypesWorkaround.sh diff --git a/packages/calcite-components/package.json b/packages/calcite-components/package.json index fa9e6e03015..c8d7adbeeea 100644 --- a/packages/calcite-components/package.json +++ b/packages/calcite-components/package.json @@ -34,6 +34,7 @@ "lint:scss": "stylelint --fix \"src/**/*.scss\" && prettier --write \"**/*.scss\" >/dev/null", "lint:ts": "eslint --ext .ts,.tsx --fix . && prettier --write \"**/*.ts?(x)\" >/dev/null", "posttest": "npm run test:prerender", + "prepublishOnly": "./support/stencilDoubleBuildTypesWorkaround.sh", "release:docs": "npm run docs && storybook-to-ghpages --existing-output-dir=docs", "start": "concurrently --kill-others --raw \"tsc --project ./tsconfig-demos.json --watch\" \"npm run build:watch-dev -- --serve\" \"ts-node --esm ./support/cleanOnProcessExit.ts --path ./src/demos/**/*.js \"", "test": "stencil test --no-docs --no-build --spec --e2e", diff --git a/packages/calcite-components/support/stencilDoubleBuildTypesWorkaround.sh b/packages/calcite-components/support/stencilDoubleBuildTypesWorkaround.sh new file mode 100755 index 00000000000..1e60afb3aa9 --- /dev/null +++ b/packages/calcite-components/support/stencilDoubleBuildTypesWorkaround.sh @@ -0,0 +1,17 @@ +#!/usr/bin/env sh + +# This script builds the stencil components and ensures +# the types are generated correctly as a workaround for +# https://github.com/ionic-team/stencil/issues/3239 +# +# It runs in the prepublishOnly NPM script hook +# to prevent releasing with type bugs, and because +# it needs to execute after versioning so that the +# preamble in the dist source code is correct. +# +# Refs: +# https://github.com/lerna/lerna/blob/main/libs/commands/publish/README.md#lifecycle-scripts +# https://docs.npmjs.com/cli/v8/using-npm/scripts#life-cycle-scripts +# https://github.com/Esri/calcite-components/pull/4303 +npm run build +npm run util:test-types