@porsche-design-system/components-react 3.22.1 → 3.23.0

package/CHANGELOG.md

@@ -14,14 +14,29 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0),
 
 ### [Unreleased]
 
+### [3.23.0] - 2024-12-12
+
+### [3.23.0-rc.0] - 2024-12-12
+
+#### Changed
+
+- `Select`: Slotted image of selected option now visible in combobox
+  ([#3651](https://github.com/porsche-design-system/porsche-design-system/pull/3651))
+
+#### Fixed
+
+- `Flyout`: transition bug in Safari ([3674](https://github.com/porsche-design-system/porsche-design-system/pull/3674))
+- `Styles`: dart sass deprecation warnings in `SCSS` variant
+  ([3664](https://github.com/porsche-design-system/porsche-design-system/pull/3664))
+
 ### [3.22.1] - 2024-12-09
 
 ### [3.22.1-rc.0] - 2024-12-09
 
 #### Fixed
 
-`Flyout Multilevel`: Secondary scroll area not shown in iOS Safari (iPhone only)
-([3663](https://github.com/porsche-design-system/porsche-design-system/pull/3663))
+- `Flyout Multilevel`: Secondary scroll area not shown in iOS Safari (iPhone only)
+  ([3663](https://github.com/porsche-design-system/porsche-design-system/pull/3663))
 
 ### [3.22.0] - 2024-12-06
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@porsche-design-system/components-react",
-  "version": "3.22.1",
+  "version": "3.23.0",
   "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.22.1"
+    "@porsche-design-system/components-js": "3.23.0"
   },
   "peerDependencies": {
     "ag-grid-community": ">= 32.0.0 <33.0.0",

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

@@ -8519,7 +8519,6 @@ const getOptionStyles = (theme) => {
             gap: '12px',
             padding: `${spacingStaticSmall} 12px`,
             paddingInlineStart: `var(${cssVariableSelectPaddingInlineStart}, 12px)`,
-            flex: `1 0 calc(${fontLineHeight} + ${spacingStaticSmall} * 2)`,
             minHeight: `calc(${fontLineHeight} + ${spacingStaticSmall} * 2)`, // TODO: Added this line to preserve height for empty option
             color: contrastHighColor,
             ...prefersColorSchemeDarkMediaQuery(theme, {
@@ -9747,7 +9746,7 @@ const cssVarBorderColor = '--p-select-border-color';
 const cssVarIconFilter = '--p-select-icon-filter';
 const cssVarBackgroundColorFocus = '--p-select-focus-background-color';
 const cssVarBorderColorFocus = '--p-select-focus-border-color';
-const getComponentCss$p = (direction, isOpen, isDisabled, hideLabel, state, isNativePopoverCase, theme) => {
+const getComponentCss$p = (direction, isOpen, isDisabled, hideLabel, state, isNativePopoverCase, theme, hasSlottedImage) => {
     return getCss({
         '@global': {
             ':host': {
@@ -9759,7 +9758,7 @@ const getComponentCss$p = (direction, isOpen, isDisabled, hideLabel, state, isNa
             },
             ...preventFoucOfNestedElementsStyles,
             // TODO: re-use select-wrapper-style
-            button: getButtonStyles(isDisabled, direction, isOpen, state, theme),
+            button: getButtonStyles(isDisabled, direction, isOpen, state, theme, hasSlottedImage),
         },
         root: {
             display: 'grid',
@@ -9801,7 +9800,7 @@ const getComponentCss$p = (direction, isOpen, isDisabled, hideLabel, state, isNa
 };
 // TODO: Rename to JSSStyles
 // TODO: use getSlottedTextFieldTextareaSelectStyles() instead an manipulate selectors like done with PIN Code or even better make it configurable as parameter
-const getButtonStyles = (isDisabled, direction, isOpen, state, theme) => {
+const getButtonStyles = (isDisabled, direction, isOpen, state, theme, hasSlottedImage) => {
     const { primaryColor, disabledColor, backgroundColor, contrastMediumColor } = getThemedColors(theme);
     const { primaryColor: primaryColorDark, disabledColor: disabledColorDark, backgroundColor: backgroundColorDark, contrastMediumColor: contrastMediumColorDark, } = getThemedColors('dark');
     const { formStateColor, formStateHoverColor } = getThemedFormStateColors(theme, state);
@@ -9811,7 +9810,6 @@ const getButtonStyles = (isDisabled, direction, isOpen, state, theme) => {
         overflowX: 'hidden', // TODO: Newly added (rest is copied from select-wrapper-dropdown), share rest for both components
         whiteSpace: 'nowrap', // TODO: Newly added (rest is copied from select-wrapper-dropdown), share rest for both components
         gridArea: '1/1/1/-1',
-        flex: 1,
         minWidth: 0,
         // TODO: abstract and re-use for multi-select, select-wrapper and text-field-wrapper
         height: `calc(${fontLineHeight} + 10px + ${borderWidthBase} * 2 + ${spacingStaticSmall} * 2)`, // we need 10px additionally so input height becomes 54px, // we need 6px additionally so input height becomes 50px
@@ -9841,9 +9839,25 @@ const getButtonStyles = (isDisabled, direction, isOpen, state, theme) => {
             }),
             ...prefersColorSchemeDarkMediaQuery(theme, getPlaceholderJssStyle({
                 color: `var(${cssVarTextColor}, ${primaryColorDark})`,
-                opacity: 1,
+                opacity: 1, // Opacity fixes placeholder being shown lighter in firefox
             })),
-        }, // Opacity fixes placeholder being shown lighter in firefox
+        },
+        ...(hasSlottedImage && {
+            '& > span': {
+                display: 'flex',
+                gap: '12px',
+                alignItems: 'center',
+            },
+            '& > span > span': {
+                textOverflow: 'ellipsis',
+                overflow: 'hidden',
+            },
+            '& img': {
+                height: fontLineHeight,
+                borderRadius: borderRadiusSmall,
+                width: 'auto',
+            },
+        }),
         ...hoverMediaQuery({
             '&:hover:not(:disabled):not(:focus-visible),label:hover~.wrapper &:not(:disabled):not(:focus-visible)': {
                 borderColor: `var(${cssVarBorderColor}, ${isOpen ? primaryColor : formStateHoverColor || primaryColor})`,

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

@@ -37,13 +37,9 @@ class DSRFlyout extends react.Component {
         const hasFooter = namedSlotChildren.filter(({ props: { slot } }) => slot === 'footer').length > 0;
         const hasSubFooter = namedSlotChildren.filter(({ props: { slot } }) => slot === 'sub-footer').length > 0;
         const style = minifyCss.minifyCss(stripFocusAndHoverStyles.stripFocusAndHoverStyles(stylesEntry.getFlyoutCss(this.props.open, (positionDeprecationMap[this.props.position] || this.props.position), hasHeader, hasFooter, hasSubFooter, this.props.footerBehavior, this.props.theme)));
-        return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("template", { shadowroot: "open", shadowrootmode: "open", children: [jsxRuntime.jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxRuntime.jsx("dialog", { 
-                            // "inert" will be known from React 19 onwards, see https://github.com/facebook/react/pull/24730
-                            // eslint-disable-next-line
-                            /* @ts-ignore */
-                            inert: this.props.open ? null : '', tabIndex: -1, ...utilsEntry.parseAndGetAriaAttributes({
+        return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("template", { shadowroot: "open", shadowrootmode: "open", children: [jsxRuntime.jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxRuntime.jsx("dialog", { tabIndex: -1, ...utilsEntry.parseAndGetAriaAttributes({
                                 'aria-modal': true,
-                                ...(hasHeader && { 'aria-label': namedSlotChildren.find(({ props: { slot } }) => slot === 'header')?.props.children }),
+                                ...{ 'aria-label': hasHeader ? namedSlotChildren.find(({ props: { slot } }) => slot === 'header')?.props.children : 'Flyout' },
                                 ...utilsEntry.parseAndGetAriaAttributes(this.props.aria),
                             }), children: jsxRuntime.jsx("div", { className: "scroller", children: jsxRuntime.jsxs("div", { className: "flyout", children: [jsxRuntime.jsx(button_wrapper.PButton, { variant: "ghost", className: "dismiss", type: "button", hideLabel: true, icon: "close", theme: this.props.theme, children: "Dismiss flyout" }), hasHeader && jsxRuntime.jsx("slot", { name: "header" }), jsxRuntime.jsx("slot", {}), hasFooter && jsxRuntime.jsx("slot", { name: "footer" }), hasSubFooter && jsxRuntime.jsx("slot", { name: "sub-footer" })] }) }) })] }), this.props.children] }));
     }

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

@@ -39,6 +39,7 @@ class DSRSelect extends react.Component {
     isNativePopoverCase = false;
     parentTableElement;
     popoverElement;
+    slottedImagePath = '';
     formDisabledCallback() {
     }
     formStateRestoreCallback() {
@@ -54,8 +55,8 @@ class DSRSelect extends react.Component {
         const selectMessageId = (this.props.message || namedSlotChildren.filter(({ props: { slot } }) => slot === 'message').length > 0) && ['success', 'error'].includes(this.props.state) ? stateMessage.messageId : undefined;
         const initialStatusId = 'initial-status';
         const ariaDescribedBy = [descriptionId, selectMessageId, initialStatusId].filter(Boolean).join(' ');
-        const style = minifyCss.minifyCss(stripFocusAndHoverStyles.stripFocusAndHoverStyles(stylesEntry.getSelectCss('down', this.props.isOpen, this.props.disabled, this.props.hideLabel, this.props.state, this.props.isNativePopoverCase, this.props.theme)));
-        return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("template", { shadowroot: "open", shadowrootmode: "open", shadowrootdelegatesfocus: "true", children: [jsxRuntime.jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxRuntime.jsxs("div", { className: "root", children: [jsxRuntime.jsx(label.Label, { hasLabel: this.props.label || namedSlotChildren.filter(({ props: { slot } }) => slot === 'label').length > 0, hasDescription: this.props.description || namedSlotChildren.filter(({ props: { slot } }) => slot === 'description').length > 0, host: null, label: this.props.label, description: this.props.description, htmlFor: buttonId, isRequired: this.props.required, isDisabled: this.props.disabled }), jsxRuntime.jsxs("div", { className: `wrapper${this.props.disabled ? ' disabled' : ''}`, children: [jsxRuntime.jsx("button", { "aria-invalid": this.props.state === 'error' ? 'true' : null, type: "button", role: "combobox", id: buttonId, ...utilsEntry.getComboboxAriaAttributes(this.props.isOpen, this.props.required, label.labelId, ariaDescribedBy, dropdownId), disabled: this.props.disabled, children: utilsEntry.getSelectedOptionString(otherChildren) }), jsxRuntime.jsx(icon_wrapper.PIcon, { className: "icon", name: "arrow-head-down", theme: this.props.theme, color: this.props.disabled ? 'state-disabled' : 'primary', "aria-hidden": "true" }), jsxRuntime.jsx("div", { ...(this.props.isNativePopoverCase && {
+        const style = minifyCss.minifyCss(stripFocusAndHoverStyles.stripFocusAndHoverStyles(stylesEntry.getSelectCss('down', this.props.isOpen, this.props.disabled, this.props.hideLabel, this.props.state, this.props.isNativePopoverCase, this.props.theme, !!this.props.slottedImagePath)));
+        return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("template", { shadowroot: "open", shadowrootmode: "open", shadowrootdelegatesfocus: "true", children: [jsxRuntime.jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxRuntime.jsxs("div", { className: "root", children: [jsxRuntime.jsx(label.Label, { hasLabel: this.props.label || namedSlotChildren.filter(({ props: { slot } }) => slot === 'label').length > 0, hasDescription: this.props.description || namedSlotChildren.filter(({ props: { slot } }) => slot === 'description').length > 0, host: null, label: this.props.label, description: this.props.description, htmlFor: buttonId, isRequired: this.props.required, isDisabled: this.props.disabled }), jsxRuntime.jsxs("div", { className: `wrapper${this.props.disabled ? ' disabled' : ''}`, children: [jsxRuntime.jsx("button", { "aria-invalid": this.props.state === 'error' ? 'true' : null, type: "button", role: "combobox", id: buttonId, ...utilsEntry.getComboboxAriaAttributes(this.props.isOpen, this.props.required, label.labelId, ariaDescribedBy, dropdownId), disabled: this.props.disabled, children: this.props.slottedImagePath ? (jsxRuntime.jsxs("span", { children: [jsxRuntime.jsx("img", { src: this.props.slottedImagePath, alt: "" }), jsxRuntime.jsx("span", { children: utilsEntry.getSelectedOptionString(otherChildren) })] })) : (utilsEntry.getSelectedOptionString(otherChildren)) }), jsxRuntime.jsx(icon_wrapper.PIcon, { className: "icon", name: "arrow-head-down", theme: this.props.theme, color: this.props.disabled ? 'state-disabled' : 'primary', "aria-hidden": "true" }), jsxRuntime.jsx("div", { ...(this.props.isNativePopoverCase && {
                                                 popover: 'auto',
                                                 className: 'popover',
                                                 ...(this.props.popoverElement?.matches(':popover-open') && {
@@ -63,6 +64,10 @@ class DSRSelect extends react.Component {
                                                 }),
                                             }), children: jsxRuntime.jsx("div", { id: dropdownId, className: "listbox", ...utilsEntry.getListAriaAttributes(this.props.label, this.props.required, false, this.props.isOpen), children: jsxRuntime.jsx("slot", {}) }) })] }), jsxRuntime.jsx(stateMessage.StateMessage, { hasMessage: (this.props.message || namedSlotChildren.filter(({ props: { slot } }) => slot === 'message').length > 0) && ['success', 'error'].includes(this.props.state), state: this.props.state, message: this.props.message, theme: this.props.theme, host: null }), jsxRuntime.jsx("span", { className: "sr-only", role: "status", "aria-live": "assertive", "aria-relevant": "additions text", children: this.props.srHighlightedOptionText })] })] }), this.props.children] }));
     }
+    getSelectedOptionImagePath = (options) => options
+        .find((option) => option.selected)
+        ?.querySelector('img')
+        ?.getAttribute('src') ?? '';
 }
 
 exports.DSRSelect = DSRSelect;

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

@@ -8517,7 +8517,6 @@ const getOptionStyles = (theme) => {
             gap: '12px',
             padding: `${spacingStaticSmall} 12px`,
             paddingInlineStart: `var(${cssVariableSelectPaddingInlineStart}, 12px)`,
-            flex: `1 0 calc(${fontLineHeight} + ${spacingStaticSmall} * 2)`,
             minHeight: `calc(${fontLineHeight} + ${spacingStaticSmall} * 2)`, // TODO: Added this line to preserve height for empty option
             color: contrastHighColor,
             ...prefersColorSchemeDarkMediaQuery(theme, {
@@ -9745,7 +9744,7 @@ const cssVarBorderColor = '--p-select-border-color';
 const cssVarIconFilter = '--p-select-icon-filter';
 const cssVarBackgroundColorFocus = '--p-select-focus-background-color';
 const cssVarBorderColorFocus = '--p-select-focus-border-color';
-const getComponentCss$p = (direction, isOpen, isDisabled, hideLabel, state, isNativePopoverCase, theme) => {
+const getComponentCss$p = (direction, isOpen, isDisabled, hideLabel, state, isNativePopoverCase, theme, hasSlottedImage) => {
     return getCss({
         '@global': {
             ':host': {
@@ -9757,7 +9756,7 @@ const getComponentCss$p = (direction, isOpen, isDisabled, hideLabel, state, isNa
             },
             ...preventFoucOfNestedElementsStyles,
             // TODO: re-use select-wrapper-style
-            button: getButtonStyles(isDisabled, direction, isOpen, state, theme),
+            button: getButtonStyles(isDisabled, direction, isOpen, state, theme, hasSlottedImage),
         },
         root: {
             display: 'grid',
@@ -9799,7 +9798,7 @@ const getComponentCss$p = (direction, isOpen, isDisabled, hideLabel, state, isNa
 };
 // TODO: Rename to JSSStyles
 // TODO: use getSlottedTextFieldTextareaSelectStyles() instead an manipulate selectors like done with PIN Code or even better make it configurable as parameter
-const getButtonStyles = (isDisabled, direction, isOpen, state, theme) => {
+const getButtonStyles = (isDisabled, direction, isOpen, state, theme, hasSlottedImage) => {
     const { primaryColor, disabledColor, backgroundColor, contrastMediumColor } = getThemedColors(theme);
     const { primaryColor: primaryColorDark, disabledColor: disabledColorDark, backgroundColor: backgroundColorDark, contrastMediumColor: contrastMediumColorDark, } = getThemedColors('dark');
     const { formStateColor, formStateHoverColor } = getThemedFormStateColors(theme, state);
@@ -9809,7 +9808,6 @@ const getButtonStyles = (isDisabled, direction, isOpen, state, theme) => {
         overflowX: 'hidden', // TODO: Newly added (rest is copied from select-wrapper-dropdown), share rest for both components
         whiteSpace: 'nowrap', // TODO: Newly added (rest is copied from select-wrapper-dropdown), share rest for both components
         gridArea: '1/1/1/-1',
-        flex: 1,
         minWidth: 0,
         // TODO: abstract and re-use for multi-select, select-wrapper and text-field-wrapper
         height: `calc(${fontLineHeight} + 10px + ${borderWidthBase} * 2 + ${spacingStaticSmall} * 2)`, // we need 10px additionally so input height becomes 54px, // we need 6px additionally so input height becomes 50px
@@ -9839,9 +9837,25 @@ const getButtonStyles = (isDisabled, direction, isOpen, state, theme) => {
             }),
             ...prefersColorSchemeDarkMediaQuery(theme, getPlaceholderJssStyle({
                 color: `var(${cssVarTextColor}, ${primaryColorDark})`,
-                opacity: 1,
+                opacity: 1, // Opacity fixes placeholder being shown lighter in firefox
             })),
-        }, // Opacity fixes placeholder being shown lighter in firefox
+        },
+        ...(hasSlottedImage && {
+            '& > span': {
+                display: 'flex',
+                gap: '12px',
+                alignItems: 'center',
+            },
+            '& > span > span': {
+                textOverflow: 'ellipsis',
+                overflow: 'hidden',
+            },
+            '& img': {
+                height: fontLineHeight,
+                borderRadius: borderRadiusSmall,
+                width: 'auto',
+            },
+        }),
         ...hoverMediaQuery({
             '&:hover:not(:disabled):not(:focus-visible),label:hover~.wrapper &:not(:disabled):not(:focus-visible)': {
                 borderColor: `var(${cssVarBorderColor}, ${isOpen ? primaryColor : formStateHoverColor || primaryColor})`,

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

@@ -35,13 +35,9 @@ class DSRFlyout extends Component {
         const hasFooter = namedSlotChildren.filter(({ props: { slot } }) => slot === 'footer').length > 0;
         const hasSubFooter = namedSlotChildren.filter(({ props: { slot } }) => slot === 'sub-footer').length > 0;
         const style = minifyCss(stripFocusAndHoverStyles(getComponentCss$R(this.props.open, (positionDeprecationMap[this.props.position] || this.props.position), hasHeader, hasFooter, hasSubFooter, this.props.footerBehavior, this.props.theme)));
-        return (jsxs(Fragment, { children: [jsxs("template", { shadowroot: "open", shadowrootmode: "open", children: [jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsx("dialog", { 
-                            // "inert" will be known from React 19 onwards, see https://github.com/facebook/react/pull/24730
-                            // eslint-disable-next-line
-                            /* @ts-ignore */
-                            inert: this.props.open ? null : '', tabIndex: -1, ...parseAndGetAriaAttributes({
+        return (jsxs(Fragment, { children: [jsxs("template", { shadowroot: "open", shadowrootmode: "open", children: [jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsx("dialog", { tabIndex: -1, ...parseAndGetAriaAttributes({
                                 'aria-modal': true,
-                                ...(hasHeader && { 'aria-label': namedSlotChildren.find(({ props: { slot } }) => slot === 'header')?.props.children }),
+                                ...{ 'aria-label': hasHeader ? namedSlotChildren.find(({ props: { slot } }) => slot === 'header')?.props.children : 'Flyout' },
                                 ...parseAndGetAriaAttributes(this.props.aria),
                             }), children: jsx("div", { className: "scroller", children: jsxs("div", { className: "flyout", children: [jsx(PButton, { variant: "ghost", className: "dismiss", type: "button", hideLabel: true, icon: "close", theme: this.props.theme, children: "Dismiss flyout" }), hasHeader && jsx("slot", { name: "header" }), jsx("slot", {}), hasFooter && jsx("slot", { name: "footer" }), hasSubFooter && jsx("slot", { name: "sub-footer" })] }) }) })] }), this.props.children] }));
     }

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

@@ -37,6 +37,7 @@ class DSRSelect extends Component {
     isNativePopoverCase = false;
     parentTableElement;
     popoverElement;
+    slottedImagePath = '';
     formDisabledCallback() {
     }
     formStateRestoreCallback() {
@@ -52,8 +53,8 @@ class DSRSelect extends Component {
         const selectMessageId = (this.props.message || namedSlotChildren.filter(({ props: { slot } }) => slot === 'message').length > 0) && ['success', 'error'].includes(this.props.state) ? messageId : undefined;
         const initialStatusId = 'initial-status';
         const ariaDescribedBy = [descriptionId, selectMessageId, initialStatusId].filter(Boolean).join(' ');
-        const style = minifyCss(stripFocusAndHoverStyles(getComponentCss$p('down', this.props.isOpen, this.props.disabled, this.props.hideLabel, this.props.state, this.props.isNativePopoverCase, this.props.theme)));
-        return (jsxs(Fragment, { children: [jsxs("template", { shadowroot: "open", shadowrootmode: "open", shadowrootdelegatesfocus: "true", children: [jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxs("div", { className: "root", children: [jsx(Label, { hasLabel: this.props.label || namedSlotChildren.filter(({ props: { slot } }) => slot === 'label').length > 0, hasDescription: this.props.description || namedSlotChildren.filter(({ props: { slot } }) => slot === 'description').length > 0, host: null, label: this.props.label, description: this.props.description, htmlFor: buttonId, isRequired: this.props.required, isDisabled: this.props.disabled }), jsxs("div", { className: `wrapper${this.props.disabled ? ' disabled' : ''}`, children: [jsx("button", { "aria-invalid": this.props.state === 'error' ? 'true' : null, type: "button", role: "combobox", id: buttonId, ...getComboboxAriaAttributes(this.props.isOpen, this.props.required, labelId, ariaDescribedBy, dropdownId), disabled: this.props.disabled, children: getSelectedOptionString(otherChildren) }), jsx(PIcon, { className: "icon", name: "arrow-head-down", theme: this.props.theme, color: this.props.disabled ? 'state-disabled' : 'primary', "aria-hidden": "true" }), jsx("div", { ...(this.props.isNativePopoverCase && {
+        const style = minifyCss(stripFocusAndHoverStyles(getComponentCss$p('down', this.props.isOpen, this.props.disabled, this.props.hideLabel, this.props.state, this.props.isNativePopoverCase, this.props.theme, !!this.props.slottedImagePath)));
+        return (jsxs(Fragment, { children: [jsxs("template", { shadowroot: "open", shadowrootmode: "open", shadowrootdelegatesfocus: "true", children: [jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxs("div", { className: "root", children: [jsx(Label, { hasLabel: this.props.label || namedSlotChildren.filter(({ props: { slot } }) => slot === 'label').length > 0, hasDescription: this.props.description || namedSlotChildren.filter(({ props: { slot } }) => slot === 'description').length > 0, host: null, label: this.props.label, description: this.props.description, htmlFor: buttonId, isRequired: this.props.required, isDisabled: this.props.disabled }), jsxs("div", { className: `wrapper${this.props.disabled ? ' disabled' : ''}`, children: [jsx("button", { "aria-invalid": this.props.state === 'error' ? 'true' : null, type: "button", role: "combobox", id: buttonId, ...getComboboxAriaAttributes(this.props.isOpen, this.props.required, labelId, ariaDescribedBy, dropdownId), disabled: this.props.disabled, children: this.props.slottedImagePath ? (jsxs("span", { children: [jsx("img", { src: this.props.slottedImagePath, alt: "" }), jsx("span", { children: getSelectedOptionString(otherChildren) })] })) : (getSelectedOptionString(otherChildren)) }), jsx(PIcon, { className: "icon", name: "arrow-head-down", theme: this.props.theme, color: this.props.disabled ? 'state-disabled' : 'primary', "aria-hidden": "true" }), jsx("div", { ...(this.props.isNativePopoverCase && {
                                                 popover: 'auto',
                                                 className: 'popover',
                                                 ...(this.props.popoverElement?.matches(':popover-open') && {
@@ -61,6 +62,10 @@ class DSRSelect extends Component {
                                                 }),
                                             }), children: jsx("div", { id: dropdownId, className: "listbox", ...getListAriaAttributes(this.props.label, this.props.required, false, this.props.isOpen), children: jsx("slot", {}) }) })] }), jsx(StateMessage, { hasMessage: (this.props.message || namedSlotChildren.filter(({ props: { slot } }) => slot === 'message').length > 0) && ['success', 'error'].includes(this.props.state), state: this.props.state, message: this.props.message, theme: this.props.theme, host: null }), jsx("span", { className: "sr-only", role: "status", "aria-live": "assertive", "aria-relevant": "additions text", children: this.props.srHighlightedOptionText })] })] }), this.props.children] }));
     }
+    getSelectedOptionImagePath = (options) => options
+        .find((option) => option.selected)
+        ?.querySelector('img')
+        ?.getAttribute('src') ?? '';
 }
 
 export { DSRSelect };

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

@@ -24,8 +24,10 @@ export declare class DSRSelect extends Component<any> {
     private isNativePopoverCase;
     private parentTableElement;
     private popoverElement;
+    private slottedImagePath;
     formDisabledCallback(): void;
     formStateRestoreCallback(): void;
     formResetCallback(): void;
     render(): JSX.Element;
+    private getSelectedOptionImagePath;
 }