@porsche-design-system/components-react 3.13.0-rc.2 → 3.13.1

package/CHANGELOG.md

@@ -14,6 +14,19 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0),
 
 ### [Unreleased]
 
+### [3.13.1] - 2024-03-20
+
+#### Fixed
+
+- `Modal`: Unexpected scrolling behavior on iOS >= 17.4
+  ([#3128](https://github.com/porsche-design-system/porsche-design-system/pull/3128))
+- `Select`, `Multi-Select`: Cropping issues of select dropdown when used inside `Table` component
+  ([#3114](https://github.com/porsche-design-system/porsche-design-system/pull/3114))
+- `Flyout`, `Flyout Navigation`: iOS Safari URL bar overlaying
+  ([#3131](https://github.com/porsche-design-system/porsche-design-system/pull/3131))
+
+### [3.13.0] - 2024-03-11
+
 ### [3.13.0-rc.2] - 2024-03-11
 
 #### Added

package/package.json

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

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

@@ -4308,22 +4308,19 @@ const getFontSizeText = (size) => {
     return fontSizeTextMap[size];
 };
 
-// TODO: why not using getHiddenTextJssStyle()?
 // Needed for slotted anchor and hidden label, which then enlarges the hidden label to equal host size and indents the text to be visually hidden.
 const getVisibilityJssStyle = (hideLabel) => {
     return hideLabel
         ? {
-            position: 'absolute',
-            inset: 0,
             whiteSpace: 'nowrap',
-            textIndent: '-999999px', // TODO: check if text-indent still works for RTL-mode in this case
+            textIndent: '-999999px', // Needed because standard sr-only classes don't work here due that we need a bounding box for the focus style
+            overflow: 'hidden',
         }
         : {
-            position: 'relative',
-            inset: 'auto',
             whiteSpace: 'inherit',
             textIndent: 0,
             zIndex: 1, // fix Firefox bug on :hover (#2583)
+            overflow: 'visible',
         };
 };
 const offsetVertical = '-2px';
@@ -4350,7 +4347,6 @@ const getLinkButtonPureStyles = (icon, iconSource, active, isDisabledOrLoading,
         },
         root: {
             display: 'flex',
-            gap: spacingStaticXSmall,
             width: '100%',
             padding: 0,
             margin: 0, // Removes default button margin on safari 15
@@ -4359,7 +4355,9 @@ const getLinkButtonPureStyles = (icon, iconSource, active, isDisabledOrLoading,
                 color: isDisabledOrLoading ? disabledColorDark : primaryColorDark,
             }),
             ...textSmallStyle,
-            ...mergeDeep(buildResponsiveStyles(stretch, (stretchValue) => ({
+            ...mergeDeep(buildResponsiveStyles(hideLabel, (hidelabelValue) => ({
+                gap: hidelabelValue ? 0 : spacingStaticXSmall,
+            })), buildResponsiveStyles(stretch, (stretchValue) => ({
                 justifyContent: stretchValue ? 'space-between' : 'flex-start',
                 alignItems: stretchValue ? 'center' : 'flex-start',
             })), buildResponsiveStyles(size, (sizeValue) => ({
@@ -4396,28 +4394,30 @@ const getLinkButtonPureStyles = (icon, iconSource, active, isDisabledOrLoading,
                 })),
             ...(!hasSlottedAnchor && getFocusJssStyle(theme, { pseudo: true, offset: '-2px' })),
         },
-        label: {
-            transition: getTransition('opacity'),
-            position: 'relative', // needed for hover state when icon="none" is set
-        },
-        ...(hasIcon && {
-            icon: {
-                position: 'relative',
-                flexShrink: '0',
-                width: fontLineHeight,
-                height: fontLineHeight,
-                // workaround for Safari to optimize vertical alignment of icons
-                // TODO: check if this is still needed after optimized icons are included
-                '@supports (width: round(down, 1px, 1px))': {
-                    width: `round(down, ${fontLineHeight}, 1px)`,
-                    height: `round(down, ${fontLineHeight}, 1px)`,
+        ...(hasIcon
+            ? {
+                icon: {
+                    position: 'relative',
+                    flexShrink: '0',
+                    width: fontLineHeight,
+                    height: fontLineHeight,
+                    // workaround for Safari to optimize vertical alignment of icons
+                    // TODO: check if this is still needed after optimized icons are included
+                    '@supports (width: round(down, 1px, 1px))': {
+                        width: `round(down, ${fontLineHeight}, 1px)`,
+                        height: `round(down, ${fontLineHeight}, 1px)`,
+                    },
                 },
-            },
-            label: mergeDeep(buildResponsiveStyles(hideLabel, getVisibilityJssStyle), buildResponsiveStyles(alignLabel, (alignLabelValue) => ({
-                // TODO: we should remove 'left' here and map the value in the component class already to 'start' but might be difficult due to breakpoint customizable prop value
-                order: alignLabelValue === 'left' || alignLabelValue === 'start' ? -1 : 0,
-            }))),
-        }),
+                label: mergeDeep(buildResponsiveStyles(hideLabel, getVisibilityJssStyle), buildResponsiveStyles(alignLabel, (alignLabelValue) => ({
+                    // TODO: we should remove 'left' here and map the value in the component class already to 'start' but might be difficult due to breakpoint customizable prop value
+                    order: alignLabelValue === 'left' || alignLabelValue === 'start' ? -1 : 0,
+                }))),
+            }
+            : {
+                label: {
+                    position: 'relative', // needed for hover state when icon="none" is set
+                },
+            }),
     };
 };
 
@@ -5651,8 +5651,8 @@ const getComponentCss$S = (inline, wrap, direction, justifyContent, alignItems,
 const getFlyoutDialogResetJssStyle = () => {
     return {
         position: 'fixed',
-        height: '100vh',
-        maxHeight: '100vh',
+        height: '100dvh',
+        maxHeight: '100dvh',
         margin: '0',
         padding: '0',
         border: '0',
@@ -7184,6 +7184,22 @@ const getPlaceholderJssStyle = (styles) => ({
     '&:-moz-placeholder': styles /* Firefox 18- */,
 });
 
+// Used for elements that must overflow `overflow:hidden` containers, are positioned absolute and wrapped within a native `popover` element.
+const getPopoverResetJssStyle = () => {
+    return {
+        position: 'absolute',
+        border: 'none',
+        background: 'none',
+        pointerEvents: 'all',
+        padding: 0,
+        margin: 0,
+        overflow: 'initial',
+        '&:-internal-popover-in-top-layer::backdrop': {
+            display: 'none',
+        },
+    };
+};
+
 const getSlottedTextFieldTextareaSelectStyles = (child, state, isLoading, theme, additionalDefaultJssStyle) => {
     const { primaryColor, contrastLowColor, contrastMediumColor, disabledColor } = getThemedColors(theme);
     const { primaryColor: primaryColorDark, contrastLowColor: contrastLowColorDark, contrastMediumColor: contrastMediumColorDark, disabledColor: disabledColorDark, } = getThemedColors('dark');
@@ -7295,7 +7311,7 @@ const getUnitCounterJssStyle = (isDisabled, theme) => {
 
 const INTERNAL_MULTI_SELECT_SLOT = 'internal-select';
 
-const getComponentCss$z = (direction, isOpen, isDisabled, hideLabel, state, isWithinForm, theme) => {
+const getComponentCss$z = (direction, isOpen, isDisabled, hideLabel, state, isWithinForm, isNativePopoverCase, theme) => {
     const { contrastHighColor } = getThemedColors(theme);
     const { contrastHighColor: contrastHighColorDark } = getThemedColors('dark');
     return getCss({
@@ -7366,6 +7382,11 @@ const getComponentCss$z = (direction, isOpen, isDisabled, hideLabel, state, isWi
         ...getFunctionalComponentLabelStyles(isDisabled, hideLabel, theme),
         // .message
         ...getFunctionalComponentStateMessageStyles(theme, state),
+        ...(isNativePopoverCase && {
+            popover: {
+                ...getPopoverResetJssStyle(),
+            },
+        }),
     });
 };
 // TODO: use getSlottedTextFieldTextareaSelectStyles() instead an manipulate selectors like done with PIN Code or even better make it configurable as parameter
@@ -7812,7 +7833,7 @@ const getDirectionArrowMap = (theme) => {
         },
     };
 };
-const getComponentCss$w = (direction, isNative, theme) => {
+const getComponentCss$w = (direction, isNativePopoverCase, theme) => {
     const { hoverColor, backgroundColor, primaryColor, backgroundSurfaceColor } = getThemedColors(theme);
     const { hoverColor: hoverColorDark, primaryColor: primaryColorDark, backgroundSurfaceColor: backgroundSurfaceColorDark, } = getThemedColors('dark');
     const shadowColor = 'rgba(0,0,0,0.3)';
@@ -7862,13 +7883,9 @@ const getComponentCss$w = (direction, isNative, theme) => {
             transform: 'translate3d(0,0,0)', // Fixes movement on hover in Safari
         },
         spacer: {
-            ...(isNative
+            ...(isNativePopoverCase
                 ? {
-                    overflow: 'initial',
-                    backgroundColor: 'transparent',
-                    border: 'none',
-                    margin: 0,
-                    padding: 0,
+                    ...getPopoverResetJssStyle(),
                 }
                 : {
                     inset: `${-safeZonePx}px`,
@@ -8560,7 +8577,7 @@ const getListStyles$1 = (direction, theme) => {
         },
     };
 };
-const getComponentCss$r = (direction, isOpen, state, disabled, filter, isNativePopover, theme) => {
+const getComponentCss$r = (direction, isOpen, state, disabled, filter, isNativePopoverCase, theme) => {
     return getCss(
     // merge because of global styles
     mergeDeep({
@@ -8573,21 +8590,9 @@ const getComponentCss$r = (direction, isOpen, state, disabled, filter, isNativeP
         'sr-text': {
             display: 'none',
         },
-        ...(isNativePopover && {
+        ...(isNativePopoverCase && {
             popover: {
-                position: 'absolute',
-                bottom: 'auto',
-                border: 'none',
-                background: 'none',
-                pointerEvents: 'all',
-                padding: 0,
-                margin: 0,
-                overflow: 'initial',
-                height: 'auto',
-                maxHeight: `${8.5 * (OPTION_HEIGHT + 8) + 6 + 2}px`, // 8px = gap, 6px = padding, 2px = border
-                '&:-internal-popover-in-top-layer::backdrop': {
-                    display: 'none',
-                },
+                ...getPopoverResetJssStyle(),
             },
         }),
     }, filter
@@ -8739,7 +8744,7 @@ const getOptionStyles = (theme) => {
 
 const INTERNAL_SELECT_SLOT = 'internal-select';
 
-const getComponentCss$o = (direction, isOpen, isDisabled, hideLabel, state, isWithinForm, theme) => {
+const getComponentCss$o = (direction, isOpen, isDisabled, hideLabel, state, isWithinForm, isNativePopoverCase, theme) => {
     return getCss({
         '@global': {
             ':host': addImportantToEachRule({
@@ -8787,6 +8792,11 @@ const getComponentCss$o = (direction, isOpen, isDisabled, hideLabel, state, isWi
         ...getFunctionalComponentLabelStyles(isDisabled, hideLabel, theme),
         // .message
         ...getFunctionalComponentStateMessageStyles(theme, state),
+        ...(isNativePopoverCase && {
+            popover: {
+                ...getPopoverResetJssStyle(),
+            },
+        }),
     });
 };
 // TODO: Rename to JSSStyles

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

@@ -92,6 +92,9 @@ class DSRMultiSelect extends react.Component {
     form;
     isWithinForm;
     preventOptionUpdate = false; // Used to prevent value watcher from updating options when options are already updated
+    isNativePopoverCase = false;
+    parentTableElement;
+    popoverElement;
     get currentValue() {
         return utilsEntry.getSelectedOptionValues(this.props.multiSelectOptions);
     }
@@ -100,8 +103,14 @@ class DSRMultiSelect extends react.Component {
         const optionsSelectedId = 'options-selected';
         const dropdownId = 'list';
         const inputId = 'filter';
-        const style = minifyCss.minifyCss(stripFocusAndHoverStyles.stripFocusAndHoverStyles(stylesEntry.getMultiSelectCss('down', this.props.isOpen, this.props.disabled, this.props.hideLabel, this.props.state, this.props.isWithinForm, this.props.theme)));
-        return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("template", { shadowroot: "open", shadowrootmode: "open", 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: inputId, isRequired: this.props.required, isDisabled: this.props.disabled }), this.props.currentValue && (jsxRuntime.jsxs("span", { id: optionsSelectedId, className: "sr-only", children: [utilsEntry.getSelectedOptions(this.props.multiSelectOptions).length, " options selected"] })), jsxRuntime.jsxs("div", { className: `wrapper${this.props.disabled ? ' disabled' : ''}`, children: [jsxRuntime.jsx("input", { id: inputId, role: "combobox", autoComplete: "off", disabled: this.props.disabled, required: this.props.required, "aria-invalid": this.props.state === 'error' ? 'true' : null }), jsxRuntime.jsx(icon_wrapper.PIcon, { className: "icon", name: "arrow-head-down", theme: this.props.theme, "aria-hidden": "true" }), this.props.currentValue && (jsxRuntime.jsx(buttonPure_wrapper.PButtonPure, { className: "button", icon: "close", hideLabel: "true", theme: this.props.theme, disabled: this.props.disabled, children: "Reset selection" })), jsxRuntime.jsxs("div", { id: dropdownId, className: "listbox", children: [!this.props.hasFilterResults && (jsxRuntime.jsxs("div", { className: "no-results", "aria-live": "polite", role: "status", children: [jsxRuntime.jsx("span", { "aria-hidden": "true", children: "---" }), jsxRuntime.jsx("span", { className: "sr-only", children: "No results found" })] })), 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.isWithinForm && jsxRuntime.jsx("slot", { name: utilsEntry.INTERNAL_MULTI_SELECT_SLOT })] })] }), this.props.children] }));
+        const style = minifyCss.minifyCss(stripFocusAndHoverStyles.stripFocusAndHoverStyles(stylesEntry.getMultiSelectCss('down', this.props.isOpen, this.props.disabled, this.props.hideLabel, this.props.state, this.props.isWithinForm, this.props.isNativePopoverCase, this.props.theme)));
+        return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("template", { shadowroot: "open", shadowrootmode: "open", 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: inputId, isRequired: this.props.required, isDisabled: this.props.disabled }), this.props.currentValue && (jsxRuntime.jsxs("span", { id: optionsSelectedId, className: "sr-only", children: [utilsEntry.getSelectedOptions(this.props.multiSelectOptions).length, " options selected"] })), jsxRuntime.jsxs("div", { className: `wrapper${this.props.disabled ? ' disabled' : ''}`, children: [jsxRuntime.jsx("input", { id: inputId, role: "combobox", autoComplete: "off", disabled: this.props.disabled, required: this.props.required, "aria-invalid": this.props.state === 'error' ? 'true' : null }), jsxRuntime.jsx(icon_wrapper.PIcon, { className: "icon", name: "arrow-head-down", theme: this.props.theme, "aria-hidden": "true" }), this.props.currentValue && (jsxRuntime.jsx(buttonPure_wrapper.PButtonPure, { className: "button", icon: "close", hideLabel: "true", theme: this.props.theme, disabled: this.props.disabled, children: "Reset selection" })), jsxRuntime.jsx("div", { ...(this.props.isNativePopoverCase && {
+                                                popover: 'auto',
+                                                className: 'popover',
+                                                ...(this.props.popoverElement?.matches(':popover-open') && {
+                                                    'popover-open': true,
+                                                }),
+                                            }), children: jsxRuntime.jsxs("div", { id: dropdownId, className: "listbox", children: [!this.props.hasFilterResults && (jsxRuntime.jsxs("div", { className: "no-results", "aria-live": "polite", role: "status", children: [jsxRuntime.jsx("span", { "aria-hidden": "true", children: "---" }), jsxRuntime.jsx("span", { className: "sr-only", children: "No results found" })] })), 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.isWithinForm && jsxRuntime.jsx("slot", { name: utilsEntry.INTERNAL_MULTI_SELECT_SLOT })] })] }), this.props.children] }));
     }
 }
 

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

@@ -82,13 +82,13 @@ class DSRPopover extends react.Component {
     spacer;
     popover;
     button;
-    isNative = false;
+    isNativePopoverCase = false;
     parentTableElement;
     render() {
         splitChildren.splitChildren(this.props.children);
-        const style = minifyCss.minifyCss(stripFocusAndHoverStyles.stripFocusAndHoverStyles(stylesEntry.getPopoverCss(this.props.direction, this.props.isNative, this.props.theme).replace(/(:host {[\S\s]+?})[\S\s]+(button {[\S\s]+?})[\S\s]+(.icon {[\S\s]+?})[\S\s]+(.label {[\S\s]+?})[\S\s]+/, '$1\n$2\n$3\n$4')));
-        return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("template", { shadowroot: "open", shadowrootmode: "open", shadowrootdelegatesfocus: "true", children: [jsxRuntime.jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("button", { type: "button", ...(this.props.isNative ? { popoverTarget: 'spacer' } : { ...(!this.props.isNative && { 'aria-expanded': this.props.open }),
-                                    }), children: [jsxRuntime.jsx(icon_wrapper.PIcon, { className: "icon", name: "information", theme: this.props.theme }), jsxRuntime.jsx("span", { className: "label", children: "More information" })] }), (this.props.open || this.props.isNative) && (jsxRuntime.jsx("div", { className: "spacer", ...(this.props.isNative && { popover: 'auto', id: 'spacer', onToggle: this.props.onToggle }), children: jsxRuntime.jsx("div", { className: "popover", children: this.props.description ? jsxRuntime.jsx("p", { children: this.props.description }) : jsxRuntime.jsx("slot", {}) }) }))] })] }), this.props.children] }));
+        const style = minifyCss.minifyCss(stripFocusAndHoverStyles.stripFocusAndHoverStyles(stylesEntry.getPopoverCss(this.props.direction, this.props.isNativePopoverCase, this.props.theme).replace(/(:host {[\S\s]+?})[\S\s]+(button {[\S\s]+?})[\S\s]+(.icon {[\S\s]+?})[\S\s]+(.label {[\S\s]+?})[\S\s]+/, '$1\n$2\n$3\n$4')));
+        return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("template", { shadowroot: "open", shadowrootmode: "open", shadowrootdelegatesfocus: "true", children: [jsxRuntime.jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("button", { type: "button", ...(this.props.isNativePopoverCase ? { popoverTarget: 'spacer' } : { ...(!this.props.isNativePopoverCase && { 'aria-expanded': this.props.open }),
+                                    }), children: [jsxRuntime.jsx(icon_wrapper.PIcon, { className: "icon", name: "information", theme: this.props.theme }), jsxRuntime.jsx("span", { className: "label", children: "More information" })] }), (this.props.open || this.props.isNativePopoverCase) && (jsxRuntime.jsx("div", { className: "spacer", ...(this.props.isNativePopoverCase && { popover: 'auto', id: 'spacer', onToggle: this.props.onToggle }), children: jsxRuntime.jsx("div", { className: "popover", children: this.props.description ? jsxRuntime.jsx("p", { children: this.props.description }) : jsxRuntime.jsx("slot", {}) }) }))] })] }), this.props.children] }));
     }
 }
 

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

@@ -83,7 +83,7 @@ class DSRSelectWrapperDropdown extends react.Component {
     searchString = '';
     inputElement;
     listElement;
-    isNativePopover = false;
+    isNativePopoverCase = false;
     parentTableElement;
     popoverElement;
     get selectedIndex() {
@@ -96,7 +96,7 @@ class DSRSelectWrapperDropdown extends react.Component {
         const buttonId = 'value';
         const style = minifyCss.minifyCss(stripFocusAndHoverStyles.stripFocusAndHoverStyles(stylesEntry.getSelectWrapperDropdownCss(this.props.direction === 'auto'
             ? 'down'
-            : this.props.direction, this.isOpen, this.props.state, this.props.disabled, this.props.filter, this.props.isNativePopover, this.props.theme)));
+            : this.props.direction, this.isOpen, this.props.state, this.props.disabled, this.props.filter, this.props.isNativePopoverCase, this.props.theme)));
         return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsxs("template", { shadowroot: "open", shadowrootmode: "open", children: [jsxRuntime.jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxRuntime.jsx(jsxRuntime.Fragment, { children: this.props.filter ? ([
                             jsxRuntime.jsx("input", { type: "text", role: "combobox", disabled: this.props.disabled, placeholder: utilsEntry.getSelectedOptionMap(this.optionMaps)?.value || null, autoComplete: "off", defaultValue: this.searchString }, "input"),
                             jsxRuntime.jsx("span", { 

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

@@ -93,6 +93,9 @@ class DSRSelect extends react.Component {
     preventOptionUpdate = false; // Used to prevent value watcher from updating options when options are already updated
     searchString = '';
     searchTimeout = null;
+    isNativePopoverCase = false;
+    parentTableElement;
+    popoverElement;
     render() {
         const { children, namedSlotChildren, otherChildren } = splitChildren.splitChildren(this.props.children);
         const buttonId = 'value';
@@ -102,8 +105,14 @@ class DSRSelect extends react.Component {
         const ariaDescribedBy = descriptionId && selectMessageId
             ? `${descriptionId} ${selectMessageId}`
             : descriptionId || selectMessageId || undefined;
-        const style = minifyCss.minifyCss(stripFocusAndHoverStyles.stripFocusAndHoverStyles(stylesEntry.getSelectCss('down', this.props.isOpen, this.props.disabled, this.props.hideLabel, this.props.state, this.props.isWithinForm, this.props.theme)));
-        return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("template", { shadowroot: "open", shadowrootmode: "open", 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", { 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", { 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.isWithinForm && jsxRuntime.jsx("slot", { name: utilsEntry.INTERNAL_SELECT_SLOT })] })] }), this.props.children] }));
+        const style = minifyCss.minifyCss(stripFocusAndHoverStyles.stripFocusAndHoverStyles(stylesEntry.getSelectCss('down', this.props.isOpen, this.props.disabled, this.props.hideLabel, this.props.state, this.props.isWithinForm, this.props.isNativePopoverCase, this.props.theme)));
+        return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("template", { shadowroot: "open", shadowrootmode: "open", 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", { 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 && {
+                                                popover: 'auto',
+                                                className: 'popover',
+                                                ...(this.props.popoverElement?.matches(':popover-open') && {
+                                                    'popover-open': true,
+                                                }),
+                                            }), 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.isWithinForm && jsxRuntime.jsx("slot", { name: utilsEntry.INTERNAL_SELECT_SLOT })] })] }), this.props.children] }));
     }
 }
 

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

@@ -4306,22 +4306,19 @@ const getFontSizeText = (size) => {
     return fontSizeTextMap[size];
 };
 
-// TODO: why not using getHiddenTextJssStyle()?
 // Needed for slotted anchor and hidden label, which then enlarges the hidden label to equal host size and indents the text to be visually hidden.
 const getVisibilityJssStyle = (hideLabel) => {
     return hideLabel
         ? {
-            position: 'absolute',
-            inset: 0,
             whiteSpace: 'nowrap',
-            textIndent: '-999999px', // TODO: check if text-indent still works for RTL-mode in this case
+            textIndent: '-999999px', // Needed because standard sr-only classes don't work here due that we need a bounding box for the focus style
+            overflow: 'hidden',
         }
         : {
-            position: 'relative',
-            inset: 'auto',
             whiteSpace: 'inherit',
             textIndent: 0,
             zIndex: 1, // fix Firefox bug on :hover (#2583)
+            overflow: 'visible',
         };
 };
 const offsetVertical = '-2px';
@@ -4348,7 +4345,6 @@ const getLinkButtonPureStyles = (icon, iconSource, active, isDisabledOrLoading,
         },
         root: {
             display: 'flex',
-            gap: spacingStaticXSmall,
             width: '100%',
             padding: 0,
             margin: 0, // Removes default button margin on safari 15
@@ -4357,7 +4353,9 @@ const getLinkButtonPureStyles = (icon, iconSource, active, isDisabledOrLoading,
                 color: isDisabledOrLoading ? disabledColorDark : primaryColorDark,
             }),
             ...textSmallStyle,
-            ...mergeDeep(buildResponsiveStyles(stretch, (stretchValue) => ({
+            ...mergeDeep(buildResponsiveStyles(hideLabel, (hidelabelValue) => ({
+                gap: hidelabelValue ? 0 : spacingStaticXSmall,
+            })), buildResponsiveStyles(stretch, (stretchValue) => ({
                 justifyContent: stretchValue ? 'space-between' : 'flex-start',
                 alignItems: stretchValue ? 'center' : 'flex-start',
             })), buildResponsiveStyles(size, (sizeValue) => ({
@@ -4394,28 +4392,30 @@ const getLinkButtonPureStyles = (icon, iconSource, active, isDisabledOrLoading,
                 })),
             ...(!hasSlottedAnchor && getFocusJssStyle(theme, { pseudo: true, offset: '-2px' })),
         },
-        label: {
-            transition: getTransition('opacity'),
-            position: 'relative', // needed for hover state when icon="none" is set
-        },
-        ...(hasIcon && {
-            icon: {
-                position: 'relative',
-                flexShrink: '0',
-                width: fontLineHeight,
-                height: fontLineHeight,
-                // workaround for Safari to optimize vertical alignment of icons
-                // TODO: check if this is still needed after optimized icons are included
-                '@supports (width: round(down, 1px, 1px))': {
-                    width: `round(down, ${fontLineHeight}, 1px)`,
-                    height: `round(down, ${fontLineHeight}, 1px)`,
+        ...(hasIcon
+            ? {
+                icon: {
+                    position: 'relative',
+                    flexShrink: '0',
+                    width: fontLineHeight,
+                    height: fontLineHeight,
+                    // workaround for Safari to optimize vertical alignment of icons
+                    // TODO: check if this is still needed after optimized icons are included
+                    '@supports (width: round(down, 1px, 1px))': {
+                        width: `round(down, ${fontLineHeight}, 1px)`,
+                        height: `round(down, ${fontLineHeight}, 1px)`,
+                    },
                 },
-            },
-            label: mergeDeep(buildResponsiveStyles(hideLabel, getVisibilityJssStyle), buildResponsiveStyles(alignLabel, (alignLabelValue) => ({
-                // TODO: we should remove 'left' here and map the value in the component class already to 'start' but might be difficult due to breakpoint customizable prop value
-                order: alignLabelValue === 'left' || alignLabelValue === 'start' ? -1 : 0,
-            }))),
-        }),
+                label: mergeDeep(buildResponsiveStyles(hideLabel, getVisibilityJssStyle), buildResponsiveStyles(alignLabel, (alignLabelValue) => ({
+                    // TODO: we should remove 'left' here and map the value in the component class already to 'start' but might be difficult due to breakpoint customizable prop value
+                    order: alignLabelValue === 'left' || alignLabelValue === 'start' ? -1 : 0,
+                }))),
+            }
+            : {
+                label: {
+                    position: 'relative', // needed for hover state when icon="none" is set
+                },
+            }),
     };
 };
 
@@ -5649,8 +5649,8 @@ const getComponentCss$S = (inline, wrap, direction, justifyContent, alignItems,
 const getFlyoutDialogResetJssStyle = () => {
     return {
         position: 'fixed',
-        height: '100vh',
-        maxHeight: '100vh',
+        height: '100dvh',
+        maxHeight: '100dvh',
         margin: '0',
         padding: '0',
         border: '0',
@@ -7182,6 +7182,22 @@ const getPlaceholderJssStyle = (styles) => ({
     '&:-moz-placeholder': styles /* Firefox 18- */,
 });
 
+// Used for elements that must overflow `overflow:hidden` containers, are positioned absolute and wrapped within a native `popover` element.
+const getPopoverResetJssStyle = () => {
+    return {
+        position: 'absolute',
+        border: 'none',
+        background: 'none',
+        pointerEvents: 'all',
+        padding: 0,
+        margin: 0,
+        overflow: 'initial',
+        '&:-internal-popover-in-top-layer::backdrop': {
+            display: 'none',
+        },
+    };
+};
+
 const getSlottedTextFieldTextareaSelectStyles = (child, state, isLoading, theme, additionalDefaultJssStyle) => {
     const { primaryColor, contrastLowColor, contrastMediumColor, disabledColor } = getThemedColors(theme);
     const { primaryColor: primaryColorDark, contrastLowColor: contrastLowColorDark, contrastMediumColor: contrastMediumColorDark, disabledColor: disabledColorDark, } = getThemedColors('dark');
@@ -7293,7 +7309,7 @@ const getUnitCounterJssStyle = (isDisabled, theme) => {
 
 const INTERNAL_MULTI_SELECT_SLOT = 'internal-select';
 
-const getComponentCss$z = (direction, isOpen, isDisabled, hideLabel, state, isWithinForm, theme) => {
+const getComponentCss$z = (direction, isOpen, isDisabled, hideLabel, state, isWithinForm, isNativePopoverCase, theme) => {
     const { contrastHighColor } = getThemedColors(theme);
     const { contrastHighColor: contrastHighColorDark } = getThemedColors('dark');
     return getCss({
@@ -7364,6 +7380,11 @@ const getComponentCss$z = (direction, isOpen, isDisabled, hideLabel, state, isWi
         ...getFunctionalComponentLabelStyles(isDisabled, hideLabel, theme),
         // .message
         ...getFunctionalComponentStateMessageStyles(theme, state),
+        ...(isNativePopoverCase && {
+            popover: {
+                ...getPopoverResetJssStyle(),
+            },
+        }),
     });
 };
 // TODO: use getSlottedTextFieldTextareaSelectStyles() instead an manipulate selectors like done with PIN Code or even better make it configurable as parameter
@@ -7810,7 +7831,7 @@ const getDirectionArrowMap = (theme) => {
         },
     };
 };
-const getComponentCss$w = (direction, isNative, theme) => {
+const getComponentCss$w = (direction, isNativePopoverCase, theme) => {
     const { hoverColor, backgroundColor, primaryColor, backgroundSurfaceColor } = getThemedColors(theme);
     const { hoverColor: hoverColorDark, primaryColor: primaryColorDark, backgroundSurfaceColor: backgroundSurfaceColorDark, } = getThemedColors('dark');
     const shadowColor = 'rgba(0,0,0,0.3)';
@@ -7860,13 +7881,9 @@ const getComponentCss$w = (direction, isNative, theme) => {
             transform: 'translate3d(0,0,0)', // Fixes movement on hover in Safari
         },
         spacer: {
-            ...(isNative
+            ...(isNativePopoverCase
                 ? {
-                    overflow: 'initial',
-                    backgroundColor: 'transparent',
-                    border: 'none',
-                    margin: 0,
-                    padding: 0,
+                    ...getPopoverResetJssStyle(),
                 }
                 : {
                     inset: `${-safeZonePx}px`,
@@ -8558,7 +8575,7 @@ const getListStyles$1 = (direction, theme) => {
         },
     };
 };
-const getComponentCss$r = (direction, isOpen, state, disabled, filter, isNativePopover, theme) => {
+const getComponentCss$r = (direction, isOpen, state, disabled, filter, isNativePopoverCase, theme) => {
     return getCss(
     // merge because of global styles
     mergeDeep({
@@ -8571,21 +8588,9 @@ const getComponentCss$r = (direction, isOpen, state, disabled, filter, isNativeP
         'sr-text': {
             display: 'none',
         },
-        ...(isNativePopover && {
+        ...(isNativePopoverCase && {
             popover: {
-                position: 'absolute',
-                bottom: 'auto',
-                border: 'none',
-                background: 'none',
-                pointerEvents: 'all',
-                padding: 0,
-                margin: 0,
-                overflow: 'initial',
-                height: 'auto',
-                maxHeight: `${8.5 * (OPTION_HEIGHT + 8) + 6 + 2}px`, // 8px = gap, 6px = padding, 2px = border
-                '&:-internal-popover-in-top-layer::backdrop': {
-                    display: 'none',
-                },
+                ...getPopoverResetJssStyle(),
             },
         }),
     }, filter
@@ -8737,7 +8742,7 @@ const getOptionStyles = (theme) => {
 
 const INTERNAL_SELECT_SLOT = 'internal-select';
 
-const getComponentCss$o = (direction, isOpen, isDisabled, hideLabel, state, isWithinForm, theme) => {
+const getComponentCss$o = (direction, isOpen, isDisabled, hideLabel, state, isWithinForm, isNativePopoverCase, theme) => {
     return getCss({
         '@global': {
             ':host': addImportantToEachRule({
@@ -8785,6 +8790,11 @@ const getComponentCss$o = (direction, isOpen, isDisabled, hideLabel, state, isWi
         ...getFunctionalComponentLabelStyles(isDisabled, hideLabel, theme),
         // .message
         ...getFunctionalComponentStateMessageStyles(theme, state),
+        ...(isNativePopoverCase && {
+            popover: {
+                ...getPopoverResetJssStyle(),
+            },
+        }),
     });
 };
 // TODO: Rename to JSSStyles

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

@@ -90,6 +90,9 @@ class DSRMultiSelect extends Component {
     form;
     isWithinForm;
     preventOptionUpdate = false; // Used to prevent value watcher from updating options when options are already updated
+    isNativePopoverCase = false;
+    parentTableElement;
+    popoverElement;
     get currentValue() {
         return getSelectedOptionValues(this.props.multiSelectOptions);
     }
@@ -98,8 +101,14 @@ class DSRMultiSelect extends Component {
         const optionsSelectedId = 'options-selected';
         const dropdownId = 'list';
         const inputId = 'filter';
-        const style = minifyCss(stripFocusAndHoverStyles(getComponentCss$z('down', this.props.isOpen, this.props.disabled, this.props.hideLabel, this.props.state, this.props.isWithinForm, this.props.theme)));
-        return (jsxs(Fragment, { children: [jsxs("template", { shadowroot: "open", shadowrootmode: "open", 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: inputId, isRequired: this.props.required, isDisabled: this.props.disabled }), this.props.currentValue && (jsxs("span", { id: optionsSelectedId, className: "sr-only", children: [getSelectedOptions(this.props.multiSelectOptions).length, " options selected"] })), jsxs("div", { className: `wrapper${this.props.disabled ? ' disabled' : ''}`, children: [jsx("input", { id: inputId, role: "combobox", autoComplete: "off", disabled: this.props.disabled, required: this.props.required, "aria-invalid": this.props.state === 'error' ? 'true' : null }), jsx(PIcon, { className: "icon", name: "arrow-head-down", theme: this.props.theme, "aria-hidden": "true" }), this.props.currentValue && (jsx(PButtonPure, { className: "button", icon: "close", hideLabel: "true", theme: this.props.theme, disabled: this.props.disabled, children: "Reset selection" })), jsxs("div", { id: dropdownId, className: "listbox", children: [!this.props.hasFilterResults && (jsxs("div", { className: "no-results", "aria-live": "polite", role: "status", children: [jsx("span", { "aria-hidden": "true", children: "---" }), jsx("span", { className: "sr-only", children: "No results found" })] })), 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.isWithinForm && jsx("slot", { name: INTERNAL_MULTI_SELECT_SLOT })] })] }), this.props.children] }));
+        const style = minifyCss(stripFocusAndHoverStyles(getComponentCss$z('down', this.props.isOpen, this.props.disabled, this.props.hideLabel, this.props.state, this.props.isWithinForm, this.props.isNativePopoverCase, this.props.theme)));
+        return (jsxs(Fragment, { children: [jsxs("template", { shadowroot: "open", shadowrootmode: "open", 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: inputId, isRequired: this.props.required, isDisabled: this.props.disabled }), this.props.currentValue && (jsxs("span", { id: optionsSelectedId, className: "sr-only", children: [getSelectedOptions(this.props.multiSelectOptions).length, " options selected"] })), jsxs("div", { className: `wrapper${this.props.disabled ? ' disabled' : ''}`, children: [jsx("input", { id: inputId, role: "combobox", autoComplete: "off", disabled: this.props.disabled, required: this.props.required, "aria-invalid": this.props.state === 'error' ? 'true' : null }), jsx(PIcon, { className: "icon", name: "arrow-head-down", theme: this.props.theme, "aria-hidden": "true" }), this.props.currentValue && (jsx(PButtonPure, { className: "button", icon: "close", hideLabel: "true", theme: this.props.theme, disabled: this.props.disabled, children: "Reset selection" })), jsx("div", { ...(this.props.isNativePopoverCase && {
+                                                popover: 'auto',
+                                                className: 'popover',
+                                                ...(this.props.popoverElement?.matches(':popover-open') && {
+                                                    'popover-open': true,
+                                                }),
+                                            }), children: jsxs("div", { id: dropdownId, className: "listbox", children: [!this.props.hasFilterResults && (jsxs("div", { className: "no-results", "aria-live": "polite", role: "status", children: [jsx("span", { "aria-hidden": "true", children: "---" }), jsx("span", { className: "sr-only", children: "No results found" })] })), 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.isWithinForm && jsx("slot", { name: INTERNAL_MULTI_SELECT_SLOT })] })] }), this.props.children] }));
     }
 }
 

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

@@ -80,13 +80,13 @@ class DSRPopover extends Component {
     spacer;
     popover;
     button;
-    isNative = false;
+    isNativePopoverCase = false;
     parentTableElement;
     render() {
         splitChildren(this.props.children);
-        const style = minifyCss(stripFocusAndHoverStyles(getComponentCss$w(this.props.direction, this.props.isNative, this.props.theme).replace(/(:host {[\S\s]+?})[\S\s]+(button {[\S\s]+?})[\S\s]+(.icon {[\S\s]+?})[\S\s]+(.label {[\S\s]+?})[\S\s]+/, '$1\n$2\n$3\n$4')));
-        return (jsxs(Fragment, { children: [jsxs("template", { shadowroot: "open", shadowrootmode: "open", shadowrootdelegatesfocus: "true", children: [jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxs(Fragment, { children: [jsxs("button", { type: "button", ...(this.props.isNative ? { popoverTarget: 'spacer' } : { ...(!this.props.isNative && { 'aria-expanded': this.props.open }),
-                                    }), children: [jsx(PIcon, { className: "icon", name: "information", theme: this.props.theme }), jsx("span", { className: "label", children: "More information" })] }), (this.props.open || this.props.isNative) && (jsx("div", { className: "spacer", ...(this.props.isNative && { popover: 'auto', id: 'spacer', onToggle: this.props.onToggle }), children: jsx("div", { className: "popover", children: this.props.description ? jsx("p", { children: this.props.description }) : jsx("slot", {}) }) }))] })] }), this.props.children] }));
+        const style = minifyCss(stripFocusAndHoverStyles(getComponentCss$w(this.props.direction, this.props.isNativePopoverCase, this.props.theme).replace(/(:host {[\S\s]+?})[\S\s]+(button {[\S\s]+?})[\S\s]+(.icon {[\S\s]+?})[\S\s]+(.label {[\S\s]+?})[\S\s]+/, '$1\n$2\n$3\n$4')));
+        return (jsxs(Fragment, { children: [jsxs("template", { shadowroot: "open", shadowrootmode: "open", shadowrootdelegatesfocus: "true", children: [jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxs(Fragment, { children: [jsxs("button", { type: "button", ...(this.props.isNativePopoverCase ? { popoverTarget: 'spacer' } : { ...(!this.props.isNativePopoverCase && { 'aria-expanded': this.props.open }),
+                                    }), children: [jsx(PIcon, { className: "icon", name: "information", theme: this.props.theme }), jsx("span", { className: "label", children: "More information" })] }), (this.props.open || this.props.isNativePopoverCase) && (jsx("div", { className: "spacer", ...(this.props.isNativePopoverCase && { popover: 'auto', id: 'spacer', onToggle: this.props.onToggle }), children: jsx("div", { className: "popover", children: this.props.description ? jsx("p", { children: this.props.description }) : jsx("slot", {}) }) }))] })] }), this.props.children] }));
     }
 }
 

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

@@ -81,7 +81,7 @@ class DSRSelectWrapperDropdown extends Component {
     searchString = '';
     inputElement;
     listElement;
-    isNativePopover = false;
+    isNativePopoverCase = false;
     parentTableElement;
     popoverElement;
     get selectedIndex() {
@@ -94,7 +94,7 @@ class DSRSelectWrapperDropdown extends Component {
         const buttonId = 'value';
         const style = minifyCss(stripFocusAndHoverStyles(getComponentCss$r(this.props.direction === 'auto'
             ? 'down'
-            : this.props.direction, this.isOpen, this.props.state, this.props.disabled, this.props.filter, this.props.isNativePopover, this.props.theme)));
+            : this.props.direction, this.isOpen, this.props.state, this.props.disabled, this.props.filter, this.props.isNativePopoverCase, this.props.theme)));
         return (jsx(Fragment, { children: jsxs("template", { shadowroot: "open", shadowrootmode: "open", children: [jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsx(Fragment, { children: this.props.filter ? ([
                             jsx("input", { type: "text", role: "combobox", disabled: this.props.disabled, placeholder: getSelectedOptionMap(this.optionMaps)?.value || null, autoComplete: "off", defaultValue: this.searchString }, "input"),
                             jsx("span", { 

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

@@ -91,6 +91,9 @@ class DSRSelect extends Component {
     preventOptionUpdate = false; // Used to prevent value watcher from updating options when options are already updated
     searchString = '';
     searchTimeout = null;
+    isNativePopoverCase = false;
+    parentTableElement;
+    popoverElement;
     render() {
         const { children, namedSlotChildren, otherChildren } = splitChildren(this.props.children);
         const buttonId = 'value';
@@ -100,8 +103,14 @@ class DSRSelect extends Component {
         const ariaDescribedBy = descriptionId && selectMessageId
             ? `${descriptionId} ${selectMessageId}`
             : descriptionId || selectMessageId || undefined;
-        const style = minifyCss(stripFocusAndHoverStyles(getComponentCss$o('down', this.props.isOpen, this.props.disabled, this.props.hideLabel, this.props.state, this.props.isWithinForm, this.props.theme)));
-        return (jsxs(Fragment, { children: [jsxs("template", { shadowroot: "open", shadowrootmode: "open", 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", { 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", { 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.isWithinForm && jsx("slot", { name: INTERNAL_SELECT_SLOT })] })] }), this.props.children] }));
+        const style = minifyCss(stripFocusAndHoverStyles(getComponentCss$o('down', this.props.isOpen, this.props.disabled, this.props.hideLabel, this.props.state, this.props.isWithinForm, this.props.isNativePopoverCase, this.props.theme)));
+        return (jsxs(Fragment, { children: [jsxs("template", { shadowroot: "open", shadowrootmode: "open", 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", { 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 && {
+                                                popover: 'auto',
+                                                className: 'popover',
+                                                ...(this.props.popoverElement?.matches(':popover-open') && {
+                                                    'popover-open': true,
+                                                }),
+                                            }), 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.isWithinForm && jsx("slot", { name: INTERNAL_SELECT_SLOT })] })] }), this.props.children] }));
     }
 }
 

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

@@ -12,6 +12,9 @@ export declare class DSRMultiSelect extends Component<any> {
     private form;
     private isWithinForm;
     private preventOptionUpdate;
+    private isNativePopoverCase;
+    private parentTableElement;
+    private popoverElement;
     private get currentValue();
     render(): JSX.Element;
 }

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

@@ -5,7 +5,7 @@ export declare class DSRPopover extends Component<any> {
     private spacer;
     private popover;
     private button;
-    private isNative;
+    private isNativePopoverCase;
     private parentTableElement;
     render(): JSX.Element;
 }

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

@@ -6,7 +6,7 @@ export declare class DSRSelectWrapperDropdown extends Component<any> {
     private searchString;
     private inputElement;
     private listElement;
-    private isNativePopover;
+    private isNativePopoverCase;
     private parentTableElement;
     private popoverElement;
     private get selectedIndex();

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

@@ -13,5 +13,8 @@ export declare class DSRSelect extends Component<any> {
     private preventOptionUpdate;
     private searchString;
     private searchTimeout;
+    private isNativePopoverCase;
+    private parentTableElement;
+    private popoverElement;
     render(): JSX.Element;
 }