Skip to content

Commit

Permalink
fix(core): prevent memory leaks caused by detached dom nodes (#1522)
Browse files Browse the repository at this point in the history 
Co-authored-by: Daniel Leroux <[email protected]>
Co-authored-by: matthias <[email protected]>
  • Loading branch information
@nuke-ellington @danielleroux @matthiashader
3 people authored Nov 12, 2024
1 parent ad040ca commit 1a13a46
Show file tree
Hide file tree
Showing 20 changed files with 605 additions and 397 deletions.
5 changes: 5 additions & 0 deletions .changeset/serious-kings-explode.md
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
"@siemens/ix": patch
---

fix(core): prevent detached dom nodes
67 changes: 38 additions & 29 deletions packages/core/component-doc.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3504,6 +3504,7 @@
"reflectToAttr": false,
"docs": "Picker date. If the picker is in range mode this property is the start date.\nIf set to `null` no default start date will be pre-selected.\n\nFormat is based on `format`",
"docsTags": [],
"default": "''",
"values": [
{
"type": "string"
Expand Down Expand Up @@ -3591,6 +3592,7 @@
"reflectToAttr": false,
"docs": "The latest date that can be selected by the date picker.\nIf not set there will be no restriction.",
"docsTags": [],
"default": "''",
"values": [
{
"type": "string"
Expand All @@ -3612,6 +3614,7 @@
"reflectToAttr": false,
"docs": "The earliest date that can be selected by the date picker.\nIf not set there will be no restriction.",
"docsTags": [],
"default": "''",
"values": [
{
"type": "string"
Expand Down Expand Up @@ -3655,6 +3658,7 @@
"reflectToAttr": false,
"docs": "Picker date. If the picker is in range mode this property is the end date.\nIf the picker is not in range mode leave this value `null`\n\nFormat is based on `format`",
"docsTags": [],
"default": "''",
"values": [
{
"type": "string"
Expand Down Expand Up @@ -3957,13 +3961,12 @@
"text": "2.1.0"
}
],
"default": "undefined",
"values": [
{
"type": "string"
}
],
"optional": false,
"optional": true,
"required": false
},
{
Expand All @@ -3984,6 +3987,7 @@
"text": "1.1.0"
}
],
"default": "''",
"values": [
{
"type": "string"
Expand All @@ -4010,6 +4014,7 @@
"text": "1.1.0"
}
],
"default": "''",
"values": [
{
"type": "string"
Expand Down Expand Up @@ -4062,6 +4067,7 @@
"text": "since 2.1.0. Use `i18nDone`"
}
],
"default": "''",
"deprecation": "since 2.1.0. Use `i18nDone`",
"values": [
{
Expand Down Expand Up @@ -5212,14 +5218,15 @@
"props": [
{
"name": "anchor",
"type": "HTMLElement | string",
"type": "HTMLElement | Promise<HTMLElement> | string",
"complexType": {
"original": "string | HTMLElement",
"resolved": "HTMLElement | string",
"original": "ElementReference",
"resolved": "HTMLElement | Promise<HTMLElement> | string",
"references": {
"HTMLElement": {
"location": "global",
"id": "global::HTMLElement"
"ElementReference": {
"location": "import",
"path": "src/components/utils/element-reference",
"id": "src/components/utils/element-reference.ts::ElementReference"
}
}
},
Expand All @@ -5232,11 +5239,14 @@
{
"type": "HTMLElement"
},
{
"type": "Promise<HTMLElement>"
},
{
"type": "string"
}
],
"optional": false,
"optional": true,
"required": false
},
{
Expand Down Expand Up @@ -5437,16 +5447,13 @@
"name": "trigger",
"type": "HTMLElement | Promise<HTMLElement> | string",
"complexType": {
"original": "string | HTMLElement | Promise<HTMLElement>",
"original": "ElementReference",
"resolved": "HTMLElement | Promise<HTMLElement> | string",
"references": {
"HTMLElement": {
"location": "global",
"id": "global::HTMLElement"
},
"Promise": {
"location": "global",
"id": "global::Promise"
"ElementReference": {
"location": "import",
"path": "src/components/utils/element-reference",
"id": "src/components/utils/element-reference.ts::ElementReference"
}
}
},
Expand All @@ -5466,7 +5473,7 @@
"type": "string"
}
],
"optional": false,
"optional": true,
"required": false
}
],
Expand Down Expand Up @@ -5660,7 +5667,7 @@
"type": "string"
}
],
"optional": false,
"optional": true,
"required": false
},
{
Expand All @@ -5681,7 +5688,7 @@
"type": "string"
}
],
"optional": false,
"optional": true,
"required": false
},
{
Expand Down Expand Up @@ -5764,7 +5771,7 @@
"type": "string"
}
],
"optional": false,
"optional": true,
"required": false
},
{
Expand Down Expand Up @@ -16135,16 +16142,13 @@
"name": "for",
"type": "HTMLElement | Promise<HTMLElement> | string",
"complexType": {
"original": "string | HTMLElement | Promise<HTMLElement>",
"original": "ElementReference",
"resolved": "HTMLElement | Promise<HTMLElement> | string",
"references": {
"HTMLElement": {
"location": "global",
"id": "global::HTMLElement"
},
"Promise": {
"location": "global",
"id": "global::Promise"
"ElementReference": {
"location": "import",
"path": "../utils/element-reference",
"id": "src/components/utils/element-reference.ts::ElementReference"
}
}
},
Expand Down Expand Up @@ -17905,6 +17909,11 @@
"docstring": "",
"path": "src/components/category-filter/input-state.ts"
},
"src/components/utils/element-reference.ts::ElementReference": {
"declaration": "export type ElementReference = string | HTMLElement | Promise<HTMLElement>;",
"docstring": "",
"path": "src/components/utils/element-reference.ts"
},
"src/components/flip-tile/flip-tile-state.ts::FlipTileState": {
"declaration": "export enum FlipTileState {\n None = 'none',\n Info = 'info',\n Warning = 'warning',\n Alarm = 'alarm',\n Primary = 'primary',\n}",
"docstring": "",
Expand Down
28 changes: 16 additions & 12 deletions packages/core/src/components.d.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,7 @@ import { DateTimeCardCorners } from "./components/date-time-card/date-time-card"
import { DateChangeEvent } from "./components/date-picker/date-picker";
import { DateTimeCardCorners as DateTimeCardCorners1 } from "./components/date-time-card/date-time-card";
import { DateTimeDateChangeEvent, DateTimeSelectEvent } from "./components/datetime-picker/datetime-picker";
import { ElementReference } from "./components/utils/element-reference";
import { CloseBehavior } from "./components/dropdown/dropdown-controller";
import { AlignedPlacement, Side } from "./components/dropdown/placement";
import { DropdownButtonVariant } from "./components/dropdown-button/dropdown-button";
Expand All @@ -42,6 +43,7 @@ import { TabClickDetail } from "./components/tab-item/tab-item";
import { TimePickerCorners } from "./components/time-picker/time-picker";
import { ToastConfig, ToastType } from "./components/toast/toast-utils";
import { ShowToastResult } from "./components/toast/toast-container";
import { ElementReference as ElementReference1 } from "./components/utils/element-reference";
import { Element } from "@stencil/core";
import { TreeContext, TreeItemContext, TreeModel, UpdateCallback } from "./components/tree/tree-model";
import { TextDecoration, TypographyColors, TypographyFormat } from "./components/typography/typography";
Expand All @@ -65,6 +67,7 @@ export { DateTimeCardCorners } from "./components/date-time-card/date-time-card"
export { DateChangeEvent } from "./components/date-picker/date-picker";
export { DateTimeCardCorners as DateTimeCardCorners1 } from "./components/date-time-card/date-time-card";
export { DateTimeDateChangeEvent, DateTimeSelectEvent } from "./components/datetime-picker/datetime-picker";
export { ElementReference } from "./components/utils/element-reference";
export { CloseBehavior } from "./components/dropdown/dropdown-controller";
export { AlignedPlacement, Side } from "./components/dropdown/placement";
export { DropdownButtonVariant } from "./components/dropdown-button/dropdown-button";
Expand All @@ -83,6 +86,7 @@ export { TabClickDetail } from "./components/tab-item/tab-item";
export { TimePickerCorners } from "./components/time-picker/time-picker";
export { ToastConfig, ToastType } from "./components/toast/toast-utils";
export { ShowToastResult } from "./components/toast/toast-container";
export { ElementReference as ElementReference1 } from "./components/utils/element-reference";
export { Element } from "@stencil/core";
export { TreeContext, TreeItemContext, TreeModel, UpdateCallback } from "./components/tree/tree-model";
export { TextDecoration, TypographyColors, TypographyFormat } from "./components/typography/typography";
Expand Down Expand Up @@ -627,7 +631,7 @@ export namespace Components {
* Format of time string See {@link "https://moment.github.io/luxon/#/formatting?id=table-of-tokens"} for all available tokens.
* @since 2.1.0
*/
"locale": string;
"locale"?: string;
/**
* The latest date that can be selected by the date picker. If not set there will be no restriction.
* @since 1.1.0
Expand Down Expand Up @@ -802,7 +806,7 @@ export namespace Components {
/**
* Define an anchor element
*/
"anchor": string | HTMLElement;
"anchor"?: ElementReference;
/**
* Controls if the dropdown will be closed in response to a click event depending on the position of the event relative to the dropdown. If the dropdown is a child of another one, it will be closed with the parent, regardless of its own close behavior.
*/
Expand All @@ -817,12 +821,12 @@ export namespace Components {
/**
* Move dropdown along main axis of alignment
*/
"offset": {
"offset"?: {
mainAxis?: number;
crossAxis?: number;
alignmentAxis?: number;
};
"overwriteDropdownStyle": (delegate: {
"overwriteDropdownStyle"?: (delegate: {
dropdownRef: HTMLElement;
triggerRef?: HTMLElement;
}) => Promise<Partial<CSSStyleDeclaration>>;
Expand All @@ -846,7 +850,7 @@ export namespace Components {
/**
* Define an element that triggers the dropdown. A trigger can either be a string that will be interpreted as id attribute or a DOM element.
*/
"trigger": string | HTMLElement | Promise<HTMLElement>;
"trigger"?: ElementReference;
/**
* Update position of dropdown
*/
Expand All @@ -872,11 +876,11 @@ export namespace Components {
/**
* Button icon
*/
"icon": string;
"icon"?: string;
/**
* Set label
*/
"label": string;
"label"?: string;
/**
* Outline button
*/
Expand All @@ -885,7 +889,7 @@ export namespace Components {
* Placement of the dropdown
* @since 2.0.0
*/
"placement": AlignedPlacement;
"placement"?: AlignedPlacement;
/**
* Button variant
*/
Expand Down Expand Up @@ -2269,7 +2273,7 @@ export namespace Components {
/**
* CSS selector for hover trigger element e.g. `for="[data-my-custom-select]"`
*/
"for"?: string | HTMLElement | Promise<HTMLElement>;
"for"?: ElementReference1;
"hideDelay": number;
"hideTooltip": () => Promise<void>;
/**
Expand Down Expand Up @@ -4938,7 +4942,7 @@ declare namespace LocalJSX {
/**
* Define an anchor element
*/
"anchor"?: string | HTMLElement;
"anchor"?: ElementReference;
/**
* Controls if the dropdown will be closed in response to a click event depending on the position of the event relative to the dropdown. If the dropdown is a child of another one, it will be closed with the parent, regardless of its own close behavior.
*/
Expand Down Expand Up @@ -4985,7 +4989,7 @@ declare namespace LocalJSX {
/**
* Define an element that triggers the dropdown. A trigger can either be a string that will be interpreted as id attribute or a DOM element.
*/
"trigger"?: string | HTMLElement | Promise<HTMLElement>;
"trigger"?: ElementReference;
}
/**
* @since 1.3.0
Expand Down Expand Up @@ -6526,7 +6530,7 @@ declare namespace LocalJSX {
/**
* CSS selector for hover trigger element e.g. `for="[data-my-custom-select]"`
*/
"for"?: string | HTMLElement | Promise<HTMLElement>;
"for"?: ElementReference1;
"hideDelay"?: number;
/**
* Define if the user can access the tooltip via mouse.
Expand Down
Loading

0 comments on commit 1a13a46

Please sign in to comment.