@porsche-design-system/components-react 4.2.0-rc.3 → 4.2.0-rc.5

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

@@ -1,5 +1,26 @@
 'use strict';
 
+function getHTMLElement(element, selector) {
+    return element?.querySelector(selector);
+}
+
+const transformSelectorToDirectChildSelector = (selector) => selector
+    .split(',')
+    .map((part) => `:scope>${part}`)
+    .join();
+
+/* eslint-disable prefer-arrow/prefer-arrow-functions */
+function getDirectChildHTMLElement(element, selector) {
+    // querySelector(All) doesn't work with :scope pseudo class and comma separator in jsdom, yet
+    // https://github.com/jsdom/jsdom/issues/3141
+    // therefore we got a workaround so it works nicely when consumed from jsdom-polyfill package
+    return (transformSelectorToDirectChildSelector(selector)
+        .split(',')
+        .map((sel) => getHTMLElement(element, sel))
+        .filter((x) => x)[0] || null // comma separated selector might return null, so we have to filter
+    );
+}
+
 function _extends() {
   _extends = Object.assign ? Object.assign.bind() : function (target) {
     for (var i = 1; i < arguments.length; i++) {
@@ -3191,26 +3212,30 @@ const getTagNameWithoutPrefix = (host) => {
     return (tagNameWithoutPrefix || tagName); // return tagName as fallback for default tags
 };
 
-function getHTMLElement(element, selector) {
-    return element?.querySelector(selector);
-}
-
-const transformSelectorToDirectChildSelector = (selector) => selector
-    .split(',')
-    .map((part) => `:scope>${part}`)
-    .join();
-
-/* eslint-disable prefer-arrow/prefer-arrow-functions */
-function getDirectChildHTMLElement(element, selector) {
-    // querySelector(All) doesn't work with :scope pseudo class and comma separator in jsdom, yet
-    // https://github.com/jsdom/jsdom/issues/3141
-    // therefore we got a workaround so it works nicely when consumed from jsdom-polyfill package
-    return (transformSelectorToDirectChildSelector(selector)
-        .split(',')
-        .map((sel) => getHTMLElement(element, sel))
-        .filter((x) => x)[0] || null // comma separated selector might return null, so we have to filter
-    );
-}
+const parseCssTimeToMs = (value) => {
+    const trimmed = value.trim();
+    const num = Number.parseFloat(trimmed);
+    if (Number.isNaN(num)) {
+        return 0;
+    }
+    return trimmed.endsWith('ms') ? num : num * 1000; // seconds otherwise
+};
+/**
+ * Returns the longest `transition-duration` + `transition-delay` (in ms) across an element's computed transitions.
+ * Useful as a safety-net timeout when a `transitionend` event might not fire (e.g. with reduced motion or a 0 duration).
+ *
+ * @param {HTMLElement} element - The element to read the computed transition values from.
+ * @returns {number} The maximum combined duration and delay in milliseconds.
+ */
+const getMaxTransitionDurationMs = (element) => {
+    const { transitionDuration, transitionDelay } = getComputedStyle(element);
+    const durations = transitionDuration.split(',');
+    const delays = transitionDelay.split(',');
+    return durations.reduce((max, duration, index) => {
+        const total = parseCssTimeToMs(duration) + parseCssTimeToMs(delays[index] ?? '0s');
+        return total > max ? total : max;
+    }, 0);
+};
 
 const hasSpecificDirectChildTag = (host, tag) => {
     const el = getDirectChildHTMLElement(host, ':only-child');
@@ -3457,6 +3482,18 @@ hasWindow$1 &&
         }
     });
 
+const showDialog = (dialog, scrollArea) => {
+    // Must only be called when the dialog isn't already open and after the render cycle has finished (e.g. in
+    // `componentDidRender()`), so visibility states are ready and the dismiss button can be focused correctly.
+    // The "only when not already open" precondition is guaranteed by the caller (`createTopLayerController`'s `requestShow`
+    // guards with `!isShown()`), since `showModal()` throws if the dialog is already open.
+    scrollArea.scrollTo(0, 0); // reset scroll position each time dialog gets opened again
+    dialog.inert = true; // This will prevent the autofocus of focusable elements inside the dialog (e.g. close button) element which is conflicting with our transition
+    dialog.showModal(); // shows modal on `#top-layer`
+    dialog.inert = false; // Re-enable focus on dialog element
+    dialog.focus(); // set focus programmatically to dialog element to prevent transition bug in Safari
+};
+
 const getCDNBaseURL = () => global.PORSCHE_DESIGN_SYSTEM_CDN_URL + "/porsche-design-system";
 
 const hasDocument = typeof document !== 'undefined';
@@ -3465,7 +3502,7 @@ const hasShowPickerSupport = () => (hasDocument &&
     'showPicker' in HTMLInputElement.prototype &&
     CSS.supports('selector(::-webkit-calendar-picker-indicator)'));
 
-const prefix = `[Porsche Design System v${"4.2.0-rc.3"}]` // this part isn't covered by unit tests
+const prefix = `[Porsche Design System v${"4.2.0-rc.5"}]` // this part isn't covered by unit tests
     ;
 const consoleError$1 = (...messages) => {
     console.error(prefix, ...messages);
@@ -3486,6 +3523,83 @@ const supportsNativePopover = () => {
 const hasNativePopoverSupport = supportsNativePopover();
 // getter for easy mocking
 const getHasNativePopoverSupport = () => hasNativePopoverSupport;
+
+// Single source of truth for the two CSS feature queries behind the "keep on #top-layer during fade-out" capability,
+// shared by the JS detection (`supportsOverlayTransition`) and the CSS `@supports` wrapper
+// (`overlayTransitionSupportsQuery`) so the two can never drift.
+const overlayFeature = 'overlay: auto';
+const allowDiscreteFeature = 'transition-behavior: allow-discrete';
+/**
+ * Detects whether the browser can keep an element (e.g. a `dialog` or a `popover`) on the `#top-layer` during a
+ * fade-out animation via the `overlay` property combined with `transition-behavior: allow-discrete`.
+ *
+ * BOTH capabilities are required: `transition-behavior: allow-discrete` is now widely supported (e.g. Firefox), but the
+ * `overlay` property itself is Chromium-only. Firefox supports `allow-discrete` yet NOT `overlay`, so it would drop out
+ * of the `#top-layer` immediately when leaving it and fall back to a high `z-index` — which breaks as soon as an
+ * ancestor creates a new stacking context (e.g. `transform`/`isolation`, like a nested `p-modal` within `p-flyout`).
+ *
+ * For browsers lacking the `overlay` transition the element must be kept natively shown during the fade-out and only be
+ * removed from the `#top-layer` once the transition has finished (see `createTopLayerController`).
+ *
+ * @returns {boolean} `true` if both `overlay` and `transition-behavior: allow-discrete` are supported.
+ */
+const supportsOverlayTransition = () => typeof CSS !== 'undefined' && CSS.supports(overlayFeature) && CSS.supports(allowDiscreteFeature);
+
+// Extra time added on top of the computed transition duration before hiding. The timer starts in `requestHide()`,
+// one frame before the transition actually begins, so this buffer biases the hide slightly *after* the visual
+// transition ends — preventing the element from leaving the #top-layer too early and flickering.
+const HIDE_BUFFER_MS = 50;
+/**
+ * Creates a controller that manages an element's presence on the `#top-layer`, keeping it there during its fade-out
+ * animation in browsers that don't support the `overlay` transition (Safari/Firefox). On hide it defers the native
+ * removal (`dialog.close()` / `element.hidePopover()`) until the fade-out has finished, scheduled via a timeout derived
+ * from the element's computed transition duration. In Chromium the native removal happens immediately because the
+ * `overlay` + `allow-discrete` transition keeps the element on the `#top-layer` while it fades out.
+ *
+ * Both `requestShow` and `requestHide` are idempotent (guarded by `isShown`), so they can safely be called on every
+ * render. State is scoped to the controller instance, so no shared registry is required.
+ *
+ * @param {TopLayerOptions} options - Element-specific hooks (show state, show/hide actions, element getter).
+ * @returns {TopLayerController} The controller used to request show, request hide, and cancel.
+ */
+const createTopLayerController = (options) => {
+    const { getElement, isShown, show, hide } = options;
+    let hideTimer;
+    const cancel = () => {
+        if (hideTimer) {
+            clearTimeout(hideTimer);
+            hideTimer = undefined;
+        }
+    };
+    const requestShow = () => {
+        cancel(); // cancel any pending deferred hide first, so re-opening during fade-out wins (element may still be shown)
+        if (isShown()) {
+            return; // `showModal()` / `showPopover()` throw if the element is already shown
+        }
+        show();
+    };
+    const requestHide = () => {
+        if (!isShown()) {
+            return; // already hidden (or a deferred hide already completed)
+        }
+        if (supportsOverlayTransition()) {
+            hide(); // Chromium: `overlay` + `allow-discrete` keeps it on the #top-layer during the fade-out
+        }
+        else {
+            // Safari/Firefox: keep it on the real #top-layer during the fade-out and hide once the transition has finished.
+            cancel(); // drop any in-flight deferred hide before re-scheduling
+            const element = getElement();
+            const timeoutMs = (element ? getMaxTransitionDurationMs(element) : 0) + HIDE_BUFFER_MS;
+            hideTimer = setTimeout(() => {
+                cancel();
+                if (isShown()) {
+                    hide();
+                }
+            }, timeoutMs);
+        }
+    };
+    return { requestShow, requestHide, cancel };
+};
 const headerSlot = 'header';
 const anchorSlot = 'anchor';
 
@@ -4121,6 +4235,7 @@ exports.buildIconUrl = buildIconUrl;
 exports.consoleError = consoleError$1;
 exports.createPaginationItems = createPaginationItems;
 exports.createRange = createRange;
+exports.createTopLayerController = createTopLayerController;
 exports.crestSize = crestSize;
 exports.descriptionId = descriptionId;
 exports.displaySizeToTagMap = displaySizeToTagMap;
@@ -4140,6 +4255,7 @@ exports.getHasNativePopoverSupport = getHasNativePopoverSupport;
 exports.getHeadingTagType = getHeadingTagType;
 exports.getInlineNotificationAriaAttributes = getInlineNotificationAriaAttributes;
 exports.getListboxAriaAttributes = getListboxAriaAttributes;
+exports.getMaxTransitionDurationMs = getMaxTransitionDurationMs;
 exports.getSanitizedActiveTabIndex = getSanitizedActiveTabIndex;
 exports.getSegmentedControlItemAriaAttributes = getSegmentedControlItemAriaAttributes;
 exports.getStepperHorizontalIconName = getStepperHorizontalIconName;
@@ -4170,8 +4286,10 @@ exports.observedNodesMap = observedNodesMap;
 exports.parseAndGetAriaAttributes = parseAndGetAriaAttributes;
 exports.parseJSONAttribute = parseJSONAttribute;
 exports.setAriaIDREF = setAriaIDREF;
+exports.showDialog = showDialog;
 exports.supportsConstructableStylesheets = supportsConstructableStylesheets;
 exports.supportsNativePopover = supportsNativePopover;
+exports.supportsOverlayTransition = supportsOverlayTransition;
 exports.tempDiv = tempDiv;
 exports.tempIcon = tempIcon;
 exports.tempLabel = tempLabel;

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

@@ -7,23 +7,23 @@ var hooks = require('../../hooks.cjs');
 var utils = require('../../utils.cjs');
 var flyout = require('../dsr-components/flyout.cjs');
 
-const PFlyout = /*#__PURE__*/ react.forwardRef(({ aria, backdrop = 'blur', background = 'canvas', disableBackdropClick = false, footerBehavior = 'sticky', onDismiss, onMotionHiddenEnd, onMotionVisibleEnd, open = false, position = 'end', className, children, ...rest }, ref) => {
+const PFlyout = /*#__PURE__*/ react.forwardRef(({ aria, backdrop = 'blur', background = 'canvas', disableBackdropClick = false, footerBehavior = 'sticky', fullscreen = false, onDismiss, onMotionHiddenEnd, onMotionVisibleEnd, open = false, position = 'end', className, children, ...rest }, ref) => {
     const elementRef = react.useRef(undefined);
     hooks.useEventCallback(elementRef, 'dismiss', onDismiss);
     hooks.useEventCallback(elementRef, 'motionHiddenEnd', onMotionHiddenEnd);
     hooks.useEventCallback(elementRef, 'motionVisibleEnd', onMotionVisibleEnd);
     const WebComponentTag = hooks.usePrefix('p-flyout');
-    const propsToSync = [aria, backdrop, background, disableBackdropClick, footerBehavior, open, position];
+    const propsToSync = [aria, backdrop, background, disableBackdropClick, footerBehavior, fullscreen, open, position];
     hooks.useBrowserLayoutEffect(() => {
         const { current } = elementRef;
-        ['aria', 'backdrop', 'background', 'disableBackdropClick', 'footerBehavior', 'open', 'position'].forEach((propName, i) => (current[propName] = propsToSync[i]));
+        ['aria', 'backdrop', 'background', 'disableBackdropClick', 'footerBehavior', 'fullscreen', 'open', 'position'].forEach((propName, i) => (current[propName] = propsToSync[i]));
     }, propsToSync);
     const props = {
         ...rest,
         // @ts-ignore
         ...(!process.browser
             ? {
-                children: (jsxRuntime.jsx(flyout.DSRFlyout, { aria, backdrop, background, disableBackdropClick, footerBehavior, open, position, children })),
+                children: (jsxRuntime.jsx(flyout.DSRFlyout, { aria, backdrop, background, disableBackdropClick, footerBehavior, fullscreen, open, position, children })),
             }
             : {
                 children,

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

@@ -23,6 +23,12 @@ class DSRBanner extends react.Component {
     refDismiss;
     hasHeadingSlot;
     hasDescriptionSlot;
+    topLayer = utilsEntry.createTopLayerController({
+        getElement: () => this.props.refPopover,
+        isShown: () => !!this.props.refPopover?.matches(':popover-open'),
+        show: () => this.props.refPopover?.showPopover(),
+        hide: () => this.props.refPopover?.hidePopover(),
+    });
     render() {
         const { children, namedSlotChildren, otherChildren } = splitChildren.splitChildren(this.props.children);
         const hasHeadingSlot = namedSlotChildren.filter(({ props: { slot } }) => slot === 'heading').length > 0;

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

@@ -25,12 +25,18 @@ class DSRFlyout extends react.Component {
     hasHeader;
     hasFooter;
     hasSubFooter;
+    topLayer = utilsEntry.createTopLayerController({
+        getElement: () => this.props.dialog,
+        isShown: () => !!this.props.dialog?.open,
+        show: () => utilsEntry.showDialog(this.props.dialog, this.props.scroller),
+        hide: () => this.props.dialog?.close(),
+    });
     render() {
         const { children, namedSlotChildren, otherChildren } = splitChildren.splitChildren(this.props.children);
         const hasHeader = namedSlotChildren.filter(({ props: { slot } }) => slot === 'header').length > 0;
         const hasFooter = namedSlotChildren.filter(({ props: { slot } }) => slot === 'footer').length > 0;
         const hasSubFooter = namedSlotChildren.filter(({ props: { slot } }) => slot === 'sub-footer').length > 0;
-        const style = minifyCss.minifyCss(stylesEntry.getFlyoutCss(this.props.open, this.props.background, this.props.backdrop, this.props.position, hasHeader, hasFooter, hasSubFooter, this.props.footerBehavior));
+        const style = minifyCss.minifyCss(stylesEntry.getFlyoutCss(this.props.open, this.props.background, this.props.backdrop, this.props.position, hasHeader, hasFooter, hasSubFooter, this.props.footerBehavior, this.props.fullscreen));
         return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("template", { shadowroot: "open", shadowrootmode: "open", children: [jsxRuntime.jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxRuntime.jsx(dialogBase.DialogBase, { host: null, dismissable: true, containerClass: "flyout", header: hasHeader ? jsxRuntime.jsx("slot", { name: "header" }) : undefined, footer: hasFooter ? jsxRuntime.jsx("slot", { name: "footer" }) : undefined, subFooter: hasSubFooter ? jsxRuntime.jsx("slot", { name: "sub-footer" }) : undefined, ariaAttributes: utilsEntry.parseAndGetAriaAttributes({
                                 'aria-modal': true,
                                 ...{ 'aria-label': hasHeader ? namedSlotChildren.find(({ props: { slot } }) => slot === 'header')?.props.children : 'Flyout' },

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

@@ -10,7 +10,7 @@ const Label = ({ hasLabel, hasDescription, children,
 label, tag, description, htmlFor, isRequired, isLoading, isDisabled, stopClickPropagation, }) => {
     splitChildren.splitChildren(children);
     const TagType = tag || 'label';
-    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [hasLabel && (jsxRuntime.jsxs("div", { className: "label-wrapper", children: [jsxRuntime.jsx(TagType, { className: "label", id: utilsEntry.labelId, "aria-disabled": isLoading || isDisabled ? 'true' : null, htmlFor: htmlFor, children: jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [label || jsxRuntime.jsx("slot", { name: "label" }), isRequired /* && !isParentFieldsetRequired(host) */ && jsxRuntime.jsx(required.Required, {})] }) }), jsxRuntime.jsx("slot", { name: "label-after" })] })), hasDescription && (jsxRuntime.jsx("span", { className: "label", id: utilsEntry.descriptionId, "aria-disabled": isLoading || isDisabled ? 'true' : null, children: description || jsxRuntime.jsx("slot", { name: "description" }) }))] }));
+    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [hasLabel && (jsxRuntime.jsxs("div", { className: "label-wrapper", children: [jsxRuntime.jsx(TagType, { className: "label", id: utilsEntry.labelId, "aria-disabled": isLoading || isDisabled ? 'true' : null, htmlFor: htmlFor, children: jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [label || jsxRuntime.jsx("slot", { name: "label" }), isRequired /* && !isParentFieldsetRequired(host) */ && jsxRuntime.jsx(required.Required, {})] }) }), stopClickPropagation ? (jsxRuntime.jsx("span", { className: "label-after", children: jsxRuntime.jsx("slot", { name: "label-after" }) })) : (jsxRuntime.jsx("slot", { name: "label-after" }))] })), hasDescription && (jsxRuntime.jsx("span", { className: "label", id: utilsEntry.descriptionId, "aria-disabled": isLoading || isDisabled ? 'true' : null, children: description || jsxRuntime.jsx("slot", { name: "description" }) }))] }));
 };
 
 exports.Label = Label;

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

@@ -22,6 +22,12 @@ class DSRModal extends react.Component {
     footer;
     hasHeader;
     hasFooter;
+    topLayer = utilsEntry.createTopLayerController({
+        getElement: () => this.props.dialog,
+        isShown: () => !!this.props.dialog?.open,
+        show: () => utilsEntry.showDialog(this.props.dialog, this.props.scroller),
+        hide: () => this.props.dialog?.close(),
+    });
     render() {
         const { children, namedSlotChildren, otherChildren } = splitChildren.splitChildren(this.props.children);
         const hasHeader = namedSlotChildren.filter(({ props: { slot } }) => slot === 'header').length > 0;

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

@@ -19,6 +19,12 @@ class DSRSheet extends react.Component {
     dialog;
     scroller;
     hasHeader;
+    topLayer = utilsEntry.createTopLayerController({
+        getElement: () => this.props.dialog,
+        isShown: () => !!this.props.dialog?.open,
+        show: () => utilsEntry.showDialog(this.props.dialog, this.props.scroller),
+        hide: () => this.props.dialog?.close(),
+    });
     render() {
         const { children, namedSlotChildren, otherChildren } = splitChildren.splitChildren(this.props.children);
         const hasHeader = namedSlotChildren.filter(({ props: { slot } }) => slot === 'header').length > 0;