@siemens/ix-react 0.0.0-pr-1974-20250627142646 → 0.0.0-pr-2042-20250801111750
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components.js +172 -172
- package/dist/components.js.map +1 -1
- package/dist/components.server.js +181 -122
- package/dist/components.server.js.map +1 -1
- package/dist/context/application-context.js.map +1 -1
- package/dist/context/context.js.map +1 -1
- package/dist/delegate.js.map +1 -1
- package/dist/internal-components.js +6 -0
- package/dist/internal-components.js.map +1 -1
- package/dist/ix-icon.js +1 -1
- package/dist/modal/index.js.map +1 -1
- package/dist/modal/portal.js.map +1 -1
- package/dist/toast/toast.js +16 -6
- package/dist/toast/toast.js.map +1 -1
- package/dist/tree/internal-tree.js +1 -1
- package/dist/tree/tree.js +16 -11
- package/dist/tree/tree.js.map +1 -1
- package/dist/types/toast/toast.d.ts +3 -2
- package/dist/types/tree/tree.d.ts +19 -4
- package/package.json +15 -8
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"application-context.js","sources":["../../src/context/application-context.tsx"],"sourcesContent":["'use client';\n/*\n * SPDX-FileCopyrightText: 2024 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\nimport React, { PropsWithChildren } from 'react';\nimport { ReactFrameworkDelegate, reactFrameworkDelegate } from '../delegate';\nimport { IxOverlay, PORTAL_ID } from '../modal/portal';\nimport { IxContext } from './context';\n\nexport type IxApplicationContextProps = PropsWithChildren;\n\nexport class IxApplicationContext extends React.Component<IxApplicationContextProps> {\n private delegate: ReactFrameworkDelegate = reactFrameworkDelegate;\n\n constructor(props: IxApplicationContextProps) {\n super(props);\n this.delegate.isUsingReactPortal = true;\n }\n\n render() {\n return (\n <IxContext.Provider\n value={{\n delegate: this.delegate,\n }}\n >\n {this.props.children}\n <IxOverlay delegate={this.delegate}></IxOverlay>\n <div id={PORTAL_ID}></div>\n </IxContext.Provider>\n );\n }\n}\n"],"names":[],"mappings":";;;;;;;
|
|
1
|
+
{"version":3,"file":"application-context.js","sources":["../../src/context/application-context.tsx"],"sourcesContent":["'use client';\n/*\n * SPDX-FileCopyrightText: 2024 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\nimport React, { PropsWithChildren } from 'react';\nimport { ReactFrameworkDelegate, reactFrameworkDelegate } from '../delegate';\nimport { IxOverlay, PORTAL_ID } from '../modal/portal';\nimport { IxContext } from './context';\n\nexport type IxApplicationContextProps = PropsWithChildren;\n\nexport class IxApplicationContext extends React.Component<IxApplicationContextProps> {\n private delegate: ReactFrameworkDelegate = reactFrameworkDelegate;\n\n constructor(props: IxApplicationContextProps) {\n super(props);\n this.delegate.isUsingReactPortal = true;\n }\n\n render() {\n return (\n <IxContext.Provider\n value={{\n delegate: this.delegate,\n }}\n >\n {this.props.children}\n <IxOverlay delegate={this.delegate}></IxOverlay>\n <div id={PORTAL_ID}></div>\n </IxContext.Provider>\n );\n }\n}\n"],"names":[],"mappings":";;;;;;;AAgBM;AAGJ;;;AAEE;;;AAIA;;;;AAYH;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"context.js","sources":["../../src/context/context.ts"],"sourcesContent":["/*\n * SPDX-FileCopyrightText: 2024 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport React from 'react';\nimport { ReactFrameworkDelegate } from '../delegate';\n\nexport const IxContext = React.createContext<{\n delegate: ReactFrameworkDelegate;\n} | null>(null);\n"],"names":[],"mappings":";;AAAA;;;;;;;AAOG;
|
|
1
|
+
{"version":3,"file":"context.js","sources":["../../src/context/context.ts"],"sourcesContent":["/*\n * SPDX-FileCopyrightText: 2024 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport React from 'react';\nimport { ReactFrameworkDelegate } from '../delegate';\n\nexport const IxContext = React.createContext<{\n delegate: ReactFrameworkDelegate;\n} | null>(null);\n"],"names":[],"mappings":";;AAAA;;;;;;;AAOG;AAKI,MAAM,SAAS,GAAG,KAAK,CAAC,aAAa,CAElC,IAAI;;;;"}
|
package/dist/delegate.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"delegate.js","sources":["../src/delegate.ts"],"sourcesContent":["/*\n * SPDX-FileCopyrightText: 2024 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\nimport { FrameworkDelegate, registerFrameworkDelegate } from '@siemens/ix';\nimport ReactDOMClient from 'react-dom/client';\nlet viewInstance = 0;\n\nfunction createViewInstance() {\n return `ix-react-view-${viewInstance++}`;\n}\n\nconst mountedRootNodes: Record<string, ReactDOMClient.Root> = {};\n\nasync function fallbackRootDom(id: string, view: React.ReactNode) {\n return new Promise((resolve) => {\n const rootElement = document.createElement('DIV');\n rootElement.id = id;\n rootElement.style.display = 'contents';\n document.body.appendChild(rootElement);\n\n const root = ReactDOMClient.createRoot(rootElement);\n root.render(view);\n\n mountedRootNodes[id] = root;\n\n setTimeout(() => {\n const viewElement = rootElement.children[0];\n resolve(viewElement);\n });\n });\n}\n\nasync function fallbackRemoveViewFromRootDom(view: any) {\n const parent = view.parentElement;\n const id = parent.id;\n if (id in mountedRootNodes) {\n mountedRootNodes[id].unmount();\n delete mountedRootNodes[id];\n parent.remove();\n }\n}\n\nexport class ReactFrameworkDelegate implements FrameworkDelegate {\n attachViewToPortal?: (id: string, view: any) => Promise<Element>;\n removeViewFromPortal?: (id: string) => void;\n\n resolvePortalInitPromise: (() => void) | undefined;\n portalInitPromise: Promise<void>;\n isUsingReactPortal = false;\n\n constructor() {\n this.portalInitPromise = new Promise<void>(\n (resolve) => (this.resolvePortalInitPromise = resolve)\n );\n }\n\n async attachView(view: any): Promise<any> {\n const id = createViewInstance();\n\n if (!this.isUsingReactPortal) {\n return fallbackRootDom(id, view);\n }\n\n await this.isPortalReady();\n if (this.attachViewToPortal) {\n const refElement = await this.attachViewToPortal(id, view);\n return refElement;\n }\n\n console.error('Portal could not be initialized');\n }\n\n async removeView(view: any): Promise<void> {\n if (!this.removeViewFromPortal) {\n return fallbackRemoveViewFromRootDom(view);\n }\n\n const parent = view.parentElement;\n const id = parent.getAttribute('data-portal-id');\n\n this.removeViewFromPortal(id);\n }\n\n portalReady() {\n this.resolvePortalInitPromise?.();\n }\n\n private async isPortalReady() {\n return this.portalInitPromise;\n }\n}\n\nexport const reactFrameworkDelegate = new ReactFrameworkDelegate();\nregisterFrameworkDelegate(reactFrameworkDelegate);\n"],"names":[],"mappings":";;;AAAA;;;;;;;AAOG;AAGH,IAAI,YAAY,GAAG,CAAC
|
|
1
|
+
{"version":3,"file":"delegate.js","sources":["../src/delegate.ts"],"sourcesContent":["/*\n * SPDX-FileCopyrightText: 2024 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\nimport { FrameworkDelegate, registerFrameworkDelegate } from '@siemens/ix';\nimport ReactDOMClient from 'react-dom/client';\nlet viewInstance = 0;\n\nfunction createViewInstance() {\n return `ix-react-view-${viewInstance++}`;\n}\n\nconst mountedRootNodes: Record<string, ReactDOMClient.Root> = {};\n\nasync function fallbackRootDom(id: string, view: React.ReactNode) {\n return new Promise((resolve) => {\n const rootElement = document.createElement('DIV');\n rootElement.id = id;\n rootElement.style.display = 'contents';\n document.body.appendChild(rootElement);\n\n const root = ReactDOMClient.createRoot(rootElement);\n root.render(view);\n\n mountedRootNodes[id] = root;\n\n setTimeout(() => {\n const viewElement = rootElement.children[0];\n resolve(viewElement);\n });\n });\n}\n\nasync function fallbackRemoveViewFromRootDom(view: any) {\n const parent = view.parentElement;\n const id = parent.id;\n if (id in mountedRootNodes) {\n mountedRootNodes[id].unmount();\n delete mountedRootNodes[id];\n parent.remove();\n }\n}\n\nexport class ReactFrameworkDelegate implements FrameworkDelegate {\n attachViewToPortal?: (id: string, view: any) => Promise<Element>;\n removeViewFromPortal?: (id: string) => void;\n\n resolvePortalInitPromise: (() => void) | undefined;\n portalInitPromise: Promise<void>;\n isUsingReactPortal = false;\n\n constructor() {\n this.portalInitPromise = new Promise<void>(\n (resolve) => (this.resolvePortalInitPromise = resolve)\n );\n }\n\n async attachView(view: any): Promise<any> {\n const id = createViewInstance();\n\n if (!this.isUsingReactPortal) {\n return fallbackRootDom(id, view);\n }\n\n await this.isPortalReady();\n if (this.attachViewToPortal) {\n const refElement = await this.attachViewToPortal(id, view);\n return refElement;\n }\n\n console.error('Portal could not be initialized');\n }\n\n async removeView(view: any): Promise<void> {\n if (!this.removeViewFromPortal) {\n return fallbackRemoveViewFromRootDom(view);\n }\n\n const parent = view.parentElement;\n const id = parent.getAttribute('data-portal-id');\n\n this.removeViewFromPortal(id);\n }\n\n portalReady() {\n this.resolvePortalInitPromise?.();\n }\n\n private async isPortalReady() {\n return this.portalInitPromise;\n }\n}\n\nexport const reactFrameworkDelegate = new ReactFrameworkDelegate();\nregisterFrameworkDelegate(reactFrameworkDelegate);\n"],"names":[],"mappings":";;;AAAA;;;;;;;AAOG;AAGH,IAAI,YAAY,GAAG,CAAC;AAEpB,SAAS,kBAAkB,GAAA;AACzB,IAAA,OAAO,CAAA,cAAA,EAAiB,YAAY,EAAE,CAAA,CAAE;AAC1C;AAEA,MAAM,gBAAgB,GAAwC,EAAE;AAEhE,eAAe,eAAe,CAAC,EAAU,EAAE,IAAqB,EAAA;AAC9D,IAAA,OAAO,IAAI,OAAO,CAAC,CAAC,OAAO,KAAI;QAC7B,MAAM,WAAW,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC;AACjD,QAAA,WAAW,CAAC,EAAE,GAAG,EAAE;AACnB,QAAA,WAAW,CAAC,KAAK,CAAC,OAAO,GAAG,UAAU;AACtC,QAAA,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,WAAW,CAAC;QAEtC,MAAM,IAAI,GAAG,cAAc,CAAC,UAAU,CAAC,WAAW,CAAC;AACnD,QAAA,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC;AAEjB,QAAA,gBAAgB,CAAC,EAAE,CAAC,GAAG,IAAI;QAE3B,UAAU,CAAC,MAAK;YACd,MAAM,WAAW,GAAG,WAAW,CAAC,QAAQ,CAAC,CAAC,CAAC;YAC3C,OAAO,CAAC,WAAW,CAAC;AACtB,QAAA,CAAC,CAAC;AACJ,IAAA,CAAC,CAAC;AACJ;AAEA,eAAe,6BAA6B,CAAC,IAAS,EAAA;AACpD,IAAA,MAAM,MAAM,GAAG,IAAI,CAAC,aAAa;AACjC,IAAA,MAAM,EAAE,GAAG,MAAM,CAAC,EAAE;AACpB,IAAA,IAAI,EAAE,IAAI,gBAAgB,EAAE;AAC1B,QAAA,gBAAgB,CAAC,EAAE,CAAC,CAAC,OAAO,EAAE;AAC9B,QAAA,OAAO,gBAAgB,CAAC,EAAE,CAAC;QAC3B,MAAM,CAAC,MAAM,EAAE;IACjB;AACF;MAEa,sBAAsB,CAAA;AAQjC,IAAA,WAAA,GAAA;QAFA,IAAA,CAAA,kBAAkB,GAAG,KAAK;AAGxB,QAAA,IAAI,CAAC,iBAAiB,GAAG,IAAI,OAAO,CAClC,CAAC,OAAO,MAAM,IAAI,CAAC,wBAAwB,GAAG,OAAO,CAAC,CACvD;IACH;IAEA,MAAM,UAAU,CAAC,IAAS,EAAA;AACxB,QAAA,MAAM,EAAE,GAAG,kBAAkB,EAAE;AAE/B,QAAA,IAAI,CAAC,IAAI,CAAC,kBAAkB,EAAE;AAC5B,YAAA,OAAO,eAAe,CAAC,EAAE,EAAE,IAAI,CAAC;QAClC;AAEA,QAAA,MAAM,IAAI,CAAC,aAAa,EAAE;AAC1B,QAAA,IAAI,IAAI,CAAC,kBAAkB,EAAE;YAC3B,MAAM,UAAU,GAAG,MAAM,IAAI,CAAC,kBAAkB,CAAC,EAAE,EAAE,IAAI,CAAC;AAC1D,YAAA,OAAO,UAAU;QACnB;AAEA,QAAA,OAAO,CAAC,KAAK,CAAC,iCAAiC,CAAC;IAClD;IAEA,MAAM,UAAU,CAAC,IAAS,EAAA;AACxB,QAAA,IAAI,CAAC,IAAI,CAAC,oBAAoB,EAAE;AAC9B,YAAA,OAAO,6BAA6B,CAAC,IAAI,CAAC;QAC5C;AAEA,QAAA,MAAM,MAAM,GAAG,IAAI,CAAC,aAAa;QACjC,MAAM,EAAE,GAAG,MAAM,CAAC,YAAY,CAAC,gBAAgB,CAAC;AAEhD,QAAA,IAAI,CAAC,oBAAoB,CAAC,EAAE,CAAC;IAC/B;IAEA,WAAW,GAAA;AACT,QAAA,IAAI,CAAC,wBAAwB,IAAI;IACnC;AAEQ,IAAA,MAAM,aAAa,GAAA;QACzB,OAAO,IAAI,CAAC,iBAAiB;IAC/B;AACD;AAEM,MAAM,sBAAsB,GAAG,IAAI,sBAAsB;AAChE,yBAAyB,CAAC,sBAAsB,CAAC;;;;"}
|
|
@@ -4,10 +4,16 @@ import { defineCustomElement } from '@siemens/ix/components/ix-application-switc
|
|
|
4
4
|
import { defineCustomElement as defineCustomElement$3 } from '@siemens/ix/components/ix-menu-expand-icon.js';
|
|
5
5
|
import { defineCustomElement as defineCustomElement$2 } from '@siemens/ix/components/ix-date-time-card.js';
|
|
6
6
|
import { defineCustomElement as defineCustomElement$4 } from '@siemens/ix/components/ix-modal-loading.js';
|
|
7
|
+
import { defineCustomElement as defineCustomElement$5 } from '@siemens/ix-icons/components/ix-icon.js';
|
|
7
8
|
|
|
9
|
+
/**
|
|
10
|
+
* Define custom elements during usage of the library to ensure that all
|
|
11
|
+
* components are registered before they are used.
|
|
12
|
+
*/
|
|
8
13
|
defineCustomElement();
|
|
9
14
|
defineCustomElement$1();
|
|
10
15
|
defineCustomElement$2();
|
|
11
16
|
defineCustomElement$3();
|
|
12
17
|
defineCustomElement$4();
|
|
18
|
+
defineCustomElement$5();
|
|
13
19
|
//# sourceMappingURL=internal-components.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"internal-components.js","sources":["../src/internal-components.ts"],"sourcesContent":["'use client';\n\n/*\n * SPDX-FileCopyrightText: 2024 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\nimport { defineCustomElement as defineIxApplicationSidebar } from '@siemens/ix/components/ix-application-sidebar.js';\nimport { defineCustomElement as defineIxApplicationSwitchModal } from '@siemens/ix/components/ix-application-switch-modal.js';\nimport { defineCustomElement as defineIxBurgerMenu } from '@siemens/ix/components/ix-menu-expand-icon.js';\nimport { defineCustomElement as defineIxDateTimeCard } from '@siemens/ix/components/ix-date-time-card.js';\nimport { defineCustomElement as defineIxModalLoading } from '@siemens/ix/components/ix-modal-loading.js';\n\ndefineIxApplicationSwitchModal();\ndefineIxApplicationSidebar();\ndefineIxDateTimeCard();\ndefineIxBurgerMenu();\ndefineIxModalLoading();\n"],"names":["defineIxApplicationSwitchModal","defineIxApplicationSidebar","defineIxDateTimeCard","defineIxBurgerMenu","defineIxModalLoading"],"mappings":"
|
|
1
|
+
{"version":3,"file":"internal-components.js","sources":["../src/internal-components.ts"],"sourcesContent":["'use client';\n\n/*\n * SPDX-FileCopyrightText: 2024 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\nimport { defineCustomElement as defineIxApplicationSidebar } from '@siemens/ix/components/ix-application-sidebar.js';\nimport { defineCustomElement as defineIxApplicationSwitchModal } from '@siemens/ix/components/ix-application-switch-modal.js';\nimport { defineCustomElement as defineIxBurgerMenu } from '@siemens/ix/components/ix-menu-expand-icon.js';\nimport { defineCustomElement as defineIxDateTimeCard } from '@siemens/ix/components/ix-date-time-card.js';\nimport { defineCustomElement as defineIxModalLoading } from '@siemens/ix/components/ix-modal-loading.js';\nimport { defineCustomElement as defineIxIcon } from '@siemens/ix-icons/components/ix-icon.js';\n\n/**\n * Define custom elements during usage of the library to ensure that all\n * components are registered before they are used.\n */\ndefineIxApplicationSwitchModal();\ndefineIxApplicationSidebar();\ndefineIxDateTimeCard();\ndefineIxBurgerMenu();\ndefineIxModalLoading();\ndefineIxIcon();\n"],"names":["defineIxApplicationSwitchModal","defineIxApplicationSidebar","defineIxDateTimeCard","defineIxBurgerMenu","defineIxModalLoading","defineIxIcon"],"mappings":";;;;;;;;AAiBA;;;AAGG;AACHA;AACAC;AACAC;AACAC;AACAC;AACAC"}
|
package/dist/ix-icon.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
"use client";
|
|
2
|
-
import { IxIcon as IxIcon$1
|
|
2
|
+
import { defineCustomElement, IxIcon as IxIcon$1 } from '@siemens/ix-icons/components/ix-icon.js';
|
|
3
3
|
import { createComponent } from '@stencil/react-output-target/runtime';
|
|
4
4
|
import React from 'react';
|
|
5
5
|
|
package/dist/modal/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":["../../src/modal/index.ts"],"sourcesContent":["/*\n * SPDX-FileCopyrightText: 2024 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport {\n ModalConfig as IxModalConfig,\n showModal as _showModal,\n} from '@siemens/ix';\nexport * from './modal';\n\nexport type ModalConfig = {\n content: React.ReactNode | string;\n};\n\nexport async function showModal(\n config: Omit<IxModalConfig, 'content'> & ModalConfig\n) {\n return _showModal(config);\n}\n"],"names":["_showModal"],"mappings":";;;AAAA;;;;;;;AAOG;AAYI,eAAe,SAAS,CAC7B,MAAoD,EAAA;AAEpD,IAAA,OAAOA,WAAU,CAAC,MAAM,CAAC
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../../src/modal/index.ts"],"sourcesContent":["/*\n * SPDX-FileCopyrightText: 2024 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport {\n ModalConfig as IxModalConfig,\n showModal as _showModal,\n} from '@siemens/ix';\nexport * from './modal';\n\nexport type ModalConfig = {\n content: React.ReactNode | string;\n};\n\nexport async function showModal(\n config: Omit<IxModalConfig, 'content'> & ModalConfig\n) {\n return _showModal(config);\n}\n"],"names":["_showModal"],"mappings":";;;AAAA;;;;;;;AAOG;AAYI,eAAe,SAAS,CAC7B,MAAoD,EAAA;AAEpD,IAAA,OAAOA,WAAU,CAAC,MAAM,CAAC;AAC3B;;;;"}
|
package/dist/modal/portal.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"portal.js","sources":["../../src/modal/portal.tsx"],"sourcesContent":["'use client';\n/*\n * SPDX-FileCopyrightText: 2024 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { useEffect, useLayoutEffect, useRef, useState } from 'react';\nimport ReactDOM from 'react-dom';\nimport { ReactFrameworkDelegate } from '../delegate';\n\nexport const PORTAL_ID = 'ix-portal';\n\nexport const IxOverlay = (props: { delegate: ReactFrameworkDelegate }) => {\n const [portalRef, setPortalRef] = useState<Element | null>(null);\n\n const resolveElementRef = useRef<\n Record<string, (value: Element | PromiseLike<Element>) => void>\n >({});\n\n const viewRefs = useRef<Record<string, any>>({});\n const [views, setViews] = useState<Record<string, any>>({});\n\n useEffect(() => {\n const addOverlay = (id: string, view: any) => {\n const _views = { ...viewRefs.current };\n _views[id] = view;\n setViews(_views);\n viewRefs.current = _views;\n };\n\n const removeOverlay = (id: string) => {\n const _views = { ...viewRefs.current };\n delete _views[id];\n setViews(_views);\n viewRefs.current = _views;\n };\n\n props.delegate.attachViewToPortal = async (id, view) => {\n addOverlay(id, view);\n return new Promise<Element>((resolve) => {\n const r = { ...resolveElementRef.current };\n r[id] = resolve;\n resolveElementRef.current = r;\n });\n };\n\n props.delegate.removeViewFromPortal = async (id: string) => {\n removeOverlay(id);\n };\n\n props.delegate.portalReady();\n }, []);\n\n useLayoutEffect(() => {\n const portalRef = document.querySelector(`#${PORTAL_ID}`);\n if (portalRef) {\n setPortalRef(portalRef);\n }\n }, []);\n\n useLayoutEffect(() => {\n Object.keys(views).forEach((key) => {\n const resolveQueue = { ...resolveElementRef.current };\n const element = document.querySelector(`[data-portal-id=\"${key}\"]`);\n if (element && element.children.length === 1 && resolveQueue[key]) {\n const view = element.children[0];\n resolveQueue[key](view);\n }\n });\n }, [views]);\n\n if (!portalRef) {\n return null;\n }\n\n return (\n <>\n {Object.keys(views).map((key) => {\n const RenderView = views[key];\n return ReactDOM.createPortal(\n <div data-portal-id={key} style={{ display: 'contents ' }}>\n {RenderView}\n </div>,\n portalRef,\n key\n );\n })}\n </>\n );\n};\n"],"names":[],"mappings":";;;;;AAcO;
|
|
1
|
+
{"version":3,"file":"portal.js","sources":["../../src/modal/portal.tsx"],"sourcesContent":["'use client';\n/*\n * SPDX-FileCopyrightText: 2024 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { useEffect, useLayoutEffect, useRef, useState } from 'react';\nimport ReactDOM from 'react-dom';\nimport { ReactFrameworkDelegate } from '../delegate';\n\nexport const PORTAL_ID = 'ix-portal';\n\nexport const IxOverlay = (props: { delegate: ReactFrameworkDelegate }) => {\n const [portalRef, setPortalRef] = useState<Element | null>(null);\n\n const resolveElementRef = useRef<\n Record<string, (value: Element | PromiseLike<Element>) => void>\n >({});\n\n const viewRefs = useRef<Record<string, any>>({});\n const [views, setViews] = useState<Record<string, any>>({});\n\n useEffect(() => {\n const addOverlay = (id: string, view: any) => {\n const _views = { ...viewRefs.current };\n _views[id] = view;\n setViews(_views);\n viewRefs.current = _views;\n };\n\n const removeOverlay = (id: string) => {\n const _views = { ...viewRefs.current };\n delete _views[id];\n setViews(_views);\n viewRefs.current = _views;\n };\n\n props.delegate.attachViewToPortal = async (id, view) => {\n addOverlay(id, view);\n return new Promise<Element>((resolve) => {\n const r = { ...resolveElementRef.current };\n r[id] = resolve;\n resolveElementRef.current = r;\n });\n };\n\n props.delegate.removeViewFromPortal = async (id: string) => {\n removeOverlay(id);\n };\n\n props.delegate.portalReady();\n }, []);\n\n useLayoutEffect(() => {\n const portalRef = document.querySelector(`#${PORTAL_ID}`);\n if (portalRef) {\n setPortalRef(portalRef);\n }\n }, []);\n\n useLayoutEffect(() => {\n Object.keys(views).forEach((key) => {\n const resolveQueue = { ...resolveElementRef.current };\n const element = document.querySelector(`[data-portal-id=\"${key}\"]`);\n if (element && element.children.length === 1 && resolveQueue[key]) {\n const view = element.children[0];\n resolveQueue[key](view);\n }\n });\n }, [views]);\n\n if (!portalRef) {\n return null;\n }\n\n return (\n <>\n {Object.keys(views).map((key) => {\n const RenderView = views[key];\n return ReactDOM.createPortal(\n <div data-portal-id={key} style={{ display: 'contents ' }}>\n {RenderView}\n </div>,\n portalRef,\n key\n );\n })}\n </>\n );\n};\n"],"names":[],"mappings":";;;;;AAcO;AAEA;;AAGL;AAIA;;;AAIE;;AAEE;;AAEA;AACF;AAEA;;AAEE;;AAEA;AACF;;AAGE;AACA;;AAEE;AACA;AACF;AACF;;;AAIA;AAEA;;;;;;;;;;;;AAcE;;AAEE;;AAEJ;AACF;;AAGE;;AAGF;AAGM;;;AAWR;;"}
|
package/dist/toast/toast.js
CHANGED
|
@@ -8,20 +8,30 @@ async function showToast(config) {
|
|
|
8
8
|
// Define custom element, otherwise dynamic creation of toast container will fail
|
|
9
9
|
defineCustomElement();
|
|
10
10
|
defineCustomElement$1();
|
|
11
|
-
if (typeof config.message === 'string') {
|
|
11
|
+
if (typeof config.message === 'string' && !config.action) {
|
|
12
12
|
const toastInstance = await toast(config);
|
|
13
13
|
return toastInstance;
|
|
14
14
|
}
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
15
|
+
let toastContainer;
|
|
16
|
+
let root;
|
|
17
|
+
if (config.message) {
|
|
18
|
+
toastContainer = document.createElement('DIV');
|
|
19
|
+
root = ReactDOMClient.createRoot(toastContainer);
|
|
20
|
+
root.render(config.message);
|
|
21
|
+
}
|
|
22
|
+
let toastContainerAction;
|
|
23
|
+
if (config.action) {
|
|
24
|
+
toastContainerAction = document.createElement('DIV');
|
|
25
|
+
root = ReactDOMClient.createRoot(toastContainerAction);
|
|
26
|
+
root.render(config.action);
|
|
27
|
+
}
|
|
19
28
|
const toastInstance = await toast({
|
|
20
29
|
...config,
|
|
21
30
|
message: toastContainer,
|
|
31
|
+
action: toastContainerAction,
|
|
22
32
|
});
|
|
23
33
|
toastInstance.onClose.once(() => {
|
|
24
|
-
root
|
|
34
|
+
root?.unmount();
|
|
25
35
|
});
|
|
26
36
|
return toastInstance;
|
|
27
37
|
}
|
package/dist/toast/toast.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"toast.js","sources":["../../src/toast/toast.ts"],"sourcesContent":["'use client';\n/*\n * SPDX-FileCopyrightText: 2024 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\nimport { defineCustomElement as defineToastContainer } from '@siemens/ix/components/ix-toast-container.js';\nimport { defineCustomElement as defineToast } from '@siemens/ix/components/ix-toast.js';\n\nimport { toast, ToastConfig as IxToastConfig } from '@siemens/ix';\nimport ReactDOMClient from 'react-dom/client';\n\nexport type ToastConfig = {\n message
|
|
1
|
+
{"version":3,"file":"toast.js","sources":["../../src/toast/toast.ts"],"sourcesContent":["'use client';\n/*\n * SPDX-FileCopyrightText: 2024 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\nimport { defineCustomElement as defineToastContainer } from '@siemens/ix/components/ix-toast-container.js';\nimport { defineCustomElement as defineToast } from '@siemens/ix/components/ix-toast.js';\n\nimport { toast, ToastConfig as IxToastConfig } from '@siemens/ix';\nimport ReactDOMClient from 'react-dom/client';\n\nexport type ToastConfig = {\n message?: string | React.ReactNode;\n action?: React.ReactNode;\n};\n\nexport async function showToast(\n config: Omit<IxToastConfig, 'message' | 'action'> & ToastConfig\n) {\n // Define custom element, otherwise dynamic creation of toast container will fail\n defineToast();\n defineToastContainer();\n\n if (typeof config.message === 'string' && !config.action) {\n const toastInstance = await toast(config as IxToastConfig);\n return toastInstance;\n }\n\n let toastContainer: HTMLElement | undefined;\n let root: ReactDOMClient.Root | undefined;\n\n if (config.message) {\n toastContainer = document.createElement('DIV');\n root = ReactDOMClient.createRoot(toastContainer);\n root.render(config.message);\n }\n\n let toastContainerAction: HTMLElement | undefined;\n\n if (config.action) {\n toastContainerAction = document.createElement('DIV');\n root = ReactDOMClient.createRoot(toastContainerAction);\n root.render(config.action);\n }\n\n const toastInstance = await toast({\n ...config,\n message: toastContainer,\n action: toastContainerAction,\n });\n\n toastInstance.onClose.once(() => {\n root?.unmount();\n });\n\n return toastInstance;\n}\n"],"names":[],"mappings":";;;;;;AAoBO;;AAIL;AACA;AAEA;AACE;AACA;;AAGF;AACA;AAEA;AACE;AACA;AACA;;AAGF;AAEA;AACE;AACA;AACA;;AAGF;AACE;AACA;AACA;AACD;AAED;;AAEA;AAEA;AACF;;"}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
"use client";
|
|
2
|
-
import {
|
|
2
|
+
import { defineCustomElement, IxTree } from '@siemens/ix/components/ix-tree.js';
|
|
3
3
|
import { createComponent } from '@stencil/react-output-target/runtime';
|
|
4
4
|
import React from 'react';
|
|
5
5
|
|
package/dist/tree/tree.js
CHANGED
|
@@ -1,29 +1,34 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
import { jsx } from 'react/jsx-runtime';
|
|
3
|
-
import { useRef, useCallback } from 'react';
|
|
3
|
+
import React, { useRef, useCallback } from 'react';
|
|
4
4
|
import ReactDOMClient from 'react-dom/client';
|
|
5
5
|
import InternalIxTree from './internal-tree.js';
|
|
6
6
|
|
|
7
|
-
const IxTree = (props) => {
|
|
7
|
+
const IxTree = React.forwardRef((props, ref) => {
|
|
8
8
|
const cachedRootNodes = useRef(new Map());
|
|
9
9
|
const renderItem = useCallback((_, data, __, context, update) => {
|
|
10
10
|
const treeItem = document.createElement('ix-tree-item');
|
|
11
|
+
const rootNode = ReactDOMClient.createRoot(treeItem);
|
|
11
12
|
treeItem.hasChildren = data.hasChildren;
|
|
12
13
|
treeItem.context = context[data.id];
|
|
13
|
-
update((itemData, context) => {
|
|
14
|
-
treeItem.context = context[itemData.id];
|
|
15
|
-
treeItem.hasChildren = itemData.hasChildren;
|
|
16
|
-
});
|
|
17
|
-
const container = document.createElement('DIV');
|
|
18
|
-
const rootNode = ReactDOMClient.createRoot(container);
|
|
19
14
|
if (props.renderItem) {
|
|
20
15
|
rootNode.render(props.renderItem(data.data));
|
|
21
16
|
}
|
|
22
|
-
|
|
17
|
+
update((itemData, newContext) => {
|
|
18
|
+
treeItem.context = newContext[itemData.id];
|
|
19
|
+
treeItem.hasChildren = itemData.hasChildren;
|
|
20
|
+
if (props.renderItem) {
|
|
21
|
+
rootNode.render(props.renderItem(itemData.data));
|
|
22
|
+
}
|
|
23
|
+
});
|
|
23
24
|
cachedRootNodes.current.set(treeItem, rootNode);
|
|
24
25
|
return treeItem;
|
|
25
26
|
}, []);
|
|
26
|
-
return (jsx(InternalIxTree
|
|
27
|
+
return (jsx(InternalIxTree
|
|
28
|
+
//@ts-expect-error ref exposed by the StencilComponent type
|
|
29
|
+
, {
|
|
30
|
+
//@ts-expect-error ref exposed by the StencilComponent type
|
|
31
|
+
ref: ref, ...props, renderItem: props.renderItem ? renderItem : undefined, onNodeRemoved: (removed) => {
|
|
27
32
|
const { detail } = removed;
|
|
28
33
|
detail.forEach((removedItemElement) => {
|
|
29
34
|
if (cachedRootNodes.current.has(removedItemElement)) {
|
|
@@ -32,7 +37,7 @@ const IxTree = (props) => {
|
|
|
32
37
|
}
|
|
33
38
|
});
|
|
34
39
|
} }));
|
|
35
|
-
};
|
|
40
|
+
});
|
|
36
41
|
|
|
37
42
|
export { IxTree, IxTree as default };
|
|
38
43
|
//# sourceMappingURL=tree.js.map
|
package/dist/tree/tree.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"tree.js","sources":["../../src/tree/tree.tsx"],"sourcesContent":["'use client';\n/*\n * SPDX-FileCopyrightText: 2024 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport {
|
|
1
|
+
{"version":3,"file":"tree.js","sources":["../../src/tree/tree.tsx"],"sourcesContent":["'use client';\n/*\n * SPDX-FileCopyrightText: 2024 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport {\n Components,\n type TreeContext,\n UpdateCallback,\n type IxTreeCustomEvent,\n} from '@siemens/ix';\nimport React, { useCallback, useRef } from 'react';\nimport ReactDOM, { Root } from 'react-dom/client';\nimport InternalIxTree from './internal-tree';\n\nexport type IxTreeProps = Omit<\n Components.IxTree,\n 'renderItem' | 'markItemAsDirty' | 'refreshTree'\n> & {\n renderItem?: (data: any) => React.ReactNode;\n onContextChange?: (event: IxTreeCustomEvent<TreeContext>) => void;\n onNodeToggled?: (\n event: CustomEvent<{ id: string; isExpaned: boolean }>\n ) => void;\n onNodeClicked?: (event: CustomEvent<string>) => void;\n onNodeRemoved?: (event: CustomEvent<any>) => void;\n};\n\nexport const IxTree = React.forwardRef(\n (props: IxTreeProps, ref: React.ForwardedRef<Components.IxTree>) => {\n const cachedRootNodes = useRef<Map<HTMLElement, Root>>(new Map());\n\n const renderItem = useCallback(\n (\n _: number,\n data: any,\n __: any[],\n context: TreeContext,\n update: (callback: UpdateCallback) => void\n ) => {\n const treeItem = document.createElement('ix-tree-item');\n const rootNode = ReactDOM.createRoot(treeItem);\n treeItem.hasChildren = data.hasChildren;\n treeItem.context = context[data.id];\n\n if (props.renderItem) {\n rootNode.render(props.renderItem(data.data));\n }\n\n update((itemData, newContext) => {\n treeItem.context = newContext[itemData.id];\n treeItem.hasChildren = itemData.hasChildren;\n\n if (props.renderItem) {\n rootNode.render(props.renderItem(itemData.data));\n }\n });\n\n cachedRootNodes.current.set(treeItem, rootNode);\n return treeItem;\n },\n []\n );\n\n return (\n <InternalIxTree\n //@ts-expect-error ref exposed by the StencilComponent type\n ref={ref}\n {...props}\n renderItem={props.renderItem ? renderItem : undefined}\n onNodeRemoved={(removed: CustomEvent<any[]>) => {\n const { detail } = removed;\n\n detail.forEach((removedItemElement) => {\n if (cachedRootNodes.current.has(removedItemElement)) {\n cachedRootNodes.current.get(removedItemElement)?.unmount();\n cachedRootNodes.current.delete(removedItemElement);\n }\n });\n }}\n ></InternalIxTree>\n );\n }\n);\n\nexport default IxTree;\n"],"names":[],"mappings":";;;;;;AAiCO;;AAIH;;;AAUI;;AAGA;AACE;;AAGF;;AAEE;AAEA;AACE;;AAEJ;;AAGA;;;;;;;AAYE;AAEA;;;AAGI;;AAEJ;;AAIR;;"}
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import { ToastConfig as IxToastConfig } from '@siemens/ix';
|
|
2
2
|
export type ToastConfig = {
|
|
3
|
-
message
|
|
3
|
+
message?: string | React.ReactNode;
|
|
4
|
+
action?: React.ReactNode;
|
|
4
5
|
};
|
|
5
|
-
export declare function showToast(config: Omit<IxToastConfig, 'message'> & ToastConfig): Promise<import("@siemens/ix").ShowToastResult>;
|
|
6
|
+
export declare function showToast(config: Omit<IxToastConfig, 'message' | 'action'> & ToastConfig): Promise<import("@siemens/ix").ShowToastResult>;
|
|
@@ -1,8 +1,23 @@
|
|
|
1
|
+
import { Components, type TreeContext, type IxTreeCustomEvent } from '@siemens/ix';
|
|
1
2
|
import React from 'react';
|
|
2
|
-
|
|
3
|
-
type ExtractProps<TComponentOrTProps> = TComponentOrTProps extends React.ComponentType<infer TProps> ? TProps : TComponentOrTProps;
|
|
4
|
-
type IxTreeProps = ExtractProps<typeof InternalIxTree> & {
|
|
3
|
+
export type IxTreeProps = Omit<Components.IxTree, 'renderItem' | 'markItemAsDirty' | 'refreshTree'> & {
|
|
5
4
|
renderItem?: (data: any) => React.ReactNode;
|
|
5
|
+
onContextChange?: (event: IxTreeCustomEvent<TreeContext>) => void;
|
|
6
|
+
onNodeToggled?: (event: CustomEvent<{
|
|
7
|
+
id: string;
|
|
8
|
+
isExpaned: boolean;
|
|
9
|
+
}>) => void;
|
|
10
|
+
onNodeClicked?: (event: CustomEvent<string>) => void;
|
|
11
|
+
onNodeRemoved?: (event: CustomEvent<any>) => void;
|
|
6
12
|
};
|
|
7
|
-
export declare const IxTree:
|
|
13
|
+
export declare const IxTree: React.ForwardRefExoticComponent<Omit<Components.IxTree, "renderItem" | "markItemAsDirty" | "refreshTree"> & {
|
|
14
|
+
renderItem?: (data: any) => React.ReactNode;
|
|
15
|
+
onContextChange?: (event: IxTreeCustomEvent<TreeContext>) => void;
|
|
16
|
+
onNodeToggled?: (event: CustomEvent<{
|
|
17
|
+
id: string;
|
|
18
|
+
isExpaned: boolean;
|
|
19
|
+
}>) => void;
|
|
20
|
+
onNodeClicked?: (event: CustomEvent<string>) => void;
|
|
21
|
+
onNodeRemoved?: (event: CustomEvent<any>) => void;
|
|
22
|
+
} & React.RefAttributes<Components.IxTree>>;
|
|
8
23
|
export default IxTree;
|
package/package.json
CHANGED
|
@@ -7,7 +7,7 @@
|
|
|
7
7
|
"url": "https://github.com/siemens/ix",
|
|
8
8
|
"directory": "packages/react"
|
|
9
9
|
},
|
|
10
|
-
"version": "0.0.0-pr-
|
|
10
|
+
"version": "0.0.0-pr-2042-20250801111750",
|
|
11
11
|
"description": "Siemens iX for React",
|
|
12
12
|
"files": [
|
|
13
13
|
"LICENSE",
|
|
@@ -33,16 +33,20 @@
|
|
|
33
33
|
"license": "MIT",
|
|
34
34
|
"devDependencies": {
|
|
35
35
|
"@rollup/plugin-typescript": "^8.5.0",
|
|
36
|
-
"@testing-library/
|
|
36
|
+
"@testing-library/jest-dom": "^6.6.3",
|
|
37
|
+
"@testing-library/react": "^16.3.0",
|
|
38
|
+
"@testing-library/user-event": "^14.6.1",
|
|
37
39
|
"@types/node": "^20.16.0",
|
|
38
40
|
"@types/react": "^18",
|
|
39
41
|
"@types/react-dom": "^18",
|
|
40
|
-
"@vitejs/plugin-react": "^4.
|
|
42
|
+
"@vitejs/plugin-react": "^4.6.0",
|
|
43
|
+
"@vitest/browser": "^3.2.4",
|
|
41
44
|
"eslint": "~8.21.0",
|
|
42
45
|
"eslint-plugin-react": "^7.35.0",
|
|
43
46
|
"happy-dom": "^17.4.7",
|
|
44
47
|
"jest": "^29.7.0",
|
|
45
48
|
"jest-environment-jsdom": "^29.7.0",
|
|
49
|
+
"playwright": "^1.54.1",
|
|
46
50
|
"react": "^18",
|
|
47
51
|
"react-dom": "^18",
|
|
48
52
|
"rimraf": "^6.0.1",
|
|
@@ -50,8 +54,10 @@
|
|
|
50
54
|
"rollup-plugin-preserve-directives": "^0.4.0",
|
|
51
55
|
"shadow-dom-testing-library": "^1.11.2",
|
|
52
56
|
"typescript": "^5.6.3",
|
|
53
|
-
"
|
|
54
|
-
"
|
|
57
|
+
"vite": "^7.0.4",
|
|
58
|
+
"vitest": "^3.2.4",
|
|
59
|
+
"vitest-browser-react": "^1.0.0",
|
|
60
|
+
"@siemens/ix": "0.0.0-pr-2042-20250801111750",
|
|
55
61
|
"eslint-config-ix": "1.0.0"
|
|
56
62
|
},
|
|
57
63
|
"peerDependencies": {
|
|
@@ -60,7 +66,7 @@
|
|
|
60
66
|
"react-dom": "^18 || ^19"
|
|
61
67
|
},
|
|
62
68
|
"dependencies": {
|
|
63
|
-
"@siemens/ix": "0.0.0-pr-
|
|
69
|
+
"@siemens/ix": "0.0.0-pr-2042-20250801111750",
|
|
64
70
|
"@stencil/react-output-target": "^1.1.0",
|
|
65
71
|
"tslib": "*"
|
|
66
72
|
},
|
|
@@ -69,7 +75,8 @@
|
|
|
69
75
|
"clean": "rimraf dist && rimraf dist-transpiled",
|
|
70
76
|
"compile": "rollup -c",
|
|
71
77
|
"lint": "eslint src",
|
|
72
|
-
"test": "
|
|
73
|
-
"test
|
|
78
|
+
"test.setup": "playwright install chromium --with-deps",
|
|
79
|
+
"test": "vitest --config=vitest.browser.config.ts run",
|
|
80
|
+
"test.watch": "vitest --config=vitest.browser.config.ts"
|
|
74
81
|
}
|
|
75
82
|
}
|