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

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

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

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

@@ -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/components-react/projects/react-ssr-wrapper/src/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/ssr/esm/lib/dsr-components/popover.d.ts

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

package/ssr/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';