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

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

@@ -1,12 +1,8 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
-import 'react';
-import '../../provider.mjs';
-import { PButton } from '../components/button.wrapper.mjs';
+import { FCDismissButton } from './fc-dismiss-button.mjs';
 
-const DialogBase = ({ children, 
-// host,
-inert, containerClass, ariaAttributes, dismissable = false, header, footer, subFooter, }) => {
-    return (jsx("dialog", { inert: inert, tabIndex: -1, ...(ariaAttributes ?? {}), children: jsx("div", { className: "scroller", children: jsxs("div", { className: containerClass, children: [dismissable && (jsx(PButton, { className: "dismiss", compact: true, type: "button", hideLabel: true, icon: "close", children: `Dismiss ${containerClass}` })), header, children, footer, subFooter] }) }) }));
+const DialogBase = ({ children, inert, containerClass, ariaAttributes, onMouseDown, dismissable = false, header, footer, subFooter, }) => {
+    return (jsx("dialog", { inert: inert, tabIndex: -1, ...(ariaAttributes ?? {}), children: jsx("div", { className: "scroller", children: jsxs("div", { className: containerClass, children: [dismissable && jsx(FCDismissButton, { label: `Dismiss ${containerClass}` }), header, children, footer, subFooter] }) }) }));
 };
 
 export { DialogBase };

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

@@ -24,6 +24,9 @@ class DSRDrilldown extends Component {
     dialog;
     drawer;
     isDesktop = false;
+    // Tracks whether the current pointer gesture started inside the drawer (not on the backdrop). Lets `onClickDialog`
+    // skip dismissal when a selection is dragged out of the drawer and released on the backdrop.
+    isPointerDownInside = false;
     async componentWillLoad() {
         this.props.defineDrilldownItemElements();
         const activeItem = this.props.drilldownItemElements.find((item) => item.identifier === this.props.activeIdentifier);

package/ssr/esm/components-react/projects/react-ssr-wrapper/src/lib/dsr-components/fc-dismiss-button.mjs

@@ -0,0 +1,14 @@
+import { jsx } from 'react/jsx-runtime';
+
+/**
+ * Shared dismiss/close button used across dialog-based (flyout/modal/sheet) and notification-based
+ * (banner/inline-notification/toast) components. Renders a native `<button className="dismiss">` with the close icon
+ * inlined as a CSS mask (see `fc-dismiss-button-styles.ts`) — so it needs neither a nested `p-button` nor a `p-icon`
+ * (avoiding the async CDN icon fetch). Each consumer supplies the variant/positioning styling via the `.dismiss` class.
+ * The visible label text is visually hidden but exposed to assistive technology as the accessible name.
+ */
+const FCDismissButton = ({ label, ariaDescription, }) => {
+    return (jsx("button", { className: "dismiss", type: "button", ...(ariaDescription ? { 'aria-description': ariaDescription } : {}), children: jsx("span", { children: label }) }));
+};
+
+export { FCDismissButton };

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

@@ -23,6 +23,9 @@ class DSRFlyout extends Component {
     hasHeader;
     hasFooter;
     hasSubFooter;
+    // Tracks whether the current pointer gesture started inside the panel (not on the backdrop). Lets `onClickDialog`
+    // skip dismissal when a selection is dragged out of the panel and released on the backdrop.
+    isPointerDownInside = false;
     topLayer = createTopLayerController({
         getElement: () => this.props.dialog,
         isShown: () => !!this.props.dialog?.open,
@@ -35,7 +38,17 @@ class DSRFlyout extends Component {
         const hasFooter = namedSlotChildren.filter(({ props: { slot } }) => slot === 'footer').length > 0;
         const hasSubFooter = namedSlotChildren.filter(({ props: { slot } }) => slot === 'sub-footer').length > 0;
         const style = minifyCss(getComponentCss$V(this.props.open, this.props.background, this.props.backdrop, this.props.position, hasHeader, hasFooter, hasSubFooter, this.props.footerBehavior, this.props.fullscreen));
-        return (jsxs(Fragment, { children: [jsxs("template", { shadowroot: "open", shadowrootmode: "open", children: [jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsx(DialogBase, { host: null, dismissable: true, containerClass: "flyout", header: hasHeader ? jsx("slot", { name: "header" }) : undefined, footer: hasFooter ? jsx("slot", { name: "footer" }) : undefined, subFooter: hasSubFooter ? jsx("slot", { name: "sub-footer" }) : undefined, ariaAttributes: parseAndGetAriaAttributes({
+        return (jsxs(Fragment, { children: [jsxs("template", { shadowroot: "open", shadowrootmode: "open", children: [jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsx(DialogBase
+                        // `inert` (not `aria-hidden`) removes the panel from the a11y tree AND prevents focus while closed / during the
+                        // fade-out. Using `aria-hidden` here triggers a browser warning when a focusable descendant still holds focus
+                        // during the closing transition ("Blocked aria-hidden on an element because its descendant retained focus").
+                        // `inert` avoids that and mirrors the pattern used by `p-modal` / `p-popover` / `p-drilldown`.
+                        , { 
+                            // `inert` (not `aria-hidden`) removes the panel from the a11y tree AND prevents focus while closed / during the
+                            // fade-out. Using `aria-hidden` here triggers a browser warning when a focusable descendant still holds focus
+                            // during the closing transition ("Blocked aria-hidden on an element because its descendant retained focus").
+                            // `inert` avoids that and mirrors the pattern used by `p-modal` / `p-popover` / `p-drilldown`.
+                            inert: !this.props.open, dismissable: true, containerClass: "flyout", header: hasHeader ? jsx("slot", { name: "header" }) : undefined, footer: hasFooter ? jsx("slot", { name: "footer" }) : undefined, subFooter: hasSubFooter ? jsx("slot", { name: "sub-footer" }) : undefined, ariaAttributes: parseAndGetAriaAttributes({
                                 'aria-modal': true,
                                 ...{ 'aria-label': hasHeader ? namedSlotChildren.find(({ props: { slot } }) => slot === 'header')?.props.children : 'Flyout' },
                                 ...parseAndGetAriaAttributes(this.props.aria),

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

@@ -5,8 +5,8 @@ import { splitChildren } from '../../splitChildren.mjs';
 import { minifyCss } from '../../minifyCss.mjs';
 import { getInlineNotificationCss as getComponentCss$S } from '../../../../../../components/dist/styles/esm/styles-entry.mjs';
 import { getInlineNotificationAriaAttributes } from '../../../../../../components/dist/utils/esm/utils-entry.mjs';
+import { FCDismissButton } from './fc-dismiss-button.mjs';
 import { NotificationBase } from './notification-base.mjs';
-import { PButton } from '../components/button.wrapper.mjs';
 import { PButtonPure } from '../components/button-pure.wrapper.mjs';
 
 /**
@@ -24,7 +24,7 @@ class DSRInlineNotification extends Component {
         return (jsxs(Fragment, { children: [jsxs("template", { shadowroot: "open", shadowrootmode: "open", children: [jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsx(NotificationBase, { ...getInlineNotificationAriaAttributes(this.props.state, headingText), heading: this.props.heading, headingTag: this.props.headingTag, hasHeadingSlot: hasHeadingSlot, description: this.props.description, ...(this.props.actionLabel && {
                                 actionLabel: (jsx(PButtonPure, { className: "action", icon: this.props.actionIcon, loading: this.props.actionLoading, children: this.props.actionLabel })),
                             }), ...(this.props.dismissButton && {
-                                dismissButton: (jsx(PButton, { className: "dismiss", type: "button", variant: "secondary", icon: "close", hideLabel: true, compact: true, ...(headingText ? { aria: { 'aria-description': headingText } } : {}), children: "Close notification" })),
+                                dismissButton: (jsx(FCDismissButton, { label: "Close notification", ariaDescription: headingText || undefined })),
                             }) })] }), this.props.children] }));
     }
 }

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

@@ -20,6 +20,9 @@ class DSRModal extends Component {
     footer;
     hasHeader;
     hasFooter;
+    // Tracks whether the current pointer gesture started inside the panel (not on the backdrop). Lets `onClickDialog`
+    // skip dismissal when a selection is dragged out of the panel and released on the backdrop.
+    isPointerDownInside = false;
     topLayer = createTopLayerController({
         getElement: () => this.props.dialog,
         isShown: () => !!this.props.dialog?.open,
@@ -33,7 +36,17 @@ class DSRModal extends Component {
         this.props.disableCloseButton ? false : this.props.dismissButton;
         // TODO: why do we validate only when opened?
         const style = minifyCss(getComponentCss$C(this.props.open, this.props.background, this.props.backdrop, this.props.fullscreen, this.props.dismissButton, hasHeader, hasFooter));
-        return (jsxs(Fragment, { children: [jsxs("template", { shadowroot: "open", shadowrootmode: "open", children: [jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsx(DialogBase, { host: null, inert: !this.props.open, dismissable: this.props.dismissButton ?? undefined, containerClass: "modal", header: hasHeader ? jsx("slot", { name: "header" }) : undefined, footer: hasFooter ? jsx("slot", { name: "footer" }) : undefined, ariaAttributes: parseAndGetAriaAttributes({
+        return (jsxs(Fragment, { children: [jsxs("template", { shadowroot: "open", shadowrootmode: "open", children: [jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsx(DialogBase
+                        // `inert` (not `aria-hidden`) removes the panel from the a11y tree AND prevents focus while closed / during the
+                        // fade-out. Using `aria-hidden` here triggers a browser warning when a focusable descendant still holds focus
+                        // during the closing transition ("Blocked aria-hidden on an element because its descendant retained focus").
+                        // `inert` avoids that and mirrors the pattern used by `p-flyout` / `p-popover` / `p-drilldown`.
+                        , { 
+                            // `inert` (not `aria-hidden`) removes the panel from the a11y tree AND prevents focus while closed / during the
+                            // fade-out. Using `aria-hidden` here triggers a browser warning when a focusable descendant still holds focus
+                            // during the closing transition ("Blocked aria-hidden on an element because its descendant retained focus").
+                            // `inert` avoids that and mirrors the pattern used by `p-flyout` / `p-popover` / `p-drilldown`.
+                            inert: !this.props.open, dismissable: this.props.dismissButton ?? undefined, containerClass: "modal", header: hasHeader ? jsx("slot", { name: "header" }) : undefined, footer: hasFooter ? jsx("slot", { name: "footer" }) : undefined, ariaAttributes: parseAndGetAriaAttributes({
                                 'aria-modal': true,
                                 ...(hasHeader && { 'aria-label': this.props.ariaLabel }),
                                 ...parseAndGetAriaAttributes(this.props.aria),

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

@@ -20,6 +20,10 @@ import { createTopLayerController, parseAndGetAriaAttributes } from '../../../..
 class DSRPopover extends Component {
     host;
     isOpen = false;
+    // Tracks the component's first render. While `true`, the entry transition (`@starting-style`) is suppressed so an
+    // initially-open popover (`open=true` on page load) appears instantly instead of fading in; flipped to `false` in
+    // `componentDidLoad`, so every later (user-triggered) open keeps the fade-in.
+    isInitialRender = true;
     // The `[popover]` panel element on the #top-layer that holds the content and the arrow.
     refPopover;
     // The default info button rendered in the Shadow DOM (only present when no `button` slot is used).
@@ -73,7 +77,7 @@ class DSRPopover extends Component {
         const { namedSlotChildren} = splitChildren(this.props.children);
         const hasSlottedButton = namedSlotChildren.filter(({ props: { slot } }) => slot === 'button').length > 0;
         const id = 'popover';
-        const style = minifyCss(getComponentCss$v(this.props.effectiveOpen, this.props.compact).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'));
+        const style = minifyCss(getComponentCss$v(this.props.effectiveOpen, this.props.compact, this.props.isInitialRender).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: [hasSlottedButton ? (jsx("slot", { name: "button" })) : (jsx("button", { type: "button", "aria-label": "More information", "aria-details": id, ...parseAndGetAriaAttributes(this.props.aria), "aria-expanded": this.props.effectiveOpen ? 'true' : 'false' })), jsxs("div", { id: id, popover: "manual", inert: !this.props.effectiveOpen, children: [jsx("div", { className: "arrow" }), this.props.description ? jsx("p", { children: this.props.description }) : jsx("slot", {})] })] })] }), this.props.children] }));
     }
 }

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

@@ -17,6 +17,9 @@ class DSRSheet extends Component {
     dialog;
     scroller;
     hasHeader;
+    // Tracks whether the current pointer gesture started inside the panel (not on the backdrop). Lets `onClickDialog`
+    // skip dismissal when a selection is dragged out of the panel and released on the backdrop.
+    isPointerDownInside = false;
     topLayer = createTopLayerController({
         getElement: () => this.props.dialog,
         isShown: () => !!this.props.dialog?.open,
@@ -28,7 +31,17 @@ class DSRSheet extends Component {
         const hasHeader = namedSlotChildren.filter(({ props: { slot } }) => slot === 'header').length > 0;
         if (this.props.open) ;
         const style = minifyCss(getComponentCss$n(this.props.open, this.props.background, this.props.dismissButton));
-        return (jsxs(Fragment, { children: [jsxs("template", { shadowroot: "open", shadowrootmode: "open", children: [jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsx(DialogBase, { host: null, inert: !this.props.open, dismissable: this.props.dismissButton ?? undefined, containerClass: "sheet", header: hasHeader ? jsx("slot", { name: "header" }) : undefined, ariaAttributes: parseAndGetAriaAttributes({
+        return (jsxs(Fragment, { children: [jsxs("template", { shadowroot: "open", shadowrootmode: "open", children: [jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsx(DialogBase
+                        // `inert` (not `aria-hidden`) removes the panel from the a11y tree AND prevents focus while closed / during the
+                        // fade-out. Using `aria-hidden` here triggers a browser warning when a focusable descendant still holds focus
+                        // during the closing transition ("Blocked aria-hidden on an element because its descendant retained focus").
+                        // `inert` avoids that and mirrors the pattern used by `p-modal` / `p-popover` / `p-drilldown`.
+                        , { 
+                            // `inert` (not `aria-hidden`) removes the panel from the a11y tree AND prevents focus while closed / during the
+                            // fade-out. Using `aria-hidden` here triggers a browser warning when a focusable descendant still holds focus
+                            // during the closing transition ("Blocked aria-hidden on an element because its descendant retained focus").
+                            // `inert` avoids that and mirrors the pattern used by `p-modal` / `p-popover` / `p-drilldown`.
+                            inert: !this.props.open, dismissable: this.props.dismissButton ?? undefined, containerClass: "sheet", header: hasHeader ? jsx("slot", { name: "header" }) : undefined, ariaAttributes: parseAndGetAriaAttributes({
                                 'aria-modal': true,
                                 ...(hasHeader && {
                                     'aria-label': namedSlotChildren.filter(({ props: { slot } }) => slot === 'header').length > 0 && namedSlotChildren.find(({ props: { slot } }) => slot === 'header')?.props.children,

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

@@ -13,6 +13,8 @@ export declare class DSRBanner extends Component<any> {
     private refDismiss;
     private hasHeadingSlot;
     private hasDescriptionSlot;
+    private hasKeydownListener;
+    private isInitialRender;
     private topLayer;
     render(): JSX.Element;
 }

package/ssr/esm/lib/dsr-components/dialog-base.d.ts

@@ -3,13 +3,13 @@ import type { FC } from 'react';
 import type { JSX } from 'react';
 type DialogBaseProps = {
     children?: JSX.Element;
-    host: HTMLElement;
-    inert?: boolean;
+    inert: boolean;
     dialogRef?: (el: HTMLDialogElement) => void;
     scrollerRef?: (el: HTMLDivElement) => void;
     containerClass: 'flyout' | 'modal' | 'sheet';
     onCancel?: (e: Event) => void;
     onClick?: (e: MouseEvent) => void;
+    onMouseDown?: (e: MouseEvent) => void;
     onTransitionEnd?: (e: TransitionEvent) => void;
     onDismiss?: () => void;
     ariaAttributes?: AriaAttributes;

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

@@ -16,6 +16,7 @@ export declare class DSRDrilldown extends Component<any> {
     private dialog;
     private drawer;
     private isDesktop;
+    private isPointerDownInside;
     componentWillLoad(): Promise<void>;
     render(): JSX.Element;
 }

package/ssr/esm/lib/dsr-components/fc-dismiss-button.d.ts

@@ -0,0 +1,16 @@
+import type { FC } from 'react';
+type FCDismissButtonProps = {
+    /** Accessible (visually hidden) label of the dismiss button. */
+    label: string;
+    /** Optional value forwarded as `aria-description` to provide additional context (e.g. the notification heading). */
+    ariaDescription?: string;
+};
+/**
+ * Shared dismiss/close button used across dialog-based (flyout/modal/sheet) and notification-based
+ * (banner/inline-notification/toast) components. Renders a native `<button className="dismiss">` with the close icon
+ * inlined as a CSS mask (see `fc-dismiss-button-styles.ts`) — so it needs neither a nested `p-button` nor a `p-icon`
+ * (avoiding the async CDN icon fetch). Each consumer supplies the variant/positioning styling via the `.dismiss` class.
+ * The visible label text is visually hidden but exposed to assistive technology as the accessible name.
+ */
+export declare const FCDismissButton: FC<FCDismissButtonProps>;
+export {};

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

@@ -17,6 +17,7 @@ export declare class DSRFlyout extends Component<any> {
     private hasHeader;
     private hasFooter;
     private hasSubFooter;
+    private isPointerDownInside;
     private topLayer;
     render(): JSX.Element;
 }

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

@@ -14,6 +14,7 @@ export declare class DSRModal extends Component<any> {
     private footer;
     private hasHeader;
     private hasFooter;
+    private isPointerDownInside;
     private topLayer;
     render(): JSX.Element;
 }

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

@@ -9,6 +9,7 @@ import type { JSX } from 'react';
 export declare class DSRPopover extends Component<any> {
     host: HTMLElement;
     private isOpen;
+    private isInitialRender;
     private refPopover;
     private refButton;
     private refSlotButton;

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

@@ -11,6 +11,7 @@ export declare class DSRSheet extends Component<any> {
     private dialog;
     private scroller;
     private hasHeader;
+    private isPointerDownInside;
     private topLayer;
     render(): JSX.Element;
 }