npm - @porsche-design-system/components-react - Versions diffs - 3.26.0-rc.0 → 3.27.0-rc.0 - Mend

@porsche-design-system/components-react 3.26.0-rc.0 → 3.27.0-rc.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (9) hide show

package/CHANGELOG.md CHANGED Viewed

@@ -14,6 +14,27 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0),
 ### [Unreleased]
+### [3.27.0-rc.0] - 2025-02-13
+#### Added
+- `@font-face` supports Thai language
+  ([#3750](https://github.com/porsche-design-system/porsche-design-system/pull/3750))
+- Partials: `getFontLinks` supports preloading `thai` subset
+  ([#3750](https://github.com/porsche-design-system/porsche-design-system/pull/3750))
+#### Changed
+- `Popover`: gets rendered on `#top-layer` which enables it to be shown correctly even when used e.g. within a scroll
+  container ([#3732](https://github.com/porsche-design-system/porsche-design-system/pull/3732))
+#### Removed
+- `Popover`: default styling for slotted anchors
+  ([#3732](https://github.com/porsche-design-system/porsche-design-system/pull/3732))
+### [3.26.0] - 2025-02-07
 ### [3.26.0-rc.0] - 2025-02-06
 #### Added

package/package.json CHANGED Viewed

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

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

@@ -129,7 +129,7 @@ function createRule(name, decl, options) {
   return null;
 }
-var join$1 = function join(value, by) {
+var join = function join(value, by) {
   var result = '';
   for (var i = 0; i < value.length; i++) {
@@ -159,9 +159,9 @@ var toCssValue = function toCssValue(value) {
     for (var i = 0; i < value.length; i++) {
       if (value[i] === '!important') break;
       if (cssValue) cssValue += ', ';
-      cssValue += join$1(value[i], ' ');
+      cssValue += join(value[i], ' ');
     }
-  } else cssValue = join$1(value, ', '); // Add !important, because it was ignored.
+  } else cssValue = join(value, ', '); // Add !important, because it was ignored.
   if (value[value.length - 1] === '!important') {
@@ -4087,7 +4087,6 @@ const getComponentCss$1a = (size, compact, open, theme, sticky) => {
 };
 const TOAST_Z_INDEX = 999999;
-const POPOVER_Z_INDEX = 9999;
 const BANNER_Z_INDEX = 99;
 const getBannerPopoverResetStyles = () => {
@@ -8858,116 +8857,20 @@ const getComponentCss$y = (hideLabel, state, isDisabled, isLoading, length, them
     });
 };
-const safeZonePx = 16;
+const POPOVER_SAFE_ZONE = 8;
-const { canvasColor, canvasTextColor } = getHighContrastColors();
-const directionPositionMap = {
-    top: {
-        bottom: '100%',
-        left: '50%',
-        transform: 'translate3d(-50%, 0, 0)', // translate3d used to fix Safari shadow bug
-    },
-    right: {
-        top: '50%',
-        left: '100%',
-        transform: 'translate3d(0, -50%, 0)',
-    },
-    bottom: {
-        top: '100%',
-        left: '50%',
-        transform: 'translate3d(-50%, 0, 0)',
-    },
-    left: {
-        top: '50%',
-        right: '100%',
-        transform: 'translate3d(0, -50%, 0)',
-    },
-};
-const borderWidth = '12px';
-const transparentColor = 'transparent';
-const join = (...arr) => arr.join(' ');
-const getDirectionArrowMap = (theme) => {
-    const { backgroundColor, backgroundSurfaceColor } = getThemedColors(theme);
-    const { backgroundSurfaceColor: backgroundSurfaceColorDark } = getThemedColors('dark');
-    const isDark = isThemeDark(theme);
-    return {
-        top: {
-            top: 0,
-            left: '50%',
-            transform: 'translateX(-50%)',
-            borderWidth: join(borderWidth, borderWidth, 0),
-            ...(isHighContrastMode
-                ? {
-                    borderColor: join(canvasTextColor, canvasColor, canvasColor),
-                }
-                : {
-                    borderColor: join(isDark ? backgroundSurfaceColor : backgroundColor, transparentColor, transparentColor),
-                    ...prefersColorSchemeDarkMediaQuery(theme, {
-                        borderColor: join(backgroundSurfaceColorDark, transparentColor, transparentColor),
-                    }),
-                }),
-        },
-        right: {
-            top: '50%',
-            right: 0,
-            transform: 'translateY(-50%)',
-            borderWidth: join(borderWidth, borderWidth, borderWidth, 0),
-            ...(isHighContrastMode
-                ? {
-                    borderColor: join(canvasColor, canvasTextColor, canvasColor, canvasColor),
-                }
-                : {
-                    borderColor: join(transparentColor, isDark ? backgroundSurfaceColor : backgroundColor, transparentColor, transparentColor),
-                    ...prefersColorSchemeDarkMediaQuery(theme, {
-                        borderColor: join(transparentColor, backgroundSurfaceColorDark, transparentColor, transparentColor),
-                    }),
-                }),
-        },
-        bottom: {
-            bottom: 0,
-            left: '50%',
-            transform: 'translateX(-50%)',
-            borderWidth: join(0, borderWidth, borderWidth),
-            ...(isHighContrastMode
-                ? {
-                    borderColor: join(canvasColor, canvasColor, canvasTextColor),
-                }
-                : {
-                    borderColor: join(transparentColor, transparentColor, isDark ? backgroundSurfaceColor : backgroundColor),
-                    ...prefersColorSchemeDarkMediaQuery(theme, {
-                        borderColor: join(transparentColor, transparentColor, backgroundSurfaceColorDark),
-                    }),
-                }),
-        },
-        left: {
-            top: '50%',
-            left: 0,
-            transform: 'translateY(-50%)',
-            borderWidth: join(borderWidth, 0, borderWidth, borderWidth),
-            ...(isHighContrastMode
-                ? {
-                    borderColor: join(canvasColor, canvasColor, canvasColor, canvasTextColor),
-                }
-                : {
-                    borderColor: join(transparentColor, transparentColor, transparentColor, isDark ? backgroundSurfaceColor : backgroundColor),
-                    ...prefersColorSchemeDarkMediaQuery(theme, {
-                        borderColor: join(transparentColor, transparentColor, transparentColor, backgroundSurfaceColorDark),
-                    }),
-                }),
-        },
-    };
-};
-const getComponentCss$x = (direction, isNativePopoverCase, theme) => {
+const { canvasTextColor } = getHighContrastColors();
+const getComponentCss$x = (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)';
     return getCss({
         '@global': {
             ':host': {
+                position: 'relative', // ensures correct reference for floating ui fallback positioning in older browsers
                 display: 'inline-block',
                 verticalAlign: 'top',
                 ...addImportantToEachRule({
-                    position: 'relative',
                     ...colorSchemeStyles,
                     ...hostHiddenStyles,
                 }),
@@ -8978,18 +8881,13 @@ const getComponentCss$x = (direction, isNativePopoverCase, theme) => {
                 margin: 0,
             },
             button: {
+                all: 'unset',
                 display: 'block',
-                WebkitAppearance: 'none', // iOS safari
-                appearance: 'none',
-                background: 'transparent',
-                border: 0,
-                padding: 0,
-                cursor: 'pointer',
-                ...textSmallStyle,
+                font: `${fontSizeTextSmall} ${fontFamily}`, // needed for correct width/height definition based on ex-unit
                 width: fontLineHeight, // width needed to improve ssr support
                 height: fontLineHeight, // height needed to improve ssr support
                 borderRadius: '50%',
-                // TODO: we should try to use getHoverStyle()
+                cursor: 'pointer',
                 ...hoverMediaQuery({
                     transition: getTransition('background-color'),
                     '&:hover': {
@@ -9007,47 +8905,49 @@ const getComponentCss$x = (direction, isNativePopoverCase, theme) => {
         icon: {
             transform: 'translate3d(0,0,0)', // Fixes movement on hover in Safari
         },
-        spacer: {
-            ...(isNativePopoverCase
-                ? {
-                    ...getPopoverResetJssStyle(),
-                }
-                : {
-                    inset: `${-safeZonePx}px`,
-                }),
+        popover: {
+            all: 'unset',
             position: 'absolute',
-            zIndex: POPOVER_Z_INDEX,
-            filter: `drop-shadow(0 0 16px ${shadowColor})`,
             pointerEvents: 'none',
+            filter: `drop-shadow(0 0 16px ${shadowColor})`,
             animation: `${motionDurationShort} $fadeIn ${motionEasingBase} forwards`
                 ,
-            '&::before': {
-                content: '""',
-                position: 'absolute',
-                borderStyle: 'solid',
-                ...getDirectionArrowMap(theme)[direction],
+            '&:not(:popover-open)': {
+                display: 'none', // ensures popover is not flickering when closed in some situations
+            },
+            '&:-internal-popover-in-top-layer::backdrop': {
+                display: 'none',
             },
-            ...prefersColorSchemeDarkMediaQuery(theme, {
-                filter: `drop-shadow(0 0 16px ${shadowColor})`,
-            }),
         },
-        popover: {
+        arrow: {
             position: 'absolute',
-            maxWidth: 'min(90vw, 27rem)',
-            width: 'max-content',
+            width: '24px',
+            height: '12px',
+            clipPath: 'polygon(50% 0, 100% 110%, 0 110%)',
+            ...(isHighContrastMode
+                ? {
+                    background: canvasTextColor,
+                }
+                : {
+                    background: isThemeDark(theme) ? backgroundSurfaceColor : backgroundColor,
+                    ...prefersColorSchemeDarkMediaQuery(theme, {
+                        background: backgroundSurfaceColorDark,
+                    }),
+                }),
+        },
+        content: {
+            maxWidth: `min(calc(100dvw - ${POPOVER_SAFE_ZONE * 2}px), 48ch)`,
+            width: 'max-content', // ensures in older browsers correct width
             boxSizing: 'border-box',
-            background: isThemeDark(theme) ? backgroundSurfaceColor : backgroundColor,
-            padding: '8px 16px',
+            padding: `${spacingStaticSmall} ${spacingStaticMedium}`,
             pointerEvents: 'auto',
-            ...directionPositionMap[direction],
-            ...textSmallStyle,
-            listStyleType: 'none',
-            color: primaryColor,
-            whiteSpace: 'inherit',
             borderRadius: borderRadiusSmall,
             ...(isHighContrastMode && {
                 outline: `1px solid ${canvasTextColor}`,
             }),
+            ...textSmallStyle,
+            background: isThemeDark(theme) ? backgroundSurfaceColor : backgroundColor,
+            color: primaryColor,
             ...prefersColorSchemeDarkMediaQuery(theme, {
                 background: backgroundSurfaceColorDark,
                 color: primaryColorDark,

package/ssr/cjs/components/dist/utils/esm/utils-entry.cjs CHANGED Viewed

@@ -129,7 +129,7 @@ function createRule(name, decl, options) {
   return null;
 }
-var join$1 = function join(value, by) {
+var join = function join(value, by) {
   var result = '';
   for (var i = 0; i < value.length; i++) {
@@ -159,9 +159,9 @@ var toCssValue = function toCssValue(value) {
     for (var i = 0; i < value.length; i++) {
       if (value[i] === '!important') break;
       if (cssValue) cssValue += ', ';
-      cssValue += join$1(value[i], ' ');
+      cssValue += join(value[i], ' ');
     }
-  } else cssValue = join$1(value, ', '); // Add !important, because it was ignored.
+  } else cssValue = join(value, ', '); // Add !important, because it was ignored.
   if (value[value.length - 1] === '!important') {
@@ -3541,7 +3541,9 @@ const supportsNativePopover = () => {
     return Object.prototype.hasOwnProperty.call(HTMLElement.prototype, 'popover');
 };
 // determine it once
-supportsNativePopover();
+const hasNativePopoverSupport = supportsNativePopover();
+// getter for easy mocking
+const getHasNativePopoverSupport = () => hasNativePopoverSupport;
 const hasDocument = typeof document !== 'undefined';
@@ -3936,6 +3938,7 @@ exports.getCurrentActivePage = getCurrentActivePage;
 exports.getDirectChildHTMLElement = getDirectChildHTMLElement;
 exports.getDisplayTagType = getDisplayTagType;
 exports.getHTMLElement = getHTMLElement;
+exports.getHasNativePopoverSupport = getHasNativePopoverSupport;
 exports.getHeadingTagType = getHeadingTagType;
 exports.getHeadlineTagType = getHeadlineTagType;
 exports.getIconColor = getIconColor;

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

@@ -7,6 +7,7 @@ var splitChildren = require('../../splitChildren.cjs');
 var minifyCss = require('../../minifyCss.cjs');
 var stripFocusAndHoverStyles = require('../../stripFocusAndHoverStyles.cjs');
 var stylesEntry = require('../../../../../../components/dist/styles/esm/styles-entry.cjs');
+var utilsEntry = require('../../../../../../components/dist/utils/esm/utils-entry.cjs');
 var icon_wrapper = require('../components/icon.wrapper.cjs');
 /**
@@ -15,16 +16,18 @@ var icon_wrapper = require('../components/icon.wrapper.cjs');
 class DSRPopover extends react.Component {
     host;
     open = false;
-    spacer;
     popover;
     button;
-    isNativePopoverCase = false;
-    parentTableElement;
+    arrow;
+    cleanUp;
+    hasNativePopoverSupport = utilsEntry.getHasNativePopoverSupport();
     render() {
         splitChildren.splitChildren(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] }));
+        const style = minifyCss.minifyCss(stripFocusAndHoverStyles.stripFocusAndHoverStyles(stylesEntry.getPopoverCss(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", children: [jsxRuntime.jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("button", { type: "button", ...utilsEntry.parseAndGetAriaAttributes({
+                                        ...utilsEntry.parseAndGetAriaAttributes(this.props.aria),
+                                        ...{ '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 && (jsxRuntime.jsxs("div", { className: "popover", popover: "auto", children: [jsxRuntime.jsx("div", { className: "arrow" }), jsxRuntime.jsx("div", { className: "content", children: this.props.description ? jsxRuntime.jsx("p", { children: this.props.description }) : jsxRuntime.jsx("slot", {}) })] }))] })] }), this.props.children] }));
     }
 }

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

@@ -127,7 +127,7 @@ function createRule(name, decl, options) {
   return null;
 }
-var join$1 = function join(value, by) {
+var join = function join(value, by) {
   var result = '';
   for (var i = 0; i < value.length; i++) {
@@ -157,9 +157,9 @@ var toCssValue = function toCssValue(value) {
     for (var i = 0; i < value.length; i++) {
       if (value[i] === '!important') break;
       if (cssValue) cssValue += ', ';
-      cssValue += join$1(value[i], ' ');
+      cssValue += join(value[i], ' ');
     }
-  } else cssValue = join$1(value, ', '); // Add !important, because it was ignored.
+  } else cssValue = join(value, ', '); // Add !important, because it was ignored.
   if (value[value.length - 1] === '!important') {
@@ -4085,7 +4085,6 @@ const getComponentCss$1a = (size, compact, open, theme, sticky) => {
 };
 const TOAST_Z_INDEX = 999999;
-const POPOVER_Z_INDEX = 9999;
 const BANNER_Z_INDEX = 99;
 const getBannerPopoverResetStyles = () => {
@@ -8856,116 +8855,20 @@ const getComponentCss$y = (hideLabel, state, isDisabled, isLoading, length, them
     });
 };
-const safeZonePx = 16;
+const POPOVER_SAFE_ZONE = 8;
-const { canvasColor, canvasTextColor } = getHighContrastColors();
-const directionPositionMap = {
-    top: {
-        bottom: '100%',
-        left: '50%',
-        transform: 'translate3d(-50%, 0, 0)', // translate3d used to fix Safari shadow bug
-    },
-    right: {
-        top: '50%',
-        left: '100%',
-        transform: 'translate3d(0, -50%, 0)',
-    },
-    bottom: {
-        top: '100%',
-        left: '50%',
-        transform: 'translate3d(-50%, 0, 0)',
-    },
-    left: {
-        top: '50%',
-        right: '100%',
-        transform: 'translate3d(0, -50%, 0)',
-    },
-};
-const borderWidth = '12px';
-const transparentColor = 'transparent';
-const join = (...arr) => arr.join(' ');
-const getDirectionArrowMap = (theme) => {
-    const { backgroundColor, backgroundSurfaceColor } = getThemedColors(theme);
-    const { backgroundSurfaceColor: backgroundSurfaceColorDark } = getThemedColors('dark');
-    const isDark = isThemeDark(theme);
-    return {
-        top: {
-            top: 0,
-            left: '50%',
-            transform: 'translateX(-50%)',
-            borderWidth: join(borderWidth, borderWidth, 0),
-            ...(isHighContrastMode
-                ? {
-                    borderColor: join(canvasTextColor, canvasColor, canvasColor),
-                }
-                : {
-                    borderColor: join(isDark ? backgroundSurfaceColor : backgroundColor, transparentColor, transparentColor),
-                    ...prefersColorSchemeDarkMediaQuery(theme, {
-                        borderColor: join(backgroundSurfaceColorDark, transparentColor, transparentColor),
-                    }),
-                }),
-        },
-        right: {
-            top: '50%',
-            right: 0,
-            transform: 'translateY(-50%)',
-            borderWidth: join(borderWidth, borderWidth, borderWidth, 0),
-            ...(isHighContrastMode
-                ? {
-                    borderColor: join(canvasColor, canvasTextColor, canvasColor, canvasColor),
-                }
-                : {
-                    borderColor: join(transparentColor, isDark ? backgroundSurfaceColor : backgroundColor, transparentColor, transparentColor),
-                    ...prefersColorSchemeDarkMediaQuery(theme, {
-                        borderColor: join(transparentColor, backgroundSurfaceColorDark, transparentColor, transparentColor),
-                    }),
-                }),
-        },
-        bottom: {
-            bottom: 0,
-            left: '50%',
-            transform: 'translateX(-50%)',
-            borderWidth: join(0, borderWidth, borderWidth),
-            ...(isHighContrastMode
-                ? {
-                    borderColor: join(canvasColor, canvasColor, canvasTextColor),
-                }
-                : {
-                    borderColor: join(transparentColor, transparentColor, isDark ? backgroundSurfaceColor : backgroundColor),
-                    ...prefersColorSchemeDarkMediaQuery(theme, {
-                        borderColor: join(transparentColor, transparentColor, backgroundSurfaceColorDark),
-                    }),
-                }),
-        },
-        left: {
-            top: '50%',
-            left: 0,
-            transform: 'translateY(-50%)',
-            borderWidth: join(borderWidth, 0, borderWidth, borderWidth),
-            ...(isHighContrastMode
-                ? {
-                    borderColor: join(canvasColor, canvasColor, canvasColor, canvasTextColor),
-                }
-                : {
-                    borderColor: join(transparentColor, transparentColor, transparentColor, isDark ? backgroundSurfaceColor : backgroundColor),
-                    ...prefersColorSchemeDarkMediaQuery(theme, {
-                        borderColor: join(transparentColor, transparentColor, transparentColor, backgroundSurfaceColorDark),
-                    }),
-                }),
-        },
-    };
-};
-const getComponentCss$x = (direction, isNativePopoverCase, theme) => {
+const { canvasTextColor } = getHighContrastColors();
+const getComponentCss$x = (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)';
     return getCss({
         '@global': {
             ':host': {
+                position: 'relative', // ensures correct reference for floating ui fallback positioning in older browsers
                 display: 'inline-block',
                 verticalAlign: 'top',
                 ...addImportantToEachRule({
-                    position: 'relative',
                     ...colorSchemeStyles,
                     ...hostHiddenStyles,
                 }),
@@ -8976,18 +8879,13 @@ const getComponentCss$x = (direction, isNativePopoverCase, theme) => {
                 margin: 0,
             },
             button: {
+                all: 'unset',
                 display: 'block',
-                WebkitAppearance: 'none', // iOS safari
-                appearance: 'none',
-                background: 'transparent',
-                border: 0,
-                padding: 0,
-                cursor: 'pointer',
-                ...textSmallStyle,
+                font: `${fontSizeTextSmall} ${fontFamily}`, // needed for correct width/height definition based on ex-unit
                 width: fontLineHeight, // width needed to improve ssr support
                 height: fontLineHeight, // height needed to improve ssr support
                 borderRadius: '50%',
-                // TODO: we should try to use getHoverStyle()
+                cursor: 'pointer',
                 ...hoverMediaQuery({
                     transition: getTransition('background-color'),
                     '&:hover': {
@@ -9005,47 +8903,49 @@ const getComponentCss$x = (direction, isNativePopoverCase, theme) => {
         icon: {
             transform: 'translate3d(0,0,0)', // Fixes movement on hover in Safari
         },
-        spacer: {
-            ...(isNativePopoverCase
-                ? {
-                    ...getPopoverResetJssStyle(),
-                }
-                : {
-                    inset: `${-safeZonePx}px`,
-                }),
+        popover: {
+            all: 'unset',
             position: 'absolute',
-            zIndex: POPOVER_Z_INDEX,
-            filter: `drop-shadow(0 0 16px ${shadowColor})`,
             pointerEvents: 'none',
+            filter: `drop-shadow(0 0 16px ${shadowColor})`,
             animation: `${motionDurationShort} $fadeIn ${motionEasingBase} forwards`
                 ,
-            '&::before': {
-                content: '""',
-                position: 'absolute',
-                borderStyle: 'solid',
-                ...getDirectionArrowMap(theme)[direction],
+            '&:not(:popover-open)': {
+                display: 'none', // ensures popover is not flickering when closed in some situations
+            },
+            '&:-internal-popover-in-top-layer::backdrop': {
+                display: 'none',
             },
-            ...prefersColorSchemeDarkMediaQuery(theme, {
-                filter: `drop-shadow(0 0 16px ${shadowColor})`,
-            }),
         },
-        popover: {
+        arrow: {
             position: 'absolute',
-            maxWidth: 'min(90vw, 27rem)',
-            width: 'max-content',
+            width: '24px',
+            height: '12px',
+            clipPath: 'polygon(50% 0, 100% 110%, 0 110%)',
+            ...(isHighContrastMode
+                ? {
+                    background: canvasTextColor,
+                }
+                : {
+                    background: isThemeDark(theme) ? backgroundSurfaceColor : backgroundColor,
+                    ...prefersColorSchemeDarkMediaQuery(theme, {
+                        background: backgroundSurfaceColorDark,
+                    }),
+                }),
+        },
+        content: {
+            maxWidth: `min(calc(100dvw - ${POPOVER_SAFE_ZONE * 2}px), 48ch)`,
+            width: 'max-content', // ensures in older browsers correct width
             boxSizing: 'border-box',
-            background: isThemeDark(theme) ? backgroundSurfaceColor : backgroundColor,
-            padding: '8px 16px',
+            padding: `${spacingStaticSmall} ${spacingStaticMedium}`,
             pointerEvents: 'auto',
-            ...directionPositionMap[direction],
-            ...textSmallStyle,
-            listStyleType: 'none',
-            color: primaryColor,
-            whiteSpace: 'inherit',
             borderRadius: borderRadiusSmall,
             ...(isHighContrastMode && {
                 outline: `1px solid ${canvasTextColor}`,
             }),
+            ...textSmallStyle,
+            background: isThemeDark(theme) ? backgroundSurfaceColor : backgroundColor,
+            color: primaryColor,
             ...prefersColorSchemeDarkMediaQuery(theme, {
                 background: backgroundSurfaceColorDark,
                 color: primaryColorDark,

package/ssr/esm/components/dist/utils/esm/utils-entry.mjs CHANGED Viewed

@@ -127,7 +127,7 @@ function createRule(name, decl, options) {
   return null;
 }
-var join$1 = function join(value, by) {
+var join = function join(value, by) {
   var result = '';
   for (var i = 0; i < value.length; i++) {
@@ -157,9 +157,9 @@ var toCssValue = function toCssValue(value) {
     for (var i = 0; i < value.length; i++) {
       if (value[i] === '!important') break;
       if (cssValue) cssValue += ', ';
-      cssValue += join$1(value[i], ' ');
+      cssValue += join(value[i], ' ');
     }
-  } else cssValue = join$1(value, ', '); // Add !important, because it was ignored.
+  } else cssValue = join(value, ', '); // Add !important, because it was ignored.
   if (value[value.length - 1] === '!important') {
@@ -3539,7 +3539,9 @@ const supportsNativePopover = () => {
     return Object.prototype.hasOwnProperty.call(HTMLElement.prototype, 'popover');
 };
 // determine it once
-supportsNativePopover();
+const hasNativePopoverSupport = supportsNativePopover();
+// getter for easy mocking
+const getHasNativePopoverSupport = () => hasNativePopoverSupport;
 const hasDocument = typeof document !== 'undefined';
@@ -3906,4 +3908,4 @@ const getTextTagType = (host, tag) => {
     return tag;
 };
-export { DISPLAY_TAGS, HEADING_TAGS, HEADLINE_TAGS, ItemType, TEXT_TAGS, _hasShowPickerSupport, anchorSlot, attributeMutationMap, buildCrestImgSrc, buildCrestSrcSet, buildIconUrl, buildImgSrc, buildSrcSet, createPaginationItems, createRange, crestSize, debounce, displaySizeToTagMap, getButtonAriaAttributes, getButtonBaseAriaAttributes, getButtonPureAriaAttributes, getCDNBaseURL, getClosestHTMLElement, getComboboxAriaAttributes, getContentAriaAttributes, getCurrentActivePage, getDirectChildHTMLElement, getDisplayTagType, getHTMLElement, getHeadingTagType, getHeadlineTagType, getIconColor, getInlineNotificationIconName, getInnerManifest, getListAriaAttributes, getOptionAriaAttributes, getRole, getSegmentedControlItemAriaAttributes, getSelectedOptionMap, getSelectedOptionString, getSelectedOptionValues, getSelectedOptions, getStepperHorizontalIconName, getSvgUrl, getSwitchButtonAriaAttributes, getTagName, getTagNameWithoutPrefix, getTextTagType, getTotalPages, hasDocument, hasLocateAction, hasSpecificDirectChildTag, hasVisibleIcon, hasWindow, headerSlot, isCurrentInput, isCustomDropdown, isDisabledOrLoading, isElementOfKind, isInfinitePagination, isListTypeOrdered, isScrollable, isSortable, isStateCompleteOrWarning, isTouchDevice, isType, isUrl, isWithinForm, observedNodesMap, parseAndGetAriaAttributes, parseJSONAttribute, scrollAreaClass, showCustomCalendarOrTimeIndicator, supportsConstructableStylesheets, supportsNativePopover, tempDiv, tempIcon, tempLabel, traverseTreeAndUpdateState, updateFlyoutMultiLevelItemState };
+export { DISPLAY_TAGS, HEADING_TAGS, HEADLINE_TAGS, ItemType, TEXT_TAGS, _hasShowPickerSupport, anchorSlot, attributeMutationMap, buildCrestImgSrc, buildCrestSrcSet, buildIconUrl, buildImgSrc, buildSrcSet, createPaginationItems, createRange, crestSize, debounce, displaySizeToTagMap, getButtonAriaAttributes, getButtonBaseAriaAttributes, getButtonPureAriaAttributes, getCDNBaseURL, getClosestHTMLElement, getComboboxAriaAttributes, getContentAriaAttributes, getCurrentActivePage, getDirectChildHTMLElement, getDisplayTagType, getHTMLElement, getHasNativePopoverSupport, getHeadingTagType, getHeadlineTagType, getIconColor, getInlineNotificationIconName, getInnerManifest, getListAriaAttributes, getOptionAriaAttributes, getRole, getSegmentedControlItemAriaAttributes, getSelectedOptionMap, getSelectedOptionString, getSelectedOptionValues, getSelectedOptions, getStepperHorizontalIconName, getSvgUrl, getSwitchButtonAriaAttributes, getTagName, getTagNameWithoutPrefix, getTextTagType, getTotalPages, hasDocument, hasLocateAction, hasSpecificDirectChildTag, hasVisibleIcon, hasWindow, headerSlot, isCurrentInput, isCustomDropdown, isDisabledOrLoading, isElementOfKind, isInfinitePagination, isListTypeOrdered, isScrollable, isSortable, isStateCompleteOrWarning, isTouchDevice, isType, isUrl, isWithinForm, observedNodesMap, parseAndGetAriaAttributes, parseJSONAttribute, scrollAreaClass, showCustomCalendarOrTimeIndicator, supportsConstructableStylesheets, supportsNativePopover, tempDiv, tempIcon, tempLabel, traverseTreeAndUpdateState, updateFlyoutMultiLevelItemState };

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

@@ -5,6 +5,7 @@ import { splitChildren } from '../../splitChildren.mjs';
 import { minifyCss } from '../../minifyCss.mjs';
 import { stripFocusAndHoverStyles } from '../../stripFocusAndHoverStyles.mjs';
 import { getPopoverCss as getComponentCss$x } from '../../../../../../components/dist/styles/esm/styles-entry.mjs';
+import { getHasNativePopoverSupport, parseAndGetAriaAttributes } from '../../../../../../components/dist/utils/esm/utils-entry.mjs';
 import { PIcon } from '../components/icon.wrapper.mjs';
 /**
@@ -13,16 +14,18 @@ import { PIcon } from '../components/icon.wrapper.mjs';
 class DSRPopover extends Component {
     host;
     open = false;
-    spacer;
     popover;
     button;
-    isNativePopoverCase = false;
-    parentTableElement;
+    arrow;
+    cleanUp;
+    hasNativePopoverSupport = getHasNativePopoverSupport();
     render() {
         splitChildren(this.props.children);
-        const style = minifyCss(stripFocusAndHoverStyles(getComponentCss$x(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] }));
+        const style = minifyCss(stripFocusAndHoverStyles(getComponentCss$x(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", children: [jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxs(Fragment, { children: [jsxs("button", { type: "button", ...parseAndGetAriaAttributes({
+                                        ...parseAndGetAriaAttributes(this.props.aria),
+                                        ...{ '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 && (jsxs("div", { className: "popover", popover: "auto", children: [jsx("div", { className: "arrow" }), jsx("div", { className: "content", children: this.props.description ? jsx("p", { children: this.props.description }) : jsx("slot", {}) })] }))] })] }), this.props.children] }));
     }
 }

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

@@ -5,10 +5,10 @@ import { Component } from 'react';
 export declare class DSRPopover extends Component<any> {
     host: HTMLElement;
     private open;
-    private spacer;
     private popover;
     private button;
-    private isNativePopoverCase;
-    private parentTableElement;
+    private arrow;
+    private cleanUp;
+    private hasNativePopoverSupport;
     render(): JSX.Element;
 }