@porsche-design-system/components-react 3.17.0-rc.1 → 3.17.0-rc.2

package/CHANGELOG.md

@@ -14,6 +14,15 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0),
 
 ### [Unreleased]
 
+### [3.17.0-rc.2] - 2024-08-01
+
+#### Fixed
+
+- `Optgoup`: hydration error in Next.js SSR context
+  ([#3432](https://github.com/porsche-design-system/porsche-design-system/pull/3432))
+- `Select`: ensure slotted image width
+  ([#3432](https://github.com/porsche-design-system/porsche-design-system/pull/3432))
+
 ### [3.17.0-rc.1] - 2024-07-31
 
 #### Added

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@porsche-design-system/components-react",
-  "version": "3.17.0-rc.1",
+  "version": "3.17.0-rc.2",
   "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": "3.17.0-rc.1"
+    "@porsche-design-system/components-js": "3.17.0-rc.2"
   },
   "peerDependencies": {
     "react": ">=18.0.0 <19.0.0",

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

@@ -7729,6 +7729,7 @@ const getComponentCss$z = (theme) => {
             '::slotted(img)': {
                 height: fontLineHeight,
                 borderRadius: borderRadiusSmall,
+                width: 'auto',
             },
         }),
         ...getOptionStyles(theme),

package/ssr/cjs/components-react/projects/react-ssr-wrapper/src/lib/dsr-components/optgroup.cjs

@@ -15,8 +15,11 @@ class DSROptgroup extends react.Component {
     render() {
         splitChildren.splitChildren(this.props.children);
         const { theme = 'light', hidden } = this.props;
-        minifyCss.minifyCss(stripFocusAndHoverStyles.stripFocusAndHoverStyles(stylesEntry.getOptgroupCss(this.props.disabled, theme)));
-        return (jsxRuntime.jsx(jsxRuntime.Fragment, {}));
+        const style = minifyCss.minifyCss(stripFocusAndHoverStyles.stripFocusAndHoverStyles(stylesEntry.getOptgroupCss(this.props.disabled, theme)));
+        return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("template", { shadowroot: "open", shadowrootmode: "open", children: [jsxRuntime.jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsxs("div", { role: "group", className: Object.entries({
+                                    optgroup: true,
+                                    'optgroup--disabled': this.props.disabled,
+                                }).map(([key, value]) => value && key).filter(Boolean).join(' '), "aria-disabled": this.props.disabled ? 'true' : null, "aria-hidden": hidden ? 'true' : null, "aria-labelledby": "label", children: [jsxRuntime.jsx("span", { className: "label", role: "presentation", id: "label", children: this.props.label }), jsxRuntime.jsx("slot", {})] }) })] }), this.props.children] }));
     }
 }
 

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

@@ -7727,6 +7727,7 @@ const getComponentCss$z = (theme) => {
             '::slotted(img)': {
                 height: fontLineHeight,
                 borderRadius: borderRadiusSmall,
+                width: 'auto',
             },
         }),
         ...getOptionStyles(theme),

package/ssr/esm/components-react/projects/react-ssr-wrapper/src/lib/dsr-components/optgroup.mjs

@@ -1,4 +1,4 @@
-import { jsx, Fragment } from 'react/jsx-runtime';
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 import { splitChildren } from '../../splitChildren.mjs';
 import { Component } from 'react';
 import { minifyCss } from '../../minifyCss.mjs';
@@ -13,8 +13,11 @@ class DSROptgroup extends Component {
     render() {
         splitChildren(this.props.children);
         const { theme = 'light', hidden } = this.props;
-        minifyCss(stripFocusAndHoverStyles(getComponentCss$y(this.props.disabled, theme)));
-        return (jsx(Fragment, {}));
+        const style = minifyCss(stripFocusAndHoverStyles(getComponentCss$y(this.props.disabled, theme)));
+        return (jsxs(Fragment, { children: [jsxs("template", { shadowroot: "open", shadowrootmode: "open", children: [jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsx(Fragment, { children: jsxs("div", { role: "group", className: Object.entries({
+                                    optgroup: true,
+                                    'optgroup--disabled': this.props.disabled,
+                                }).map(([key, value]) => value && key).filter(Boolean).join(' '), "aria-disabled": this.props.disabled ? 'true' : null, "aria-hidden": hidden ? 'true' : null, "aria-labelledby": "label", children: [jsx("span", { className: "label", role: "presentation", id: "label", children: this.props.label }), jsx("slot", {})] }) })] }), this.props.children] }));
     }
 }
 

package/ssr/esm/lib/dsr-components/optgroup.d.ts

@@ -1,5 +1,5 @@
 import { Component } from 'react';
-import { OptgroupInternalHTMLProps } from '@porsche-design-system/components/dist/utils';
+import { type OptgroupInternalHTMLProps } from '@porsche-design-system/components/dist/utils';
 /**
  * @slot {"name": "", "description": "Default slot for the optgroup content." }
  */