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

package/CHANGELOG.md

@@ -14,6 +14,38 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0),
 
 ### [Unreleased]
 
+### [3.27.0-rc.1] - 2025-02-17
+
+#### Changed
+
+- **Breaking Change** `AG Grid`: Updated from v32 to v33, which introduced a new Theming API. AG Grid migrated from a
+  CSS-based theming approach to a JavaScript object-based theming system. As a result, our custom theme also had to be
+  adjusted accordingly. ([#3740](https://github.com/porsche-design-system/porsche-design-system/pull/3740))
+
+#### Fixed
+
+- Styles: `vanilla-extract` returns `getMediaQueryMax`, `getMediaQueryMin`, `getMediaQueryMinMax` & `getSkeletonStyle`
+  in wrong format ([#3753](https://github.com/porsche-design-system/porsche-design-system/pull/3753))
+
+### [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

package/ag-grid/cjs/index.cjs

@@ -0,0 +1,12 @@
+'use strict';
+
+var agGrid = require('@porsche-design-system/components-js/ag-grid');
+
+
+
+Object.keys(agGrid).forEach(function (k) {
+	if (k !== 'default' && !Object.prototype.hasOwnProperty.call(exports, k)) Object.defineProperty(exports, k, {
+		enumerable: true,
+		get: function () { return agGrid[k]; }
+	});
+});

package/ag-grid/esm/index.d.ts

@@ -0,0 +1 @@
+export * from '@porsche-design-system/components-js/ag-grid';

package/ag-grid/esm/index.mjs

@@ -0,0 +1 @@
+export * from '@porsche-design-system/components-js/ag-grid';

package/ag-grid/package.json

@@ -0,0 +1,6 @@
+{
+  "main": "cjs/index.cjs",
+  "module": "esm/index.mjs",
+  "types": "esm/index.d.ts",
+  "sideEffects": false
+}

package/cjs/public-api.cjs

@@ -159,6 +159,7 @@ exports.PTextarea = textarea_wrapper.PTextarea;
 exports.PTextareaWrapper = textareaWrapper_wrapper.PTextareaWrapper;
 exports.PToast = toast_wrapper.PToast;
 exports.PWordmark = wordmark_wrapper.PWordmark;
+exports.PorscheDesignSystemContext = provider.PorscheDesignSystemContext;
 exports.PorscheDesignSystemProvider = provider.PorscheDesignSystemProvider;
 exports.skipCheckForPorscheDesignSystemProviderDuringTests = hooks.skipCheckForPorscheDesignSystemProviderDuringTests;
 exports.useToastManager = hooks.useToastManager;

package/esm/public-api.d.ts

@@ -1,6 +1,6 @@
 export { componentsReady } from '@porsche-design-system/components-js';
 export * from './lib/components';
 export * from './lib/types';
-export { PorscheDesignSystemProvider } from './provider';
+export { PorscheDesignSystemProvider, PorscheDesignSystemContext } from './provider';
 export { skipCheckForPorscheDesignSystemProviderDuringTests, useToastManager } from './hooks';
 export { skipPorscheDesignSystemCDNRequestsDuringTests } from './utils';

package/esm/public-api.mjs

@@ -73,6 +73,6 @@ export { PTextarea } from './lib/components/textarea.wrapper.mjs';
 export { PTextareaWrapper } from './lib/components/textarea-wrapper.wrapper.mjs';
 export { PToast } from './lib/components/toast.wrapper.mjs';
 export { PWordmark } from './lib/components/wordmark.wrapper.mjs';
-export { PorscheDesignSystemProvider } from './provider.mjs';
+export { PorscheDesignSystemContext, PorscheDesignSystemProvider } from './provider.mjs';
 export { skipCheckForPorscheDesignSystemProviderDuringTests, useToastManager } from './hooks.mjs';
 export { skipPorscheDesignSystemCDNRequestsDuringTests } from './utils.mjs';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@porsche-design-system/components-react",
-  "version": "3.26.0",
+  "version": "3.27.0-rc.1",
   "description": "Porsche Design System is a component library designed to help developers create the best experience for software or services distributed by Dr. Ing. h.c. F. Porsche AG.",
   "keywords": [
     "porsche",
@@ -17,12 +17,12 @@
   "license": "SEE LICENSE IN LICENSE",
   "homepage": "https://designsystem.porsche.com",
   "dependencies": {
-    "@porsche-design-system/components-js": "3.26.0"
+    "@porsche-design-system/components-js": "3.27.0-rc.1"
   },
   "peerDependencies": {
-    "ag-grid-community": ">= 32.0.0 <33.0.0",
-    "ag-grid-enterprise": ">= 32.0.0 <33.0.0",
-    "ag-grid-react": ">= 32.0.0 <33.0.0",
+    "ag-grid-community": ">= 33.0.0 <34.0.0",
+    "ag-grid-enterprise": ">= 33.0.0 <34.0.0",
+    "ag-grid-react": ">= 33.0.0 <34.0.0",
     "react": ">=19.0.0 <20.0.0",
     "react-dom": ">=19.0.0 <20.0.0"
   },
@@ -75,7 +75,11 @@
       "import": "./styles/vanilla-extract/esm/vanilla-extract/index.mjs",
       "default": "./styles/vanilla-extract/cjs/vanilla-extract/index.cjs"
     },
-    "./ag-grid/*.css": "./ag-grid/*.css",
+    "./ag-grid": {
+      "types": "./ag-grid/esm/index.d.ts",
+      "import": "./ag-grid/esm/index.mjs",
+      "default": "./ag-grid/cjs/index.cjs"
+    },
     "./testing": {
       "types": "./testing/index.d.ts",
       "default": "./testing/index.cjs"

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

@@ -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

@@ -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

@@ -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/cjs/components-react/projects/react-ssr-wrapper/src/public-api.cjs

@@ -159,6 +159,7 @@ exports.PTextarea = textarea_wrapper.PTextarea;
 exports.PTextareaWrapper = textareaWrapper_wrapper.PTextareaWrapper;
 exports.PToast = toast_wrapper.PToast;
 exports.PWordmark = wordmark_wrapper.PWordmark;
+exports.PorscheDesignSystemContext = provider.PorscheDesignSystemContext;
 exports.PorscheDesignSystemProvider = provider.PorscheDesignSystemProvider;
 exports.skipCheckForPorscheDesignSystemProviderDuringTests = hooks.skipCheckForPorscheDesignSystemProviderDuringTests;
 exports.useToastManager = hooks.useToastManager;