@siemens/ix-react 1.1.0-beta.2 → 1.1.0-beta.4

package/dist/index.esm.js

@@ -0,0 +1,399 @@
+import React, { createElement, useRef, useImperativeHandle, useCallback } from 'react';
+import 'react-dom';
+import { defineCustomElements } from '@siemens/ix/loader';
+import { closeModal, dismissModal, modal, toast } from '@siemens/ix';
+import ReactDOMClient from 'react-dom/client';
+
+/******************************************************************************
+Copyright (c) Microsoft Corporation.
+
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+PERFORMANCE OF THIS SOFTWARE.
+***************************************************************************** */
+
+function __rest(s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+}
+
+const dashToPascalCase = (str) => str
+    .toLowerCase()
+    .split('-')
+    .map((segment) => segment.charAt(0).toUpperCase() + segment.slice(1))
+    .join('');
+const camelToDashCase = (str) => str.replace(/([A-Z])/g, (m) => `-${m[0].toLowerCase()}`);
+
+const attachProps = (node, newProps, oldProps = {}) => {
+    // some test frameworks don't render DOM elements, so we test here to make sure we are dealing with DOM first
+    if (node instanceof Element) {
+        // add any classes in className to the class list
+        const className = getClassName(node.classList, newProps, oldProps);
+        if (className !== '') {
+            node.className = className;
+        }
+        Object.keys(newProps).forEach((name) => {
+            if (name === 'children' ||
+                name === 'style' ||
+                name === 'ref' ||
+                name === 'class' ||
+                name === 'className' ||
+                name === 'forwardedRef') {
+                return;
+            }
+            if (name.indexOf('on') === 0 && name[2] === name[2].toUpperCase()) {
+                const eventName = name.substring(2);
+                const eventNameLc = eventName[0].toLowerCase() + eventName.substring(1);
+                if (!isCoveredByReact(eventNameLc)) {
+                    syncEvent(node, eventNameLc, newProps[name]);
+                }
+            }
+            else {
+                node[name] = newProps[name];
+                const propType = typeof newProps[name];
+                if (propType === 'string') {
+                    node.setAttribute(camelToDashCase(name), newProps[name]);
+                }
+            }
+        });
+    }
+};
+const getClassName = (classList, newProps, oldProps) => {
+    const newClassProp = newProps.className || newProps.class;
+    const oldClassProp = oldProps.className || oldProps.class;
+    // map the classes to Maps for performance
+    const currentClasses = arrayToMap(classList);
+    const incomingPropClasses = arrayToMap(newClassProp ? newClassProp.split(' ') : []);
+    const oldPropClasses = arrayToMap(oldClassProp ? oldClassProp.split(' ') : []);
+    const finalClassNames = [];
+    // loop through each of the current classes on the component
+    // to see if it should be a part of the classNames added
+    currentClasses.forEach((currentClass) => {
+        if (incomingPropClasses.has(currentClass)) {
+            // add it as its already included in classnames coming in from newProps
+            finalClassNames.push(currentClass);
+            incomingPropClasses.delete(currentClass);
+        }
+        else if (!oldPropClasses.has(currentClass)) {
+            // add it as it has NOT been removed by user
+            finalClassNames.push(currentClass);
+        }
+    });
+    incomingPropClasses.forEach((s) => finalClassNames.push(s));
+    return finalClassNames.join(' ');
+};
+/**
+ * Checks if an event is supported in the current execution environment.
+ * @license Modernizr 3.0.0pre (Custom Build) | MIT
+ */
+const isCoveredByReact = (eventNameSuffix) => {
+    if (typeof document === 'undefined') {
+        return true;
+    }
+    else {
+        const eventName = 'on' + eventNameSuffix;
+        let isSupported = eventName in document;
+        if (!isSupported) {
+            const element = document.createElement('div');
+            element.setAttribute(eventName, 'return;');
+            isSupported = typeof element[eventName] === 'function';
+        }
+        return isSupported;
+    }
+};
+const syncEvent = (node, eventName, newEventHandler) => {
+    const eventStore = node.__events || (node.__events = {});
+    const oldEventHandler = eventStore[eventName];
+    // Remove old listener so they don't double up.
+    if (oldEventHandler) {
+        node.removeEventListener(eventName, oldEventHandler);
+    }
+    // Bind new listener.
+    node.addEventListener(eventName, (eventStore[eventName] = function handler(e) {
+        if (newEventHandler) {
+            newEventHandler.call(this, e);
+        }
+    }));
+};
+const arrayToMap = (arr) => {
+    const map = new Map();
+    arr.forEach((s) => map.set(s, s));
+    return map;
+};
+
+const setRef = (ref, value) => {
+    if (typeof ref === 'function') {
+        ref(value);
+    }
+    else if (ref != null) {
+        // Cast as a MutableRef so we can assign current
+        ref.current = value;
+    }
+};
+const mergeRefs = (...refs) => {
+    return (value) => {
+        refs.forEach(ref => {
+            setRef(ref, value);
+        });
+    };
+};
+const createForwardRef = (ReactComponent, displayName) => {
+    const forwardRef = (props, ref) => {
+        return React.createElement(ReactComponent, Object.assign({}, props, { forwardedRef: ref }));
+    };
+    forwardRef.displayName = displayName;
+    return React.forwardRef(forwardRef);
+};
+
+const createReactComponent = (tagName, ReactComponentContext, manipulatePropsFunction, defineCustomElement) => {
+    if (defineCustomElement !== undefined) {
+        defineCustomElement();
+    }
+    const displayName = dashToPascalCase(tagName);
+    const ReactComponent = class extends React.Component {
+        constructor(props) {
+            super(props);
+            this.setComponentElRef = (element) => {
+                this.componentEl = element;
+            };
+        }
+        componentDidMount() {
+            this.componentDidUpdate(this.props);
+        }
+        componentDidUpdate(prevProps) {
+            attachProps(this.componentEl, this.props, prevProps);
+        }
+        render() {
+            const _a = this.props, { children, forwardedRef, style, className, ref } = _a, cProps = __rest(_a, ["children", "forwardedRef", "style", "className", "ref"]);
+            let propsToPass = Object.keys(cProps).reduce((acc, name) => {
+                const value = cProps[name];
+                if (name.indexOf('on') === 0 && name[2] === name[2].toUpperCase()) {
+                    const eventName = name.substring(2).toLowerCase();
+                    if (typeof document !== 'undefined' && isCoveredByReact(eventName)) {
+                        acc[name] = value;
+                    }
+                }
+                else {
+                    // we should only render strings, booleans, and numbers as attrs in html.
+                    // objects, functions, arrays etc get synced via properties on mount.
+                    const type = typeof value;
+                    if (type === 'string' || type === 'boolean' || type === 'number') {
+                        acc[camelToDashCase(name)] = value;
+                    }
+                }
+                return acc;
+            }, {});
+            if (manipulatePropsFunction) {
+                propsToPass = manipulatePropsFunction(this.props, propsToPass);
+            }
+            const newProps = Object.assign(Object.assign({}, propsToPass), { ref: mergeRefs(forwardedRef, this.setComponentElRef), style });
+            /**
+             * We use createElement here instead of
+             * React.createElement to work around a
+             * bug in Vite (https://github.com/vitejs/vite/issues/6104).
+             * React.createElement causes all elements to be rendered
+             * as <tagname> instead of the actual Web Component.
+             */
+            return createElement(tagName, newProps, children);
+        }
+        static get displayName() {
+            return displayName;
+        }
+    };
+    // If context was passed to createReactComponent then conditionally add it to the Component Class
+    if (ReactComponentContext) {
+        ReactComponent.contextType = ReactComponentContext;
+    }
+    return createForwardRef(ReactComponent, displayName);
+};
+
+/* eslint-disable */
+defineCustomElements();
+const IxAnimatedTab = /*@__PURE__*/ createReactComponent('ix-animated-tab');
+const IxAnimatedTabs = /*@__PURE__*/ createReactComponent('ix-animated-tabs');
+const IxApplicationHeader = /*@__PURE__*/ createReactComponent('ix-application-header');
+const IxBasicNavigation = /*@__PURE__*/ createReactComponent('ix-basic-navigation');
+const IxBlind = /*@__PURE__*/ createReactComponent('ix-blind');
+const IxBreadcrumb = /*@__PURE__*/ createReactComponent('ix-breadcrumb');
+const IxBreadcrumbItem = /*@__PURE__*/ createReactComponent('ix-breadcrumb-item');
+const IxButton = /*@__PURE__*/ createReactComponent('ix-button');
+const IxCategoryFilter = /*@__PURE__*/ createReactComponent('ix-category-filter');
+const IxChip = /*@__PURE__*/ createReactComponent('ix-chip');
+const IxCounterPill = /*@__PURE__*/ createReactComponent('ix-counter-pill');
+const IxDatePicker = /*@__PURE__*/ createReactComponent('ix-date-picker');
+const IxDateTimeCard = /*@__PURE__*/ createReactComponent('ix-date-time-card');
+const IxDatetimePicker = /*@__PURE__*/ createReactComponent('ix-datetime-picker');
+const IxDrawer = /*@__PURE__*/ createReactComponent('ix-drawer');
+const IxDropdown = /*@__PURE__*/ createReactComponent('ix-dropdown');
+const IxDropdownItem = /*@__PURE__*/ createReactComponent('ix-dropdown-item');
+const IxEventList = /*@__PURE__*/ createReactComponent('ix-event-list');
+const IxEventListItem = /*@__PURE__*/ createReactComponent('ix-event-list-item');
+const IxExpandingSearch = /*@__PURE__*/ createReactComponent('ix-expanding-search');
+const IxFilterChip = /*@__PURE__*/ createReactComponent('ix-filter-chip');
+const IxFlipTile = /*@__PURE__*/ createReactComponent('ix-flip-tile');
+const IxFlipTileContent = /*@__PURE__*/ createReactComponent('ix-flip-tile-content');
+const IxGroup = /*@__PURE__*/ createReactComponent('ix-group');
+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 IxInputGroup = /*@__PURE__*/ createReactComponent('ix-input-group');
+const IxKpi = /*@__PURE__*/ createReactComponent('ix-kpi');
+const IxMapNavigation = /*@__PURE__*/ createReactComponent('ix-map-navigation');
+const IxMapNavigationOverlay = /*@__PURE__*/ createReactComponent('ix-map-navigation-overlay');
+const IxMenu = /*@__PURE__*/ createReactComponent('ix-menu');
+const IxMenuAbout = /*@__PURE__*/ createReactComponent('ix-menu-about');
+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 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 IxModalExample = /*@__PURE__*/ createReactComponent('ix-modal-example');
+const IxPill = /*@__PURE__*/ createReactComponent('ix-pill');
+const IxSelect = /*@__PURE__*/ createReactComponent('ix-select');
+const IxSelectItem = /*@__PURE__*/ createReactComponent('ix-select-item');
+const IxSpinner = /*@__PURE__*/ createReactComponent('ix-spinner');
+const IxSplitButton = /*@__PURE__*/ createReactComponent('ix-split-button');
+const IxSplitButtonItem = /*@__PURE__*/ createReactComponent('ix-split-button-item');
+const IxTabItem = /*@__PURE__*/ createReactComponent('ix-tab-item');
+const IxTabs = /*@__PURE__*/ createReactComponent('ix-tabs');
+const IxTile = /*@__PURE__*/ createReactComponent('ix-tile');
+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 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');
+
+/*
+ * SPDX-FileCopyrightText: 2022 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 modalRef = useRef(null);
+    useImperativeHandle(ref, () => ({
+        close: (result) => {
+            closeModal(modalRef.current, result);
+        },
+        dismiss: (result) => {
+            dismissModal(modalRef.current, result);
+        },
+    }));
+    return React.createElement("div", { ref: modalRef }, props.children);
+});
+
+/*
+ * SPDX-FileCopyrightText: 2022 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.
+ */
+async function showModal(config) {
+    if (typeof config.content === 'string') {
+        return modal(config);
+    }
+    const container = document.createElement('DIV');
+    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;
+}
+
+/*
+ * SPDX-FileCopyrightText: 2022 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.
+ */
+async function showToast(config) {
+    if (typeof config.message === 'string') {
+        const toastInstance = await toast(config);
+        return toastInstance;
+    }
+    const node = config.message;
+    const toastContainer = document.createElement('DIV');
+    const root = ReactDOMClient.createRoot(toastContainer);
+    root.render(node);
+    const toastInstance = await toast(Object.assign(Object.assign({}, config), { message: toastContainer }));
+    toastInstance.onClose.once(() => {
+        root.unmount();
+    });
+    return toastInstance;
+}
+
+/*
+ * SPDX-FileCopyrightText: 2022 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 InternalIxTree = /*@__PURE__*/ createReactComponent('ix-tree');
+const IxTree = (props) => {
+    const cachedRootNodes = useRef(new Map());
+    const renderItem = useCallback((_, data, __, context, update) => {
+        const treeItem = document.createElement('ix-tree-item');
+        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);
+        cachedRootNodes.current.set(treeItem, rootNode);
+        return treeItem;
+    }, []);
+    return (React.createElement(InternalIxTree, Object.assign({}, props, { renderItem: props.renderItem ? renderItem : undefined, onNodeRemoved: (removed) => {
+            const { detail } = removed;
+            detail.forEach((removedItemElement) => {
+                var _a;
+                if (cachedRootNodes.current.has(removedItemElement)) {
+                    (_a = cachedRootNodes.current.get(removedItemElement)) === null || _a === void 0 ? void 0 : _a.unmount();
+                    cachedRootNodes.current.delete(removedItemElement);
+                }
+            });
+        } })));
+};
+
+export { IxAnimatedTab, IxAnimatedTabs, IxApplicationHeader, IxBasicNavigation, IxBlind, IxBreadcrumb, IxBreadcrumbItem, IxButton, IxCategoryFilter, IxChip, IxCounterPill, IxDatePicker, IxDateTimeCard, IxDatetimePicker, IxDrawer, IxDropdown, IxDropdownItem, IxEventList, IxEventListItem, IxExpandingSearch, IxFilterChip, IxFlipTile, IxFlipTileContent, IxGroup, IxGroupDropdownItem, IxGroupItem, IxIcon, IxIconButton, IxInputGroup, IxKpi, IxMapNavigation, IxMapNavigationOverlay, IxMenu, IxMenuAbout, IxMenuAboutItem, IxMenuAboutNews, IxMenuAvatar, IxMenuAvatarItem, IxMenuItem, IxMenuSettings, IxMenuSettingsItem, IxMessageBar, IxModal, IxModalContainer, IxModalExample, IxPill, IxSelect, IxSelectItem, IxSpinner, IxSplitButton, IxSplitButtonItem, IxTabItem, IxTabs, IxTile, IxTimePicker, IxToast, IxToastContainer, IxToggle, IxTree, IxUpload, IxValidationTooltip, IxWorkflowStep, IxWorkflowSteps, Modal, showModal, showToast };

package/dist/index.js

@@ -0,0 +1,473 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const React = require('react');
+require('react-dom');
+const loader = require('@siemens/ix/loader');
+const ix = require('@siemens/ix');
+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 ReactDOMClient__default = /*#__PURE__*/_interopDefaultLegacy(ReactDOMClient);
+
+/******************************************************************************
+Copyright (c) Microsoft Corporation.
+
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+PERFORMANCE OF THIS SOFTWARE.
+***************************************************************************** */
+
+function __rest(s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+}
+
+const dashToPascalCase = (str) => str
+    .toLowerCase()
+    .split('-')
+    .map((segment) => segment.charAt(0).toUpperCase() + segment.slice(1))
+    .join('');
+const camelToDashCase = (str) => str.replace(/([A-Z])/g, (m) => `-${m[0].toLowerCase()}`);
+
+const attachProps = (node, newProps, oldProps = {}) => {
+    // some test frameworks don't render DOM elements, so we test here to make sure we are dealing with DOM first
+    if (node instanceof Element) {
+        // add any classes in className to the class list
+        const className = getClassName(node.classList, newProps, oldProps);
+        if (className !== '') {
+            node.className = className;
+        }
+        Object.keys(newProps).forEach((name) => {
+            if (name === 'children' ||
+                name === 'style' ||
+                name === 'ref' ||
+                name === 'class' ||
+                name === 'className' ||
+                name === 'forwardedRef') {
+                return;
+            }
+            if (name.indexOf('on') === 0 && name[2] === name[2].toUpperCase()) {
+                const eventName = name.substring(2);
+                const eventNameLc = eventName[0].toLowerCase() + eventName.substring(1);
+                if (!isCoveredByReact(eventNameLc)) {
+                    syncEvent(node, eventNameLc, newProps[name]);
+                }
+            }
+            else {
+                node[name] = newProps[name];
+                const propType = typeof newProps[name];
+                if (propType === 'string') {
+                    node.setAttribute(camelToDashCase(name), newProps[name]);
+                }
+            }
+        });
+    }
+};
+const getClassName = (classList, newProps, oldProps) => {
+    const newClassProp = newProps.className || newProps.class;
+    const oldClassProp = oldProps.className || oldProps.class;
+    // map the classes to Maps for performance
+    const currentClasses = arrayToMap(classList);
+    const incomingPropClasses = arrayToMap(newClassProp ? newClassProp.split(' ') : []);
+    const oldPropClasses = arrayToMap(oldClassProp ? oldClassProp.split(' ') : []);
+    const finalClassNames = [];
+    // loop through each of the current classes on the component
+    // to see if it should be a part of the classNames added
+    currentClasses.forEach((currentClass) => {
+        if (incomingPropClasses.has(currentClass)) {
+            // add it as its already included in classnames coming in from newProps
+            finalClassNames.push(currentClass);
+            incomingPropClasses.delete(currentClass);
+        }
+        else if (!oldPropClasses.has(currentClass)) {
+            // add it as it has NOT been removed by user
+            finalClassNames.push(currentClass);
+        }
+    });
+    incomingPropClasses.forEach((s) => finalClassNames.push(s));
+    return finalClassNames.join(' ');
+};
+/**
+ * Checks if an event is supported in the current execution environment.
+ * @license Modernizr 3.0.0pre (Custom Build) | MIT
+ */
+const isCoveredByReact = (eventNameSuffix) => {
+    if (typeof document === 'undefined') {
+        return true;
+    }
+    else {
+        const eventName = 'on' + eventNameSuffix;
+        let isSupported = eventName in document;
+        if (!isSupported) {
+            const element = document.createElement('div');
+            element.setAttribute(eventName, 'return;');
+            isSupported = typeof element[eventName] === 'function';
+        }
+        return isSupported;
+    }
+};
+const syncEvent = (node, eventName, newEventHandler) => {
+    const eventStore = node.__events || (node.__events = {});
+    const oldEventHandler = eventStore[eventName];
+    // Remove old listener so they don't double up.
+    if (oldEventHandler) {
+        node.removeEventListener(eventName, oldEventHandler);
+    }
+    // Bind new listener.
+    node.addEventListener(eventName, (eventStore[eventName] = function handler(e) {
+        if (newEventHandler) {
+            newEventHandler.call(this, e);
+        }
+    }));
+};
+const arrayToMap = (arr) => {
+    const map = new Map();
+    arr.forEach((s) => map.set(s, s));
+    return map;
+};
+
+const setRef = (ref, value) => {
+    if (typeof ref === 'function') {
+        ref(value);
+    }
+    else if (ref != null) {
+        // Cast as a MutableRef so we can assign current
+        ref.current = value;
+    }
+};
+const mergeRefs = (...refs) => {
+    return (value) => {
+        refs.forEach(ref => {
+            setRef(ref, value);
+        });
+    };
+};
+const createForwardRef = (ReactComponent, displayName) => {
+    const forwardRef = (props, ref) => {
+        return React__default["default"].createElement(ReactComponent, Object.assign({}, props, { forwardedRef: ref }));
+    };
+    forwardRef.displayName = displayName;
+    return React__default["default"].forwardRef(forwardRef);
+};
+
+const createReactComponent = (tagName, ReactComponentContext, manipulatePropsFunction, defineCustomElement) => {
+    if (defineCustomElement !== undefined) {
+        defineCustomElement();
+    }
+    const displayName = dashToPascalCase(tagName);
+    const ReactComponent = class extends React__default["default"].Component {
+        constructor(props) {
+            super(props);
+            this.setComponentElRef = (element) => {
+                this.componentEl = element;
+            };
+        }
+        componentDidMount() {
+            this.componentDidUpdate(this.props);
+        }
+        componentDidUpdate(prevProps) {
+            attachProps(this.componentEl, this.props, prevProps);
+        }
+        render() {
+            const _a = this.props, { children, forwardedRef, style, className, ref } = _a, cProps = __rest(_a, ["children", "forwardedRef", "style", "className", "ref"]);
+            let propsToPass = Object.keys(cProps).reduce((acc, name) => {
+                const value = cProps[name];
+                if (name.indexOf('on') === 0 && name[2] === name[2].toUpperCase()) {
+                    const eventName = name.substring(2).toLowerCase();
+                    if (typeof document !== 'undefined' && isCoveredByReact(eventName)) {
+                        acc[name] = value;
+                    }
+                }
+                else {
+                    // we should only render strings, booleans, and numbers as attrs in html.
+                    // objects, functions, arrays etc get synced via properties on mount.
+                    const type = typeof value;
+                    if (type === 'string' || type === 'boolean' || type === 'number') {
+                        acc[camelToDashCase(name)] = value;
+                    }
+                }
+                return acc;
+            }, {});
+            if (manipulatePropsFunction) {
+                propsToPass = manipulatePropsFunction(this.props, propsToPass);
+            }
+            const newProps = Object.assign(Object.assign({}, propsToPass), { ref: mergeRefs(forwardedRef, this.setComponentElRef), style });
+            /**
+             * We use createElement here instead of
+             * React.createElement to work around a
+             * bug in Vite (https://github.com/vitejs/vite/issues/6104).
+             * React.createElement causes all elements to be rendered
+             * as <tagname> instead of the actual Web Component.
+             */
+            return React.createElement(tagName, newProps, children);
+        }
+        static get displayName() {
+            return displayName;
+        }
+    };
+    // If context was passed to createReactComponent then conditionally add it to the Component Class
+    if (ReactComponentContext) {
+        ReactComponent.contextType = ReactComponentContext;
+    }
+    return createForwardRef(ReactComponent, displayName);
+};
+
+/* eslint-disable */
+loader.defineCustomElements();
+const IxAnimatedTab = /*@__PURE__*/ createReactComponent('ix-animated-tab');
+const IxAnimatedTabs = /*@__PURE__*/ createReactComponent('ix-animated-tabs');
+const IxApplicationHeader = /*@__PURE__*/ createReactComponent('ix-application-header');
+const IxBasicNavigation = /*@__PURE__*/ createReactComponent('ix-basic-navigation');
+const IxBlind = /*@__PURE__*/ createReactComponent('ix-blind');
+const IxBreadcrumb = /*@__PURE__*/ createReactComponent('ix-breadcrumb');
+const IxBreadcrumbItem = /*@__PURE__*/ createReactComponent('ix-breadcrumb-item');
+const IxButton = /*@__PURE__*/ createReactComponent('ix-button');
+const IxCategoryFilter = /*@__PURE__*/ createReactComponent('ix-category-filter');
+const IxChip = /*@__PURE__*/ createReactComponent('ix-chip');
+const IxCounterPill = /*@__PURE__*/ createReactComponent('ix-counter-pill');
+const IxDatePicker = /*@__PURE__*/ createReactComponent('ix-date-picker');
+const IxDateTimeCard = /*@__PURE__*/ createReactComponent('ix-date-time-card');
+const IxDatetimePicker = /*@__PURE__*/ createReactComponent('ix-datetime-picker');
+const IxDrawer = /*@__PURE__*/ createReactComponent('ix-drawer');
+const IxDropdown = /*@__PURE__*/ createReactComponent('ix-dropdown');
+const IxDropdownItem = /*@__PURE__*/ createReactComponent('ix-dropdown-item');
+const IxEventList = /*@__PURE__*/ createReactComponent('ix-event-list');
+const IxEventListItem = /*@__PURE__*/ createReactComponent('ix-event-list-item');
+const IxExpandingSearch = /*@__PURE__*/ createReactComponent('ix-expanding-search');
+const IxFilterChip = /*@__PURE__*/ createReactComponent('ix-filter-chip');
+const IxFlipTile = /*@__PURE__*/ createReactComponent('ix-flip-tile');
+const IxFlipTileContent = /*@__PURE__*/ createReactComponent('ix-flip-tile-content');
+const IxGroup = /*@__PURE__*/ createReactComponent('ix-group');
+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 IxInputGroup = /*@__PURE__*/ createReactComponent('ix-input-group');
+const IxKpi = /*@__PURE__*/ createReactComponent('ix-kpi');
+const IxMapNavigation = /*@__PURE__*/ createReactComponent('ix-map-navigation');
+const IxMapNavigationOverlay = /*@__PURE__*/ createReactComponent('ix-map-navigation-overlay');
+const IxMenu = /*@__PURE__*/ createReactComponent('ix-menu');
+const IxMenuAbout = /*@__PURE__*/ createReactComponent('ix-menu-about');
+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 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 IxModalExample = /*@__PURE__*/ createReactComponent('ix-modal-example');
+const IxPill = /*@__PURE__*/ createReactComponent('ix-pill');
+const IxSelect = /*@__PURE__*/ createReactComponent('ix-select');
+const IxSelectItem = /*@__PURE__*/ createReactComponent('ix-select-item');
+const IxSpinner = /*@__PURE__*/ createReactComponent('ix-spinner');
+const IxSplitButton = /*@__PURE__*/ createReactComponent('ix-split-button');
+const IxSplitButtonItem = /*@__PURE__*/ createReactComponent('ix-split-button-item');
+const IxTabItem = /*@__PURE__*/ createReactComponent('ix-tab-item');
+const IxTabs = /*@__PURE__*/ createReactComponent('ix-tabs');
+const IxTile = /*@__PURE__*/ createReactComponent('ix-tile');
+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 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');
+
+/*
+ * SPDX-FileCopyrightText: 2022 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 modalRef = React.useRef(null);
+    React.useImperativeHandle(ref, () => ({
+        close: (result) => {
+            ix.closeModal(modalRef.current, result);
+        },
+        dismiss: (result) => {
+            ix.dismissModal(modalRef.current, result);
+        },
+    }));
+    return React__default["default"].createElement("div", { ref: modalRef }, props.children);
+});
+
+/*
+ * SPDX-FileCopyrightText: 2022 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.
+ */
+async function showModal(config) {
+    if (typeof config.content === 'string') {
+        return ix.modal(config);
+    }
+    const container = document.createElement('DIV');
+    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;
+}
+
+/*
+ * SPDX-FileCopyrightText: 2022 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.
+ */
+async function showToast(config) {
+    if (typeof config.message === 'string') {
+        const toastInstance = await ix.toast(config);
+        return toastInstance;
+    }
+    const node = config.message;
+    const toastContainer = document.createElement('DIV');
+    const root = ReactDOMClient__default["default"].createRoot(toastContainer);
+    root.render(node);
+    const toastInstance = await ix.toast(Object.assign(Object.assign({}, config), { message: toastContainer }));
+    toastInstance.onClose.once(() => {
+        root.unmount();
+    });
+    return toastInstance;
+}
+
+/*
+ * SPDX-FileCopyrightText: 2022 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 InternalIxTree = /*@__PURE__*/ createReactComponent('ix-tree');
+const IxTree = (props) => {
+    const cachedRootNodes = React.useRef(new Map());
+    const renderItem = React.useCallback((_, data, __, context, update) => {
+        const treeItem = document.createElement('ix-tree-item');
+        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__default["default"].createRoot(container);
+        if (props.renderItem) {
+            rootNode.render(props.renderItem(data.data));
+        }
+        treeItem.appendChild(container);
+        cachedRootNodes.current.set(treeItem, rootNode);
+        return treeItem;
+    }, []);
+    return (React__default["default"].createElement(InternalIxTree, Object.assign({}, props, { renderItem: props.renderItem ? renderItem : undefined, onNodeRemoved: (removed) => {
+            const { detail } = removed;
+            detail.forEach((removedItemElement) => {
+                var _a;
+                if (cachedRootNodes.current.has(removedItemElement)) {
+                    (_a = cachedRootNodes.current.get(removedItemElement)) === null || _a === void 0 ? void 0 : _a.unmount();
+                    cachedRootNodes.current.delete(removedItemElement);
+                }
+            });
+        } })));
+};
+
+exports.IxAnimatedTab = IxAnimatedTab;
+exports.IxAnimatedTabs = IxAnimatedTabs;
+exports.IxApplicationHeader = IxApplicationHeader;
+exports.IxBasicNavigation = IxBasicNavigation;
+exports.IxBlind = IxBlind;
+exports.IxBreadcrumb = IxBreadcrumb;
+exports.IxBreadcrumbItem = IxBreadcrumbItem;
+exports.IxButton = IxButton;
+exports.IxCategoryFilter = IxCategoryFilter;
+exports.IxChip = IxChip;
+exports.IxCounterPill = IxCounterPill;
+exports.IxDatePicker = IxDatePicker;
+exports.IxDateTimeCard = IxDateTimeCard;
+exports.IxDatetimePicker = IxDatetimePicker;
+exports.IxDrawer = IxDrawer;
+exports.IxDropdown = IxDropdown;
+exports.IxDropdownItem = IxDropdownItem;
+exports.IxEventList = IxEventList;
+exports.IxEventListItem = IxEventListItem;
+exports.IxExpandingSearch = IxExpandingSearch;
+exports.IxFilterChip = IxFilterChip;
+exports.IxFlipTile = IxFlipTile;
+exports.IxFlipTileContent = IxFlipTileContent;
+exports.IxGroup = IxGroup;
+exports.IxGroupDropdownItem = IxGroupDropdownItem;
+exports.IxGroupItem = IxGroupItem;
+exports.IxIcon = IxIcon;
+exports.IxIconButton = IxIconButton;
+exports.IxInputGroup = IxInputGroup;
+exports.IxKpi = IxKpi;
+exports.IxMapNavigation = IxMapNavigation;
+exports.IxMapNavigationOverlay = IxMapNavigationOverlay;
+exports.IxMenu = IxMenu;
+exports.IxMenuAbout = IxMenuAbout;
+exports.IxMenuAboutItem = IxMenuAboutItem;
+exports.IxMenuAboutNews = IxMenuAboutNews;
+exports.IxMenuAvatar = IxMenuAvatar;
+exports.IxMenuAvatarItem = IxMenuAvatarItem;
+exports.IxMenuItem = IxMenuItem;
+exports.IxMenuSettings = IxMenuSettings;
+exports.IxMenuSettingsItem = IxMenuSettingsItem;
+exports.IxMessageBar = IxMessageBar;
+exports.IxModal = IxModal;
+exports.IxModalContainer = IxModalContainer;
+exports.IxModalExample = IxModalExample;
+exports.IxPill = IxPill;
+exports.IxSelect = IxSelect;
+exports.IxSelectItem = IxSelectItem;
+exports.IxSpinner = IxSpinner;
+exports.IxSplitButton = IxSplitButton;
+exports.IxSplitButtonItem = IxSplitButtonItem;
+exports.IxTabItem = IxTabItem;
+exports.IxTabs = IxTabs;
+exports.IxTile = IxTile;
+exports.IxTimePicker = IxTimePicker;
+exports.IxToast = IxToast;
+exports.IxToastContainer = IxToastContainer;
+exports.IxToggle = IxToggle;
+exports.IxTree = IxTree;
+exports.IxUpload = IxUpload;
+exports.IxValidationTooltip = IxValidationTooltip;
+exports.IxWorkflowStep = IxWorkflowStep;
+exports.IxWorkflowSteps = IxWorkflowSteps;
+exports.Modal = Modal;
+exports.showModal = showModal;
+exports.showToast = showToast;

package/dist/types/components.d.ts

@@ -0,0 +1,64 @@
+/// <reference types="react" />
+import type { JSX } from '@siemens/ix';
+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 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>>;
+export declare const IxBreadcrumbItem: import("react").ForwardRefExoticComponent<JSX.IxBreadcrumbItem & Omit<import("react").HTMLAttributes<HTMLIxBreadcrumbItemElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLIxBreadcrumbItemElement>>;
+export declare const IxButton: import("react").ForwardRefExoticComponent<JSX.IxButton & Omit<import("react").HTMLAttributes<HTMLIxButtonElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLIxButtonElement>>;
+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 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 IxDateTimeCard: import("react").ForwardRefExoticComponent<JSX.IxDateTimeCard & Omit<import("react").HTMLAttributes<HTMLIxDateTimeCardElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLIxDateTimeCardElement>>;
+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 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 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 IxEventList: import("react").ForwardRefExoticComponent<JSX.IxEventList & Omit<import("react").HTMLAttributes<HTMLIxEventListElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLIxEventListElement>>;
+export declare const IxEventListItem: import("react").ForwardRefExoticComponent<JSX.IxEventListItem & Omit<import("react").HTMLAttributes<HTMLIxEventListItemElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLIxEventListItemElement>>;
+export declare const IxExpandingSearch: import("react").ForwardRefExoticComponent<JSX.IxExpandingSearch & Omit<import("react").HTMLAttributes<HTMLIxExpandingSearchElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLIxExpandingSearchElement>>;
+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 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 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<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 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 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 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>>;
+export declare const IxMenuAbout: import("react").ForwardRefExoticComponent<JSX.IxMenuAbout & Omit<import("react").HTMLAttributes<HTMLIxMenuAboutElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLIxMenuAboutElement>>;
+export declare const IxMenuAboutItem: import("react").ForwardRefExoticComponent<JSX.IxMenuAboutItem & Omit<import("react").HTMLAttributes<HTMLIxMenuAboutItemElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLIxMenuAboutItemElement>>;
+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 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 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 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 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>>;
+export declare const IxSplitButton: import("react").ForwardRefExoticComponent<JSX.IxSplitButton & Omit<import("react").HTMLAttributes<HTMLIxSplitButtonElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLIxSplitButtonElement>>;
+export declare const IxSplitButtonItem: import("react").ForwardRefExoticComponent<JSX.IxSplitButtonItem & Omit<import("react").HTMLAttributes<HTMLIxSplitButtonItemElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLIxSplitButtonItemElement>>;
+export declare const IxTabItem: import("react").ForwardRefExoticComponent<JSX.IxTabItem & Omit<import("react").HTMLAttributes<HTMLIxTabItemElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLIxTabItemElement>>;
+export declare const IxTabs: import("react").ForwardRefExoticComponent<JSX.IxTabs & Omit<import("react").HTMLAttributes<HTMLIxTabsElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLIxTabsElement>>;
+export declare const IxTile: import("react").ForwardRefExoticComponent<JSX.IxTile & Omit<import("react").HTMLAttributes<HTMLIxTileElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLIxTileElement>>;
+export declare const IxTimePicker: import("react").ForwardRefExoticComponent<JSX.IxTimePicker & Omit<import("react").HTMLAttributes<HTMLIxTimePickerElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLIxTimePickerElement>>;
+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 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>>;
+export declare const IxWorkflowSteps: import("react").ForwardRefExoticComponent<JSX.IxWorkflowSteps & Omit<import("react").HTMLAttributes<HTMLIxWorkflowStepsElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLIxWorkflowStepsElement>>;

package/dist/types/index.d.ts

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

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

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+import { ModalConfig as IxModalConfig } from '@siemens/ix';
+export * from './modal';
+export declare type ModalConfig = {
+    content: React.ReactNode;
+};
+export declare function showModal(config: Omit<IxModalConfig, 'content'> & ModalConfig): Promise<{
+    onClose: import("@siemens/ix/dist/types/components/utils/typed-event").TypedEvent<any>;
+    onDismiss: import("@siemens/ix/dist/types/components/utils/typed-event").TypedEvent<any>;
+}>;

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

@@ -0,0 +1,11 @@
+import React from 'react';
+export interface ModalRef {
+    close: (result: any) => void;
+    dismiss: (result?: any) => void;
+}
+export declare const Modal: React.ForwardRefExoticComponent<{
+    onClose?: ((result: any) => void) | undefined;
+    onDismiss?: ((result?: any) => void) | undefined;
+} & {
+    children?: React.ReactNode;
+} & React.RefAttributes<ModalRef>>;

package/dist/types/react-component-lib/createComponent.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+export interface HTMLStencilElement extends HTMLElement {
+    componentOnReady(): Promise<this>;
+}
+interface StencilReactInternalProps<ElementType> extends React.HTMLAttributes<ElementType> {
+    forwardedRef: React.RefObject<ElementType>;
+    ref?: React.Ref<any>;
+}
+export declare const createReactComponent: <PropType, ElementType extends HTMLStencilElement, ContextStateType = {}, ExpandedPropsTypes = {}>(tagName: string, ReactComponentContext?: React.Context<ContextStateType> | undefined, manipulatePropsFunction?: ((originalProps: StencilReactInternalProps<ElementType>, propsToPass: any) => ExpandedPropsTypes) | undefined, defineCustomElement?: () => void) => React.ForwardRefExoticComponent<React.PropsWithoutRef<import("./utils").StencilReactExternalProps<PropType, ElementType>> & React.RefAttributes<ElementType>>;
+export {};

package/dist/types/react-component-lib/createOverlayComponent.d.ts

@@ -0,0 +1,21 @@
+import React from 'react';
+import { OverlayEventDetail } from './interfaces';
+import { StencilReactForwardedRef } from './utils';
+interface OverlayElement extends HTMLElement {
+    present: () => Promise<void>;
+    dismiss: (data?: any, role?: string | undefined) => Promise<boolean>;
+}
+export interface ReactOverlayProps {
+    children?: React.ReactNode;
+    isOpen: boolean;
+    onDidDismiss?: (event: CustomEvent<OverlayEventDetail>) => void;
+    onDidPresent?: (event: CustomEvent<OverlayEventDetail>) => void;
+    onWillDismiss?: (event: CustomEvent<OverlayEventDetail>) => void;
+    onWillPresent?: (event: CustomEvent<OverlayEventDetail>) => void;
+}
+export declare const createOverlayComponent: <OverlayComponent extends object, OverlayType extends OverlayElement>(tagName: string, controller: {
+    create: (options: any) => Promise<OverlayType>;
+}, customElement?: any) => React.ForwardRefExoticComponent<React.PropsWithoutRef<OverlayComponent & ReactOverlayProps & {
+    forwardedRef?: StencilReactForwardedRef<OverlayType> | undefined;
+}> & React.RefAttributes<OverlayType>>;
+export {};

package/dist/types/react-component-lib/index.d.ts

@@ -0,0 +1,2 @@
+export { createReactComponent } from './createComponent';
+export { createOverlayComponent } from './createOverlayComponent';

package/dist/types/react-component-lib/interfaces.d.ts

@@ -0,0 +1,29 @@
+export interface EventEmitter<T = any> {
+    emit: (data?: T) => CustomEvent<T>;
+}
+export interface StyleReactProps {
+    class?: string;
+    className?: string;
+    style?: {
+        [key: string]: any;
+    };
+}
+export interface OverlayEventDetail<T = any> {
+    data?: T;
+    role?: string;
+}
+export interface OverlayInterface {
+    el: HTMLElement;
+    animated: boolean;
+    keyboardClose: boolean;
+    overlayIndex: number;
+    presented: boolean;
+    enterAnimation?: any;
+    leaveAnimation?: any;
+    didPresent: EventEmitter<void>;
+    willPresent: EventEmitter<void>;
+    willDismiss: EventEmitter<OverlayEventDetail>;
+    didDismiss: EventEmitter<OverlayEventDetail>;
+    present(): Promise<void>;
+    dismiss(data?: any, role?: string): Promise<boolean>;
+}

package/dist/types/react-component-lib/utils/attachProps.d.ts

@@ -0,0 +1,12 @@
+export declare const attachProps: (node: HTMLElement, newProps: any, oldProps?: any) => void;
+export declare const getClassName: (classList: DOMTokenList, newProps: any, oldProps: any) => string;
+/**
+ * Checks if an event is supported in the current execution environment.
+ * @license Modernizr 3.0.0pre (Custom Build) | MIT
+ */
+export declare const isCoveredByReact: (eventNameSuffix: string) => boolean;
+export declare const syncEvent: (node: Element & {
+    __events?: {
+        [key: string]: ((e: Event) => any) | undefined;
+    } | undefined;
+}, eventName: string, newEventHandler?: ((e: Event) => any) | undefined) => void;

package/dist/types/react-component-lib/utils/case.d.ts

@@ -0,0 +1,2 @@
+export declare const dashToPascalCase: (str: string) => string;
+export declare const camelToDashCase: (str: string) => string;

package/dist/types/react-component-lib/utils/dev.d.ts

@@ -0,0 +1,2 @@
+export declare const isDevMode: () => boolean;
+export declare const deprecationWarning: (key: string, message: string) => void;

package/dist/types/react-component-lib/utils/index.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import type { StyleReactProps } from '../interfaces';
+export declare type StencilReactExternalProps<PropType, ElementType> = PropType & Omit<React.HTMLAttributes<ElementType>, 'style'> & StyleReactProps;
+export declare type StencilReactForwardedRef<T> = ((instance: T | null) => void) | React.MutableRefObject<T | null> | null;
+export declare const setRef: (ref: StencilReactForwardedRef<any> | React.Ref<any> | undefined, value: any) => void;
+export declare const mergeRefs: (...refs: (StencilReactForwardedRef<any> | React.Ref<any> | undefined)[]) => React.RefCallback<any>;
+export declare const createForwardRef: <PropType, ElementType>(ReactComponent: any, displayName: string) => React.ForwardRefExoticComponent<React.PropsWithoutRef<StencilReactExternalProps<PropType, ElementType>> & React.RefAttributes<ElementType>>;
+export declare const defineCustomElement: (tagName: string, customElement: any) => void;
+export * from './attachProps';
+export * from './case';

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

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

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

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+import { ToastConfig as IxToastConfig } from '@siemens/ix';
+export declare type ToastConfig = {
+    message: string | React.ReactNode;
+};
+export declare function showToast(config: Omit<IxToastConfig, 'message'> & ToastConfig): Promise<{
+    onClose: import("@siemens/ix/dist/types/components/utils/typed-event").TypedEvent<any>;
+    close: (result?: any) => void;
+}>;

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

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

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

@@ -0,0 +1,6 @@
+import type { JSX } from '@siemens/ix';
+import React from 'react';
+import { StyleReactProps } from '../react-component-lib/interfaces';
+export declare const IxTree: (props: Omit<JSX.IxTree, "renderItem"> & Omit<React.HTMLAttributes<HTMLIxTreeElement>, "style"> & StyleReactProps & React.RefAttributes<HTMLIxTreeElement> & {
+    renderItem?: ((data: any) => React.ReactNode) | undefined;
+}) => globalThis.JSX.Element;

package/package.json

@@ -7,7 +7,7 @@
     "url": "https://github.com/siemens/ix",
     "directory": "packages/react"
   },
-  "version": "1.1.0-beta.2",
+  "version": "1.1.0-beta.4",
   "description": "Siemens iX for React",
   "main": "dist/index.js",
   "module": "dist/index.esm.js",
@@ -27,7 +27,7 @@
   "license": "MIT",
   "devDependencies": {
     "@rollup/plugin-typescript": "^8.4.0",
-    "@siemens/ix": "~1.1.0-beta.2",
+    "@siemens/ix": "~1.1.0-beta.4",
     "@types/estree": "~0.0.51",
     "@types/react": "~18.0.15",
     "@types/react-dom": "~18.0.6",
@@ -47,6 +47,6 @@
   },
   "dependencies": {
     "@siemens/ix-icons": "~1.0.0",
-    "@siemens/ix": "~1.1.0-beta.2"
+    "@siemens/ix": "~1.1.0-beta.4"
   }
 }