From a8b61f44c9268621cf342b1de5d9c514df06348f Mon Sep 17 00:00:00 2001 From: JC Franco Date: Mon, 12 Feb 2024 18:51:47 -0800 Subject: [PATCH 1/3] fix: ensure disabled components in Firefox behave consistently --- .../src/components/action/action.tsx | 4 -- .../src/components/block/block.tsx | 4 -- .../src/components/button/button.tsx | 4 -- .../src/components/checkbox/checkbox.tsx | 4 -- .../src/components/chip-group/chip-group.tsx | 4 -- .../src/components/chip/chip.tsx | 4 -- .../components/color-picker/color-picker.tsx | 4 -- .../combobox-item/combobox-item.tsx | 4 -- .../src/components/combobox/combobox.tsx | 4 -- .../date-picker-day/date-picker-day.tsx | 10 --- .../src/components/dropdown/dropdown.tsx | 4 -- .../src/components/fab/fab.tsx | 10 --- .../src/components/filter/filter.tsx | 4 -- .../src/components/flow-item/flow-item.tsx | 4 -- .../src/components/handle/handle.tsx | 9 +-- .../inline-editable/inline-editable.tsx | 4 -- .../input-date-picker/input-date-picker.tsx | 4 -- .../components/input-number/input-number.tsx | 4 -- .../src/components/input-text/input-text.tsx | 4 -- .../input-time-picker/input-time-picker.tsx | 4 -- .../src/components/input/input.tsx | 4 -- .../src/components/link/link.tsx | 10 --- .../list-item-group/list-item-group.tsx | 7 -- .../src/components/list-item/list-item.tsx | 4 -- .../src/components/list/list.tsx | 4 -- .../src/components/panel/panel.tsx | 4 -- .../pick-list-item/pick-list-item.tsx | 4 -- .../src/components/pick-list/pick-list.tsx | 9 +-- .../components/radio-button/radio-button.tsx | 4 -- .../src/components/rating/rating.tsx | 4 -- .../segmented-control/segmented-control.tsx | 4 -- .../src/components/select/select.tsx | 4 -- .../src/components/slider/slider.tsx | 4 -- .../sortable-list/sortable-list.tsx | 4 -- .../components/split-button/split-button.tsx | 10 --- .../components/stepper-item/stepper-item.tsx | 4 -- .../src/components/switch/switch.tsx | 4 -- .../src/components/tab-title/tab-title.tsx | 4 -- .../src/components/table-cell/table-cell.tsx | 4 -- .../src/components/table-row/table-row.tsx | 10 --- .../src/components/text-area/text-area.tsx | 4 -- .../tile-select-group/tile-select-group.tsx | 10 --- .../components/tile-select/tile-select.tsx | 4 -- .../src/components/tile/tile.tsx | 10 --- .../src/components/tree-item/tree-item.tsx | 4 -- .../value-list-item/value-list-item.tsx | 4 -- .../src/components/value-list/value-list.tsx | 9 +-- .../src/utils/interactive.tsx | 66 +------------------ 48 files changed, 6 insertions(+), 308 deletions(-) diff --git a/packages/calcite-components/src/components/action/action.tsx b/packages/calcite-components/src/components/action/action.tsx index e32b50045fc..53d354c7420 100644 --- a/packages/calcite-components/src/components/action/action.tsx +++ b/packages/calcite-components/src/components/action/action.tsx @@ -14,8 +14,6 @@ import { import { toAriaBoolean } from "../../utils/dom"; import { guid } from "../../utils/guid"; import { - connectInteractive, - disconnectInteractive, InteractiveComponent, InteractiveContainer, updateHostInteraction, @@ -171,7 +169,6 @@ export class Action // -------------------------------------------------------------------------- connectedCallback(): void { - connectInteractive(this); connectLocalized(this); connectMessages(this); this.mutationObserver?.observe(this.el, { childList: true, subtree: true }); @@ -189,7 +186,6 @@ 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 2ea2e319507..98bd652b234 100644 --- a/packages/calcite-components/src/components/block/block.tsx +++ b/packages/calcite-components/src/components/block/block.tsx @@ -18,8 +18,6 @@ import { } from "../../utils/conditionalSlot"; import { focusFirstTabbable, getSlotted, toAriaBoolean } from "../../utils/dom"; import { - connectInteractive, - disconnectInteractive, InteractiveComponent, InteractiveContainer, updateHostInteraction, @@ -212,13 +210,11 @@ 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 6d9ac5199b7..c8503673c35 100644 --- a/packages/calcite-components/src/components/button/button.tsx +++ b/packages/calcite-components/src/components/button/button.tsx @@ -12,8 +12,6 @@ import { } from "@stencil/core"; import { findAssociatedForm, FormOwner, resetForm, submitForm } from "../../utils/form"; import { - connectInteractive, - disconnectInteractive, InteractiveComponent, InteractiveContainer, updateHostInteraction, @@ -197,7 +195,6 @@ export class Button //-------------------------------------------------------------------------- async connectedCallback(): Promise { - connectInteractive(this); connectLocalized(this); connectMessages(this); this.hasLoader = this.loading; @@ -208,7 +205,6 @@ 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 2049fffbb5e..3d1d935b810 100644 --- a/packages/calcite-components/src/components/checkbox/checkbox.tsx +++ b/packages/calcite-components/src/components/checkbox/checkbox.tsx @@ -18,8 +18,6 @@ import { } from "../../utils/form"; import { guid } from "../../utils/guid"; import { - connectInteractive, - disconnectInteractive, InteractiveComponent, InteractiveContainer, updateHostInteraction, @@ -225,13 +223,11 @@ 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 922be836b7e..2e3d03e210a 100644 --- a/packages/calcite-components/src/components/chip-group/chip-group.tsx +++ b/packages/calcite-components/src/components/chip-group/chip-group.tsx @@ -12,8 +12,6 @@ import { } from "@stencil/core"; import { focusElementInGroup, toAriaBoolean } from "../../utils/dom"; import { - connectInteractive, - disconnectInteractive, InteractiveComponent, InteractiveContainer, updateHostInteraction, @@ -107,12 +105,10 @@ 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 ef19b2f58b6..0bd91902217 100644 --- a/packages/calcite-components/src/components/chip/chip.tsx +++ b/packages/calcite-components/src/components/chip/chip.tsx @@ -36,8 +36,6 @@ import { updateMessages, } from "../../utils/t9n"; import { - connectInteractive, - disconnectInteractive, InteractiveComponent, InteractiveContainer, updateHostInteraction, @@ -197,7 +195,6 @@ export class Chip connectedCallback(): void { connectConditionalSlotComponent(this); - connectInteractive(this); connectLocalized(this); connectMessages(this); this.mutationObserver?.observe(this.el, { childList: true, subtree: true }); @@ -213,7 +210,6 @@ export class Chip disconnectedCallback(): void { disconnectConditionalSlotComponent(this); - disconnectInteractive(this); disconnectLocalized(this); disconnectMessages(this); this.mutationObserver?.disconnect(); 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 e12d1c8c840..693b7f160f7 100644 --- a/packages/calcite-components/src/components/color-picker/color-picker.tsx +++ b/packages/calcite-components/src/components/color-picker/color-picker.tsx @@ -46,8 +46,6 @@ import { } from "./utils"; import { - connectInteractive, - disconnectInteractive, InteractiveComponent, InteractiveContainer, updateHostInteraction, @@ -693,7 +691,6 @@ export class ColorPicker } connectedCallback(): void { - connectInteractive(this); connectLocalized(this); connectMessages(this); } @@ -705,7 +702,6 @@ export class ColorPicker disconnectedCallback(): void { window.removeEventListener("pointermove", this.globalPointerMoveHandler); window.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 ba02ec1a960..2a572c1a125 100644 --- a/packages/calcite-components/src/components/combobox-item/combobox-item.tsx +++ b/packages/calcite-components/src/components/combobox-item/combobox-item.tsx @@ -17,8 +17,6 @@ import { import { getSlotted } from "../../utils/dom"; import { guid } from "../../utils/guid"; import { - connectInteractive, - disconnectInteractive, InteractiveComponent, InteractiveContainer, updateHostInteraction, @@ -125,12 +123,10 @@ export class ComboboxItem implements ConditionalSlotComponent, InteractiveCompon connectedCallback(): void { this.ancestors = getAncestors(this.el); 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 753c3386b0a..5b74f598366 100644 --- a/packages/calcite-components/src/components/combobox/combobox.tsx +++ b/packages/calcite-components/src/components/combobox/combobox.tsx @@ -43,8 +43,6 @@ import { } from "../../utils/form"; import { guid } from "../../utils/guid"; import { - connectInteractive, - disconnectInteractive, InteractiveComponent, InteractiveContainer, updateHostInteraction, @@ -436,7 +434,6 @@ export class Combobox // -------------------------------------------------------------------------- connectedCallback(): void { - connectInteractive(this); connectLocalized(this); connectMessages(this); connectLabel(this); @@ -486,7 +483,6 @@ 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 76a075e4152..0c114342161 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 @@ -13,8 +13,6 @@ import { dateToISO } from "../../utils/date"; import { closestElementCrossShadowBoundary, toAriaBoolean } from "../../utils/dom"; import { - connectInteractive, - disconnectInteractive, InteractiveComponent, InteractiveContainer, updateHostInteraction, @@ -184,18 +182,10 @@ export class DatePickerDay implements InteractiveComponent { ); } - connectedCallback(): void { - connectInteractive(this); - } - componentDidRender(): void { updateHostInteraction(this); } - disconnectedCallback(): void { - disconnectInteractive(this); - } - //-------------------------------------------------------------------------- // // Private State/Props diff --git a/packages/calcite-components/src/components/dropdown/dropdown.tsx b/packages/calcite-components/src/components/dropdown/dropdown.tsx index b51250699a5..92b2912315d 100644 --- a/packages/calcite-components/src/components/dropdown/dropdown.tsx +++ b/packages/calcite-components/src/components/dropdown/dropdown.tsx @@ -33,8 +33,6 @@ import { } from "../../utils/floating-ui"; import { guid } from "../../utils/guid"; import { - connectInteractive, - disconnectInteractive, InteractiveComponent, InteractiveContainer, updateHostInteraction, @@ -210,7 +208,6 @@ export class Dropdown this.openHandler(); onToggleOpenCloseComponent(this); } - connectInteractive(this); this.updateItems(); connectFloatingUI(this, this.referenceEl, this.floatingEl); } @@ -231,7 +228,6 @@ export class Dropdown disconnectedCallback(): void { this.mutationObserver?.disconnect(); this.resizeObserver?.disconnect(); - disconnectInteractive(this); disconnectFloatingUI(this, this.referenceEl, this.floatingEl); } diff --git a/packages/calcite-components/src/components/fab/fab.tsx b/packages/calcite-components/src/components/fab/fab.tsx index 1040ea43398..fde4a75c4e0 100755 --- a/packages/calcite-components/src/components/fab/fab.tsx +++ b/packages/calcite-components/src/components/fab/fab.tsx @@ -1,8 +1,6 @@ import { Component, Element, h, Method, Prop, VNode } from "@stencil/core"; import { focusElement } from "../../utils/dom"; import { - connectInteractive, - disconnectInteractive, InteractiveComponent, InteractiveContainer, updateHostInteraction, @@ -95,10 +93,6 @@ export class Fab implements InteractiveComponent, LoadableComponent { // //-------------------------------------------------------------------------- - connectedCallback(): void { - connectInteractive(this); - } - componentWillLoad(): void { setUpLoadableComponent(this); } @@ -111,10 +105,6 @@ 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 acbfefa677e..1fd6dc83b38 100644 --- a/packages/calcite-components/src/components/filter/filter.tsx +++ b/packages/calcite-components/src/components/filter/filter.tsx @@ -13,8 +13,6 @@ import { import { debounce } from "lodash-es"; import { filter } from "../../utils/filter"; import { - connectInteractive, - disconnectInteractive, InteractiveComponent, InteractiveContainer, updateHostInteraction, @@ -165,7 +163,6 @@ export class Filter } connectedCallback(): void { - connectInteractive(this); connectLocalized(this); connectMessages(this); } @@ -175,7 +172,6 @@ export class Filter } disconnectedCallback(): void { - disconnectInteractive(this); disconnectLocalized(this); disconnectMessages(this); this.filterDebounced.cancel(); 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 ed45b147df1..69c842b14b8 100644 --- a/packages/calcite-components/src/components/flow-item/flow-item.tsx +++ b/packages/calcite-components/src/components/flow-item/flow-item.tsx @@ -13,8 +13,6 @@ import { } from "@stencil/core"; import { getElementDir } from "../../utils/dom"; import { - connectInteractive, - disconnectInteractive, InteractiveComponent, InteractiveContainer, updateHostInteraction, @@ -164,7 +162,6 @@ export class FlowItem //-------------------------------------------------------------------------- connectedCallback(): void { - connectInteractive(this); connectLocalized(this); connectMessages(this); } @@ -179,7 +176,6 @@ export class FlowItem } disconnectedCallback(): void { - disconnectInteractive(this); disconnectLocalized(this); disconnectMessages(this); } diff --git a/packages/calcite-components/src/components/handle/handle.tsx b/packages/calcite-components/src/components/handle/handle.tsx index d42351aa944..7f73b203d0e 100644 --- a/packages/calcite-components/src/components/handle/handle.tsx +++ b/packages/calcite-components/src/components/handle/handle.tsx @@ -28,12 +28,7 @@ import { import { HandleMessages } from "./assets/handle/t9n"; import { HandleChange, HandleNudge } from "./interfaces"; import { CSS, ICONS, SUBSTITUTIONS } from "./resources"; -import { - connectInteractive, - disconnectInteractive, - InteractiveComponent, - updateHostInteraction, -} from "../../utils/interactive"; +import { InteractiveComponent, updateHostInteraction } from "../../utils/interactive"; @Component({ tag: "calcite-handle", @@ -130,7 +125,6 @@ export class Handle implements LoadableComponent, T9nComponent, InteractiveCompo //-------------------------------------------------------------------------- connectedCallback(): void { - connectInteractive(this); connectMessages(this); connectLocalized(this); } @@ -149,7 +143,6 @@ export class Handle implements LoadableComponent, T9nComponent, InteractiveCompo } disconnectedCallback(): void { - disconnectInteractive(this); disconnectMessages(this); disconnectLocalized(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 9b6a5bb50ff..d5716ada670 100644 --- a/packages/calcite-components/src/components/inline-editable/inline-editable.tsx +++ b/packages/calcite-components/src/components/inline-editable/inline-editable.tsx @@ -13,8 +13,6 @@ import { } from "@stencil/core"; import { getSlotted } from "../../utils/dom"; import { - connectInteractive, - disconnectInteractive, InteractiveComponent, InteractiveContainer, updateHostInteraction, @@ -129,7 +127,6 @@ export class InlineEditable //-------------------------------------------------------------------------- connectedCallback() { - connectInteractive(this); connectLabel(this); connectLocalized(this); connectMessages(this); @@ -147,7 +144,6 @@ 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 dfe057f06f1..20a0f4f0044 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 @@ -43,8 +43,6 @@ import { submitForm, } from "../../utils/form"; import { - connectInteractive, - disconnectInteractive, InteractiveComponent, InteractiveContainer, updateHostInteraction, @@ -438,7 +436,6 @@ export class InputDatePicker // -------------------------------------------------------------------------- connectedCallback(): void { - connectInteractive(this); connectLocalized(this); const { open } = this; @@ -502,7 +499,6 @@ 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 6e0ba4f55cf..b08c6c93be9 100644 --- a/packages/calcite-components/src/components/input-number/input-number.tsx +++ b/packages/calcite-components/src/components/input-number/input-number.tsx @@ -28,8 +28,6 @@ import { submitForm, } from "../../utils/form"; import { - connectInteractive, - disconnectInteractive, InteractiveComponent, InteractiveContainer, updateHostInteraction, @@ -419,7 +417,6 @@ export class InputNumber //-------------------------------------------------------------------------- connectedCallback(): void { - connectInteractive(this); connectLocalized(this); connectMessages(this); this.inlineEditableEl = this.el.closest("calcite-inline-editable"); @@ -454,7 +451,6 @@ 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 384d0bc9797..6af8e5f1c49 100644 --- a/packages/calcite-components/src/components/input-text/input-text.tsx +++ b/packages/calcite-components/src/components/input-text/input-text.tsx @@ -21,8 +21,6 @@ import { submitForm, } from "../../utils/form"; import { - connectInteractive, - disconnectInteractive, InteractiveComponent, InteractiveContainer, updateHostInteraction, @@ -316,7 +314,6 @@ export class InputText //-------------------------------------------------------------------------- connectedCallback(): void { - connectInteractive(this); connectLocalized(this); connectMessages(this); @@ -335,7 +332,6 @@ 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 319a09cdfb6..edd0d4be089 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 @@ -21,8 +21,6 @@ import { } from "../../utils/form"; import { guid } from "../../utils/guid"; import { - connectInteractive, - disconnectInteractive, InteractiveComponent, InteractiveContainer, updateHostInteraction, @@ -912,7 +910,6 @@ export class InputTimePicker //-------------------------------------------------------------------------- connectedCallback() { - connectInteractive(this); connectLocalized(this); if (isValidTime(this.value)) { @@ -950,7 +947,6 @@ 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 1a6e8754d89..f5a92da350a 100644 --- a/packages/calcite-components/src/components/input/input.tsx +++ b/packages/calcite-components/src/components/input/input.tsx @@ -28,8 +28,6 @@ import { submitForm, } from "../../utils/form"; import { - connectInteractive, - disconnectInteractive, InteractiveComponent, InteractiveContainer, updateHostInteraction, @@ -476,7 +474,6 @@ export class Input //-------------------------------------------------------------------------- connectedCallback(): void { - connectInteractive(this); connectLocalized(this); connectMessages(this); @@ -510,7 +507,6 @@ 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 5b568372a99..ed41268a5d1 100644 --- a/packages/calcite-components/src/components/link/link.tsx +++ b/packages/calcite-components/src/components/link/link.tsx @@ -1,8 +1,6 @@ import { Component, Element, h, Host, Listen, Method, Prop, VNode } from "@stencil/core"; import { focusElement, getElementDir } from "../../utils/dom"; import { - connectInteractive, - disconnectInteractive, InteractiveComponent, InteractiveContainer, updateHostInteraction, @@ -67,10 +65,6 @@ export class Link implements InteractiveComponent, LoadableComponent { // //-------------------------------------------------------------------------- - connectedCallback(): void { - connectInteractive(this); - } - componentWillLoad(): void { setUpLoadableComponent(this); } @@ -83,10 +77,6 @@ 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 87943ce6967..1bc943a6ac5 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 @@ -10,8 +10,6 @@ import { VNode, } from "@stencil/core"; import { - connectInteractive, - disconnectInteractive, InteractiveComponent, InteractiveContainer, updateHostInteraction, @@ -73,17 +71,12 @@ 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 5ddaa0b8d11..b5951ead231 100644 --- a/packages/calcite-components/src/components/list-item/list-item.tsx +++ b/packages/calcite-components/src/components/list-item/list-item.tsx @@ -19,8 +19,6 @@ import { toAriaBoolean, } from "../../utils/dom"; import { - connectInteractive, - disconnectInteractive, InteractiveComponent, InteractiveContainer, updateHostInteraction, @@ -351,7 +349,6 @@ export class ListItem // -------------------------------------------------------------------------- connectedCallback(): void { - connectInteractive(this); connectLocalized(this); connectMessages(this); const { el } = this; @@ -375,7 +372,6 @@ 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 0706c725c6b..e8a3d9dc95c 100755 --- a/packages/calcite-components/src/components/list/list.tsx +++ b/packages/calcite-components/src/components/list/list.tsx @@ -15,8 +15,6 @@ import Sortable from "sortablejs"; import { debounce } from "lodash-es"; import { slotChangeHasAssignedElement, toAriaBoolean } from "../../utils/dom"; import { - connectInteractive, - disconnectInteractive, InteractiveComponent, InteractiveContainer, updateHostInteraction, @@ -387,7 +385,6 @@ export class List this.connectObserver(); this.updateListItems(); this.setUpSorting(); - connectInteractive(this); this.setParentList(); } @@ -411,7 +408,6 @@ export class List this.disconnectObserver(); disconnectSortableComponent(this); - disconnectInteractive(this); disconnectMessages(this); } diff --git a/packages/calcite-components/src/components/panel/panel.tsx b/packages/calcite-components/src/components/panel/panel.tsx index f7cb46b758a..ded7dc2f9e4 100644 --- a/packages/calcite-components/src/components/panel/panel.tsx +++ b/packages/calcite-components/src/components/panel/panel.tsx @@ -17,8 +17,6 @@ import { toAriaBoolean, } from "../../utils/dom"; import { - connectInteractive, - disconnectInteractive, InteractiveComponent, InteractiveContainer, updateHostInteraction, @@ -158,7 +156,6 @@ export class Panel //-------------------------------------------------------------------------- connectedCallback(): void { - connectInteractive(this); connectLocalized(this); connectMessages(this); } @@ -177,7 +174,6 @@ 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 3d6ab74bb32..8a77642b7ff 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,8 +17,6 @@ import { } from "../../utils/conditionalSlot"; import { getSlotted, toAriaBoolean } from "../../utils/dom"; import { - connectInteractive, - disconnectInteractive, InteractiveComponent, InteractiveContainer, updateHostInteraction, @@ -196,7 +194,6 @@ export class PickListItem // -------------------------------------------------------------------------- connectedCallback(): void { - connectInteractive(this); connectLocalized(this); connectMessages(this); connectConditionalSlotComponent(this); @@ -212,7 +209,6 @@ 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 dee287d11b0..2cb63070b04 100644 --- a/packages/calcite-components/src/components/pick-list/pick-list.tsx +++ b/packages/calcite-components/src/components/pick-list/pick-list.tsx @@ -10,12 +10,7 @@ import { State, VNode, } from "@stencil/core"; -import { - connectInteractive, - disconnectInteractive, - InteractiveComponent, - updateHostInteraction, -} from "../../utils/interactive"; +import { InteractiveComponent, updateHostInteraction } from "../../utils/interactive"; import { componentFocusable, LoadableComponent, @@ -162,12 +157,10 @@ 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 1ef57ab1875..e656ea274a9 100644 --- a/packages/calcite-components/src/components/radio-button/radio-button.tsx +++ b/packages/calcite-components/src/components/radio-button/radio-button.tsx @@ -22,8 +22,6 @@ import { } from "../../utils/form"; import { guid } from "../../utils/guid"; import { - connectInteractive, - disconnectInteractive, InteractiveComponent, InteractiveContainer, updateHostInteraction, @@ -464,7 +462,6 @@ export class RadioButton if (this.name) { this.checkLastRadioButton(); } - connectInteractive(this); connectLabel(this); connectForm(this); this.updateTabIndexOfOtherRadioButtonsInGroup(); @@ -483,7 +480,6 @@ export class RadioButton } disconnectedCallback(): void { - disconnectInteractive(this); disconnectLabel(this); disconnectForm(this); this.updateTabIndexOfOtherRadioButtonsInGroup(); diff --git a/packages/calcite-components/src/components/rating/rating.tsx b/packages/calcite-components/src/components/rating/rating.tsx index 84d13c88641..eb3ba42ac06 100644 --- a/packages/calcite-components/src/components/rating/rating.tsx +++ b/packages/calcite-components/src/components/rating/rating.tsx @@ -13,8 +13,6 @@ import { import { connectForm, disconnectForm, FormComponent, HiddenFormInputSlot } from "../../utils/form"; import { guid } from "../../utils/guid"; import { - connectInteractive, - disconnectInteractive, InteractiveComponent, InteractiveContainer, updateHostInteraction, @@ -167,7 +165,6 @@ export class Rating //-------------------------------------------------------------------------- connectedCallback(): void { - connectInteractive(this); connectLocalized(this); connectMessages(this); connectLabel(this); @@ -209,7 +206,6 @@ 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 b455cb27b51..91a68db9d84 100644 --- a/packages/calcite-components/src/components/segmented-control/segmented-control.tsx +++ b/packages/calcite-components/src/components/segmented-control/segmented-control.tsx @@ -22,8 +22,6 @@ import { HiddenFormInputSlot, } from "../../utils/form"; import { - connectInteractive, - disconnectInteractive, InteractiveComponent, InteractiveContainer, updateHostInteraction, @@ -158,7 +156,6 @@ export class SegmentedControl } connectedCallback(): void { - connectInteractive(this); connectLabel(this); connectForm(this); this.mutationObserver?.observe(this.el, { childList: true }); @@ -167,7 +164,6 @@ export class SegmentedControl } disconnectedCallback(): void { - disconnectInteractive(this); disconnectLabel(this); disconnectForm(this); this.mutationObserver?.unobserve(this.el); diff --git a/packages/calcite-components/src/components/select/select.tsx b/packages/calcite-components/src/components/select/select.tsx index 5a532e49f5d..2d38501d3a9 100644 --- a/packages/calcite-components/src/components/select/select.tsx +++ b/packages/calcite-components/src/components/select/select.tsx @@ -20,8 +20,6 @@ import { HiddenFormInputSlot, } from "../../utils/form"; import { - connectInteractive, - disconnectInteractive, InteractiveComponent, InteractiveContainer, updateHostInteraction, @@ -171,14 +169,12 @@ 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 e455c932972..bc7ae600b6a 100644 --- a/packages/calcite-components/src/components/slider/slider.tsx +++ b/packages/calcite-components/src/components/slider/slider.tsx @@ -23,8 +23,6 @@ import { HiddenFormInputSlot, } from "../../utils/form"; import { - connectInteractive, - disconnectInteractive, InteractiveComponent, InteractiveContainer, updateHostInteraction, @@ -205,7 +203,6 @@ export class Slider //-------------------------------------------------------------------------- connectedCallback(): void { - connectInteractive(this); connectLocalized(this); this.setMinMaxFromValue(); this.setValueFromMinMax(); @@ -214,7 +211,6 @@ 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 1fb6434d580..207d39c311a 100644 --- a/packages/calcite-components/src/components/sortable-list/sortable-list.tsx +++ b/packages/calcite-components/src/components/sortable-list/sortable-list.tsx @@ -1,8 +1,6 @@ import { Component, Element, Event, EventEmitter, h, Listen, Prop, VNode } from "@stencil/core"; import Sortable from "sortablejs"; import { - connectInteractive, - disconnectInteractive, InteractiveComponent, InteractiveContainer, updateHostInteraction, @@ -108,7 +106,6 @@ export class SortableList implements InteractiveComponent, SortableComponent { this.setUpSorting(); this.beginObserving(); - connectInteractive(this); } disconnectedCallback(): void { @@ -116,7 +113,6 @@ export class SortableList implements InteractiveComponent, SortableComponent { return; } - 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 b7a6d5fedc4..4e53cf7c9f8 100644 --- a/packages/calcite-components/src/components/split-button/split-button.tsx +++ b/packages/calcite-components/src/components/split-button/split-button.tsx @@ -11,8 +11,6 @@ import { } from "@stencil/core"; import { OverlayPositioning } from "../../utils/floating-ui"; import { - connectInteractive, - disconnectInteractive, InteractiveComponent, InteractiveContainer, updateHostInteraction, @@ -159,10 +157,6 @@ export class SplitButton implements InteractiveComponent, LoadableComponent { // //-------------------------------------------------------------------------- - connectedCallback(): void { - connectInteractive(this); - } - componentWillLoad(): void { setUpLoadableComponent(this); } @@ -175,10 +169,6 @@ export class SplitButton implements InteractiveComponent, LoadableComponent { updateHostInteraction(this); } - disconnectedCallback(): void { - disconnectInteractive(this); - } - render(): VNode { const buttonWidth = this.width === "auto" ? "auto" : "full"; 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 0e122cc6dd0..a998fabe7c4 100644 --- a/packages/calcite-components/src/components/stepper-item/stepper-item.tsx +++ b/packages/calcite-components/src/components/stepper-item/stepper-item.tsx @@ -14,8 +14,6 @@ import { } from "@stencil/core"; import { Layout, Scale } from "../interfaces"; import { - connectInteractive, - disconnectInteractive, InteractiveComponent, InteractiveContainer, updateHostInteraction, @@ -220,7 +218,6 @@ export class StepperItem //-------------------------------------------------------------------------- connectedCallback(): void { - connectInteractive(this); connectLocalized(this); connectMessages(this); } @@ -246,7 +243,6 @@ export class StepperItem } disconnectedCallback(): void { - disconnectInteractive(this); disconnectLocalized(this); disconnectMessages(this); } diff --git a/packages/calcite-components/src/components/switch/switch.tsx b/packages/calcite-components/src/components/switch/switch.tsx index 116d517703e..127d80e19b4 100644 --- a/packages/calcite-components/src/components/switch/switch.tsx +++ b/packages/calcite-components/src/components/switch/switch.tsx @@ -17,8 +17,6 @@ import { HiddenFormInputSlot, } from "../../utils/form"; import { - connectInteractive, - disconnectInteractive, InteractiveComponent, InteractiveContainer, updateHostInteraction, @@ -168,7 +166,6 @@ export class Switch //-------------------------------------------------------------------------- connectedCallback(): void { - connectInteractive(this); connectLabel(this); connectForm(this); } @@ -182,7 +179,6 @@ 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 abb37b0ddc1..4b77652224d 100644 --- a/packages/calcite-components/src/components/tab-title/tab-title.tsx +++ b/packages/calcite-components/src/components/tab-title/tab-title.tsx @@ -16,8 +16,6 @@ import { import { getElementDir, toAriaBoolean, nodeListToArray } from "../../utils/dom"; import { guid } from "../../utils/guid"; import { - connectInteractive, - disconnectInteractive, InteractiveComponent, InteractiveContainer, updateHostInteraction, @@ -147,7 +145,6 @@ export class TabTitle implements InteractiveComponent, LocalizedComponent, T9nCo //-------------------------------------------------------------------------- connectedCallback(): void { - connectInteractive(this); connectLocalized(this); connectMessages(this); this.setupTextContentObserver(); @@ -164,7 +161,6 @@ export class TabTitle implements InteractiveComponent, LocalizedComponent, T9nCo }), ); this.resizeObserver?.disconnect(); - disconnectInteractive(this); disconnectLocalized(this); disconnectMessages(this); } diff --git a/packages/calcite-components/src/components/table-cell/table-cell.tsx b/packages/calcite-components/src/components/table-cell/table-cell.tsx index 9fb6cde521e..58b4565ad54 100644 --- a/packages/calcite-components/src/components/table-cell/table-cell.tsx +++ b/packages/calcite-components/src/components/table-cell/table-cell.tsx @@ -14,8 +14,6 @@ import { updateMessages, } from "../../utils/t9n"; import { - connectInteractive, - disconnectInteractive, InteractiveComponent, InteractiveContainer, updateHostInteraction, @@ -157,7 +155,6 @@ export class TableCell connectedCallback(): void { connectLocalized(this); connectMessages(this); - connectInteractive(this); } componentDidRender(): void { @@ -167,7 +164,6 @@ export class TableCell disconnectedCallback(): void { disconnectLocalized(this); disconnectMessages(this); - disconnectInteractive(this); } //-------------------------------------------------------------------------- diff --git a/packages/calcite-components/src/components/table-row/table-row.tsx b/packages/calcite-components/src/components/table-row/table-row.tsx index 26c757daaf7..2559d79e855 100644 --- a/packages/calcite-components/src/components/table-row/table-row.tsx +++ b/packages/calcite-components/src/components/table-row/table-row.tsx @@ -17,8 +17,6 @@ import { focusElementInGroup, FocusElementInGroupDestination } from "../../utils import { RowType, TableInteractionMode, TableRowFocusEvent } from "../table/interfaces"; import { isActivationKey } from "../../utils/key"; import { - connectInteractive, - disconnectInteractive, InteractiveComponent, InteractiveContainer, updateHostInteraction, @@ -121,18 +119,10 @@ export class TableRow implements InteractiveComponent, LocalizedComponent { } } - connectedCallback(): void { - connectInteractive(this); - } - componentDidRender(): void { updateHostInteraction(this); } - disconnectedCallback(): void { - disconnectInteractive(this); - } - //-------------------------------------------------------------------------- // // Private Properties 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 226f934da08..f354de26d0d 100644 --- a/packages/calcite-components/src/components/text-area/text-area.tsx +++ b/packages/calcite-components/src/components/text-area/text-area.tsx @@ -40,8 +40,6 @@ import { import { TextAreaMessages } from "./assets/text-area/t9n"; import { throttle } from "lodash-es"; import { - connectInteractive, - disconnectInteractive, InteractiveComponent, InteractiveContainer, updateHostInteraction, @@ -240,7 +238,6 @@ export class TextArea //-------------------------------------------------------------------------- connectedCallback(): void { - connectInteractive(this); connectLabel(this); connectForm(this); connectLocalized(this); @@ -262,7 +259,6 @@ 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 d90ae03c230..fc78601a772 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,7 +1,5 @@ import { Component, Element, h, Prop, VNode } from "@stencil/core"; import { - connectInteractive, - disconnectInteractive, InteractiveComponent, InteractiveContainer, updateHostInteraction, @@ -47,18 +45,10 @@ 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 a751c5ed6f1..dfe9580cb88 100644 --- a/packages/calcite-components/src/components/tile-select/tile-select.tsx +++ b/packages/calcite-components/src/components/tile-select/tile-select.tsx @@ -13,8 +13,6 @@ import { } from "@stencil/core"; import { guid } from "../../utils/guid"; import { - connectInteractive, - disconnectInteractive, InteractiveComponent, InteractiveContainer, updateHostInteraction, @@ -248,7 +246,6 @@ export class TileSelect implements InteractiveComponent, LoadableComponent { connectedCallback(): void { this.renderInput(); - connectInteractive(this); } componentWillLoad(): void { @@ -261,7 +258,6 @@ 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 98ae5b84510..50d10610a19 100644 --- a/packages/calcite-components/src/components/tile/tile.tsx +++ b/packages/calcite-components/src/components/tile/tile.tsx @@ -1,7 +1,5 @@ import { Component, Element, h, Prop, State, VNode } from "@stencil/core"; import { - connectInteractive, - disconnectInteractive, InteractiveComponent, InteractiveContainer, updateHostInteraction, @@ -110,14 +108,6 @@ export class Tile implements InteractiveComponent { // // -------------------------------------------------------------------------- - connectedCallback(): void { - connectInteractive(this); - } - - disconnectedCallback(): void { - disconnectInteractive(this); - } - componentDidRender(): void { updateHostInteraction(this); } 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 5da09447bf9..5288e45bbf1 100644 --- a/packages/calcite-components/src/components/tree-item/tree-item.tsx +++ b/packages/calcite-components/src/components/tree-item/tree-item.tsx @@ -24,8 +24,6 @@ import { disconnectConditionalSlotComponent, } from "../../utils/conditionalSlot"; import { - connectInteractive, - disconnectInteractive, InteractiveComponent, InteractiveContainer, updateHostInteraction, @@ -144,12 +142,10 @@ export class TreeItem implements ConditionalSlotComponent, InteractiveComponent 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 d1fb45e6457..3f0a8319a06 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 @@ -18,8 +18,6 @@ import { import { getSlotted } from "../../utils/dom"; import { guid } from "../../utils/guid"; import { - connectInteractive, - disconnectInteractive, InteractiveComponent, InteractiveContainer, updateHostInteraction, @@ -136,12 +134,10 @@ 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 b262856ea08..afe2aa460c1 100644 --- a/packages/calcite-components/src/components/value-list/value-list.tsx +++ b/packages/calcite-components/src/components/value-list/value-list.tsx @@ -12,12 +12,7 @@ import { Watch, } from "@stencil/core"; import Sortable from "sortablejs"; -import { - connectInteractive, - disconnectInteractive, - InteractiveComponent, - updateHostInteraction, -} from "../../utils/interactive"; +import { InteractiveComponent, updateHostInteraction } from "../../utils/interactive"; import { componentFocusable, LoadableComponent, @@ -244,7 +239,6 @@ export class ValueList< return; } - connectInteractive(this); connectLocalized(this); connectMessages(this); initialize.call(this); @@ -271,7 +265,6 @@ export class ValueList< return; } - disconnectInteractive(this); disconnectSortableComponent(this); disconnectLocalized(this); disconnectMessages(this); diff --git a/packages/calcite-components/src/utils/interactive.tsx b/packages/calcite-components/src/utils/interactive.tsx index 63073d1ecc5..7b306234761 100644 --- a/packages/calcite-components/src/utils/interactive.tsx +++ b/packages/calcite-components/src/utils/interactive.tsx @@ -1,4 +1,3 @@ -import { getUserAgentString } from "./browser"; import { JSXAttributes } from "@stencil/core/internal"; import { FunctionalComponent, h, VNode } from "@stencil/core"; @@ -26,15 +25,6 @@ export interface InteractiveComponent { */ 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; @@ -46,13 +36,7 @@ function interceptedClick(): void { function onPointerDown(event: PointerEvent): void { const interactiveElement = event.target as InteractiveHTMLElement; - if (isFirefox && !interactiveElementToParent.get(interactiveElement)) { - return; - } - - const { disabled } = interactiveElement; - - if (disabled) { + if (interactiveElement.disabled) { // prevent click from moving focus on host event.preventDefault(); } @@ -61,10 +45,6 @@ function onPointerDown(event: PointerEvent): void { 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) @@ -109,7 +89,7 @@ export function updateHostInteraction(component: InteractiveComponent): void { function blockInteraction(component: InteractiveComponent): void { component.el.click = interceptedClick; - addInteractionListeners(isFirefox ? getParentElement(component) : component.el); + addInteractionListeners(component.el); } function addInteractionListeners(element: HTMLElement): void { @@ -124,13 +104,9 @@ function addInteractionListeners(element: HTMLElement): void { ); } -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); + removeInteractionListeners(component.el); } function removeInteractionListeners(element: HTMLElement): void { @@ -145,42 +121,6 @@ function removeInteractionListeners(element: HTMLElement): void { ); } -/** - * 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); -} - export interface InteractiveContainerOptions extends JSXAttributes { disabled: boolean; } From 986ba5ef211dc95dacdf0ff19afa2a6ff13ae4ad Mon Sep 17 00:00:00 2001 From: JC Franco Date: Wed, 28 Aug 2024 15:55:43 -0700 Subject: [PATCH 2/3] roll back unrelated changes --- .../calcite-components/src/components.d.ts | 100 ------------------ .../src/rules/ban-events.ts | 2 +- 2 files changed, 1 insertion(+), 101 deletions(-) diff --git a/packages/calcite-components/src/components.d.ts b/packages/calcite-components/src/components.d.ts index b9bb50416b7..7f6ae2a934b 100644 --- a/packages/calcite-components/src/components.d.ts +++ b/packages/calcite-components/src/components.d.ts @@ -9,193 +9,93 @@ import { Alignment, Appearance, CollapseDirection, FlipContext, IconType, Kind, import { RequestedItem } from "./components/accordion/interfaces"; import { IconNameOrString } from "./components/icon/interfaces"; import { RequestedItem as RequestedItem1 } from "./components/accordion-item/interfaces"; -import { ActionMessages } from "./components/action/assets/action/t9n"; import { FlipPlacement, LogicalPlacement, MenuPlacement, OverlayPositioning, ReferenceElement } from "./utils/floating-ui"; -import { ActionBarMessages } from "./components/action-bar/assets/action-bar/t9n"; import { Columns } from "./components/action-group/interfaces"; -import { ActionGroupMessages } from "./components/action-group/assets/action-group/t9n"; -import { ActionPadMessages } from "./components/action-pad/assets/action-pad/t9n"; import { AlertDuration, AlertQueue } from "./components/alert/interfaces"; import { NumberingSystem } from "./utils/locale"; -import { AlertMessages } from "./components/alert/assets/alert/t9n"; import { HeadingLevel } from "./components/functional/Heading"; -import { BlockMessages } from "./components/block/assets/block/t9n"; import { BlockSectionToggleDisplay } from "./components/block-section/interfaces"; -import { BlockSectionMessages } from "./components/block-section/assets/block-section/t9n"; import { ButtonAlignment, DropdownIconType } from "./components/button/interfaces"; -import { ButtonMessages } from "./components/button/assets/button/t9n"; -import { CardMessages } from "./components/card/assets/card/t9n"; import { ArrowType, AutoplayType } from "./components/carousel/interfaces"; -import { CarouselMessages } from "./components/carousel/assets/carousel/t9n"; import { MutableValidityState } from "./utils/form"; -import { ChipMessages } from "./components/chip/assets/chip/t9n"; import { ColorValue, InternalColor } from "./components/color-picker/interfaces"; import { Format } from "./components/color-picker/utils"; -import { ColorPickerMessages } from "./components/color-picker/assets/color-picker/t9n"; import { ComboboxChildElement, SelectionDisplay } from "./components/combobox/interfaces"; -import { ComboboxMessages } from "./components/combobox/assets/combobox/t9n"; -import { DatePickerMessages } from "./components/date-picker/assets/date-picker/t9n"; import { DateLocaleData } from "./components/date-picker/utils"; import { HoverRange } from "./utils/date"; -import { DialogMessages } from "./components/dialog/assets/dialog/t9n"; import { OverlayPositioning as OverlayPositioning1 } from "./components"; import { DialogPlacement } from "./components/dialog/interfaces"; import { RequestedItem as RequestedItem2 } from "./components/dropdown-group/interfaces"; import { ItemKeyboardEvent } from "./components/dropdown/interfaces"; -import { FilterMessages } from "./components/filter/assets/filter/t9n"; import { FlowItemLikeElement } from "./components/flow/interfaces"; -import { FlowItemMessages } from "./components/flow-item/assets/flow-item/t9n"; import { ColorStop, DataSeries } from "./components/graph/interfaces"; -import { HandleMessages } from "./components/handle/assets/handle/t9n"; import { HandleChange, HandleNudge } from "./components/handle/interfaces"; -import { InlineEditableMessages } from "./components/inline-editable/assets/inline-editable/t9n"; import { InputPlacement } from "./components/input/interfaces"; -import { InputMessages } from "./components/input/assets/input/t9n"; -import { InputDatePickerMessages } from "./components/input-date-picker/assets/input-date-picker/t9n"; -import { InputNumberMessages } from "./components/input-number/assets/input-number/t9n"; -import { InputTextMessages } from "./components/input-text/assets/input-text/t9n"; -import { InputTimePickerMessages } from "./components/input-time-picker/assets/input-time-picker/t9n"; -import { TimePickerMessages } from "./components/time-picker/assets/time-picker/t9n"; -import { InputTimeZoneMessages } from "./components/input-time-zone/assets/input-time-zone/t9n"; import { OffsetStyle, TimeZoneMode } from "./components/input-time-zone/interfaces"; import { ListDragDetail } from "./components/list/interfaces"; import { ItemData } from "./components/list-item/interfaces"; -import { ListMessages } from "./components/list/assets/list/t9n"; import { SelectionAppearance } from "./components/list/resources"; -import { ListItemMessages } from "./components/list-item/assets/list-item/t9n"; -import { MenuMessages } from "./components/menu/assets/menu/t9n"; -import { MenuItemMessages } from "./components/menu-item/assets/menu-item/t9n"; import { MenuItemCustomEvent } from "./components/menu-item/interfaces"; import { MeterFillType, MeterLabelType } from "./components/meter/interfaces"; -import { ModalMessages } from "./components/modal/assets/modal/t9n"; -import { NoticeMessages } from "./components/notice/assets/notice/t9n"; -import { PaginationMessages } from "./components/pagination/assets/pagination/t9n"; -import { PanelMessages } from "./components/panel/assets/panel/t9n"; import { ItemData as ItemData1, ListFocusId } from "./components/pick-list/shared-list-logic"; import { ICON_TYPES } from "./components/pick-list/resources"; -import { PickListItemMessages } from "./components/pick-list-item/assets/pick-list-item/t9n"; -import { PopoverMessages } from "./components/popover/assets/popover/t9n"; -import { RatingMessages } from "./components/rating/assets/rating/t9n"; -import { ScrimMessages } from "./components/scrim/assets/scrim/t9n"; import { DisplayMode } from "./components/sheet/interfaces"; import { DisplayMode as DisplayMode1 } from "./components/shell-panel/interfaces"; -import { ShellPanelMessages } from "./components/shell-panel/assets/shell-panel/t9n"; import { DragDetail } from "./utils/sortableComponent"; import { StepperItemChangeEventDetail, StepperItemEventDetail, StepperItemKeyEventDetail, StepperLayout } from "./components/stepper/interfaces"; -import { StepperMessages } from "./components/stepper/assets/stepper/t9n"; -import { StepperItemMessages } from "./components/stepper-item/assets/stepper-item/t9n"; import { TabID, TabLayout, TabPosition } from "./components/tabs/interfaces"; -import { TabNavMessages } from "./components/tab-nav/assets/tab-nav/t9n"; import { Element } from "@stencil/core"; import { TabChangeEventDetail, TabCloseEventDetail } from "./components/tab/interfaces"; -import { TabTitleMessages } from "./components/tab-title/assets/tab-title/t9n"; import { RowType, TableInteractionMode, TableLayout, TableRowFocusEvent, TableSelectionDisplay } from "./components/table/interfaces"; -import { TableMessages } from "./components/table/assets/table/t9n"; -import { TableCellMessages } from "./components/table-cell/assets/table-cell/t9n"; -import { TableHeaderMessages } from "./components/table-header/assets/table-header/t9n"; -import { TextAreaMessages } from "./components/text-area/assets/text-area/t9n"; import { TileSelectType } from "./components/tile-select/interfaces"; import { TileSelectGroupLayout } from "./components/tile-select-group/interfaces"; -import { TipMessages } from "./components/tip/assets/tip/t9n"; -import { TipManagerMessages } from "./components/tip-manager/assets/tip-manager/t9n"; import { TreeItemSelectDetail } from "./components/tree-item/interfaces"; -import { ValueListMessages } from "./components/value-list/assets/value-list/t9n"; import { ListItemAndHandle } from "./components/value-list-item/interfaces"; export { Alignment, Appearance, CollapseDirection, FlipContext, IconType, Kind, Layout, LogicalFlowPosition, Position, Scale, SelectionAppearance as SelectionAppearance1, SelectionMode, Status, Width } from "./components/interfaces"; export { RequestedItem } from "./components/accordion/interfaces"; export { IconNameOrString } from "./components/icon/interfaces"; export { RequestedItem as RequestedItem1 } from "./components/accordion-item/interfaces"; -export { ActionMessages } from "./components/action/assets/action/t9n"; export { FlipPlacement, LogicalPlacement, MenuPlacement, OverlayPositioning, ReferenceElement } from "./utils/floating-ui"; -export { ActionBarMessages } from "./components/action-bar/assets/action-bar/t9n"; export { Columns } from "./components/action-group/interfaces"; -export { ActionGroupMessages } from "./components/action-group/assets/action-group/t9n"; -export { ActionPadMessages } from "./components/action-pad/assets/action-pad/t9n"; export { AlertDuration, AlertQueue } from "./components/alert/interfaces"; export { NumberingSystem } from "./utils/locale"; -export { AlertMessages } from "./components/alert/assets/alert/t9n"; export { HeadingLevel } from "./components/functional/Heading"; -export { BlockMessages } from "./components/block/assets/block/t9n"; export { BlockSectionToggleDisplay } from "./components/block-section/interfaces"; -export { BlockSectionMessages } from "./components/block-section/assets/block-section/t9n"; export { ButtonAlignment, DropdownIconType } from "./components/button/interfaces"; -export { ButtonMessages } from "./components/button/assets/button/t9n"; -export { CardMessages } from "./components/card/assets/card/t9n"; export { ArrowType, AutoplayType } from "./components/carousel/interfaces"; -export { CarouselMessages } from "./components/carousel/assets/carousel/t9n"; export { MutableValidityState } from "./utils/form"; -export { ChipMessages } from "./components/chip/assets/chip/t9n"; export { ColorValue, InternalColor } from "./components/color-picker/interfaces"; export { Format } from "./components/color-picker/utils"; -export { ColorPickerMessages } from "./components/color-picker/assets/color-picker/t9n"; export { ComboboxChildElement, SelectionDisplay } from "./components/combobox/interfaces"; -export { ComboboxMessages } from "./components/combobox/assets/combobox/t9n"; -export { DatePickerMessages } from "./components/date-picker/assets/date-picker/t9n"; export { DateLocaleData } from "./components/date-picker/utils"; export { HoverRange } from "./utils/date"; -export { DialogMessages } from "./components/dialog/assets/dialog/t9n"; export { OverlayPositioning as OverlayPositioning1 } from "./components"; export { DialogPlacement } from "./components/dialog/interfaces"; export { RequestedItem as RequestedItem2 } from "./components/dropdown-group/interfaces"; export { ItemKeyboardEvent } from "./components/dropdown/interfaces"; -export { FilterMessages } from "./components/filter/assets/filter/t9n"; export { FlowItemLikeElement } from "./components/flow/interfaces"; -export { FlowItemMessages } from "./components/flow-item/assets/flow-item/t9n"; export { ColorStop, DataSeries } from "./components/graph/interfaces"; -export { HandleMessages } from "./components/handle/assets/handle/t9n"; export { HandleChange, HandleNudge } from "./components/handle/interfaces"; -export { InlineEditableMessages } from "./components/inline-editable/assets/inline-editable/t9n"; export { InputPlacement } from "./components/input/interfaces"; -export { InputMessages } from "./components/input/assets/input/t9n"; -export { InputDatePickerMessages } from "./components/input-date-picker/assets/input-date-picker/t9n"; -export { InputNumberMessages } from "./components/input-number/assets/input-number/t9n"; -export { InputTextMessages } from "./components/input-text/assets/input-text/t9n"; -export { InputTimePickerMessages } from "./components/input-time-picker/assets/input-time-picker/t9n"; -export { TimePickerMessages } from "./components/time-picker/assets/time-picker/t9n"; -export { InputTimeZoneMessages } from "./components/input-time-zone/assets/input-time-zone/t9n"; export { OffsetStyle, TimeZoneMode } from "./components/input-time-zone/interfaces"; export { ListDragDetail } from "./components/list/interfaces"; export { ItemData } from "./components/list-item/interfaces"; -export { ListMessages } from "./components/list/assets/list/t9n"; export { SelectionAppearance } from "./components/list/resources"; -export { ListItemMessages } from "./components/list-item/assets/list-item/t9n"; -export { MenuMessages } from "./components/menu/assets/menu/t9n"; -export { MenuItemMessages } from "./components/menu-item/assets/menu-item/t9n"; export { MenuItemCustomEvent } from "./components/menu-item/interfaces"; export { MeterFillType, MeterLabelType } from "./components/meter/interfaces"; -export { ModalMessages } from "./components/modal/assets/modal/t9n"; -export { NoticeMessages } from "./components/notice/assets/notice/t9n"; -export { PaginationMessages } from "./components/pagination/assets/pagination/t9n"; -export { PanelMessages } from "./components/panel/assets/panel/t9n"; export { ItemData as ItemData1, ListFocusId } from "./components/pick-list/shared-list-logic"; export { ICON_TYPES } from "./components/pick-list/resources"; -export { PickListItemMessages } from "./components/pick-list-item/assets/pick-list-item/t9n"; -export { PopoverMessages } from "./components/popover/assets/popover/t9n"; -export { RatingMessages } from "./components/rating/assets/rating/t9n"; -export { ScrimMessages } from "./components/scrim/assets/scrim/t9n"; export { DisplayMode } from "./components/sheet/interfaces"; export { DisplayMode as DisplayMode1 } from "./components/shell-panel/interfaces"; -export { ShellPanelMessages } from "./components/shell-panel/assets/shell-panel/t9n"; export { DragDetail } from "./utils/sortableComponent"; export { StepperItemChangeEventDetail, StepperItemEventDetail, StepperItemKeyEventDetail, StepperLayout } from "./components/stepper/interfaces"; -export { StepperMessages } from "./components/stepper/assets/stepper/t9n"; -export { StepperItemMessages } from "./components/stepper-item/assets/stepper-item/t9n"; export { TabID, TabLayout, TabPosition } from "./components/tabs/interfaces"; -export { TabNavMessages } from "./components/tab-nav/assets/tab-nav/t9n"; export { Element } from "@stencil/core"; export { TabChangeEventDetail, TabCloseEventDetail } from "./components/tab/interfaces"; -export { TabTitleMessages } from "./components/tab-title/assets/tab-title/t9n"; export { RowType, TableInteractionMode, TableLayout, TableRowFocusEvent, TableSelectionDisplay } from "./components/table/interfaces"; -export { TableMessages } from "./components/table/assets/table/t9n"; -export { TableCellMessages } from "./components/table-cell/assets/table-cell/t9n"; -export { TableHeaderMessages } from "./components/table-header/assets/table-header/t9n"; -export { TextAreaMessages } from "./components/text-area/assets/text-area/t9n"; export { TileSelectType } from "./components/tile-select/interfaces"; export { TileSelectGroupLayout } from "./components/tile-select-group/interfaces"; -export { TipMessages } from "./components/tip/assets/tip/t9n"; -export { TipManagerMessages } from "./components/tip-manager/assets/tip-manager/t9n"; export { TreeItemSelectDetail } from "./components/tree-item/interfaces"; -export { ValueListMessages } from "./components/value-list/assets/value-list/t9n"; export { ListItemAndHandle } from "./components/value-list-item/interfaces"; export namespace Components { interface CalciteAccordion { diff --git a/packages/eslint-plugin-calcite-components/src/rules/ban-events.ts b/packages/eslint-plugin-calcite-components/src/rules/ban-events.ts index 4a1cd29d925..23a5e3d5f92 100644 --- a/packages/eslint-plugin-calcite-components/src/rules/ban-events.ts +++ b/packages/eslint-plugin-calcite-components/src/rules/ban-events.ts @@ -37,7 +37,7 @@ const rule: Rule.RuleModule = { const bannedEventToMessageLookup = new Map(); context.options.forEach((option: string | { event: string; message?: string }) => { const event = typeof option === "string" ? option : option.event; - const message = typeof option === "string" ? null : (option.message ?? null); + const message = typeof option === "string" ? null : option.message ?? null; bannedEventToMessageLookup.set(event, message); }); From b9f227a63d9cb5f9d0bb2e685fc61be52de56124 Mon Sep 17 00:00:00 2001 From: JC Franco Date: Wed, 28 Aug 2024 15:56:16 -0700 Subject: [PATCH 3/3] fix imports --- .../src/components/card-group/card-group.tsx | 10 ---------- .../calcite-components/src/components/card/card.tsx | 2 -- .../src/components/carousel/carousel.tsx | 4 ---- packages/calcite-components/src/utils/interactive.tsx | 2 +- 4 files changed, 1 insertion(+), 17 deletions(-) diff --git a/packages/calcite-components/src/components/card-group/card-group.tsx b/packages/calcite-components/src/components/card-group/card-group.tsx index 30c4d2ce6c2..4ed2b8fb297 100644 --- a/packages/calcite-components/src/components/card-group/card-group.tsx +++ b/packages/calcite-components/src/components/card-group/card-group.tsx @@ -13,8 +13,6 @@ import { } from "@stencil/core"; import { focusElement, focusElementInGroup, toAriaBoolean } from "../../utils/dom"; import { - connectInteractive, - disconnectInteractive, InteractiveComponent, InteractiveContainer, updateHostInteraction, @@ -100,10 +98,6 @@ export class CardGroup implements InteractiveComponent, LoadableComponent { // //-------------------------------------------------------------------------- - connectedCallback(): void { - connectInteractive(this); - } - componentDidRender(): void { updateHostInteraction(this); } @@ -112,10 +106,6 @@ export class CardGroup implements InteractiveComponent, LoadableComponent { setComponentLoaded(this); } - disconnectedCallback(): void { - disconnectInteractive(this); - } - async componentWillLoad(): Promise { setUpLoadableComponent(this); } diff --git a/packages/calcite-components/src/components/card/card.tsx b/packages/calcite-components/src/components/card/card.tsx index 7b0edfb3c13..675cc7502bb 100644 --- a/packages/calcite-components/src/components/card/card.tsx +++ b/packages/calcite-components/src/components/card/card.tsx @@ -149,7 +149,6 @@ export class Card // -------------------------------------------------------------------------- connectedCallback(): void { - connectInteractive(this); connectLocalized(this); connectMessages(this); } @@ -163,7 +162,6 @@ export class Card } disconnectedCallback(): void { - disconnectInteractive(this); disconnectLocalized(this); disconnectMessages(this); } diff --git a/packages/calcite-components/src/components/carousel/carousel.tsx b/packages/calcite-components/src/components/carousel/carousel.tsx index 3185becb26b..0795caf376c 100644 --- a/packages/calcite-components/src/components/carousel/carousel.tsx +++ b/packages/calcite-components/src/components/carousel/carousel.tsx @@ -21,9 +21,7 @@ import { import { connectLocalized, disconnectLocalized, LocalizedComponent } from "../../utils/locale"; import { guid } from "../../utils/guid"; import { - connectInteractive, updateHostInteraction, - disconnectInteractive, InteractiveComponent, InteractiveContainer, } from "../../utils/interactive"; @@ -140,7 +138,6 @@ export class Carousel // -------------------------------------------------------------------------- connectedCallback(): void { - connectInteractive(this); connectLocalized(this); connectMessages(this); } @@ -154,7 +151,6 @@ export class Carousel } disconnectedCallback(): void { - disconnectInteractive(this); disconnectLocalized(this); disconnectMessages(this); this.clearIntervals(); diff --git a/packages/calcite-components/src/utils/interactive.tsx b/packages/calcite-components/src/utils/interactive.tsx index f58e9edd24a..4f3583cc570 100644 --- a/packages/calcite-components/src/utils/interactive.tsx +++ b/packages/calcite-components/src/utils/interactive.tsx @@ -1,5 +1,5 @@ import { JSXAttributes } from "@stencil/core/internal"; -import { FunctionalComponent, VNode } from "@stencil/core"; +import { FunctionalComponent, h, VNode } from "@stencil/core"; export interface InteractiveComponent { /**