@siemens/ix-react 3.1.0 → 4.0.0

package/dist/context/application-context.js.map

@@ -1 +1 @@
-{"version":3,"file":"application-context.js","sources":["../../src/context/application-context.tsx"],"sourcesContent":["'use client';\n/*\n * SPDX-FileCopyrightText: 2024 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\nimport React, { PropsWithChildren } from 'react';\nimport { ReactFrameworkDelegate, reactFrameworkDelegate } from '../delegate';\nimport { IxOverlay, PORTAL_ID } from '../modal/portal';\nimport { IxContext } from './context';\n\nexport type IxApplicationContextProps = PropsWithChildren;\n\nexport class IxApplicationContext extends React.Component<IxApplicationContextProps> {\n  private delegate: ReactFrameworkDelegate = reactFrameworkDelegate;\n\n  constructor(props: IxApplicationContextProps) {\n    super(props);\n    this.delegate.isUsingReactPortal = true;\n  }\n\n  render() {\n    return (\n      <IxContext.Provider\n        value={{\n          delegate: this.delegate,\n        }}\n      >\n        {this.props.children}\n        <IxOverlay delegate={this.delegate}></IxOverlay>\n        <div id={PORTAL_ID}></div>\n      </IxContext.Provider>\n    );\n  }\n}\n"],"names":[],"mappings":";;;;;;;AAgBa;AAGX;;;AAEE;;;AAIA;;;;AAYH;;"}
+{"version":3,"file":"application-context.js","sources":["../../src/context/application-context.tsx"],"sourcesContent":["'use client';\n/*\n * SPDX-FileCopyrightText: 2024 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\nimport React, { PropsWithChildren } from 'react';\nimport { ReactFrameworkDelegate, reactFrameworkDelegate } from '../delegate';\nimport { IxOverlay, PORTAL_ID } from '../modal/portal';\nimport { IxContext } from './context';\n\nexport type IxApplicationContextProps = PropsWithChildren;\n\nexport class IxApplicationContext extends React.Component<IxApplicationContextProps> {\n  private delegate: ReactFrameworkDelegate = reactFrameworkDelegate;\n\n  constructor(props: IxApplicationContextProps) {\n    super(props);\n    this.delegate.isUsingReactPortal = true;\n  }\n\n  render() {\n    return (\n      <IxContext.Provider\n        value={{\n          delegate: this.delegate,\n        }}\n      >\n        {this.props.children}\n        <IxOverlay delegate={this.delegate}></IxOverlay>\n        <div id={PORTAL_ID}></div>\n      </IxContext.Provider>\n    );\n  }\n}\n"],"names":[],"mappings":";;;;;;;AAgBM;AAGJ;;;AAEE;;;AAIA;;;;AAYH;;"}

package/dist/context/context.js.map

@@ -1 +1 @@
-{"version":3,"file":"context.js","sources":["../../src/context/context.ts"],"sourcesContent":["/*\n * SPDX-FileCopyrightText: 2024 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport React from 'react';\nimport { ReactFrameworkDelegate } from '../delegate';\n\nexport const IxContext = React.createContext<{\n  delegate: ReactFrameworkDelegate;\n} | null>(null);\n"],"names":[],"mappings":";;AAAA;;;;;;;AAOG;AAKU,MAAA,SAAS,GAAG,KAAK,CAAC,aAAa,CAElC,IAAI;;;;"}
+{"version":3,"file":"context.js","sources":["../../src/context/context.ts"],"sourcesContent":["/*\n * SPDX-FileCopyrightText: 2024 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport React from 'react';\nimport { ReactFrameworkDelegate } from '../delegate';\n\nexport const IxContext = React.createContext<{\n  delegate: ReactFrameworkDelegate;\n} | null>(null);\n"],"names":[],"mappings":";;AAAA;;;;;;;AAOG;AAKI,MAAM,SAAS,GAAG,KAAK,CAAC,aAAa,CAElC,IAAI;;;;"}

package/dist/delegate.js.map

@@ -1 +1 @@
-{"version":3,"file":"delegate.js","sources":["../src/delegate.ts"],"sourcesContent":["/*\n * SPDX-FileCopyrightText: 2024 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\nimport { FrameworkDelegate, registerFrameworkDelegate } from '@siemens/ix';\nimport ReactDOMClient from 'react-dom/client';\nlet viewInstance = 0;\n\nfunction createViewInstance() {\n  return `ix-react-view-${viewInstance++}`;\n}\n\nconst mountedRootNodes: Record<string, ReactDOMClient.Root> = {};\n\nasync function fallbackRootDom(id: string, view: React.ReactNode) {\n  return new Promise((resolve) => {\n    const rootElement = document.createElement('DIV');\n    rootElement.id = id;\n    rootElement.style.display = 'contents';\n    document.body.appendChild(rootElement);\n\n    const root = ReactDOMClient.createRoot(rootElement);\n    root.render(view);\n\n    mountedRootNodes[id] = root;\n\n    setTimeout(() => {\n      const viewElement = rootElement.children[0];\n      resolve(viewElement);\n    });\n  });\n}\n\nasync function fallbackRemoveViewFromRootDom(view: any) {\n  const parent = view.parentElement;\n  const id = parent.id;\n  if (id in mountedRootNodes) {\n    mountedRootNodes[id].unmount();\n    delete mountedRootNodes[id];\n    parent.remove();\n  }\n}\n\nexport class ReactFrameworkDelegate implements FrameworkDelegate {\n  attachViewToPortal?: (id: string, view: any) => Promise<Element>;\n  removeViewFromPortal?: (id: string) => void;\n\n  resolvePortalInitPromise: (() => void) | undefined;\n  portalInitPromise: Promise<void>;\n  isUsingReactPortal = false;\n\n  constructor() {\n    this.portalInitPromise = new Promise<void>(\n      (resolve) => (this.resolvePortalInitPromise = resolve)\n    );\n  }\n\n  async attachView(view: any): Promise<any> {\n    const id = createViewInstance();\n\n    if (!this.isUsingReactPortal) {\n      return fallbackRootDom(id, view);\n    }\n\n    await this.isPortalReady();\n    if (this.attachViewToPortal) {\n      const refElement = await this.attachViewToPortal(id, view);\n      return refElement;\n    }\n\n    console.error('Portal could not be initialized');\n  }\n\n  async removeView(view: any): Promise<void> {\n    if (!this.removeViewFromPortal) {\n      return fallbackRemoveViewFromRootDom(view);\n    }\n\n    const parent = view.parentElement;\n    const id = parent.getAttribute('data-portal-id');\n\n    this.removeViewFromPortal(id);\n  }\n\n  portalReady() {\n    this.resolvePortalInitPromise?.();\n  }\n\n  private async isPortalReady() {\n    return this.portalInitPromise;\n  }\n}\n\nexport const reactFrameworkDelegate = new ReactFrameworkDelegate();\nregisterFrameworkDelegate(reactFrameworkDelegate);\n"],"names":[],"mappings":";;;AAAA;;;;;;;AAOG;AAGH,IAAI,YAAY,GAAG,CAAC,CAAC;AAErB,SAAS,kBAAkB,GAAA;AACzB,IAAA,OAAO,CAAiB,cAAA,EAAA,YAAY,EAAE,CAAA,CAAE,CAAC;AAC3C,CAAC;AAED,MAAM,gBAAgB,GAAwC,EAAE,CAAC;AAEjE,eAAe,eAAe,CAAC,EAAU,EAAE,IAAqB,EAAA;AAC9D,IAAA,OAAO,IAAI,OAAO,CAAC,CAAC,OAAO,KAAI;QAC7B,MAAM,WAAW,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;AAClD,QAAA,WAAW,CAAC,EAAE,GAAG,EAAE,CAAC;AACpB,QAAA,WAAW,CAAC,KAAK,CAAC,OAAO,GAAG,UAAU,CAAC;AACvC,QAAA,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,WAAW,CAAC,CAAC;QAEvC,MAAM,IAAI,GAAG,cAAc,CAAC,UAAU,CAAC,WAAW,CAAC,CAAC;AACpD,QAAA,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC;AAElB,QAAA,gBAAgB,CAAC,EAAE,CAAC,GAAG,IAAI,CAAC;QAE5B,UAAU,CAAC,MAAK;YACd,MAAM,WAAW,GAAG,WAAW,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC;YAC5C,OAAO,CAAC,WAAW,CAAC,CAAC;AACvB,SAAC,CAAC,CAAC;AACL,KAAC,CAAC,CAAC;AACL,CAAC;AAED,eAAe,6BAA6B,CAAC,IAAS,EAAA;AACpD,IAAA,MAAM,MAAM,GAAG,IAAI,CAAC,aAAa,CAAC;AAClC,IAAA,MAAM,EAAE,GAAG,MAAM,CAAC,EAAE,CAAC;AACrB,IAAA,IAAI,EAAE,IAAI,gBAAgB,EAAE;AAC1B,QAAA,gBAAgB,CAAC,EAAE,CAAC,CAAC,OAAO,EAAE,CAAC;AAC/B,QAAA,OAAO,gBAAgB,CAAC,EAAE,CAAC,CAAC;QAC5B,MAAM,CAAC,MAAM,EAAE,CAAC;KACjB;AACH,CAAC;MAEY,sBAAsB,CAAA;AAQjC,IAAA,WAAA,GAAA;QAFA,IAAkB,CAAA,kBAAA,GAAG,KAAK,CAAC;AAGzB,QAAA,IAAI,CAAC,iBAAiB,GAAG,IAAI,OAAO,CAClC,CAAC,OAAO,MAAM,IAAI,CAAC,wBAAwB,GAAG,OAAO,CAAC,CACvD,CAAC;KACH;IAED,MAAM,UAAU,CAAC,IAAS,EAAA;AACxB,QAAA,MAAM,EAAE,GAAG,kBAAkB,EAAE,CAAC;AAEhC,QAAA,IAAI,CAAC,IAAI,CAAC,kBAAkB,EAAE;AAC5B,YAAA,OAAO,eAAe,CAAC,EAAE,EAAE,IAAI,CAAC,CAAC;SAClC;AAED,QAAA,MAAM,IAAI,CAAC,aAAa,EAAE,CAAC;AAC3B,QAAA,IAAI,IAAI,CAAC,kBAAkB,EAAE;YAC3B,MAAM,UAAU,GAAG,MAAM,IAAI,CAAC,kBAAkB,CAAC,EAAE,EAAE,IAAI,CAAC,CAAC;AAC3D,YAAA,OAAO,UAAU,CAAC;SACnB;AAED,QAAA,OAAO,CAAC,KAAK,CAAC,iCAAiC,CAAC,CAAC;KAClD;IAED,MAAM,UAAU,CAAC,IAAS,EAAA;AACxB,QAAA,IAAI,CAAC,IAAI,CAAC,oBAAoB,EAAE;AAC9B,YAAA,OAAO,6BAA6B,CAAC,IAAI,CAAC,CAAC;SAC5C;AAED,QAAA,MAAM,MAAM,GAAG,IAAI,CAAC,aAAa,CAAC;QAClC,MAAM,EAAE,GAAG,MAAM,CAAC,YAAY,CAAC,gBAAgB,CAAC,CAAC;AAEjD,QAAA,IAAI,CAAC,oBAAoB,CAAC,EAAE,CAAC,CAAC;KAC/B;IAED,WAAW,GAAA;AACT,QAAA,IAAI,CAAC,wBAAwB,IAAI,CAAC;KACnC;AAEO,IAAA,MAAM,aAAa,GAAA;QACzB,OAAO,IAAI,CAAC,iBAAiB,CAAC;KAC/B;AACF,CAAA;AAEY,MAAA,sBAAsB,GAAG,IAAI,sBAAsB,GAAG;AACnE,yBAAyB,CAAC,sBAAsB,CAAC;;;;"}
+{"version":3,"file":"delegate.js","sources":["../src/delegate.ts"],"sourcesContent":["/*\n * SPDX-FileCopyrightText: 2024 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\nimport { FrameworkDelegate, registerFrameworkDelegate } from '@siemens/ix';\nimport ReactDOMClient from 'react-dom/client';\nlet viewInstance = 0;\n\nfunction createViewInstance() {\n  return `ix-react-view-${viewInstance++}`;\n}\n\nconst mountedRootNodes: Record<string, ReactDOMClient.Root> = {};\n\nasync function fallbackRootDom(id: string, view: React.ReactNode) {\n  return new Promise((resolve) => {\n    const rootElement = document.createElement('DIV');\n    rootElement.id = id;\n    rootElement.style.display = 'contents';\n    document.body.appendChild(rootElement);\n\n    const root = ReactDOMClient.createRoot(rootElement);\n    root.render(view);\n\n    mountedRootNodes[id] = root;\n\n    setTimeout(() => {\n      const viewElement = rootElement.children[0];\n      resolve(viewElement);\n    });\n  });\n}\n\nasync function fallbackRemoveViewFromRootDom(view: any) {\n  const parent = view.parentElement;\n  const id = parent.id;\n  if (id in mountedRootNodes) {\n    mountedRootNodes[id].unmount();\n    delete mountedRootNodes[id];\n    parent.remove();\n  }\n}\n\nexport class ReactFrameworkDelegate implements FrameworkDelegate {\n  attachViewToPortal?: (id: string, view: any) => Promise<Element>;\n  removeViewFromPortal?: (id: string) => void;\n\n  resolvePortalInitPromise: (() => void) | undefined;\n  portalInitPromise: Promise<void>;\n  isUsingReactPortal = false;\n\n  constructor() {\n    this.portalInitPromise = new Promise<void>(\n      (resolve) => (this.resolvePortalInitPromise = resolve)\n    );\n  }\n\n  async attachView(view: any): Promise<any> {\n    const id = createViewInstance();\n\n    if (!this.isUsingReactPortal) {\n      return fallbackRootDom(id, view);\n    }\n\n    await this.isPortalReady();\n    if (this.attachViewToPortal) {\n      const refElement = await this.attachViewToPortal(id, view);\n      return refElement;\n    }\n\n    console.error('Portal could not be initialized');\n  }\n\n  async removeView(view: any): Promise<void> {\n    if (!this.removeViewFromPortal) {\n      return fallbackRemoveViewFromRootDom(view);\n    }\n\n    const parent = view.parentElement;\n    const id = parent.getAttribute('data-portal-id');\n\n    this.removeViewFromPortal(id);\n  }\n\n  portalReady() {\n    this.resolvePortalInitPromise?.();\n  }\n\n  private async isPortalReady() {\n    return this.portalInitPromise;\n  }\n}\n\nexport const reactFrameworkDelegate = new ReactFrameworkDelegate();\nregisterFrameworkDelegate(reactFrameworkDelegate);\n"],"names":[],"mappings":";;;AAAA;;;;;;;AAOG;AAGH,IAAI,YAAY,GAAG,CAAC;AAEpB,SAAS,kBAAkB,GAAA;AACzB,IAAA,OAAO,CAAA,cAAA,EAAiB,YAAY,EAAE,CAAA,CAAE;AAC1C;AAEA,MAAM,gBAAgB,GAAwC,EAAE;AAEhE,eAAe,eAAe,CAAC,EAAU,EAAE,IAAqB,EAAA;AAC9D,IAAA,OAAO,IAAI,OAAO,CAAC,CAAC,OAAO,KAAI;QAC7B,MAAM,WAAW,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC;AACjD,QAAA,WAAW,CAAC,EAAE,GAAG,EAAE;AACnB,QAAA,WAAW,CAAC,KAAK,CAAC,OAAO,GAAG,UAAU;AACtC,QAAA,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,WAAW,CAAC;QAEtC,MAAM,IAAI,GAAG,cAAc,CAAC,UAAU,CAAC,WAAW,CAAC;AACnD,QAAA,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC;AAEjB,QAAA,gBAAgB,CAAC,EAAE,CAAC,GAAG,IAAI;QAE3B,UAAU,CAAC,MAAK;YACd,MAAM,WAAW,GAAG,WAAW,CAAC,QAAQ,CAAC,CAAC,CAAC;YAC3C,OAAO,CAAC,WAAW,CAAC;AACtB,QAAA,CAAC,CAAC;AACJ,IAAA,CAAC,CAAC;AACJ;AAEA,eAAe,6BAA6B,CAAC,IAAS,EAAA;AACpD,IAAA,MAAM,MAAM,GAAG,IAAI,CAAC,aAAa;AACjC,IAAA,MAAM,EAAE,GAAG,MAAM,CAAC,EAAE;AACpB,IAAA,IAAI,EAAE,IAAI,gBAAgB,EAAE;AAC1B,QAAA,gBAAgB,CAAC,EAAE,CAAC,CAAC,OAAO,EAAE;AAC9B,QAAA,OAAO,gBAAgB,CAAC,EAAE,CAAC;QAC3B,MAAM,CAAC,MAAM,EAAE;IACjB;AACF;MAEa,sBAAsB,CAAA;AAQjC,IAAA,WAAA,GAAA;QAFA,IAAA,CAAA,kBAAkB,GAAG,KAAK;AAGxB,QAAA,IAAI,CAAC,iBAAiB,GAAG,IAAI,OAAO,CAClC,CAAC,OAAO,MAAM,IAAI,CAAC,wBAAwB,GAAG,OAAO,CAAC,CACvD;IACH;IAEA,MAAM,UAAU,CAAC,IAAS,EAAA;AACxB,QAAA,MAAM,EAAE,GAAG,kBAAkB,EAAE;AAE/B,QAAA,IAAI,CAAC,IAAI,CAAC,kBAAkB,EAAE;AAC5B,YAAA,OAAO,eAAe,CAAC,EAAE,EAAE,IAAI,CAAC;QAClC;AAEA,QAAA,MAAM,IAAI,CAAC,aAAa,EAAE;AAC1B,QAAA,IAAI,IAAI,CAAC,kBAAkB,EAAE;YAC3B,MAAM,UAAU,GAAG,MAAM,IAAI,CAAC,kBAAkB,CAAC,EAAE,EAAE,IAAI,CAAC;AAC1D,YAAA,OAAO,UAAU;QACnB;AAEA,QAAA,OAAO,CAAC,KAAK,CAAC,iCAAiC,CAAC;IAClD;IAEA,MAAM,UAAU,CAAC,IAAS,EAAA;AACxB,QAAA,IAAI,CAAC,IAAI,CAAC,oBAAoB,EAAE;AAC9B,YAAA,OAAO,6BAA6B,CAAC,IAAI,CAAC;QAC5C;AAEA,QAAA,MAAM,MAAM,GAAG,IAAI,CAAC,aAAa;QACjC,MAAM,EAAE,GAAG,MAAM,CAAC,YAAY,CAAC,gBAAgB,CAAC;AAEhD,QAAA,IAAI,CAAC,oBAAoB,CAAC,EAAE,CAAC;IAC/B;IAEA,WAAW,GAAA;AACT,QAAA,IAAI,CAAC,wBAAwB,IAAI;IACnC;AAEQ,IAAA,MAAM,aAAa,GAAA;QACzB,OAAO,IAAI,CAAC,iBAAiB;IAC/B;AACD;AAEM,MAAM,sBAAsB,GAAG,IAAI,sBAAsB;AAChE,yBAAyB,CAAC,sBAAsB,CAAC;;;;"}

package/dist/index.js

@@ -1,4 +1,4 @@
-export { IxActionCard, IxApplication, IxApplicationHeader, IxAvatar, IxBasicNavigation, IxBlind, IxBreadcrumb, IxBreadcrumbItem, IxButton, IxCard, IxCardAccordion, IxCardContent, IxCardList, IxCardTitle, IxCategoryFilter, IxCheckbox, IxCheckboxGroup, IxChip, IxCol, IxContent, IxContentHeader, IxCustomField, IxDateDropdown, IxDateInput, IxDatePicker, IxDatetimePicker, IxDivider, IxDrawer, IxDropdown, IxDropdownButton, IxDropdownHeader, IxDropdownItem, IxDropdownQuickActions, IxEmptyState, IxEventList, IxEventListItem, IxExpandingSearch, IxFieldLabel, IxFilterChip, IxFlipTile, IxFlipTileContent, IxGroup, IxGroupContextMenu, IxGroupItem, IxHelperText, IxIconButton, IxIconToggleButton, IxInput, IxInputGroup, IxKeyValue, IxKeyValueList, IxKpi, IxLayoutAuto, IxLayoutGrid, IxLinkButton, IxMapNavigation, IxMapNavigationOverlay, IxMenu, IxMenuAbout, IxMenuAboutItem, IxMenuAboutNews, IxMenuAvatar, IxMenuAvatarItem, IxMenuCategory, IxMenuItem, IxMenuSettings, IxMenuSettingsItem, IxMessageBar, IxModal, IxModalContent, IxModalFooter, IxModalHeader, IxNumberInput, IxPagination, IxPane, IxPaneLayout, IxPill, IxPushCard, IxRadio, IxRadioGroup, IxRow, IxSelect, IxSelectItem, IxSlider, IxSpinner, IxSplitButton, IxTabItem, IxTabs, IxTextarea, IxTile, IxTimePicker, IxToast, IxToastContainer, IxToggle, IxToggleButton, IxTooltip, IxTypography, IxUpload, IxValidationTooltip, IxWorkflowStep, IxWorkflowSteps } from './components.js';
+export { IxActionCard, IxApplication, IxApplicationHeader, IxAvatar, IxBlind, IxBreadcrumb, IxBreadcrumbItem, IxButton, IxCard, IxCardAccordion, IxCardContent, IxCardList, IxCardTitle, IxCategoryFilter, IxCheckbox, IxCheckboxGroup, IxChip, IxCol, IxContent, IxContentHeader, IxCustomField, IxDateDropdown, IxDateInput, IxDatePicker, IxDatetimePicker, IxDivider, IxDrawer, IxDropdown, IxDropdownButton, IxDropdownHeader, IxDropdownItem, IxDropdownQuickActions, IxEmptyState, IxEventList, IxEventListItem, IxExpandingSearch, IxFieldLabel, IxFilterChip, IxFlipTile, IxFlipTileContent, IxGroup, IxGroupContextMenu, IxGroupItem, IxHelperText, IxIconButton, IxIconToggleButton, IxInput, IxInputGroup, IxKeyValue, IxKeyValueList, IxKpi, IxLayoutAuto, IxLayoutGrid, IxLinkButton, IxMenu, IxMenuAbout, IxMenuAboutItem, IxMenuAboutNews, IxMenuAvatar, IxMenuAvatarItem, IxMenuCategory, IxMenuItem, IxMenuSettings, IxMenuSettingsItem, IxMessageBar, IxModal, IxModalContent, IxModalFooter, IxModalHeader, IxNumberInput, IxPagination, IxPane, IxPaneLayout, IxPill, IxProgressIndicator, IxPushCard, IxRadio, IxRadioGroup, IxRow, IxSelect, IxSelectItem, IxSlider, IxSpinner, IxSplitButton, IxTabItem, IxTabs, IxTextarea, IxTile, IxTimeInput, IxTimePicker, IxToast, IxToastContainer, IxToggle, IxToggleButton, IxTooltip, IxTypography, IxUpload, IxValidationTooltip, IxWorkflowStep, IxWorkflowSteps } from './components.js';
 export { IxApplicationContext } from './context/application-context.js';
 import './internal-components.js';
 export { IxIcon } from './ix-icon.js';

package/dist/internal-components.js

@@ -4,10 +4,16 @@ import { defineCustomElement } from '@siemens/ix/components/ix-application-switc
 import { defineCustomElement as defineCustomElement$3 } from '@siemens/ix/components/ix-menu-expand-icon.js';
 import { defineCustomElement as defineCustomElement$2 } from '@siemens/ix/components/ix-date-time-card.js';
 import { defineCustomElement as defineCustomElement$4 } from '@siemens/ix/components/ix-modal-loading.js';
+import { defineCustomElement as defineCustomElement$5 } from '@siemens/ix-icons/components/ix-icon.js';
 
+/**
+ * Define custom elements during usage of the library to ensure that all
+ * components are registered before they are used.
+ */
 defineCustomElement();
 defineCustomElement$1();
 defineCustomElement$2();
 defineCustomElement$3();
 defineCustomElement$4();
+defineCustomElement$5();
 //# sourceMappingURL=internal-components.js.map

package/dist/internal-components.js.map

@@ -1 +1 @@
-{"version":3,"file":"internal-components.js","sources":["../src/internal-components.ts"],"sourcesContent":["'use client';\n\n/*\n * SPDX-FileCopyrightText: 2024 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\nimport { defineCustomElement as defineIxApplicationSidebar } from '@siemens/ix/components/ix-application-sidebar.js';\nimport { defineCustomElement as defineIxApplicationSwitchModal } from '@siemens/ix/components/ix-application-switch-modal.js';\nimport { defineCustomElement as defineIxBurgerMenu } from '@siemens/ix/components/ix-menu-expand-icon.js';\nimport { defineCustomElement as defineIxDateTimeCard } from '@siemens/ix/components/ix-date-time-card.js';\nimport { defineCustomElement as defineIxModalLoading } from '@siemens/ix/components/ix-modal-loading.js';\n\ndefineIxApplicationSwitchModal();\ndefineIxApplicationSidebar();\ndefineIxDateTimeCard();\ndefineIxBurgerMenu();\ndefineIxModalLoading();\n"],"names":["defineIxApplicationSwitchModal","defineIxApplicationSidebar","defineIxDateTimeCard","defineIxBurgerMenu","defineIxModalLoading"],"mappings":";;;;;;;AAgBAA;AACAC;AACAC;AACAC;AACAC"}
+{"version":3,"file":"internal-components.js","sources":["../src/internal-components.ts"],"sourcesContent":["'use client';\n\n/*\n * SPDX-FileCopyrightText: 2024 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\nimport { defineCustomElement as defineIxApplicationSidebar } from '@siemens/ix/components/ix-application-sidebar.js';\nimport { defineCustomElement as defineIxApplicationSwitchModal } from '@siemens/ix/components/ix-application-switch-modal.js';\nimport { defineCustomElement as defineIxBurgerMenu } from '@siemens/ix/components/ix-menu-expand-icon.js';\nimport { defineCustomElement as defineIxDateTimeCard } from '@siemens/ix/components/ix-date-time-card.js';\nimport { defineCustomElement as defineIxModalLoading } from '@siemens/ix/components/ix-modal-loading.js';\nimport { defineCustomElement as defineIxIcon } from '@siemens/ix-icons/components/ix-icon.js';\n\n/**\n * Define custom elements during usage of the library to ensure that all\n * components are registered before they are used.\n */\ndefineIxApplicationSwitchModal();\ndefineIxApplicationSidebar();\ndefineIxDateTimeCard();\ndefineIxBurgerMenu();\ndefineIxModalLoading();\ndefineIxIcon();\n"],"names":["defineIxApplicationSwitchModal","defineIxApplicationSidebar","defineIxDateTimeCard","defineIxBurgerMenu","defineIxModalLoading","defineIxIcon"],"mappings":";;;;;;;;AAiBA;;;AAGG;AACHA;AACAC;AACAC;AACAC;AACAC;AACAC"}

package/dist/ix-icon.js

@@ -1,5 +1,5 @@
 "use client";
-import { IxIcon as IxIcon$1, defineCustomElement } from '@siemens/ix-icons/components/ix-icon.js';
+import { defineCustomElement, IxIcon as IxIcon$1 } from '@siemens/ix-icons/components/ix-icon.js';
 import { createComponent } from '@stencil/react-output-target/runtime';
 import React from 'react';
 

package/dist/modal/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../src/modal/index.ts"],"sourcesContent":["/*\n * SPDX-FileCopyrightText: 2024 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport {\n  ModalConfig as IxModalConfig,\n  showModal as _showModal,\n} from '@siemens/ix';\nexport * from './modal';\n\nexport type ModalConfig = {\n  content: React.ReactNode | string;\n};\n\nexport async function showModal(\n  config: Omit<IxModalConfig, 'content'> & ModalConfig\n) {\n  return _showModal(config);\n}\n"],"names":["_showModal"],"mappings":";;;AAAA;;;;;;;AAOG;AAYI,eAAe,SAAS,CAC7B,MAAoD,EAAA;AAEpD,IAAA,OAAOA,WAAU,CAAC,MAAM,CAAC,CAAC;AAC5B;;;;"}
+{"version":3,"file":"index.js","sources":["../../src/modal/index.ts"],"sourcesContent":["/*\n * SPDX-FileCopyrightText: 2024 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport {\n  ModalConfig as IxModalConfig,\n  showModal as _showModal,\n} from '@siemens/ix';\nexport * from './modal';\n\nexport type ModalConfig = {\n  content: React.ReactNode | string;\n};\n\nexport async function showModal(\n  config: Omit<IxModalConfig, 'content'> & ModalConfig\n) {\n  return _showModal(config);\n}\n"],"names":["_showModal"],"mappings":";;;AAAA;;;;;;;AAOG;AAYI,eAAe,SAAS,CAC7B,MAAoD,EAAA;AAEpD,IAAA,OAAOA,WAAU,CAAC,MAAM,CAAC;AAC3B;;;;"}

package/dist/modal/portal.js.map

@@ -1 +1 @@
-{"version":3,"file":"portal.js","sources":["../../src/modal/portal.tsx"],"sourcesContent":["'use client';\n/*\n * SPDX-FileCopyrightText: 2024 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { useEffect, useLayoutEffect, useRef, useState } from 'react';\nimport ReactDOM from 'react-dom';\nimport { ReactFrameworkDelegate } from '../delegate';\n\nexport const PORTAL_ID = 'ix-portal';\n\nexport const IxOverlay = (props: { delegate: ReactFrameworkDelegate }) => {\n  const [portalRef, setPortalRef] = useState<Element | null>(null);\n\n  const resolveElementRef = useRef<\n    Record<string, (value: Element | PromiseLike<Element>) => void>\n  >({});\n\n  const viewRefs = useRef<Record<string, any>>({});\n  const [views, setViews] = useState<Record<string, any>>({});\n\n  useEffect(() => {\n    const addOverlay = (id: string, view: any) => {\n      const _views = { ...viewRefs.current };\n      _views[id] = view;\n      setViews(_views);\n      viewRefs.current = _views;\n    };\n\n    const removeOverlay = (id: string) => {\n      const _views = { ...viewRefs.current };\n      delete _views[id];\n      setViews(_views);\n      viewRefs.current = _views;\n    };\n\n    props.delegate.attachViewToPortal = async (id, view) => {\n      addOverlay(id, view);\n      return new Promise<Element>((resolve) => {\n        const r = { ...resolveElementRef.current };\n        r[id] = resolve;\n        resolveElementRef.current = r;\n      });\n    };\n\n    props.delegate.removeViewFromPortal = async (id: string) => {\n      removeOverlay(id);\n    };\n\n    props.delegate.portalReady();\n  }, []);\n\n  useLayoutEffect(() => {\n    const portalRef = document.querySelector(`#${PORTAL_ID}`);\n    if (portalRef) {\n      setPortalRef(portalRef);\n    }\n  }, []);\n\n  useLayoutEffect(() => {\n    Object.keys(views).forEach((key) => {\n      const resolveQueue = { ...resolveElementRef.current };\n      const element = document.querySelector(`[data-portal-id=\"${key}\"]`);\n      if (element && element.children.length === 1 && resolveQueue[key]) {\n        const view = element.children[0];\n        resolveQueue[key](view);\n      }\n    });\n  }, [views]);\n\n  if (!portalRef) {\n    return null;\n  }\n\n  return (\n    <>\n      {Object.keys(views).map((key) => {\n        const RenderView = views[key];\n        return ReactDOM.createPortal(\n          <div data-portal-id={key} style={{ display: 'contents ' }}>\n            {RenderView}\n          </div>,\n          portalRef,\n          key\n        );\n      })}\n    </>\n  );\n};\n"],"names":[],"mappings":";;;;;AAcO;AAEM;;AAGX;AAIA;;;AAIE;;AAEE;;AAEA;AACF;AAEA;;AAEE;;AAEA;AACF;;AAGE;AACA;;AAEE;AACA;AACF;AACF;;;AAIA;AAEA;;;;;;;;;;;;AAcE;;AAEE;;AAEJ;AACF;;AAGE;;AAGF;AAGM;;;AAWR;;"}
+{"version":3,"file":"portal.js","sources":["../../src/modal/portal.tsx"],"sourcesContent":["'use client';\n/*\n * SPDX-FileCopyrightText: 2024 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { useEffect, useLayoutEffect, useRef, useState } from 'react';\nimport ReactDOM from 'react-dom';\nimport { ReactFrameworkDelegate } from '../delegate';\n\nexport const PORTAL_ID = 'ix-portal';\n\nexport const IxOverlay = (props: { delegate: ReactFrameworkDelegate }) => {\n  const [portalRef, setPortalRef] = useState<Element | null>(null);\n\n  const resolveElementRef = useRef<\n    Record<string, (value: Element | PromiseLike<Element>) => void>\n  >({});\n\n  const viewRefs = useRef<Record<string, any>>({});\n  const [views, setViews] = useState<Record<string, any>>({});\n\n  useEffect(() => {\n    const addOverlay = (id: string, view: any) => {\n      const _views = { ...viewRefs.current };\n      _views[id] = view;\n      setViews(_views);\n      viewRefs.current = _views;\n    };\n\n    const removeOverlay = (id: string) => {\n      const _views = { ...viewRefs.current };\n      delete _views[id];\n      setViews(_views);\n      viewRefs.current = _views;\n    };\n\n    props.delegate.attachViewToPortal = async (id, view) => {\n      addOverlay(id, view);\n      return new Promise<Element>((resolve) => {\n        const r = { ...resolveElementRef.current };\n        r[id] = resolve;\n        resolveElementRef.current = r;\n      });\n    };\n\n    props.delegate.removeViewFromPortal = async (id: string) => {\n      removeOverlay(id);\n    };\n\n    props.delegate.portalReady();\n  }, []);\n\n  useLayoutEffect(() => {\n    const portalRef = document.querySelector(`#${PORTAL_ID}`);\n    if (portalRef) {\n      setPortalRef(portalRef);\n    }\n  }, []);\n\n  useLayoutEffect(() => {\n    Object.keys(views).forEach((key) => {\n      const resolveQueue = { ...resolveElementRef.current };\n      const element = document.querySelector(`[data-portal-id=\"${key}\"]`);\n      if (element && element.children.length === 1 && resolveQueue[key]) {\n        const view = element.children[0];\n        resolveQueue[key](view);\n      }\n    });\n  }, [views]);\n\n  if (!portalRef) {\n    return null;\n  }\n\n  return (\n    <>\n      {Object.keys(views).map((key) => {\n        const RenderView = views[key];\n        return ReactDOM.createPortal(\n          <div data-portal-id={key} style={{ display: 'contents ' }}>\n            {RenderView}\n          </div>,\n          portalRef,\n          key\n        );\n      })}\n    </>\n  );\n};\n"],"names":[],"mappings":";;;;;AAcO;AAEA;;AAGL;AAIA;;;AAIE;;AAEE;;AAEA;AACF;AAEA;;AAEE;;AAEA;AACF;;AAGE;AACA;;AAEE;AACA;AACF;AACF;;;AAIA;AAEA;;;;;;;;;;;;AAcE;;AAEE;;AAEJ;AACF;;AAGE;;AAGF;AAGM;;;AAWR;;"}

package/dist/toast/toast.js

@@ -8,20 +8,30 @@ async function showToast(config) {
     // Define custom element, otherwise dynamic creation of toast container will fail
     defineCustomElement();
     defineCustomElement$1();
-    if (typeof config.message === 'string') {
+    if (typeof config.message === 'string' && !config.action) {
         const toastInstance = await toast(config);
         return toastInstance;
     }
-    const node = config.message;
-    const toastContainer = document.createElement('DIV');
-    const root = ReactDOMClient.createRoot(toastContainer);
-    root.render(node);
+    let toastContainer;
+    let root;
+    if (config.message) {
+        toastContainer = document.createElement('DIV');
+        root = ReactDOMClient.createRoot(toastContainer);
+        root.render(config.message);
+    }
+    let toastContainerAction;
+    if (config.action) {
+        toastContainerAction = document.createElement('DIV');
+        root = ReactDOMClient.createRoot(toastContainerAction);
+        root.render(config.action);
+    }
     const toastInstance = await toast({
         ...config,
         message: toastContainer,
+        action: toastContainerAction,
     });
     toastInstance.onClose.once(() => {
-        root.unmount();
+        root?.unmount();
     });
     return toastInstance;
 }

package/dist/toast/toast.js.map

@@ -1 +1 @@
-{"version":3,"file":"toast.js","sources":["../../src/toast/toast.ts"],"sourcesContent":["'use client';\n/*\n * SPDX-FileCopyrightText: 2024 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\nimport { defineCustomElement as defineToastContainer } from '@siemens/ix/components/ix-toast-container.js';\nimport { defineCustomElement as defineToast } from '@siemens/ix/components/ix-toast.js';\n\nimport { toast, ToastConfig as IxToastConfig } from '@siemens/ix';\nimport ReactDOMClient from 'react-dom/client';\n\nexport type ToastConfig = {\n  message: string | React.ReactNode;\n};\n\nexport async function showToast(\n  config: Omit<IxToastConfig, 'message'> & ToastConfig\n) {\n  // Define custom element, otherwise dynamic creation of toast container will fail\n  defineToast();\n  defineToastContainer();\n\n  if (typeof config.message === 'string') {\n    const toastInstance = await toast(config as IxToastConfig);\n    return toastInstance;\n  }\n\n  const node = config.message as React.ReactNode;\n  const toastContainer = document.createElement('DIV');\n  const root = ReactDOMClient.createRoot(toastContainer);\n  root.render(node);\n\n  const toastInstance = await toast({\n    ...config,\n    message: toastContainer,\n  });\n\n  toastInstance.onClose.once(() => {\n    root.unmount();\n  });\n\n  return toastInstance;\n}\n"],"names":[],"mappings":";;;;;;AAmBO;;AAIL;AACA;AAEA;AACE;AACA;;AAGF;;;AAGA;AAEA;AACE;AACA;AACD;AAED;;AAEA;AAEA;AACF;;"}
+{"version":3,"file":"toast.js","sources":["../../src/toast/toast.ts"],"sourcesContent":["'use client';\n/*\n * SPDX-FileCopyrightText: 2024 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\nimport { defineCustomElement as defineToastContainer } from '@siemens/ix/components/ix-toast-container.js';\nimport { defineCustomElement as defineToast } from '@siemens/ix/components/ix-toast.js';\n\nimport { toast, ToastConfig as IxToastConfig } from '@siemens/ix';\nimport ReactDOMClient from 'react-dom/client';\n\nexport type ToastConfig = {\n  message?: string | React.ReactNode;\n  action?: React.ReactNode;\n};\n\nexport async function showToast(\n  config: Omit<IxToastConfig, 'message' | 'action'> & ToastConfig\n) {\n  // Define custom element, otherwise dynamic creation of toast container will fail\n  defineToast();\n  defineToastContainer();\n\n  if (typeof config.message === 'string' && !config.action) {\n    const toastInstance = await toast(config as IxToastConfig);\n    return toastInstance;\n  }\n\n  let toastContainer: HTMLElement | undefined;\n  let root: ReactDOMClient.Root | undefined;\n\n  if (config.message) {\n    toastContainer = document.createElement('DIV');\n    root = ReactDOMClient.createRoot(toastContainer);\n    root.render(config.message);\n  }\n\n  let toastContainerAction: HTMLElement | undefined;\n\n  if (config.action) {\n    toastContainerAction = document.createElement('DIV');\n    root = ReactDOMClient.createRoot(toastContainerAction);\n    root.render(config.action);\n  }\n\n  const toastInstance = await toast({\n    ...config,\n    message: toastContainer,\n    action: toastContainerAction,\n  });\n\n  toastInstance.onClose.once(() => {\n    root?.unmount();\n  });\n\n  return toastInstance;\n}\n"],"names":[],"mappings":";;;;;;AAoBO;;AAIL;AACA;AAEA;AACE;AACA;;AAGF;AACA;AAEA;AACE;AACA;AACA;;AAGF;AAEA;AACE;AACA;AACA;;AAGF;AACE;AACA;AACA;AACD;AAED;;AAEA;AAEA;AACF;;"}

package/dist/tree/internal-tree.js

@@ -1,5 +1,5 @@
 "use client";
-import { IxTree, defineCustomElement } from '@siemens/ix/components/ix-tree.js';
+import { defineCustomElement, IxTree } from '@siemens/ix/components/ix-tree.js';
 import { createComponent } from '@stencil/react-output-target/runtime';
 import React from 'react';
 

package/dist/tree/tree.js

@@ -1,29 +1,34 @@
 "use client";
 import { jsx } from 'react/jsx-runtime';
-import { useRef, useCallback } from 'react';
+import React, { useRef, useCallback } from 'react';
 import ReactDOMClient from 'react-dom/client';
 import InternalIxTree from './internal-tree.js';
 
-const IxTree = (props) => {
+const IxTree = React.forwardRef((props, ref) => {
     const cachedRootNodes = useRef(new Map());
     const renderItem = useCallback((_, data, __, context, update) => {
         const treeItem = document.createElement('ix-tree-item');
+        const rootNode = ReactDOMClient.createRoot(treeItem);
         treeItem.hasChildren = data.hasChildren;
         treeItem.context = context[data.id];
-        update((itemData, context) => {
-            treeItem.context = context[itemData.id];
-            treeItem.hasChildren = itemData.hasChildren;
-        });
-        const container = document.createElement('DIV');
-        const rootNode = ReactDOMClient.createRoot(container);
         if (props.renderItem) {
             rootNode.render(props.renderItem(data.data));
         }
-        treeItem.appendChild(container);
+        update((itemData, newContext) => {
+            treeItem.context = newContext[itemData.id];
+            treeItem.hasChildren = itemData.hasChildren;
+            if (props.renderItem) {
+                rootNode.render(props.renderItem(itemData.data));
+            }
+        });
         cachedRootNodes.current.set(treeItem, rootNode);
         return treeItem;
     }, []);
-    return (jsx(InternalIxTree, { ...props, renderItem: props.renderItem ? renderItem : undefined, onNodeRemoved: (removed) => {
+    return (jsx(InternalIxTree
+    //@ts-expect-error ref exposed by the StencilComponent type
+    , { 
+        //@ts-expect-error ref exposed by the StencilComponent type
+        ref: ref, ...props, renderItem: props.renderItem ? renderItem : undefined, onNodeRemoved: (removed) => {
             const { detail } = removed;
             detail.forEach((removedItemElement) => {
                 if (cachedRootNodes.current.has(removedItemElement)) {
@@ -32,7 +37,7 @@ const IxTree = (props) => {
                 }
             });
         } }));
-};
+});
 
 export { IxTree, IxTree as default };
 //# sourceMappingURL=tree.js.map

package/dist/tree/tree.js.map

@@ -1 +1 @@
-{"version":3,"file":"tree.js","sources":["../../src/tree/tree.tsx"],"sourcesContent":["'use client';\n/*\n * SPDX-FileCopyrightText: 2024 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { type TreeContext, UpdateCallback } from '@siemens/ix';\nimport React, { useCallback, useRef } from 'react';\nimport ReactDOM, { Root } from 'react-dom/client';\nimport InternalIxTree from './internal-tree';\n\ntype ExtractProps<TComponentOrTProps> =\n  TComponentOrTProps extends React.ComponentType<infer TProps>\n    ? TProps\n    : TComponentOrTProps;\n\ntype IxTreeProps = ExtractProps<typeof InternalIxTree> & {\n  renderItem?: (data: any) => React.ReactNode;\n};\n\nexport const IxTree = (props: IxTreeProps) => {\n  const cachedRootNodes = useRef<Map<HTMLElement, Root>>(new Map());\n\n  const renderItem = useCallback(\n    (\n      _: number,\n      data: any,\n      __: any[],\n      context: TreeContext,\n      update: (callback: UpdateCallback) => void\n    ) => {\n      const treeItem = document.createElement('ix-tree-item');\n      treeItem.hasChildren = data.hasChildren;\n      treeItem.context = context[data.id];\n\n      update((itemData, context) => {\n        treeItem.context = context[itemData.id];\n        treeItem.hasChildren = itemData.hasChildren;\n      });\n\n      const container = document.createElement('DIV');\n      const rootNode = ReactDOM.createRoot(container);\n      if (props.renderItem) {\n        rootNode.render(props.renderItem(data.data));\n      }\n\n      treeItem.appendChild(container);\n      cachedRootNodes.current.set(treeItem, rootNode);\n\n      return treeItem;\n    },\n    []\n  );\n\n  return (\n    <InternalIxTree\n      {...props}\n      renderItem={props.renderItem ? renderItem : undefined}\n      onNodeRemoved={(removed: CustomEvent<any[]>) => {\n        const { detail } = removed;\n\n        detail.forEach((removedItemElement) => {\n          if (cachedRootNodes.current.has(removedItemElement)) {\n            cachedRootNodes.current.get(removedItemElement)?.unmount();\n            cachedRootNodes.current.delete(removedItemElement);\n          }\n        });\n      }}\n    ></InternalIxTree>\n  );\n};\n\nexport default IxTree;\n"],"names":[],"mappings":";;;;;;AAwBa;;AAGX;;AASI;;AAGA;;AAEE;AACF;;;AAIA;AACE;;AAGF;;AAGA;;;AAUE;AAEA;;;AAGI;;AAEJ;;AAIR;;"}
+{"version":3,"file":"tree.js","sources":["../../src/tree/tree.tsx"],"sourcesContent":["'use client';\n/*\n * SPDX-FileCopyrightText: 2024 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport {\n  Components,\n  type TreeContext,\n  UpdateCallback,\n  type IxTreeCustomEvent,\n} from '@siemens/ix';\nimport React, { useCallback, useRef } from 'react';\nimport ReactDOM, { Root } from 'react-dom/client';\nimport InternalIxTree from './internal-tree';\n\nexport type IxTreeProps = Omit<\n  Components.IxTree,\n  'renderItem' | 'markItemsAsDirty' | 'refreshTree'\n> & {\n  renderItem?: (data: any) => React.ReactNode;\n  onContextChange?: (event: IxTreeCustomEvent<TreeContext>) => void;\n  onNodeToggled?: (\n    event: CustomEvent<{ id: string; isExpaned: boolean }>\n  ) => void;\n  onNodeClicked?: (event: CustomEvent<string>) => void;\n  onNodeRemoved?: (event: CustomEvent<any>) => void;\n};\n\nexport const IxTree = React.forwardRef(\n  (props: IxTreeProps, ref: React.ForwardedRef<Components.IxTree>) => {\n    const cachedRootNodes = useRef<Map<HTMLElement, Root>>(new Map());\n\n    const renderItem = useCallback(\n      (\n        _: number,\n        data: any,\n        __: any[],\n        context: TreeContext,\n        update: (callback: UpdateCallback) => void\n      ) => {\n        const treeItem = document.createElement('ix-tree-item');\n        const rootNode = ReactDOM.createRoot(treeItem);\n        treeItem.hasChildren = data.hasChildren;\n        treeItem.context = context[data.id];\n\n        if (props.renderItem) {\n          rootNode.render(props.renderItem(data.data));\n        }\n\n        update((itemData, newContext) => {\n          treeItem.context = newContext[itemData.id];\n          treeItem.hasChildren = itemData.hasChildren;\n\n          if (props.renderItem) {\n            rootNode.render(props.renderItem(itemData.data));\n          }\n        });\n\n        cachedRootNodes.current.set(treeItem, rootNode);\n        return treeItem;\n      },\n      []\n    );\n\n    return (\n      <InternalIxTree\n        //@ts-expect-error ref exposed by the StencilComponent type\n        ref={ref}\n        {...props}\n        renderItem={props.renderItem ? renderItem : undefined}\n        onNodeRemoved={(removed: CustomEvent<any[]>) => {\n          const { detail } = removed;\n\n          detail.forEach((removedItemElement) => {\n            if (cachedRootNodes.current.has(removedItemElement)) {\n              cachedRootNodes.current.get(removedItemElement)?.unmount();\n              cachedRootNodes.current.delete(removedItemElement);\n            }\n          });\n        }}\n      ></InternalIxTree>\n    );\n  }\n);\n\nexport default IxTree;\n"],"names":[],"mappings":";;;;;;AAiCO;;AAIH;;;AAUI;;AAGA;AACE;;AAGF;;AAEE;AAEA;AACE;;AAEJ;;AAGA;;;;;;;AAYE;AAEA;;;AAGI;;AAEJ;;AAIR;;"}

package/dist/types/components.d.ts

@@ -2,12 +2,11 @@
  * This file was automatically generated by the Stencil React Output Target.
  * Changes to this file may cause incorrect behavior and will be lost if the code is regenerated.
  */
-import { type BorderlessChangedEvent, type CustomCloseEvent, type CustomLabelChangeEvent, type DateChangeEvent, type DateInputValidityState, type DateRangeChangeEvent, type DateTimeDateChangeEvent, type DateTimeSelectEvent, type ExpandedChangedEvent, type FilterState, type InputState, type IxBreadcrumbCustomEvent, type IxCardListCustomEvent, type IxCategoryFilterCustomEvent, type IxDateDropdownCustomEvent, type IxDateInputCustomEvent, type IxDatePickerCustomEvent, type IxDatetimePickerCustomEvent, type IxGroupItemCustomEvent, type IxInputCustomEvent, type IxMenuAboutCustomEvent, type IxMenuAboutItemCustomEvent, type IxMenuAboutNewsCustomEvent, type IxMenuAvatarItemCustomEvent, type IxMenuSettingsCustomEvent, type IxMenuSettingsItemCustomEvent, type IxModalHeaderCustomEvent, type IxNumberInputCustomEvent, type IxPaneCustomEvent, type IxSplitButtonCustomEvent, type IxTabItemCustomEvent, type IxTextareaCustomEvent, type IxUploadCustomEvent, type TabClickDetail, type VariantChangedEvent } from "@siemens/ix";
+import { type BorderlessChangedEvent, type CustomCloseEvent, type CustomLabelChangeEvent, type DateChangeEvent, type DateInputValidityState, type DateRangeChangeEvent, type DateTimeDateChangeEvent, type DateTimeSelectEvent, type ExpandedChangedEvent, type FilterState, type InputState, type IxBreadcrumbCustomEvent, type IxCardListCustomEvent, type IxCategoryFilterCustomEvent, type IxDateDropdownCustomEvent, type IxDateInputCustomEvent, type IxDatePickerCustomEvent, type IxDatetimePickerCustomEvent, type IxGroupItemCustomEvent, type IxInputCustomEvent, type IxMenuAboutCustomEvent, type IxMenuAboutItemCustomEvent, type IxMenuAboutNewsCustomEvent, type IxMenuAvatarItemCustomEvent, type IxMenuSettingsCustomEvent, type IxMenuSettingsItemCustomEvent, type IxModalHeaderCustomEvent, type IxNumberInputCustomEvent, type IxPaneCustomEvent, type IxSplitButtonCustomEvent, type IxTabItemCustomEvent, type IxTextareaCustomEvent, type IxTimeInputCustomEvent, type IxUploadCustomEvent, type TabClickDetail, type TimeInputValidityState, type VariantChangedEvent } from "@siemens/ix";
 import { IxActionCard as IxActionCardElement } from "@siemens/ix/components/ix-action-card.js";
 import { IxApplicationHeader as IxApplicationHeaderElement } from "@siemens/ix/components/ix-application-header.js";
 import { IxApplication as IxApplicationElement } from "@siemens/ix/components/ix-application.js";
 import { IxAvatar as IxAvatarElement } from "@siemens/ix/components/ix-avatar.js";
-import { IxBasicNavigation as IxBasicNavigationElement } from "@siemens/ix/components/ix-basic-navigation.js";
 import { IxBlind as IxBlindElement } from "@siemens/ix/components/ix-blind.js";
 import { IxBreadcrumbItem as IxBreadcrumbItemElement } from "@siemens/ix/components/ix-breadcrumb-item.js";
 import { IxBreadcrumb as IxBreadcrumbElement } from "@siemens/ix/components/ix-breadcrumb.js";
@@ -58,8 +57,6 @@ import { IxKpi as IxKpiElement } from "@siemens/ix/components/ix-kpi.js";
 import { IxLayoutAuto as IxLayoutAutoElement } from "@siemens/ix/components/ix-layout-auto.js";
 import { IxLayoutGrid as IxLayoutGridElement } from "@siemens/ix/components/ix-layout-grid.js";
 import { IxLinkButton as IxLinkButtonElement } from "@siemens/ix/components/ix-link-button.js";
-import { IxMapNavigationOverlay as IxMapNavigationOverlayElement } from "@siemens/ix/components/ix-map-navigation-overlay.js";
-import { IxMapNavigation as IxMapNavigationElement } from "@siemens/ix/components/ix-map-navigation.js";
 import { IxMenuAboutItem as IxMenuAboutItemElement } from "@siemens/ix/components/ix-menu-about-item.js";
 import { IxMenuAboutNews as IxMenuAboutNewsElement } from "@siemens/ix/components/ix-menu-about-news.js";
 import { IxMenuAbout as IxMenuAboutElement } from "@siemens/ix/components/ix-menu-about.js";
@@ -80,6 +77,7 @@ import { IxPagination as IxPaginationElement } from "@siemens/ix/components/ix-p
 import { IxPaneLayout as IxPaneLayoutElement } from "@siemens/ix/components/ix-pane-layout.js";
 import { IxPane as IxPaneElement } from "@siemens/ix/components/ix-pane.js";
 import { IxPill as IxPillElement } from "@siemens/ix/components/ix-pill.js";
+import { IxProgressIndicator as IxProgressIndicatorElement } from "@siemens/ix/components/ix-progress-indicator.js";
 import { IxPushCard as IxPushCardElement } from "@siemens/ix/components/ix-push-card.js";
 import { IxRadioGroup as IxRadioGroupElement } from "@siemens/ix/components/ix-radio-group.js";
 import { IxRadio as IxRadioElement } from "@siemens/ix/components/ix-radio.js";
@@ -93,6 +91,7 @@ import { IxTabItem as IxTabItemElement } from "@siemens/ix/components/ix-tab-ite
 import { IxTabs as IxTabsElement } from "@siemens/ix/components/ix-tabs.js";
 import { IxTextarea as IxTextareaElement } from "@siemens/ix/components/ix-textarea.js";
 import { IxTile as IxTileElement } from "@siemens/ix/components/ix-tile.js";
+import { IxTimeInput as IxTimeInputElement } from "@siemens/ix/components/ix-time-input.js";
 import { IxTimePicker as IxTimePickerElement } from "@siemens/ix/components/ix-time-picker.js";
 import { IxToastContainer as IxToastContainerElement } from "@siemens/ix/components/ix-toast-container.js";
 import { IxToast as IxToastElement } from "@siemens/ix/components/ix-toast.js";
@@ -116,8 +115,6 @@ export type IxApplicationHeaderEvents = {
 export declare const IxApplicationHeader: StencilReactComponent<IxApplicationHeaderElement, IxApplicationHeaderEvents>;
 export type IxAvatarEvents = NonNullable<unknown>;
 export declare const IxAvatar: StencilReactComponent<IxAvatarElement, IxAvatarEvents>;
-export type IxBasicNavigationEvents = NonNullable<unknown>;
-export declare const IxBasicNavigation: StencilReactComponent<IxBasicNavigationElement, IxBasicNavigationEvents>;
 export type IxBlindEvents = {
     onCollapsedChange: EventName<CustomEvent<boolean>>;
 };
@@ -250,7 +247,7 @@ export declare const IxFlipTileContent: StencilReactComponent<IxFlipTileContentE
 export type IxGroupEvents = {
     onSelectGroup: EventName<CustomEvent<boolean>>;
     onSelectItem: EventName<CustomEvent<number>>;
-    onCollapsedChanged: EventName<CustomEvent<boolean>>;
+    onExpandedChanged: EventName<CustomEvent<boolean>>;
 };
 export declare const IxGroup: StencilReactComponent<IxGroupElement, IxGroupEvents>;
 export type IxGroupContextMenuEvents = NonNullable<unknown>;
@@ -287,15 +284,6 @@ export type IxLayoutGridEvents = NonNullable<unknown>;
 export declare const IxLayoutGrid: StencilReactComponent<IxLayoutGridElement, IxLayoutGridEvents>;
 export type IxLinkButtonEvents = NonNullable<unknown>;
 export declare const IxLinkButton: StencilReactComponent<IxLinkButtonElement, IxLinkButtonEvents>;
-export type IxMapNavigationEvents = {
-    onNavigationToggled: EventName<CustomEvent<boolean>>;
-    onContextMenuClick: EventName<CustomEvent<void>>;
-};
-export declare const IxMapNavigation: StencilReactComponent<IxMapNavigationElement, IxMapNavigationEvents>;
-export type IxMapNavigationOverlayEvents = {
-    onCloseClick: EventName<CustomEvent<any>>;
-};
-export declare const IxMapNavigationOverlay: StencilReactComponent<IxMapNavigationOverlayElement, IxMapNavigationOverlayEvents>;
 export type IxMenuEvents = {
     onExpandChange: EventName<CustomEvent<boolean>>;
     onMapExpandChange: EventName<CustomEvent<boolean>>;
@@ -378,6 +366,8 @@ export type IxPaneLayoutEvents = NonNullable<unknown>;
 export declare const IxPaneLayout: StencilReactComponent<IxPaneLayoutElement, IxPaneLayoutEvents>;
 export type IxPillEvents = NonNullable<unknown>;
 export declare const IxPill: StencilReactComponent<IxPillElement, IxPillEvents>;
+export type IxProgressIndicatorEvents = NonNullable<unknown>;
+export declare const IxProgressIndicator: StencilReactComponent<IxProgressIndicatorElement, IxProgressIndicatorEvents>;
 export type IxPushCardEvents = NonNullable<unknown>;
 export declare const IxPushCard: StencilReactComponent<IxPushCardElement, IxPushCardEvents>;
 export type IxRadioEvents = {
@@ -429,6 +419,11 @@ export type IxTextareaEvents = {
 export declare const IxTextarea: StencilReactComponent<IxTextareaElement, IxTextareaEvents>;
 export type IxTileEvents = NonNullable<unknown>;
 export declare const IxTile: StencilReactComponent<IxTileElement, IxTileEvents>;
+export type IxTimeInputEvents = {
+    onValueChange: EventName<CustomEvent<string>>;
+    onValidityStateChange: EventName<IxTimeInputCustomEvent<TimeInputValidityState>>;
+};
+export declare const IxTimeInput: StencilReactComponent<IxTimeInputElement, IxTimeInputEvents>;
 export type IxTimePickerEvents = {
     onTimeSelect: EventName<CustomEvent<string>>;
     onTimeChange: EventName<CustomEvent<string>>;

package/dist/types/components.server.d.ts

@@ -1,16 +1,12 @@
 /**
  * This file was automatically generated by the Stencil React Output Target.
  * Changes to this file may cause incorrect behavior and will be lost if the code is regenerated.
- * Do __not__ import components from this file as server side rendered components
- * may not hydrate due to missing Stencil runtime. Instead, import these components through the generated 'components.ts'
- * file that re-exports all components with the 'use client' directive.
  */
-import { type BorderlessChangedEvent, type CustomCloseEvent, type CustomLabelChangeEvent, type DateChangeEvent, type DateInputValidityState, type DateRangeChangeEvent, type DateTimeDateChangeEvent, type DateTimeSelectEvent, type ExpandedChangedEvent, type FilterState, type InputState, type IxBreadcrumbCustomEvent, type IxCardListCustomEvent, type IxCategoryFilterCustomEvent, type IxDateDropdownCustomEvent, type IxDateInputCustomEvent, type IxDatePickerCustomEvent, type IxDatetimePickerCustomEvent, type IxGroupItemCustomEvent, type IxInputCustomEvent, type IxMenuAboutCustomEvent, type IxMenuAboutItemCustomEvent, type IxMenuAboutNewsCustomEvent, type IxMenuAvatarItemCustomEvent, type IxMenuSettingsCustomEvent, type IxMenuSettingsItemCustomEvent, type IxModalHeaderCustomEvent, type IxNumberInputCustomEvent, type IxPaneCustomEvent, type IxSplitButtonCustomEvent, type IxTabItemCustomEvent, type IxTextareaCustomEvent, type IxUploadCustomEvent, type TabClickDetail, type VariantChangedEvent } from "@siemens/ix";
+import { type BorderlessChangedEvent, type CustomCloseEvent, type CustomLabelChangeEvent, type DateChangeEvent, type DateInputValidityState, type DateRangeChangeEvent, type DateTimeDateChangeEvent, type DateTimeSelectEvent, type ExpandedChangedEvent, type FilterState, type InputState, type IxBreadcrumbCustomEvent, type IxCardListCustomEvent, type IxCategoryFilterCustomEvent, type IxDateDropdownCustomEvent, type IxDateInputCustomEvent, type IxDatePickerCustomEvent, type IxDatetimePickerCustomEvent, type IxGroupItemCustomEvent, type IxInputCustomEvent, type IxMenuAboutCustomEvent, type IxMenuAboutItemCustomEvent, type IxMenuAboutNewsCustomEvent, type IxMenuAvatarItemCustomEvent, type IxMenuSettingsCustomEvent, type IxMenuSettingsItemCustomEvent, type IxModalHeaderCustomEvent, type IxNumberInputCustomEvent, type IxPaneCustomEvent, type IxSplitButtonCustomEvent, type IxTabItemCustomEvent, type IxTextareaCustomEvent, type IxTimeInputCustomEvent, type IxUploadCustomEvent, type TabClickDetail, type TimeInputValidityState, type VariantChangedEvent } from "@siemens/ix";
 import { IxActionCard as IxActionCardElement } from "@siemens/ix/components/ix-action-card.js";
 import { IxApplicationHeader as IxApplicationHeaderElement } from "@siemens/ix/components/ix-application-header.js";
 import { IxApplication as IxApplicationElement } from "@siemens/ix/components/ix-application.js";
 import { IxAvatar as IxAvatarElement } from "@siemens/ix/components/ix-avatar.js";
-import { IxBasicNavigation as IxBasicNavigationElement } from "@siemens/ix/components/ix-basic-navigation.js";
 import { IxBlind as IxBlindElement } from "@siemens/ix/components/ix-blind.js";
 import { IxBreadcrumbItem as IxBreadcrumbItemElement } from "@siemens/ix/components/ix-breadcrumb-item.js";
 import { IxBreadcrumb as IxBreadcrumbElement } from "@siemens/ix/components/ix-breadcrumb.js";
@@ -61,8 +57,6 @@ import { IxKpi as IxKpiElement } from "@siemens/ix/components/ix-kpi.js";
 import { IxLayoutAuto as IxLayoutAutoElement } from "@siemens/ix/components/ix-layout-auto.js";
 import { IxLayoutGrid as IxLayoutGridElement } from "@siemens/ix/components/ix-layout-grid.js";
 import { IxLinkButton as IxLinkButtonElement } from "@siemens/ix/components/ix-link-button.js";
-import { IxMapNavigationOverlay as IxMapNavigationOverlayElement } from "@siemens/ix/components/ix-map-navigation-overlay.js";
-import { IxMapNavigation as IxMapNavigationElement } from "@siemens/ix/components/ix-map-navigation.js";
 import { IxMenuAboutItem as IxMenuAboutItemElement } from "@siemens/ix/components/ix-menu-about-item.js";
 import { IxMenuAboutNews as IxMenuAboutNewsElement } from "@siemens/ix/components/ix-menu-about-news.js";
 import { IxMenuAbout as IxMenuAboutElement } from "@siemens/ix/components/ix-menu-about.js";
@@ -83,6 +77,7 @@ import { IxPagination as IxPaginationElement } from "@siemens/ix/components/ix-p
 import { IxPaneLayout as IxPaneLayoutElement } from "@siemens/ix/components/ix-pane-layout.js";
 import { IxPane as IxPaneElement } from "@siemens/ix/components/ix-pane.js";
 import { IxPill as IxPillElement } from "@siemens/ix/components/ix-pill.js";
+import { IxProgressIndicator as IxProgressIndicatorElement } from "@siemens/ix/components/ix-progress-indicator.js";
 import { IxPushCard as IxPushCardElement } from "@siemens/ix/components/ix-push-card.js";
 import { IxRadioGroup as IxRadioGroupElement } from "@siemens/ix/components/ix-radio-group.js";
 import { IxRadio as IxRadioElement } from "@siemens/ix/components/ix-radio.js";
@@ -96,6 +91,7 @@ import { IxTabItem as IxTabItemElement } from "@siemens/ix/components/ix-tab-ite
 import { IxTabs as IxTabsElement } from "@siemens/ix/components/ix-tabs.js";
 import { IxTextarea as IxTextareaElement } from "@siemens/ix/components/ix-textarea.js";
 import { IxTile as IxTileElement } from "@siemens/ix/components/ix-tile.js";
+import { IxTimeInput as IxTimeInputElement } from "@siemens/ix/components/ix-time-input.js";
 import { IxTimePicker as IxTimePickerElement } from "@siemens/ix/components/ix-time-picker.js";
 import { IxToastContainer as IxToastContainerElement } from "@siemens/ix/components/ix-toast-container.js";
 import { IxToast as IxToastElement } from "@siemens/ix/components/ix-toast.js";
@@ -121,8 +117,6 @@ export type IxApplicationHeaderEvents = {
 export declare const IxApplicationHeader: StencilReactComponent<IxApplicationHeaderElement, IxApplicationHeaderEvents>;
 export type IxAvatarEvents = NonNullable<unknown>;
 export declare const IxAvatar: StencilReactComponent<IxAvatarElement, IxAvatarEvents>;
-export type IxBasicNavigationEvents = NonNullable<unknown>;
-export declare const IxBasicNavigation: StencilReactComponent<IxBasicNavigationElement, IxBasicNavigationEvents>;
 export type IxBlindEvents = {
     onCollapsedChange: EventName<CustomEvent<boolean>>;
 };
@@ -255,7 +249,7 @@ export declare const IxFlipTileContent: StencilReactComponent<IxFlipTileContentE
 export type IxGroupEvents = {
     onSelectGroup: EventName<CustomEvent<boolean>>;
     onSelectItem: EventName<CustomEvent<number>>;
-    onCollapsedChanged: EventName<CustomEvent<boolean>>;
+    onExpandedChanged: EventName<CustomEvent<boolean>>;
 };
 export declare const IxGroup: StencilReactComponent<IxGroupElement, IxGroupEvents>;
 export type IxGroupContextMenuEvents = NonNullable<unknown>;
@@ -292,15 +286,6 @@ export type IxLayoutGridEvents = NonNullable<unknown>;
 export declare const IxLayoutGrid: StencilReactComponent<IxLayoutGridElement, IxLayoutGridEvents>;
 export type IxLinkButtonEvents = NonNullable<unknown>;
 export declare const IxLinkButton: StencilReactComponent<IxLinkButtonElement, IxLinkButtonEvents>;
-export type IxMapNavigationEvents = {
-    onNavigationToggled: EventName<CustomEvent<boolean>>;
-    onContextMenuClick: EventName<CustomEvent<void>>;
-};
-export declare const IxMapNavigation: StencilReactComponent<IxMapNavigationElement, IxMapNavigationEvents>;
-export type IxMapNavigationOverlayEvents = {
-    onCloseClick: EventName<CustomEvent<any>>;
-};
-export declare const IxMapNavigationOverlay: StencilReactComponent<IxMapNavigationOverlayElement, IxMapNavigationOverlayEvents>;
 export type IxMenuEvents = {
     onExpandChange: EventName<CustomEvent<boolean>>;
     onMapExpandChange: EventName<CustomEvent<boolean>>;
@@ -383,6 +368,8 @@ export type IxPaneLayoutEvents = NonNullable<unknown>;
 export declare const IxPaneLayout: StencilReactComponent<IxPaneLayoutElement, IxPaneLayoutEvents>;
 export type IxPillEvents = NonNullable<unknown>;
 export declare const IxPill: StencilReactComponent<IxPillElement, IxPillEvents>;
+export type IxProgressIndicatorEvents = NonNullable<unknown>;
+export declare const IxProgressIndicator: StencilReactComponent<IxProgressIndicatorElement, IxProgressIndicatorEvents>;
 export type IxPushCardEvents = NonNullable<unknown>;
 export declare const IxPushCard: StencilReactComponent<IxPushCardElement, IxPushCardEvents>;
 export type IxRadioEvents = {
@@ -434,6 +421,11 @@ export type IxTextareaEvents = {
 export declare const IxTextarea: StencilReactComponent<IxTextareaElement, IxTextareaEvents>;
 export type IxTileEvents = NonNullable<unknown>;
 export declare const IxTile: StencilReactComponent<IxTileElement, IxTileEvents>;
+export type IxTimeInputEvents = {
+    onValueChange: EventName<CustomEvent<string>>;
+    onValidityStateChange: EventName<IxTimeInputCustomEvent<TimeInputValidityState>>;
+};
+export declare const IxTimeInput: StencilReactComponent<IxTimeInputElement, IxTimeInputEvents>;
 export type IxTimePickerEvents = {
     onTimeSelect: EventName<CustomEvent<string>>;
     onTimeChange: EventName<CustomEvent<string>>;

package/dist/types/toast/toast.d.ts

@@ -1,5 +1,6 @@
 import { ToastConfig as IxToastConfig } from '@siemens/ix';
 export type ToastConfig = {
-    message: string | React.ReactNode;
+    message?: string | React.ReactNode;
+    action?: React.ReactNode;
 };
-export declare function showToast(config: Omit<IxToastConfig, 'message'> & ToastConfig): Promise<import("@siemens/ix").ShowToastResult>;
+export declare function showToast(config: Omit<IxToastConfig, 'message' | 'action'> & ToastConfig): Promise<import("@siemens/ix").ShowToastResult>;

package/dist/types/tree/tree.d.ts

@@ -1,8 +1,23 @@
+import { Components, type TreeContext, type IxTreeCustomEvent } from '@siemens/ix';
 import React from 'react';
-import InternalIxTree from './internal-tree';
-type ExtractProps<TComponentOrTProps> = TComponentOrTProps extends React.ComponentType<infer TProps> ? TProps : TComponentOrTProps;
-type IxTreeProps = ExtractProps<typeof InternalIxTree> & {
+export type IxTreeProps = Omit<Components.IxTree, 'renderItem' | 'markItemsAsDirty' | 'refreshTree'> & {
     renderItem?: (data: any) => React.ReactNode;
+    onContextChange?: (event: IxTreeCustomEvent<TreeContext>) => void;
+    onNodeToggled?: (event: CustomEvent<{
+        id: string;
+        isExpaned: boolean;
+    }>) => void;
+    onNodeClicked?: (event: CustomEvent<string>) => void;
+    onNodeRemoved?: (event: CustomEvent<any>) => void;
 };
-export declare const IxTree: (props: IxTreeProps) => import("react/jsx-runtime").JSX.Element;
+export declare const IxTree: React.ForwardRefExoticComponent<Omit<Components.IxTree, "renderItem" | "markItemsAsDirty" | "refreshTree"> & {
+    renderItem?: (data: any) => React.ReactNode;
+    onContextChange?: (event: IxTreeCustomEvent<TreeContext>) => void;
+    onNodeToggled?: (event: CustomEvent<{
+        id: string;
+        isExpaned: boolean;
+    }>) => void;
+    onNodeClicked?: (event: CustomEvent<string>) => void;
+    onNodeRemoved?: (event: CustomEvent<any>) => void;
+} & React.RefAttributes<Components.IxTree>>;
 export default IxTree;

package/package.json

@@ -7,7 +7,7 @@
     "url": "https://github.com/siemens/ix",
     "directory": "packages/react"
   },
-  "version": "3.1.0",
+  "version": "4.0.0",
   "description": "Siemens iX for React",
   "files": [
     "LICENSE",
@@ -33,16 +33,20 @@
   "license": "MIT",
   "devDependencies": {
     "@rollup/plugin-typescript": "^8.5.0",
-    "@testing-library/react": "^16.0.1",
+    "@testing-library/jest-dom": "^6.6.3",
+    "@testing-library/react": "^16.3.0",
+    "@testing-library/user-event": "^14.6.1",
     "@types/node": "^20.16.0",
     "@types/react": "^18",
     "@types/react-dom": "^18",
-    "@vitejs/plugin-react": "^4.3.2",
+    "@vitejs/plugin-react": "^4.6.0",
+    "@vitest/browser": "^3.2.4",
     "eslint": "~8.21.0",
     "eslint-plugin-react": "^7.35.0",
     "happy-dom": "^17.4.7",
     "jest": "^29.7.0",
     "jest-environment-jsdom": "^29.7.0",
+    "playwright": "^1.54.1",
     "react": "^18",
     "react-dom": "^18",
     "rimraf": "^6.0.1",
@@ -50,18 +54,20 @@
     "rollup-plugin-preserve-directives": "^0.4.0",
     "shadow-dom-testing-library": "^1.11.2",
     "typescript": "^5.6.3",
-    "vitest": "^2.1.3",
-    "@siemens/ix": "3.1.0",
+    "vite": "^7.0.4",
+    "vitest": "^3.2.4",
+    "vitest-browser-react": "^1.0.0",
+    "@siemens/ix": "4.0.0",
     "eslint-config-ix": "1.0.0"
   },
   "peerDependencies": {
-    "@siemens/ix-icons": "^3.0.0",
+    "@siemens/ix-icons": "^3.2.0",
     "react": "^18 || ^19",
     "react-dom": "^18 || ^19"
   },
   "dependencies": {
-    "@siemens/ix": "~3.1.0",
-    "@stencil/react-output-target": "^1.0.2",
+    "@siemens/ix": "~4.0.0",
+    "@stencil/react-output-target": "^1.2.0",
     "tslib": "*"
   },
   "scripts": {
@@ -69,7 +75,8 @@
     "clean": "rimraf dist && rimraf dist-transpiled",
     "compile": "rollup -c",
     "lint": "eslint src",
-    "test": "vitest run",
-    "test:watch": "vitest"
+    "test.setup": "playwright install chromium --with-deps",
+    "test": "vitest --config=vitest.browser.config.ts run",
+    "test.watch": "vitest --config=vitest.browser.config.ts"
   }
 }