@porsche-design-system/components-react 2.18.0 → 2.19.0-rc.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@porsche-design-system/components-react",
-  "version": "2.18.0",
+  "version": "2.19.0-rc.1",
   "description": "Porsche Design System is a component library designed to help developers create the best experience for software or services distributed by Dr. Ing. h.c. F. Porsche AG.",
   "keywords": [
     "porsche",
@@ -17,7 +17,7 @@
   "license": "SEE LICENSE IN LICENSE",
   "homepage": "https://designsystem.porsche.com",
   "dependencies": {
-    "@porsche-design-system/components-js": "2.18.0"
+    "@porsche-design-system/components-js": "2.19.0-rc.1"
   },
   "peerDependencies": {
     "react": ">=17.0.0 <19.0.0",

package/partials/index.js

@@ -1,7 +1,5 @@
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
-
 var partials = require('@porsche-design-system/components-js/partials');
 
 

package/provider.js

@@ -11,7 +11,7 @@ const PorscheDesignSystemContext = react.createContext({
 const PorscheDesignSystemProvider = ({ prefix = '', ...props }) => {
     react.useEffect(() => {
         componentsJs.load({ prefix });
-    }, [prefix]);
+    }, []); // No runtime prefix change is supported
     return jsxRuntime.jsx(PorscheDesignSystemContext.Provider, { value: { prefix }, ...props });
 };
 

package/ssr/components/dist/styles/esm/styles-entry.js

@@ -7930,9 +7930,10 @@ const transformSelector = (selector) => ['a', 'button'].map((tag) => selector.re
 const getComponentCss$b = (size, weight, theme) => {
     const { baseColor, hoverColor, activeColor, focusColor } = getThemedColors(theme);
     return getCss({
-        '@global': Object.assign({ ':host': Object.assign({ display: 'block' }, addImportantToEachRule({
-                position: 'relative',
-            })) }, addImportantToEachRule(Object.assign(Object.assign({ 
+        '@global': Object.assign({ ':host': {
+                display: 'block',
+                position: addImportantToRule('relative'),
+            } }, addImportantToEachRule(Object.assign(Object.assign({ 
             // would be nice to use shared selector like '::slotted([role])'
             // but this doesn't work reliably when rendering in browser
             [transformSelector('::slotted([role])')]: {

package/ssr/components-react/projects/react-ssr-wrapper/src/hooks.js

@@ -55,7 +55,7 @@ const useToastManager = () => {
     const tagName = usePrefix('p-toast');
     return {
         addMessage: (message) => {
-            const toast = document.querySelector(tagName);
+            const toast = document.body.querySelector(tagName);
             customElements.whenDefined(tagName).then(() => toast.addMessage(message));
         },
     };

package/ssr/components-react/projects/react-ssr-wrapper/src/provider.js

@@ -11,7 +11,7 @@ const PorscheDesignSystemContext = react.createContext({
 const PorscheDesignSystemProvider = ({ prefix = '', ...props }) => {
     react.useEffect(() => {
         componentsJs.load({ prefix });
-    }, [prefix]);
+    }, []); // No runtime prefix change is supported
     return jsxRuntime.jsx(PorscheDesignSystemContext.Provider, { value: { prefix }, ...props });
 };
 

package/ssr/esm/components/dist/styles/esm/styles-entry.js

@@ -7928,9 +7928,10 @@ const transformSelector = (selector) => ['a', 'button'].map((tag) => selector.re
 const getComponentCss$b = (size, weight, theme) => {
     const { baseColor, hoverColor, activeColor, focusColor } = getThemedColors(theme);
     return getCss({
-        '@global': Object.assign({ ':host': Object.assign({ display: 'block' }, addImportantToEachRule({
-                position: 'relative',
-            })) }, addImportantToEachRule(Object.assign(Object.assign({ 
+        '@global': Object.assign({ ':host': {
+                display: 'block',
+                position: addImportantToRule('relative'),
+            } }, addImportantToEachRule(Object.assign(Object.assign({ 
             // would be nice to use shared selector like '::slotted([role])'
             // but this doesn't work reliably when rendering in browser
             [transformSelector('::slotted([role])')]: {

package/ssr/esm/components-react/projects/react-ssr-wrapper/src/hooks.js

@@ -53,7 +53,7 @@ const useToastManager = () => {
     const tagName = usePrefix('p-toast');
     return {
         addMessage: (message) => {
-            const toast = document.querySelector(tagName);
+            const toast = document.body.querySelector(tagName);
             customElements.whenDefined(tagName).then(() => toast.addMessage(message));
         },
     };

package/ssr/esm/components-react/projects/react-ssr-wrapper/src/provider.js

@@ -9,7 +9,7 @@ const PorscheDesignSystemContext = createContext({
 const PorscheDesignSystemProvider = ({ prefix = '', ...props }) => {
     useEffect(() => {
         load({ prefix });
-    }, [prefix]);
+    }, []); // No runtime prefix change is supported
     return jsx(PorscheDesignSystemContext.Provider, { value: { prefix }, ...props });
 };