@siemens/ix-react 1.6.3 → 2.0.0-beta.1

package/dist/index.esm.js

@@ -1,7 +1,7 @@
-import React, { createElement, useRef, useImperativeHandle, useCallback } from 'react';
-import 'react-dom';
+import React, { createElement, useState, useRef, useEffect, useLayoutEffect, useImperativeHandle, useCallback } from 'react';
+import ReactDOM from 'react-dom';
 import { defineCustomElements } from '@siemens/ix/loader';
-import { closeModal, dismissModal, modal, toast } from '@siemens/ix';
+import { registerFrameworkDelegate, showModal as showModal$1, toast } from '@siemens/ix';
 import ReactDOMClient from 'react-dom/client';
 
 /******************************************************************************
@@ -224,9 +224,8 @@ const createReactComponent = (tagName, ReactComponentContext, manipulatePropsFun
 /* eslint-disable */
 defineCustomElements();
 const IxActionCard = /*@__PURE__*/ createReactComponent('ix-action-card');
-const IxAnimatedTab = /*@__PURE__*/ createReactComponent('ix-animated-tab');
-const IxAnimatedTabs = /*@__PURE__*/ createReactComponent('ix-animated-tabs');
 const IxApplicationHeader = /*@__PURE__*/ createReactComponent('ix-application-header');
+const IxAvatar = /*@__PURE__*/ createReactComponent('ix-avatar');
 const IxBasicNavigation = /*@__PURE__*/ createReactComponent('ix-basic-navigation');
 const IxBlind = /*@__PURE__*/ createReactComponent('ix-blind');
 const IxBreadcrumb = /*@__PURE__*/ createReactComponent('ix-breadcrumb');
@@ -239,14 +238,15 @@ const IxCardList = /*@__PURE__*/ createReactComponent('ix-card-list');
 const IxCardTitle = /*@__PURE__*/ createReactComponent('ix-card-title');
 const IxCategoryFilter = /*@__PURE__*/ createReactComponent('ix-category-filter');
 const IxChip = /*@__PURE__*/ createReactComponent('ix-chip');
+const IxCol = /*@__PURE__*/ createReactComponent('ix-col');
 const IxContentHeader = /*@__PURE__*/ createReactComponent('ix-content-header');
-const IxCounterPill = /*@__PURE__*/ createReactComponent('ix-counter-pill');
 const IxDatePicker = /*@__PURE__*/ createReactComponent('ix-date-picker');
 const IxDatetimePicker = /*@__PURE__*/ createReactComponent('ix-datetime-picker');
 const IxDivider = /*@__PURE__*/ createReactComponent('ix-divider');
 const IxDrawer = /*@__PURE__*/ createReactComponent('ix-drawer');
 const IxDropdown = /*@__PURE__*/ createReactComponent('ix-dropdown');
 const IxDropdownButton = /*@__PURE__*/ createReactComponent('ix-dropdown-button');
+const IxDropdownHeader = /*@__PURE__*/ createReactComponent('ix-dropdown-header');
 const IxDropdownItem = /*@__PURE__*/ createReactComponent('ix-dropdown-item');
 const IxDropdownQuickActions = /*@__PURE__*/ createReactComponent('ix-dropdown-quick-actions');
 const IxEmptyState = /*@__PURE__*/ createReactComponent('ix-empty-state');
@@ -256,16 +256,19 @@ const IxExpandingSearch = /*@__PURE__*/ createReactComponent('ix-expanding-searc
 const IxFilterChip = /*@__PURE__*/ createReactComponent('ix-filter-chip');
 const IxFlipTile = /*@__PURE__*/ createReactComponent('ix-flip-tile');
 const IxFlipTileContent = /*@__PURE__*/ createReactComponent('ix-flip-tile-content');
+const IxFormField = /*@__PURE__*/ createReactComponent('ix-form-field');
+const IxGrid = /*@__PURE__*/ createReactComponent('ix-grid');
 const IxGroup = /*@__PURE__*/ createReactComponent('ix-group');
 const IxGroupContextMenu = /*@__PURE__*/ createReactComponent('ix-group-context-menu');
-const IxGroupDropdownItem = /*@__PURE__*/ createReactComponent('ix-group-dropdown-item');
 const IxGroupItem = /*@__PURE__*/ createReactComponent('ix-group-item');
 const IxIcon = /*@__PURE__*/ createReactComponent('ix-icon');
 const IxIconButton = /*@__PURE__*/ createReactComponent('ix-icon-button');
+const IxIconToggleButton = /*@__PURE__*/ createReactComponent('ix-icon-toggle-button');
 const IxInputGroup = /*@__PURE__*/ createReactComponent('ix-input-group');
 const IxKeyValue = /*@__PURE__*/ createReactComponent('ix-key-value');
 const IxKeyValueList = /*@__PURE__*/ createReactComponent('ix-key-value-list');
 const IxKpi = /*@__PURE__*/ createReactComponent('ix-kpi');
+const IxLinkButton = /*@__PURE__*/ createReactComponent('ix-link-button');
 const IxMapNavigation = /*@__PURE__*/ createReactComponent('ix-map-navigation');
 const IxMapNavigationOverlay = /*@__PURE__*/ createReactComponent('ix-map-navigation-overlay');
 const IxMenu = /*@__PURE__*/ createReactComponent('ix-menu');
@@ -274,16 +277,20 @@ const IxMenuAboutItem = /*@__PURE__*/ createReactComponent('ix-menu-about-item')
 const IxMenuAboutNews = /*@__PURE__*/ createReactComponent('ix-menu-about-news');
 const IxMenuAvatar = /*@__PURE__*/ createReactComponent('ix-menu-avatar');
 const IxMenuAvatarItem = /*@__PURE__*/ createReactComponent('ix-menu-avatar-item');
+const IxMenuCategory = /*@__PURE__*/ createReactComponent('ix-menu-category');
 const IxMenuItem = /*@__PURE__*/ createReactComponent('ix-menu-item');
 const IxMenuSettings = /*@__PURE__*/ createReactComponent('ix-menu-settings');
 const IxMenuSettingsItem = /*@__PURE__*/ createReactComponent('ix-menu-settings-item');
 const IxMessageBar = /*@__PURE__*/ createReactComponent('ix-message-bar');
 const IxModal = /*@__PURE__*/ createReactComponent('ix-modal');
-const IxModalContainer = /*@__PURE__*/ createReactComponent('ix-modal-container');
+const IxModalContent = /*@__PURE__*/ createReactComponent('ix-modal-content');
 const IxModalExample = /*@__PURE__*/ createReactComponent('ix-modal-example');
+const IxModalFooter = /*@__PURE__*/ createReactComponent('ix-modal-footer');
+const IxModalHeader = /*@__PURE__*/ createReactComponent('ix-modal-header');
 const IxPagination = /*@__PURE__*/ createReactComponent('ix-pagination');
 const IxPill = /*@__PURE__*/ createReactComponent('ix-pill');
 const IxPushCard = /*@__PURE__*/ createReactComponent('ix-push-card');
+const IxRow = /*@__PURE__*/ createReactComponent('ix-row');
 const IxSelect = /*@__PURE__*/ createReactComponent('ix-select');
 const IxSelectItem = /*@__PURE__*/ createReactComponent('ix-select-item');
 const IxSpinner = /*@__PURE__*/ createReactComponent('ix-spinner');
@@ -296,43 +303,192 @@ const IxTimePicker = /*@__PURE__*/ createReactComponent('ix-time-picker');
 const IxToast = /*@__PURE__*/ createReactComponent('ix-toast');
 const IxToastContainer = /*@__PURE__*/ createReactComponent('ix-toast-container');
 const IxToggle = /*@__PURE__*/ createReactComponent('ix-toggle');
+const IxToggleButton = /*@__PURE__*/ createReactComponent('ix-toggle-button');
 const IxTooltip = /*@__PURE__*/ createReactComponent('ix-tooltip');
+const IxTypography = /*@__PURE__*/ createReactComponent('ix-typography');
 const IxUpload = /*@__PURE__*/ createReactComponent('ix-upload');
 const IxValidationTooltip = /*@__PURE__*/ createReactComponent('ix-validation-tooltip');
 const IxWorkflowStep = /*@__PURE__*/ createReactComponent('ix-workflow-step');
 const IxWorkflowSteps = /*@__PURE__*/ createReactComponent('ix-workflow-steps');
 
-/* eslint-disable @typescript-eslint/no-explicit-any */
-const Modal = React.forwardRef((props, ref) => {
-    const wrapperRef = useRef(null);
-    useImperativeHandle(ref, () => {
-        let htmlElement = null;
-        if (wrapperRef.current) {
-            htmlElement = wrapperRef.current.closest('ix-modal');
+/*
+ * SPDX-FileCopyrightText: 2023 Siemens AG
+ *
+ * SPDX-License-Identifier: MIT
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+let viewInstance = 0;
+function createViewInstance() {
+    return `ix-react-view-${viewInstance++}`;
+}
+const mountedRootNodes = {};
+async function fallbackRootDom(id, view) {
+    return new Promise((resolve) => {
+        const rootElement = document.createElement('DIV');
+        rootElement.id = id;
+        rootElement.style.display = 'contents';
+        document.body.appendChild(rootElement);
+        const root = ReactDOMClient.createRoot(rootElement);
+        root.render(view);
+        mountedRootNodes[id] = root;
+        setTimeout(() => {
+            const viewElement = rootElement.children[0];
+            resolve(viewElement);
+        });
+    });
+}
+async function fallbackRemoveViewFromRootDom(view) {
+    const parent = view.parentElement;
+    const id = parent.id;
+    if (id in mountedRootNodes) {
+        mountedRootNodes[id].unmount();
+        delete mountedRootNodes[id];
+        parent.remove();
+    }
+}
+class ReactFrameworkDelegate {
+    async attachView(view) {
+        const id = createViewInstance();
+        if (!this.attachViewToPortal) {
+            return fallbackRootDom(id, view);
         }
-        return {
-            close: (result) => {
-                const modalElement = wrapperRef.current;
-                if (!modalElement) {
-                    console.error('Modal cannot find modal reference');
-                    return;
-                }
-                closeModal(modalElement, result);
-            },
-            dismiss: (result) => {
-                const modalElement = wrapperRef.current;
-                if (!modalElement) {
-                    console.error('Modal cannot find modal reference');
-                    return;
-                }
-                dismissModal(modalElement, result);
-            },
-            modalElement: htmlElement,
+        const refElement = await this.attachViewToPortal(id, view);
+        return refElement;
+    }
+    async removeView(view) {
+        if (!this.removeViewFromPortal) {
+            return fallbackRemoveViewFromRootDom(view);
+        }
+        const parent = view.parentElement;
+        const id = parent.getAttribute('data-portal-id');
+        this.removeViewFromPortal(id);
+    }
+}
+const reactFrameworkDelegate = new ReactFrameworkDelegate();
+registerFrameworkDelegate(reactFrameworkDelegate);
+
+/*
+ * SPDX-FileCopyrightText: 2023 Siemens AG
+ *
+ * SPDX-License-Identifier: MIT
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+const PORTAL_ID = 'ix-portal';
+const IxOverlay = (props) => {
+    const [portalRef, setPortalRef] = useState(null);
+    const resolveElementRef = useRef({});
+    const viewRefs = useRef({});
+    const [views, setViews] = useState({});
+    useEffect(() => {
+        const addOverlay = (id, view) => {
+            const _views = Object.assign({}, viewRefs.current);
+            _views[id] = view;
+            setViews(_views);
+            viewRefs.current = _views;
         };
-    });
-    return (React.createElement(React.Fragment, null, React.Children.map(props.children, (child) => React.cloneElement(child, {
-        ref: (ref) => (wrapperRef.current = ref),
-    }))));
+        const removeOverlay = (id) => {
+            const _views = Object.assign({}, viewRefs.current);
+            delete _views[id];
+            setViews(_views);
+            viewRefs.current = _views;
+        };
+        props.delegate.attachViewToPortal = async (id, view) => {
+            addOverlay(id, view);
+            return new Promise((resolve) => {
+                const r = Object.assign({}, resolveElementRef.current);
+                r[id] = resolve;
+                resolveElementRef.current = r;
+            });
+        };
+        props.delegate.removeViewFromPortal = async (id) => {
+            console.log(id);
+            removeOverlay(id);
+        };
+    }, []);
+    useLayoutEffect(() => {
+        const portalRef = document.querySelector(`#${PORTAL_ID}`);
+        if (portalRef) {
+            setPortalRef(portalRef);
+        }
+    }, []);
+    useLayoutEffect(() => {
+        Object.keys(views).forEach((key) => {
+            const resolveQueue = Object.assign({}, resolveElementRef.current);
+            const element = document.querySelector(`[data-portal-id="${key}"]`);
+            if (element && element.children.length === 1 && resolveQueue[key]) {
+                const view = element.children[0];
+                resolveQueue[key](view);
+            }
+        });
+    }, [views]);
+    if (!portalRef) {
+        return null;
+    }
+    return (React.createElement(React.Fragment, null, Object.keys(views).map((key) => {
+        const RenderView = views[key];
+        return ReactDOM.createPortal(React.createElement("div", { "data-portal-id": key, style: { display: 'contents ' } }, RenderView), portalRef, key);
+    })));
+};
+
+/*
+ * SPDX-FileCopyrightText: 2023 Siemens AG
+ *
+ * SPDX-License-Identifier: MIT
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+const IxContext = React.createContext(null);
+
+/*
+ * SPDX-FileCopyrightText: 2023 Siemens AG
+ *
+ * SPDX-License-Identifier: MIT
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+class IxApplicationContext extends React.Component {
+    constructor(props) {
+        super(props);
+        this.delegate = reactFrameworkDelegate;
+    }
+    render() {
+        return (React.createElement(IxContext.Provider, { value: {
+                delegate: this.delegate,
+            } },
+            this.props.children,
+            React.createElement(IxOverlay, { delegate: this.delegate }),
+            React.createElement("div", { id: PORTAL_ID })));
+    }
+}
+
+/*
+ * SPDX-FileCopyrightText: 2023 Siemens AG
+ *
+ * SPDX-License-Identifier: MIT
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+const Modal = React.forwardRef((props, ref) => {
+    const wrapperRef = useRef(null);
+    useImperativeHandle(ref, () => ({
+        close(result) {
+            var _a;
+            (_a = wrapperRef.current) === null || _a === void 0 ? void 0 : _a.closeModal(result);
+        },
+        dismiss(result) {
+            var _a;
+            (_a = wrapperRef.current) === null || _a === void 0 ? void 0 : _a.dismissModal(result);
+        },
+        modalElement: null,
+    }));
+    return React.createElement(IxModal, { ref: wrapperRef }, props.children);
 });
 
 /*
@@ -343,23 +499,8 @@ const Modal = React.forwardRef((props, ref) => {
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
 async function showModal(config) {
-    if (typeof config.content === 'string') {
-        return modal(config);
-    }
-    const container = document.createElement('DIV');
-    container.style.display = 'contents';
-    const root = ReactDOMClient.createRoot(container);
-    root.render(config.content);
-    const modalInstance = await modal(Object.assign(Object.assign({}, config), { content: container }));
-    modalInstance.onClose.once(() => {
-        root.unmount();
-    });
-    modalInstance.onDismiss.once(() => {
-        root.unmount();
-    });
-    return modalInstance;
+    return showModal$1(config);
 }
 
 /*
@@ -420,4 +561,4 @@ const IxTree = (props) => {
         } })));
 };
 
-export { IxActionCard, IxAnimatedTab, IxAnimatedTabs, IxApplicationHeader, IxBasicNavigation, IxBlind, IxBreadcrumb, IxBreadcrumbItem, IxButton, IxCard, IxCardAccordion, IxCardContent, IxCardList, IxCardTitle, IxCategoryFilter, IxChip, IxContentHeader, IxCounterPill, IxDatePicker, IxDatetimePicker, IxDivider, IxDrawer, IxDropdown, IxDropdownButton, IxDropdownItem, IxDropdownQuickActions, IxEmptyState, IxEventList, IxEventListItem, IxExpandingSearch, IxFilterChip, IxFlipTile, IxFlipTileContent, IxGroup, IxGroupContextMenu, IxGroupDropdownItem, IxGroupItem, IxIcon, IxIconButton, IxInputGroup, IxKeyValue, IxKeyValueList, IxKpi, IxMapNavigation, IxMapNavigationOverlay, IxMenu, IxMenuAbout, IxMenuAboutItem, IxMenuAboutNews, IxMenuAvatar, IxMenuAvatarItem, IxMenuItem, IxMenuSettings, IxMenuSettingsItem, IxMessageBar, IxModal, IxModalContainer, IxModalExample, IxPagination, IxPill, IxPushCard, IxSelect, IxSelectItem, IxSpinner, IxSplitButton, IxSplitButtonItem, IxTabItem, IxTabs, IxTile, IxTimePicker, IxToast, IxToastContainer, IxToggle, IxTooltip, IxTree, IxUpload, IxValidationTooltip, IxWorkflowStep, IxWorkflowSteps, Modal, showModal, showToast };
+export { IxActionCard, IxApplicationContext, IxApplicationHeader, IxAvatar, IxBasicNavigation, IxBlind, IxBreadcrumb, IxBreadcrumbItem, IxButton, IxCard, IxCardAccordion, IxCardContent, IxCardList, IxCardTitle, IxCategoryFilter, IxChip, IxCol, IxContentHeader, IxDatePicker, IxDatetimePicker, IxDivider, IxDrawer, IxDropdown, IxDropdownButton, IxDropdownHeader, IxDropdownItem, IxDropdownQuickActions, IxEmptyState, IxEventList, IxEventListItem, IxExpandingSearch, IxFilterChip, IxFlipTile, IxFlipTileContent, IxFormField, IxGrid, IxGroup, IxGroupContextMenu, IxGroupItem, IxIcon, IxIconButton, IxIconToggleButton, IxInputGroup, IxKeyValue, IxKeyValueList, IxKpi, IxLinkButton, IxMapNavigation, IxMapNavigationOverlay, IxMenu, IxMenuAbout, IxMenuAboutItem, IxMenuAboutNews, IxMenuAvatar, IxMenuAvatarItem, IxMenuCategory, IxMenuItem, IxMenuSettings, IxMenuSettingsItem, IxMessageBar, IxModal, IxModalContent, IxModalExample, IxModalFooter, IxModalHeader, IxPagination, IxPill, IxPushCard, IxRow, IxSelect, IxSelectItem, IxSpinner, IxSplitButton, IxSplitButtonItem, IxTabItem, IxTabs, IxTile, IxTimePicker, IxToast, IxToastContainer, IxToggle, IxToggleButton, IxTooltip, IxTree, IxTypography, IxUpload, IxValidationTooltip, IxWorkflowStep, IxWorkflowSteps, Modal, showModal, showToast };

package/dist/index.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const React = require('react');
-require('react-dom');
+const ReactDOM = require('react-dom');
 const loader = require('@siemens/ix/loader');
 const ix = require('@siemens/ix');
 const ReactDOMClient = require('react-dom/client');
@@ -11,6 +11,7 @@ const ReactDOMClient = require('react-dom/client');
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
 const React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+const ReactDOM__default = /*#__PURE__*/_interopDefaultLegacy(ReactDOM);
 const ReactDOMClient__default = /*#__PURE__*/_interopDefaultLegacy(ReactDOMClient);
 
 /******************************************************************************
@@ -233,9 +234,8 @@ const createReactComponent = (tagName, ReactComponentContext, manipulatePropsFun
 /* eslint-disable */
 loader.defineCustomElements();
 const IxActionCard = /*@__PURE__*/ createReactComponent('ix-action-card');
-const IxAnimatedTab = /*@__PURE__*/ createReactComponent('ix-animated-tab');
-const IxAnimatedTabs = /*@__PURE__*/ createReactComponent('ix-animated-tabs');
 const IxApplicationHeader = /*@__PURE__*/ createReactComponent('ix-application-header');
+const IxAvatar = /*@__PURE__*/ createReactComponent('ix-avatar');
 const IxBasicNavigation = /*@__PURE__*/ createReactComponent('ix-basic-navigation');
 const IxBlind = /*@__PURE__*/ createReactComponent('ix-blind');
 const IxBreadcrumb = /*@__PURE__*/ createReactComponent('ix-breadcrumb');
@@ -248,14 +248,15 @@ const IxCardList = /*@__PURE__*/ createReactComponent('ix-card-list');
 const IxCardTitle = /*@__PURE__*/ createReactComponent('ix-card-title');
 const IxCategoryFilter = /*@__PURE__*/ createReactComponent('ix-category-filter');
 const IxChip = /*@__PURE__*/ createReactComponent('ix-chip');
+const IxCol = /*@__PURE__*/ createReactComponent('ix-col');
 const IxContentHeader = /*@__PURE__*/ createReactComponent('ix-content-header');
-const IxCounterPill = /*@__PURE__*/ createReactComponent('ix-counter-pill');
 const IxDatePicker = /*@__PURE__*/ createReactComponent('ix-date-picker');
 const IxDatetimePicker = /*@__PURE__*/ createReactComponent('ix-datetime-picker');
 const IxDivider = /*@__PURE__*/ createReactComponent('ix-divider');
 const IxDrawer = /*@__PURE__*/ createReactComponent('ix-drawer');
 const IxDropdown = /*@__PURE__*/ createReactComponent('ix-dropdown');
 const IxDropdownButton = /*@__PURE__*/ createReactComponent('ix-dropdown-button');
+const IxDropdownHeader = /*@__PURE__*/ createReactComponent('ix-dropdown-header');
 const IxDropdownItem = /*@__PURE__*/ createReactComponent('ix-dropdown-item');
 const IxDropdownQuickActions = /*@__PURE__*/ createReactComponent('ix-dropdown-quick-actions');
 const IxEmptyState = /*@__PURE__*/ createReactComponent('ix-empty-state');
@@ -265,16 +266,19 @@ const IxExpandingSearch = /*@__PURE__*/ createReactComponent('ix-expanding-searc
 const IxFilterChip = /*@__PURE__*/ createReactComponent('ix-filter-chip');
 const IxFlipTile = /*@__PURE__*/ createReactComponent('ix-flip-tile');
 const IxFlipTileContent = /*@__PURE__*/ createReactComponent('ix-flip-tile-content');
+const IxFormField = /*@__PURE__*/ createReactComponent('ix-form-field');
+const IxGrid = /*@__PURE__*/ createReactComponent('ix-grid');
 const IxGroup = /*@__PURE__*/ createReactComponent('ix-group');
 const IxGroupContextMenu = /*@__PURE__*/ createReactComponent('ix-group-context-menu');
-const IxGroupDropdownItem = /*@__PURE__*/ createReactComponent('ix-group-dropdown-item');
 const IxGroupItem = /*@__PURE__*/ createReactComponent('ix-group-item');
 const IxIcon = /*@__PURE__*/ createReactComponent('ix-icon');
 const IxIconButton = /*@__PURE__*/ createReactComponent('ix-icon-button');
+const IxIconToggleButton = /*@__PURE__*/ createReactComponent('ix-icon-toggle-button');
 const IxInputGroup = /*@__PURE__*/ createReactComponent('ix-input-group');
 const IxKeyValue = /*@__PURE__*/ createReactComponent('ix-key-value');
 const IxKeyValueList = /*@__PURE__*/ createReactComponent('ix-key-value-list');
 const IxKpi = /*@__PURE__*/ createReactComponent('ix-kpi');
+const IxLinkButton = /*@__PURE__*/ createReactComponent('ix-link-button');
 const IxMapNavigation = /*@__PURE__*/ createReactComponent('ix-map-navigation');
 const IxMapNavigationOverlay = /*@__PURE__*/ createReactComponent('ix-map-navigation-overlay');
 const IxMenu = /*@__PURE__*/ createReactComponent('ix-menu');
@@ -283,16 +287,20 @@ const IxMenuAboutItem = /*@__PURE__*/ createReactComponent('ix-menu-about-item')
 const IxMenuAboutNews = /*@__PURE__*/ createReactComponent('ix-menu-about-news');
 const IxMenuAvatar = /*@__PURE__*/ createReactComponent('ix-menu-avatar');
 const IxMenuAvatarItem = /*@__PURE__*/ createReactComponent('ix-menu-avatar-item');
+const IxMenuCategory = /*@__PURE__*/ createReactComponent('ix-menu-category');
 const IxMenuItem = /*@__PURE__*/ createReactComponent('ix-menu-item');
 const IxMenuSettings = /*@__PURE__*/ createReactComponent('ix-menu-settings');
 const IxMenuSettingsItem = /*@__PURE__*/ createReactComponent('ix-menu-settings-item');
 const IxMessageBar = /*@__PURE__*/ createReactComponent('ix-message-bar');
 const IxModal = /*@__PURE__*/ createReactComponent('ix-modal');
-const IxModalContainer = /*@__PURE__*/ createReactComponent('ix-modal-container');
+const IxModalContent = /*@__PURE__*/ createReactComponent('ix-modal-content');
 const IxModalExample = /*@__PURE__*/ createReactComponent('ix-modal-example');
+const IxModalFooter = /*@__PURE__*/ createReactComponent('ix-modal-footer');
+const IxModalHeader = /*@__PURE__*/ createReactComponent('ix-modal-header');
 const IxPagination = /*@__PURE__*/ createReactComponent('ix-pagination');
 const IxPill = /*@__PURE__*/ createReactComponent('ix-pill');
 const IxPushCard = /*@__PURE__*/ createReactComponent('ix-push-card');
+const IxRow = /*@__PURE__*/ createReactComponent('ix-row');
 const IxSelect = /*@__PURE__*/ createReactComponent('ix-select');
 const IxSelectItem = /*@__PURE__*/ createReactComponent('ix-select-item');
 const IxSpinner = /*@__PURE__*/ createReactComponent('ix-spinner');
@@ -305,43 +313,192 @@ const IxTimePicker = /*@__PURE__*/ createReactComponent('ix-time-picker');
 const IxToast = /*@__PURE__*/ createReactComponent('ix-toast');
 const IxToastContainer = /*@__PURE__*/ createReactComponent('ix-toast-container');
 const IxToggle = /*@__PURE__*/ createReactComponent('ix-toggle');
+const IxToggleButton = /*@__PURE__*/ createReactComponent('ix-toggle-button');
 const IxTooltip = /*@__PURE__*/ createReactComponent('ix-tooltip');
+const IxTypography = /*@__PURE__*/ createReactComponent('ix-typography');
 const IxUpload = /*@__PURE__*/ createReactComponent('ix-upload');
 const IxValidationTooltip = /*@__PURE__*/ createReactComponent('ix-validation-tooltip');
 const IxWorkflowStep = /*@__PURE__*/ createReactComponent('ix-workflow-step');
 const IxWorkflowSteps = /*@__PURE__*/ createReactComponent('ix-workflow-steps');
 
-/* eslint-disable @typescript-eslint/no-explicit-any */
-const Modal = React__default["default"].forwardRef((props, ref) => {
-    const wrapperRef = React.useRef(null);
-    React.useImperativeHandle(ref, () => {
-        let htmlElement = null;
-        if (wrapperRef.current) {
-            htmlElement = wrapperRef.current.closest('ix-modal');
+/*
+ * SPDX-FileCopyrightText: 2023 Siemens AG
+ *
+ * SPDX-License-Identifier: MIT
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+let viewInstance = 0;
+function createViewInstance() {
+    return `ix-react-view-${viewInstance++}`;
+}
+const mountedRootNodes = {};
+async function fallbackRootDom(id, view) {
+    return new Promise((resolve) => {
+        const rootElement = document.createElement('DIV');
+        rootElement.id = id;
+        rootElement.style.display = 'contents';
+        document.body.appendChild(rootElement);
+        const root = ReactDOMClient__default["default"].createRoot(rootElement);
+        root.render(view);
+        mountedRootNodes[id] = root;
+        setTimeout(() => {
+            const viewElement = rootElement.children[0];
+            resolve(viewElement);
+        });
+    });
+}
+async function fallbackRemoveViewFromRootDom(view) {
+    const parent = view.parentElement;
+    const id = parent.id;
+    if (id in mountedRootNodes) {
+        mountedRootNodes[id].unmount();
+        delete mountedRootNodes[id];
+        parent.remove();
+    }
+}
+class ReactFrameworkDelegate {
+    async attachView(view) {
+        const id = createViewInstance();
+        if (!this.attachViewToPortal) {
+            return fallbackRootDom(id, view);
         }
-        return {
-            close: (result) => {
-                const modalElement = wrapperRef.current;
-                if (!modalElement) {
-                    console.error('Modal cannot find modal reference');
-                    return;
-                }
-                ix.closeModal(modalElement, result);
-            },
-            dismiss: (result) => {
-                const modalElement = wrapperRef.current;
-                if (!modalElement) {
-                    console.error('Modal cannot find modal reference');
-                    return;
-                }
-                ix.dismissModal(modalElement, result);
-            },
-            modalElement: htmlElement,
+        const refElement = await this.attachViewToPortal(id, view);
+        return refElement;
+    }
+    async removeView(view) {
+        if (!this.removeViewFromPortal) {
+            return fallbackRemoveViewFromRootDom(view);
+        }
+        const parent = view.parentElement;
+        const id = parent.getAttribute('data-portal-id');
+        this.removeViewFromPortal(id);
+    }
+}
+const reactFrameworkDelegate = new ReactFrameworkDelegate();
+ix.registerFrameworkDelegate(reactFrameworkDelegate);
+
+/*
+ * SPDX-FileCopyrightText: 2023 Siemens AG
+ *
+ * SPDX-License-Identifier: MIT
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+const PORTAL_ID = 'ix-portal';
+const IxOverlay = (props) => {
+    const [portalRef, setPortalRef] = React.useState(null);
+    const resolveElementRef = React.useRef({});
+    const viewRefs = React.useRef({});
+    const [views, setViews] = React.useState({});
+    React.useEffect(() => {
+        const addOverlay = (id, view) => {
+            const _views = Object.assign({}, viewRefs.current);
+            _views[id] = view;
+            setViews(_views);
+            viewRefs.current = _views;
         };
-    });
-    return (React__default["default"].createElement(React__default["default"].Fragment, null, React__default["default"].Children.map(props.children, (child) => React__default["default"].cloneElement(child, {
-        ref: (ref) => (wrapperRef.current = ref),
-    }))));
+        const removeOverlay = (id) => {
+            const _views = Object.assign({}, viewRefs.current);
+            delete _views[id];
+            setViews(_views);
+            viewRefs.current = _views;
+        };
+        props.delegate.attachViewToPortal = async (id, view) => {
+            addOverlay(id, view);
+            return new Promise((resolve) => {
+                const r = Object.assign({}, resolveElementRef.current);
+                r[id] = resolve;
+                resolveElementRef.current = r;
+            });
+        };
+        props.delegate.removeViewFromPortal = async (id) => {
+            console.log(id);
+            removeOverlay(id);
+        };
+    }, []);
+    React.useLayoutEffect(() => {
+        const portalRef = document.querySelector(`#${PORTAL_ID}`);
+        if (portalRef) {
+            setPortalRef(portalRef);
+        }
+    }, []);
+    React.useLayoutEffect(() => {
+        Object.keys(views).forEach((key) => {
+            const resolveQueue = Object.assign({}, resolveElementRef.current);
+            const element = document.querySelector(`[data-portal-id="${key}"]`);
+            if (element && element.children.length === 1 && resolveQueue[key]) {
+                const view = element.children[0];
+                resolveQueue[key](view);
+            }
+        });
+    }, [views]);
+    if (!portalRef) {
+        return null;
+    }
+    return (React__default["default"].createElement(React__default["default"].Fragment, null, Object.keys(views).map((key) => {
+        const RenderView = views[key];
+        return ReactDOM__default["default"].createPortal(React__default["default"].createElement("div", { "data-portal-id": key, style: { display: 'contents ' } }, RenderView), portalRef, key);
+    })));
+};
+
+/*
+ * SPDX-FileCopyrightText: 2023 Siemens AG
+ *
+ * SPDX-License-Identifier: MIT
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+const IxContext = React__default["default"].createContext(null);
+
+/*
+ * SPDX-FileCopyrightText: 2023 Siemens AG
+ *
+ * SPDX-License-Identifier: MIT
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+class IxApplicationContext extends React__default["default"].Component {
+    constructor(props) {
+        super(props);
+        this.delegate = reactFrameworkDelegate;
+    }
+    render() {
+        return (React__default["default"].createElement(IxContext.Provider, { value: {
+                delegate: this.delegate,
+            } },
+            this.props.children,
+            React__default["default"].createElement(IxOverlay, { delegate: this.delegate }),
+            React__default["default"].createElement("div", { id: PORTAL_ID })));
+    }
+}
+
+/*
+ * SPDX-FileCopyrightText: 2023 Siemens AG
+ *
+ * SPDX-License-Identifier: MIT
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+const Modal = React__default["default"].forwardRef((props, ref) => {
+    const wrapperRef = React.useRef(null);
+    React.useImperativeHandle(ref, () => ({
+        close(result) {
+            var _a;
+            (_a = wrapperRef.current) === null || _a === void 0 ? void 0 : _a.closeModal(result);
+        },
+        dismiss(result) {
+            var _a;
+            (_a = wrapperRef.current) === null || _a === void 0 ? void 0 : _a.dismissModal(result);
+        },
+        modalElement: null,
+    }));
+    return React__default["default"].createElement(IxModal, { ref: wrapperRef }, props.children);
 });
 
 /*
@@ -352,23 +509,8 @@ const Modal = React__default["default"].forwardRef((props, ref) => {
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
 async function showModal(config) {
-    if (typeof config.content === 'string') {
-        return ix.modal(config);
-    }
-    const container = document.createElement('DIV');
-    container.style.display = 'contents';
-    const root = ReactDOMClient__default["default"].createRoot(container);
-    root.render(config.content);
-    const modalInstance = await ix.modal(Object.assign(Object.assign({}, config), { content: container }));
-    modalInstance.onClose.once(() => {
-        root.unmount();
-    });
-    modalInstance.onDismiss.once(() => {
-        root.unmount();
-    });
-    return modalInstance;
+    return ix.showModal(config);
 }
 
 /*
@@ -430,9 +572,9 @@ const IxTree = (props) => {
 };
 
 exports.IxActionCard = IxActionCard;
-exports.IxAnimatedTab = IxAnimatedTab;
-exports.IxAnimatedTabs = IxAnimatedTabs;
+exports.IxApplicationContext = IxApplicationContext;
 exports.IxApplicationHeader = IxApplicationHeader;
+exports.IxAvatar = IxAvatar;
 exports.IxBasicNavigation = IxBasicNavigation;
 exports.IxBlind = IxBlind;
 exports.IxBreadcrumb = IxBreadcrumb;
@@ -445,14 +587,15 @@ exports.IxCardList = IxCardList;
 exports.IxCardTitle = IxCardTitle;
 exports.IxCategoryFilter = IxCategoryFilter;
 exports.IxChip = IxChip;
+exports.IxCol = IxCol;
 exports.IxContentHeader = IxContentHeader;
-exports.IxCounterPill = IxCounterPill;
 exports.IxDatePicker = IxDatePicker;
 exports.IxDatetimePicker = IxDatetimePicker;
 exports.IxDivider = IxDivider;
 exports.IxDrawer = IxDrawer;
 exports.IxDropdown = IxDropdown;
 exports.IxDropdownButton = IxDropdownButton;
+exports.IxDropdownHeader = IxDropdownHeader;
 exports.IxDropdownItem = IxDropdownItem;
 exports.IxDropdownQuickActions = IxDropdownQuickActions;
 exports.IxEmptyState = IxEmptyState;
@@ -462,16 +605,19 @@ exports.IxExpandingSearch = IxExpandingSearch;
 exports.IxFilterChip = IxFilterChip;
 exports.IxFlipTile = IxFlipTile;
 exports.IxFlipTileContent = IxFlipTileContent;
+exports.IxFormField = IxFormField;
+exports.IxGrid = IxGrid;
 exports.IxGroup = IxGroup;
 exports.IxGroupContextMenu = IxGroupContextMenu;
-exports.IxGroupDropdownItem = IxGroupDropdownItem;
 exports.IxGroupItem = IxGroupItem;
 exports.IxIcon = IxIcon;
 exports.IxIconButton = IxIconButton;
+exports.IxIconToggleButton = IxIconToggleButton;
 exports.IxInputGroup = IxInputGroup;
 exports.IxKeyValue = IxKeyValue;
 exports.IxKeyValueList = IxKeyValueList;
 exports.IxKpi = IxKpi;
+exports.IxLinkButton = IxLinkButton;
 exports.IxMapNavigation = IxMapNavigation;
 exports.IxMapNavigationOverlay = IxMapNavigationOverlay;
 exports.IxMenu = IxMenu;
@@ -480,16 +626,20 @@ exports.IxMenuAboutItem = IxMenuAboutItem;
 exports.IxMenuAboutNews = IxMenuAboutNews;
 exports.IxMenuAvatar = IxMenuAvatar;
 exports.IxMenuAvatarItem = IxMenuAvatarItem;
+exports.IxMenuCategory = IxMenuCategory;
 exports.IxMenuItem = IxMenuItem;
 exports.IxMenuSettings = IxMenuSettings;
 exports.IxMenuSettingsItem = IxMenuSettingsItem;
 exports.IxMessageBar = IxMessageBar;
 exports.IxModal = IxModal;
-exports.IxModalContainer = IxModalContainer;
+exports.IxModalContent = IxModalContent;
 exports.IxModalExample = IxModalExample;
+exports.IxModalFooter = IxModalFooter;
+exports.IxModalHeader = IxModalHeader;
 exports.IxPagination = IxPagination;
 exports.IxPill = IxPill;
 exports.IxPushCard = IxPushCard;
+exports.IxRow = IxRow;
 exports.IxSelect = IxSelect;
 exports.IxSelectItem = IxSelectItem;
 exports.IxSpinner = IxSpinner;
@@ -502,8 +652,10 @@ exports.IxTimePicker = IxTimePicker;
 exports.IxToast = IxToast;
 exports.IxToastContainer = IxToastContainer;
 exports.IxToggle = IxToggle;
+exports.IxToggleButton = IxToggleButton;
 exports.IxTooltip = IxTooltip;
 exports.IxTree = IxTree;
+exports.IxTypography = IxTypography;
 exports.IxUpload = IxUpload;
 exports.IxValidationTooltip = IxValidationTooltip;
 exports.IxWorkflowStep = IxWorkflowStep;

package/dist/types/components.d.ts

@@ -1,9 +1,8 @@
 /// <reference types="react" />
 import type { JSX } from '@siemens/ix';
 export declare const IxActionCard: import("react").ForwardRefExoticComponent<JSX.IxActionCard & Omit<import("react").HTMLAttributes<HTMLIxActionCardElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLIxActionCardElement>>;
-export declare const IxAnimatedTab: import("react").ForwardRefExoticComponent<JSX.IxAnimatedTab & Omit<import("react").HTMLAttributes<HTMLIxAnimatedTabElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLIxAnimatedTabElement>>;
-export declare const IxAnimatedTabs: import("react").ForwardRefExoticComponent<JSX.IxAnimatedTabs & Omit<import("react").HTMLAttributes<HTMLIxAnimatedTabsElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLIxAnimatedTabsElement>>;
 export declare const IxApplicationHeader: import("react").ForwardRefExoticComponent<JSX.IxApplicationHeader & Omit<import("react").HTMLAttributes<HTMLIxApplicationHeaderElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLIxApplicationHeaderElement>>;
+export declare const IxAvatar: import("react").ForwardRefExoticComponent<JSX.IxAvatar & Omit<import("react").HTMLAttributes<HTMLIxAvatarElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLIxAvatarElement>>;
 export declare const IxBasicNavigation: import("react").ForwardRefExoticComponent<JSX.IxBasicNavigation & Omit<import("react").HTMLAttributes<HTMLIxBasicNavigationElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLIxBasicNavigationElement>>;
 export declare const IxBlind: import("react").ForwardRefExoticComponent<JSX.IxBlind & Omit<import("react").HTMLAttributes<HTMLIxBlindElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLIxBlindElement>>;
 export declare const IxBreadcrumb: import("react").ForwardRefExoticComponent<JSX.IxBreadcrumb & Omit<import("react").HTMLAttributes<HTMLIxBreadcrumbElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLIxBreadcrumbElement>>;
@@ -16,14 +15,15 @@ export declare const IxCardList: import("react").ForwardRefExoticComponent<JSX.I
 export declare const IxCardTitle: import("react").ForwardRefExoticComponent<JSX.IxCardTitle & Omit<import("react").HTMLAttributes<HTMLIxCardTitleElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLIxCardTitleElement>>;
 export declare const IxCategoryFilter: import("react").ForwardRefExoticComponent<JSX.IxCategoryFilter & Omit<import("react").HTMLAttributes<HTMLIxCategoryFilterElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLIxCategoryFilterElement>>;
 export declare const IxChip: import("react").ForwardRefExoticComponent<JSX.IxChip & Omit<import("react").HTMLAttributes<HTMLIxChipElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLIxChipElement>>;
+export declare const IxCol: import("react").ForwardRefExoticComponent<JSX.IxCol & Omit<import("react").HTMLAttributes<HTMLIxColElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLIxColElement>>;
 export declare const IxContentHeader: import("react").ForwardRefExoticComponent<JSX.IxContentHeader & Omit<import("react").HTMLAttributes<HTMLIxContentHeaderElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLIxContentHeaderElement>>;
-export declare const IxCounterPill: import("react").ForwardRefExoticComponent<JSX.IxCounterPill & Omit<import("react").HTMLAttributes<HTMLIxCounterPillElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLIxCounterPillElement>>;
 export declare const IxDatePicker: import("react").ForwardRefExoticComponent<JSX.IxDatePicker & Omit<import("react").HTMLAttributes<HTMLIxDatePickerElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLIxDatePickerElement>>;
 export declare const IxDatetimePicker: import("react").ForwardRefExoticComponent<JSX.IxDatetimePicker & Omit<import("react").HTMLAttributes<HTMLIxDatetimePickerElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLIxDatetimePickerElement>>;
 export declare const IxDivider: import("react").ForwardRefExoticComponent<JSX.IxDivider & Omit<import("react").HTMLAttributes<HTMLIxDividerElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLIxDividerElement>>;
 export declare const IxDrawer: import("react").ForwardRefExoticComponent<JSX.IxDrawer & Omit<import("react").HTMLAttributes<HTMLIxDrawerElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLIxDrawerElement>>;
 export declare const IxDropdown: import("react").ForwardRefExoticComponent<JSX.IxDropdown & Omit<import("react").HTMLAttributes<HTMLIxDropdownElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLIxDropdownElement>>;
 export declare const IxDropdownButton: import("react").ForwardRefExoticComponent<JSX.IxDropdownButton & Omit<import("react").HTMLAttributes<HTMLIxDropdownButtonElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLIxDropdownButtonElement>>;
+export declare const IxDropdownHeader: import("react").ForwardRefExoticComponent<JSX.IxDropdownHeader & Omit<import("react").HTMLAttributes<HTMLIxDropdownHeaderElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLIxDropdownHeaderElement>>;
 export declare const IxDropdownItem: import("react").ForwardRefExoticComponent<JSX.IxDropdownItem & Omit<import("react").HTMLAttributes<HTMLIxDropdownItemElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLIxDropdownItemElement>>;
 export declare const IxDropdownQuickActions: import("react").ForwardRefExoticComponent<JSX.IxDropdownQuickActions & Omit<import("react").HTMLAttributes<HTMLIxDropdownQuickActionsElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLIxDropdownQuickActionsElement>>;
 export declare const IxEmptyState: import("react").ForwardRefExoticComponent<JSX.IxEmptyState & Omit<import("react").HTMLAttributes<HTMLIxEmptyStateElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLIxEmptyStateElement>>;
@@ -33,16 +33,19 @@ export declare const IxExpandingSearch: import("react").ForwardRefExoticComponen
 export declare const IxFilterChip: import("react").ForwardRefExoticComponent<JSX.IxFilterChip & Omit<import("react").HTMLAttributes<HTMLIxFilterChipElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLIxFilterChipElement>>;
 export declare const IxFlipTile: import("react").ForwardRefExoticComponent<JSX.IxFlipTile & Omit<import("react").HTMLAttributes<HTMLIxFlipTileElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLIxFlipTileElement>>;
 export declare const IxFlipTileContent: import("react").ForwardRefExoticComponent<JSX.IxFlipTileContent & Omit<import("react").HTMLAttributes<HTMLIxFlipTileContentElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLIxFlipTileContentElement>>;
+export declare const IxFormField: import("react").ForwardRefExoticComponent<JSX.IxFormField & Omit<import("react").HTMLAttributes<HTMLIxFormFieldElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLIxFormFieldElement>>;
+export declare const IxGrid: import("react").ForwardRefExoticComponent<JSX.IxGrid & Omit<import("react").HTMLAttributes<HTMLIxGridElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLIxGridElement>>;
 export declare const IxGroup: import("react").ForwardRefExoticComponent<JSX.IxGroup & Omit<import("react").HTMLAttributes<HTMLIxGroupElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLIxGroupElement>>;
 export declare const IxGroupContextMenu: import("react").ForwardRefExoticComponent<JSX.IxGroupContextMenu & Omit<import("react").HTMLAttributes<HTMLIxGroupContextMenuElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLIxGroupContextMenuElement>>;
-export declare const IxGroupDropdownItem: import("react").ForwardRefExoticComponent<JSX.IxGroupDropdownItem & Omit<import("react").HTMLAttributes<HTMLIxGroupDropdownItemElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLIxGroupDropdownItemElement>>;
 export declare const IxGroupItem: import("react").ForwardRefExoticComponent<JSX.IxGroupItem & Omit<import("react").HTMLAttributes<HTMLIxGroupItemElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLIxGroupItemElement>>;
 export declare const IxIcon: import("react").ForwardRefExoticComponent<import("@siemens/ix-icons/dist/types/components").JSX.IxIcon & Omit<import("react").HTMLAttributes<HTMLIxIconElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLIxIconElement>>;
 export declare const IxIconButton: import("react").ForwardRefExoticComponent<JSX.IxIconButton & Omit<import("react").HTMLAttributes<HTMLIxIconButtonElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLIxIconButtonElement>>;
+export declare const IxIconToggleButton: import("react").ForwardRefExoticComponent<JSX.IxIconToggleButton & Omit<import("react").HTMLAttributes<HTMLIxIconToggleButtonElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLIxIconToggleButtonElement>>;
 export declare const IxInputGroup: import("react").ForwardRefExoticComponent<JSX.IxInputGroup & Omit<import("react").HTMLAttributes<HTMLIxInputGroupElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLIxInputGroupElement>>;
 export declare const IxKeyValue: import("react").ForwardRefExoticComponent<JSX.IxKeyValue & Omit<import("react").HTMLAttributes<HTMLIxKeyValueElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLIxKeyValueElement>>;
 export declare const IxKeyValueList: import("react").ForwardRefExoticComponent<JSX.IxKeyValueList & Omit<import("react").HTMLAttributes<HTMLIxKeyValueListElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLIxKeyValueListElement>>;
 export declare const IxKpi: import("react").ForwardRefExoticComponent<JSX.IxKpi & Omit<import("react").HTMLAttributes<HTMLIxKpiElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLIxKpiElement>>;
+export declare const IxLinkButton: import("react").ForwardRefExoticComponent<JSX.IxLinkButton & Omit<import("react").HTMLAttributes<HTMLIxLinkButtonElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLIxLinkButtonElement>>;
 export declare const IxMapNavigation: import("react").ForwardRefExoticComponent<JSX.IxMapNavigation & Omit<import("react").HTMLAttributes<HTMLIxMapNavigationElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLIxMapNavigationElement>>;
 export declare const IxMapNavigationOverlay: import("react").ForwardRefExoticComponent<JSX.IxMapNavigationOverlay & Omit<import("react").HTMLAttributes<HTMLIxMapNavigationOverlayElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLIxMapNavigationOverlayElement>>;
 export declare const IxMenu: import("react").ForwardRefExoticComponent<JSX.IxMenu & Omit<import("react").HTMLAttributes<HTMLIxMenuElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLIxMenuElement>>;
@@ -51,16 +54,20 @@ export declare const IxMenuAboutItem: import("react").ForwardRefExoticComponent<
 export declare const IxMenuAboutNews: import("react").ForwardRefExoticComponent<JSX.IxMenuAboutNews & Omit<import("react").HTMLAttributes<HTMLIxMenuAboutNewsElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLIxMenuAboutNewsElement>>;
 export declare const IxMenuAvatar: import("react").ForwardRefExoticComponent<JSX.IxMenuAvatar & Omit<import("react").HTMLAttributes<HTMLIxMenuAvatarElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLIxMenuAvatarElement>>;
 export declare const IxMenuAvatarItem: import("react").ForwardRefExoticComponent<JSX.IxMenuAvatarItem & Omit<import("react").HTMLAttributes<HTMLIxMenuAvatarItemElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLIxMenuAvatarItemElement>>;
+export declare const IxMenuCategory: import("react").ForwardRefExoticComponent<JSX.IxMenuCategory & Omit<import("react").HTMLAttributes<HTMLIxMenuCategoryElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLIxMenuCategoryElement>>;
 export declare const IxMenuItem: import("react").ForwardRefExoticComponent<JSX.IxMenuItem & Omit<import("react").HTMLAttributes<HTMLIxMenuItemElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLIxMenuItemElement>>;
 export declare const IxMenuSettings: import("react").ForwardRefExoticComponent<JSX.IxMenuSettings & Omit<import("react").HTMLAttributes<HTMLIxMenuSettingsElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLIxMenuSettingsElement>>;
 export declare const IxMenuSettingsItem: import("react").ForwardRefExoticComponent<JSX.IxMenuSettingsItem & Omit<import("react").HTMLAttributes<HTMLIxMenuSettingsItemElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLIxMenuSettingsItemElement>>;
 export declare const IxMessageBar: import("react").ForwardRefExoticComponent<JSX.IxMessageBar & Omit<import("react").HTMLAttributes<HTMLIxMessageBarElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLIxMessageBarElement>>;
 export declare const IxModal: import("react").ForwardRefExoticComponent<JSX.IxModal & Omit<import("react").HTMLAttributes<HTMLIxModalElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLIxModalElement>>;
-export declare const IxModalContainer: import("react").ForwardRefExoticComponent<JSX.IxModalContainer & Omit<import("react").HTMLAttributes<HTMLIxModalContainerElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLIxModalContainerElement>>;
+export declare const IxModalContent: import("react").ForwardRefExoticComponent<JSX.IxModalContent & Omit<import("react").HTMLAttributes<HTMLIxModalContentElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLIxModalContentElement>>;
 export declare const IxModalExample: import("react").ForwardRefExoticComponent<JSX.IxModalExample & Omit<import("react").HTMLAttributes<HTMLIxModalExampleElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLIxModalExampleElement>>;
+export declare const IxModalFooter: import("react").ForwardRefExoticComponent<JSX.IxModalFooter & Omit<import("react").HTMLAttributes<HTMLIxModalFooterElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLIxModalFooterElement>>;
+export declare const IxModalHeader: import("react").ForwardRefExoticComponent<JSX.IxModalHeader & Omit<import("react").HTMLAttributes<HTMLIxModalHeaderElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLIxModalHeaderElement>>;
 export declare const IxPagination: import("react").ForwardRefExoticComponent<JSX.IxPagination & Omit<import("react").HTMLAttributes<HTMLIxPaginationElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLIxPaginationElement>>;
 export declare const IxPill: import("react").ForwardRefExoticComponent<JSX.IxPill & Omit<import("react").HTMLAttributes<HTMLIxPillElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLIxPillElement>>;
 export declare const IxPushCard: import("react").ForwardRefExoticComponent<JSX.IxPushCard & Omit<import("react").HTMLAttributes<HTMLIxPushCardElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLIxPushCardElement>>;
+export declare const IxRow: import("react").ForwardRefExoticComponent<JSX.IxRow & Omit<import("react").HTMLAttributes<HTMLIxRowElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLIxRowElement>>;
 export declare const IxSelect: import("react").ForwardRefExoticComponent<JSX.IxSelect & Omit<import("react").HTMLAttributes<HTMLIxSelectElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLIxSelectElement>>;
 export declare const IxSelectItem: import("react").ForwardRefExoticComponent<JSX.IxSelectItem & Omit<import("react").HTMLAttributes<HTMLIxSelectItemElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLIxSelectItemElement>>;
 export declare const IxSpinner: import("react").ForwardRefExoticComponent<JSX.IxSpinner & Omit<import("react").HTMLAttributes<HTMLIxSpinnerElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLIxSpinnerElement>>;
@@ -73,7 +80,9 @@ export declare const IxTimePicker: import("react").ForwardRefExoticComponent<JSX
 export declare const IxToast: import("react").ForwardRefExoticComponent<JSX.IxToast & Omit<import("react").HTMLAttributes<HTMLIxToastElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLIxToastElement>>;
 export declare const IxToastContainer: import("react").ForwardRefExoticComponent<JSX.IxToastContainer & Omit<import("react").HTMLAttributes<HTMLIxToastContainerElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLIxToastContainerElement>>;
 export declare const IxToggle: import("react").ForwardRefExoticComponent<JSX.IxToggle & Omit<import("react").HTMLAttributes<HTMLIxToggleElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLIxToggleElement>>;
+export declare const IxToggleButton: import("react").ForwardRefExoticComponent<JSX.IxToggleButton & Omit<import("react").HTMLAttributes<HTMLIxToggleButtonElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLIxToggleButtonElement>>;
 export declare const IxTooltip: import("react").ForwardRefExoticComponent<JSX.IxTooltip & Omit<import("react").HTMLAttributes<HTMLIxTooltipElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLIxTooltipElement>>;
+export declare const IxTypography: import("react").ForwardRefExoticComponent<JSX.IxTypography & Omit<import("react").HTMLAttributes<HTMLIxTypographyElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLIxTypographyElement>>;
 export declare const IxUpload: import("react").ForwardRefExoticComponent<JSX.IxUpload & Omit<import("react").HTMLAttributes<HTMLIxUploadElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLIxUploadElement>>;
 export declare const IxValidationTooltip: import("react").ForwardRefExoticComponent<JSX.IxValidationTooltip & Omit<import("react").HTMLAttributes<HTMLIxValidationTooltipElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLIxValidationTooltipElement>>;
 export declare const IxWorkflowStep: import("react").ForwardRefExoticComponent<JSX.IxWorkflowStep & Omit<import("react").HTMLAttributes<HTMLIxWorkflowStepElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLIxWorkflowStepElement>>;

package/dist/types/context/application-context.d.ts

@@ -0,0 +1,7 @@
+import React, { PropsWithChildren } from 'react';
+export declare type IxApplicationContextProps = PropsWithChildren;
+export declare class IxApplicationContext extends React.Component<IxApplicationContextProps> {
+    private delegate;
+    constructor(props: IxApplicationContextProps);
+    render(): JSX.Element;
+}

package/dist/types/context/context.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import { ReactFrameworkDelegate } from '../delegate';
+export declare const IxContext: React.Context<{
+    delegate: ReactFrameworkDelegate;
+} | null>;

package/dist/types/context.d.ts

@@ -0,0 +1 @@
+export * from './context/application-context';

package/dist/types/delegate.d.ts

@@ -0,0 +1,8 @@
+import { FrameworkDelegate } from '@siemens/ix';
+export declare class ReactFrameworkDelegate implements FrameworkDelegate {
+    attachViewToPortal?: (id: string, view: any) => Promise<Element>;
+    removeViewFromPortal?: (id: string) => void;
+    attachView(view: any): Promise<any>;
+    removeView(view: any): Promise<void>;
+}
+export declare const reactFrameworkDelegate: ReactFrameworkDelegate;

package/dist/types/index.d.ts

@@ -1,4 +1,5 @@
 export * from './components';
+export * from './context';
 export * from './modal';
 export * from './toast';
 export * from './tree';

package/dist/types/modal/index.d.ts

@@ -2,6 +2,6 @@
 import { ModalConfig as IxModalConfig } from '@siemens/ix';
 export * from './modal';
 export declare type ModalConfig = {
-    content: React.ReactNode;
+    content: React.ReactNode | string;
 };
-export declare function showModal<TReason = any>(config: Omit<IxModalConfig, 'content'> & ModalConfig): Promise<import("@siemens/ix").ModalInstance<TReason>>;
+export declare function showModal(config: Omit<IxModalConfig, 'content'> & ModalConfig): Promise<import("@siemens/ix").ModalInstance<any>>;

package/dist/types/modal/modal.d.ts

@@ -5,8 +5,5 @@ export interface ModalRef {
     modalElement: HTMLIxModalElement | null;
 }
 export declare const Modal: React.ForwardRefExoticComponent<{
-    onClose?: (<T = any>(result: T) => void) | undefined;
-    onDismiss?: (<T_1 = any>(result?: T_1 | undefined) => void) | undefined;
-    htmlElement?: HTMLElement | undefined;
-    children: React.ReactNode;
+    children?: React.ReactNode;
 } & React.RefAttributes<ModalRef>>;

package/dist/types/modal/portal.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+import { ReactFrameworkDelegate } from 'src/delegate';
+export declare const PORTAL_ID = "ix-portal";
+export declare const IxOverlay: (props: {
+    delegate: ReactFrameworkDelegate;
+}) => JSX.Element | null;

package/package.json

@@ -7,7 +7,7 @@
     "url": "https://github.com/siemens/ix",
     "directory": "packages/react"
   },
-  "version": "1.6.3",
+  "version": "2.0.0-beta.1",
   "description": "Siemens iX for React",
   "main": "dist/index.js",
   "module": "dist/index.esm.js",
@@ -28,7 +28,7 @@
   "license": "MIT",
   "devDependencies": {
     "@rollup/plugin-typescript": "^8.4.0",
-    "@siemens/ix": "~1.6.3",
+    "@siemens/ix": "~2.0.0-beta.1",
     "@types/estree": "~0.0.51",
     "@types/react": "~18.0.15",
     "@types/react-dom": "~18.0.6",
@@ -51,7 +51,7 @@
     "react-dom": ">=17.0.2"
   },
   "dependencies": {
-    "@siemens/ix": "~1.6.3",
+    "@siemens/ix": "~2.0.0-beta.1",
     "@siemens/ix-icons": "^1.1.0"
   }
 }