diff --git a/.changeset/afraid-mugs-argue.md b/.changeset/afraid-mugs-argue.md new file mode 100644 index 0000000000..95aa9a5904 --- /dev/null +++ b/.changeset/afraid-mugs-argue.md @@ -0,0 +1,5 @@ +--- +"@siemens/ix": minor +--- + +feat(core/message): add options to set size and position diff --git a/.changeset/nice-pianos-serve.md b/.changeset/nice-pianos-serve.md new file mode 100644 index 0000000000..e61228beba --- /dev/null +++ b/.changeset/nice-pianos-serve.md @@ -0,0 +1,5 @@ +--- +"@siemens/ix": patch +--- + +fix(core/spinner): move styling into shadow dom diff --git a/.changeset/nine-pugs-pump.md b/.changeset/nine-pugs-pump.md new file mode 100644 index 0000000000..e400eb70ca --- /dev/null +++ b/.changeset/nine-pugs-pump.md @@ -0,0 +1,5 @@ +--- +'@siemens/ix': patch +--- + +fix(core/select): update input value on slot change diff --git a/.changeset/serious-kings-explode.md b/.changeset/serious-kings-explode.md new file mode 100644 index 0000000000..c06f053110 --- /dev/null +++ b/.changeset/serious-kings-explode.md @@ -0,0 +1,5 @@ +--- +"@siemens/ix": patch +--- + +fix(core): prevent detached dom nodes diff --git a/packages/core/.eslintrc.json b/packages/core/.eslintrc.json index c9cea518f7..8f1928bca1 100644 --- a/packages/core/.eslintrc.json +++ b/packages/core/.eslintrc.json @@ -5,7 +5,7 @@ }, "extends": [ /* "plugin:@typescript-eslint/recommended", */ "plugin:@stencil-community/recommended", - "ix" + "eslint-config-ix/index.js" ], "rules": { "@stencil-community/async-methods": 0, @@ -13,6 +13,10 @@ "@stencil-community/own-methods-must-be-private": 0, "@stencil-community/strict-boolean-conditions": 0, "@stencil-community/ban-default-true": ["warn"], + "@stencil-community/decorators-style": [ + "error", + { "prop": "inline", "method": "multiline" } + ], "react/jsx-no-bind": 0, "react/jsx-uses-react": 0, "react/react-in-jsx-scope": 0, diff --git a/packages/core/component-doc.json b/packages/core/component-doc.json index 2018fedc9d..9d47d45523 100644 --- a/packages/core/component-doc.json +++ b/packages/core/component-doc.json @@ -2,7 +2,7 @@ "timestamp": "", "compiler": { "name": "@stencil/core", - "version": "4.22.1", + "version": "4.22.2", "typescriptVersion": "5.5.4" }, "components": [ @@ -3503,6 +3503,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" @@ -3590,6 +3591,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" @@ -3611,6 +3613,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" @@ -3654,6 +3657,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" @@ -3956,13 +3960,12 @@ "text": "2.1.0" } ], - "default": "undefined", "values": [ { "type": "string" } ], - "optional": false, + "optional": true, "required": false }, { @@ -3983,6 +3986,7 @@ "text": "1.1.0" } ], + "default": "''", "values": [ { "type": "string" @@ -4009,6 +4013,7 @@ "text": "1.1.0" } ], + "default": "''", "values": [ { "type": "string" @@ -4061,6 +4066,7 @@ "text": "since 2.1.0. Use `i18nDone`" } ], + "default": "''", "deprecation": "since 2.1.0. Use `i18nDone`", "values": [ { @@ -5211,14 +5217,15 @@ "props": [ { "name": "anchor", - "type": "HTMLElement | string", + "type": "HTMLElement | Promise | string", "complexType": { - "original": "string | HTMLElement", - "resolved": "HTMLElement | string", + "original": "ElementReference", + "resolved": "HTMLElement | Promise | 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" } } }, @@ -5231,11 +5238,14 @@ { "type": "HTMLElement" }, + { + "type": "Promise" + }, { "type": "string" } ], - "optional": false, + "optional": true, "required": false }, { @@ -5436,16 +5446,13 @@ "name": "trigger", "type": "HTMLElement | Promise | string", "complexType": { - "original": "string | HTMLElement | Promise", + "original": "ElementReference", "resolved": "HTMLElement | Promise | 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" } } }, @@ -5465,7 +5472,7 @@ "type": "string" } ], - "optional": false, + "optional": true, "required": false } ], @@ -5659,7 +5666,7 @@ "type": "string" } ], - "optional": false, + "optional": true, "required": false }, { @@ -5680,7 +5687,7 @@ "type": "string" } ], - "optional": false, + "optional": true, "required": false }, { @@ -5763,7 +5770,7 @@ "type": "string" } ], - "optional": false, + "optional": true, "required": false }, { @@ -16019,16 +16026,13 @@ "name": "for", "type": "HTMLElement | Promise | string", "complexType": { - "original": "string | HTMLElement | Promise", + "original": "ElementReference", "resolved": "HTMLElement | Promise | 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" } } }, @@ -17789,6 +17793,11 @@ "docstring": "", "path": "src/components/category-filter/input-state.ts" }, + "src/components/utils/element-reference.ts::ElementReference": { + "declaration": "export type ElementReference = string | HTMLElement | Promise;", + "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": "", @@ -17804,10 +17813,10 @@ "docstring": "", "path": "src/components/toast/toast-utils.ts" }, - "../../node_modules/.pnpm/@stencil+core@4.22.1/node_modules/@stencil/core/internal/stencil-core/index.d.ts::Element": { + "../../node_modules/.pnpm/@stencil+core@4.22.2/node_modules/@stencil/core/internal/stencil-core/index.d.ts::Element": { "declaration": "any", "docstring": "", - "path": "../../node_modules/.pnpm/@stencil+core@4.22.1/node_modules/@stencil/core/internal/stencil-core/index.d.ts" + "path": "../../node_modules/.pnpm/@stencil+core@4.22.2/node_modules/@stencil/core/internal/stencil-core/index.d.ts" }, "src/components/tree/tree-model.ts::TreeModel": { "declaration": "{\n [P in K]: T;\n}", diff --git a/packages/core/src/components.d.ts b/packages/core/src/components.d.ts index 080d06edb3..2db83c87e8 100644 --- a/packages/core/src/components.d.ts +++ b/packages/core/src/components.d.ts @@ -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"; @@ -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"; @@ -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"; @@ -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"; @@ -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 @@ -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. */ @@ -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>; @@ -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; + "trigger"?: ElementReference; /** * Update position of dropdown */ @@ -872,11 +876,11 @@ export namespace Components { /** * Button icon */ - "icon": string; + "icon"?: string; /** * Set label */ - "label": string; + "label"?: string; /** * Outline button */ @@ -885,7 +889,7 @@ export namespace Components { * Placement of the dropdown * @since 2.0.0 */ - "placement": AlignedPlacement; + "placement"?: AlignedPlacement; /** * Button variant */ @@ -2254,7 +2258,7 @@ export namespace Components { /** * CSS selector for hover trigger element e.g. `for="[data-my-custom-select]"` */ - "for"?: string | HTMLElement | Promise; + "for"?: ElementReference1; "hideDelay": number; "hideTooltip": () => Promise; /** @@ -4923,7 +4927,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. */ @@ -4970,7 +4974,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; + "trigger"?: ElementReference; } /** * @since 1.3.0 @@ -6499,7 +6503,7 @@ declare namespace LocalJSX { /** * CSS selector for hover trigger element e.g. `for="[data-my-custom-select]"` */ - "for"?: string | HTMLElement | Promise; + "for"?: ElementReference1; "hideDelay"?: number; /** * Define if the user can access the tooltip via mouse. diff --git a/packages/core/src/components/breadcrumb/breadcrumb.tsx b/packages/core/src/components/breadcrumb/breadcrumb.tsx index 96fe3a3516..f33be32866 100644 --- a/packages/core/src/components/breadcrumb/breadcrumb.tsx +++ b/packages/core/src/components/breadcrumb/breadcrumb.tsx @@ -21,6 +21,7 @@ import { } from '@stencil/core'; import { a11yBoolean, a11yHostAttributes } from '../utils/a11y'; import { createMutationObserver } from '../utils/mutation-observer'; +import { makeRef } from '../utils/make-ref'; let sequenceId = 0; const createId = (prefix: string = 'breadcrumb-') => { @@ -65,19 +66,20 @@ export class Breadcrumb { /** * Crumb item clicked event */ - @Event() itemClick: EventEmitter; + @Event() itemClick!: EventEmitter; /** * Next item clicked event */ - @Event() nextClick: EventEmitter<{ event: UIEvent; item: string }>; + @Event() nextClick!: EventEmitter<{ event: UIEvent; item: string }>; + + private readonly previousButtonRef = makeRef(); + private readonly nextButtonRef = makeRef(); - @State() previousButtonRef: HTMLElement; - @State() nextButtonRef: HTMLElement; @State() items: HTMLIxBreadcrumbItemElement[] = []; @State() isPreviousDropdownExpanded = false; - private mutationObserver: MutationObserver; + private mutationObserver?: MutationObserver; private previousButtonId = createId(); private previousDropdownId = createId(); @@ -117,7 +119,7 @@ export class Breadcrumb { bc.isDropdownTrigger = shouldShowDropdown; if (shouldShowDropdown) { - this.nextButtonRef = bc; + this.nextButtonRef(bc); } if (updatedItems.length < this.visibleItemCount) { @@ -143,23 +145,19 @@ export class Breadcrumb { aria-label={this.ariaLabelPreviousButton} trigger={ this.items?.length > this.visibleItemCount - ? this.previousButtonRef - : null + ? this.previousButtonRef.waitForCurrent() + : undefined } onShowChanged={({ detail }) => { this.isPreviousDropdownExpanded = detail; - const previousButton = this.hostElement.shadowRoot.getElementById( + const previousButton = this.hostElement.shadowRoot!.getElementById( this.previousButtonId ); // Need to force update previous button to change `aria-expanded` if (previousButton) { - forceUpdate( - this.hostElement.shadowRoot.getElementById( - this.previousButtonId - ) - ); + forceUpdate(previousButton); } }} > @@ -182,7 +180,7 @@ export class Breadcrumb { {this.items?.length > this.visibleItemCount ? ( (this.previousButtonRef = ref)} + ref={this.previousButtonRef} label="..." tabIndex={1} onItemClick={(event) => event.stopPropagation()} @@ -200,7 +198,7 @@ export class Breadcrumb { - + {this.nextItems?.map((item) => (