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

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

@@ -5,14 +5,14 @@ import { useEventCallback, usePrefix, useTheme, useBrowserLayoutEffect, useMerge
 import { syncRef } from '../../utils.mjs';
 import { DSRFlyout } from '../dsr-components/flyout.mjs';
 
-const PFlyout = forwardRef(({ aria, onDismiss, open = false, position = 'end', theme, className, children, ...rest }, ref) => {
+const PFlyout = forwardRef(({ aria, disableBackdropClick = false, onDismiss, open = false, position = 'end', theme, className, children, ...rest }, ref) => {
     const elementRef = useRef();
     useEventCallback(elementRef, 'dismiss', onDismiss);
     const WebComponentTag = usePrefix('p-flyout');
-    const propsToSync = [aria, open, position, theme || useTheme()];
+    const propsToSync = [aria, disableBackdropClick, open, position, theme || useTheme()];
     useBrowserLayoutEffect(() => {
         const { current } = elementRef;
-        ['aria', 'open', 'position', 'theme'].forEach((propName, i) => (current[propName] = propsToSync[i]));
+        ['aria', 'disableBackdropClick', 'open', 'position', 'theme'].forEach((propName, i) => (current[propName] = propsToSync[i]));
     }, propsToSync);
     // @ts-ignore
     if (!process.browser) {
@@ -23,7 +23,7 @@ const PFlyout = forwardRef(({ aria, onDismiss, open = false, position = 'end', t
         // @ts-ignore
         ...(!process.browser
             ? {
-                children: (jsx(DSRFlyout, { aria, open, position, theme: theme || useTheme(), children })),
+                children: (jsx(DSRFlyout, { aria, disableBackdropClick, open, position, theme: theme || useTheme(), children })),
             }
             : {
                 children,

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

@@ -86,7 +86,11 @@ class DSRFlyoutNavigationItem extends Component {
     render() {
         splitChildren(this.props.children);
         const style = minifyCss(stripFocusAndHoverStyles(getComponentCss$Q(this.open, this.theme)));
-        return (jsxs(Fragment, { children: [jsxs("template", { shadowroot: "open", shadowrootmode: "open", children: [jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxs(Fragment, { children: [jsx(PButtonPure, { className: "button", type: "button", size: "medium", alignLabel: "start", stretch: true, icon: "arrow-head-right", active: this.open, aria: { 'aria-expanded': this.open }, theme: this.theme, children: this.props.label }), jsxs("div", { className: "scroller", inert: this.open ? null : '', children: [jsxs("div", { className: "header", children: [jsx(PButtonPure, { className: "back", type: "button", size: "medium", icon: "arrow-head-left", hideLabel: true, theme: this.theme, children: "Back" }), jsx("h2", { className: "heading", children: this.props.label })] }), jsx("div", { className: "content", children: jsx("slot", {}) })] })] })] }), this.props.children] }));
+        return (jsxs(Fragment, { children: [jsxs("template", { shadowroot: "open", shadowrootmode: "open", children: [jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxs(Fragment, { children: [jsx(PButtonPure, { className: "button", type: "button", size: "medium", alignLabel: "start", stretch: true, icon: "arrow-head-right", active: this.open, aria: { 'aria-expanded': this.open }, theme: this.theme, children: this.props.label }), jsxs("div", { className: "scroller", 
+                                    // "inert" will be known from React 19 onwards, see https://github.com/facebook/react/pull/24730
+                                    // eslint-disable-next-line
+                                    /* @ts-ignore */
+                                    inert: this.open ? null : '', children: [jsxs("div", { className: "header", children: [jsx(PButtonPure, { className: "back", type: "button", size: "medium", icon: "arrow-head-left", hideLabel: true, theme: this.theme, children: "Back" }), jsx("h2", { className: "heading", children: this.props.label })] }), jsx("div", { className: "content", children: jsx("slot", {}) })] })] })] }), this.props.children] }));
     }
 }
 

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

@@ -84,7 +84,11 @@ class DSRFlyoutNavigation extends Component {
     render() {
         splitChildren(this.props.children);
         const style = minifyCss(stripFocusAndHoverStyles(getComponentCss$R(this.props.open, !!this.props.activeIdentifier, this.props.theme)));
-        return (jsxs(Fragment, { children: [jsxs("template", { shadowroot: "open", shadowrootmode: "open", children: [jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxs("dialog", { inert: this.props.open ? null : '', tabIndex: -1, children: [jsx("div", { className: "header", children: jsx(PButtonPure, { className: "dismiss", type: "button", size: "medium", icon: "close", hideLabel: true, theme: this.props.theme, children: "Dismiss flyout" }) }), jsx("div", { className: "scroller", children: jsx("nav", { className: "content", ...parseAndGetAriaAttributes(this.props.aria), children: jsx("slot", {}) }) })] })] }), this.props.children] }));
+        return (jsxs(Fragment, { children: [jsxs("template", { shadowroot: "open", shadowrootmode: "open", children: [jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxs("dialog", { 
+                            // "inert" will be known from React 19 onwards, see https://github.com/facebook/react/pull/24730
+                            // eslint-disable-next-line
+                            /* @ts-ignore */
+                            inert: this.props.open ? null : '', tabIndex: -1, children: [jsx("div", { className: "header", children: jsx(PButtonPure, { className: "dismiss", type: "button", size: "medium", icon: "close", hideLabel: true, theme: this.props.theme, children: "Dismiss flyout" }) }), jsx("div", { className: "scroller", children: jsx("nav", { className: "content", ...parseAndGetAriaAttributes(this.props.aria), children: jsx("slot", {}) }) })] })] }), this.props.children] }));
     }
 }
 

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

@@ -78,11 +78,9 @@ import { parseAndGetAriaAttributes } from '../../../../../../components/dist/uti
 class DSRFlyout extends Component {
     host;
     dialog;
-    wrapper;
-    dismissBtn;
+    scroller;
     header;
     footer;
-    subFooter;
     hasHeader;
     hasFooter;
     hasSubFooter;
@@ -95,8 +93,16 @@ class DSRFlyout extends Component {
         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(stripFocusAndHoverStyles(getComponentCss$P(this.props.open, (positionDeprecationMap[this.props.position] || this.props.position), hasFooter, hasSubFooter, this.props.theme)));
-        return (jsxs(Fragment, { children: [jsxs("template", { shadowroot: "open", shadowrootmode: "open", children: [jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsx("dialog", { inert: this.props.open ? null : '', tabIndex: -1, ...parseAndGetAriaAttributes(this.props.aria), children: jsxs("div", { className: "wrapper", ...(hasSubFooter && { onScroll: this.props.updateShadow }), children: [jsxs("div", { className: "header", children: [jsx(PButtonPure, { className: "dismiss", type: "button", hideLabel: true, icon: "close", theme: this.props.theme, children: "Dismiss flyout" }), hasHeader && jsx("slot", { name: "header" })] }, "header"), jsx("div", { className: "content", children: jsx("slot", {}) }), hasFooter && (jsx("div", { className: "footer", children: jsx("slot", { name: "footer" }) }, "footer")), hasSubFooter && (jsx("div", { className: "sub-footer", children: jsx("slot", { name: "sub-footer" }) }, "sub-footer"))] }) })] }), this.props.children] }));
+        const style = minifyCss(stripFocusAndHoverStyles(getComponentCss$P(this.props.open, (positionDeprecationMap[this.props.position] || this.props.position), hasHeader, hasFooter, hasSubFooter, this.props.theme)));
+        return (jsxs(Fragment, { children: [jsxs("template", { shadowroot: "open", shadowrootmode: "open", children: [jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsx("dialog", { 
+                            // "inert" will be known from React 19 onwards, see https://github.com/facebook/react/pull/24730
+                            // eslint-disable-next-line
+                            /* @ts-ignore */
+                            inert: this.props.open ? null : '', tabIndex: -1, ...parseAndGetAriaAttributes({
+                                'aria-modal': true,
+                                'aria-hidden': !this.props.open,
+                                ...parseAndGetAriaAttributes(this.props.aria),
+                            }), children: jsx("div", { className: "scroller", children: jsxs("div", { className: "flyout", children: [jsx(PButtonPure, { className: "dismiss", type: "button", hideLabel: true, icon: "close", theme: this.props.theme, children: "Dismiss flyout" }), hasHeader && jsx("slot", { name: "header" }), jsx("slot", {}), hasFooter && jsx("slot", { name: "footer" }), hasSubFooter && jsx("slot", { name: "sub-footer" })] }) }) })] }), this.props.children] }));
     }
 }
 

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

@@ -79,17 +79,23 @@ class DSRModal extends Component {
     host;
     render() {
         const { children, namedSlotChildren, otherChildren } = splitChildren(this.props.children);
-        const hasHeader = (this.props.heading || namedSlotChildren.filter(({ props: { slot } }) => slot === 'heading').length > 0);
+        const hasHeader = (this.props.heading || namedSlotChildren.filter(({ props: { slot } }) => slot === 'heading').length > 0) || namedSlotChildren.filter(({ props: { slot } }) => slot === 'header').length > 0;
         const hasFooter = namedSlotChildren.filter(({ props: { slot } }) => slot === 'footer').length > 0;
         const hasDismissButton = this.props.disableCloseButton ? false : this.props.dismissButton;
+        // TODO: why do we validate only when opened?
         if (this.props.open) ;
         const style = minifyCss(stripFocusAndHoverStyles(getComponentCss$C(this.props.open, this.props.backdrop, this.props.fullscreen, hasDismissButton, hasHeader, hasFooter, this.props.theme)));
-        return (jsxs(Fragment, { children: [jsxs("template", { shadowroot: "open", shadowrootmode: "open", children: [jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsx(Fragment, { children: jsx("div", { className: "scroll-container", children: jsxs("div", { className: "root", role: "dialog", ...parseAndGetAriaAttributes({
-                                        'aria-modal': true,
-                                        'aria-label': this.props.heading,
-                                        'aria-hidden': !this.props.open,
-                                        ...parseAndGetAriaAttributes(this.props.aria),
-                                    }), tabIndex: -1, inert: this.props.open ? null : '', children: [hasDismissButton && (jsx("div", { className: "controls", children: jsx(PButtonPure, { className: "dismiss", type: "button", hideLabel: true, icon: "close", theme: this.props.theme, children: "Dismiss modal" }) })), hasHeader && (jsx("div", { className: "header", children: this.props.heading ? jsx("h2", { children: this.props.heading }) : jsx("slot", { name: "heading" }) }, "heading")), jsx("div", { className: "content", children: jsx("slot", {}) }), hasFooter && (jsx("div", { className: "footer", children: jsx("slot", { name: "footer" }) }, "footer"))] }) }) })] }), this.props.children] }));
+        return (jsxs(Fragment, { children: [jsxs("template", { shadowroot: "open", shadowrootmode: "open", children: [jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsx("dialog", { 
+                            // "inert" will be known from React 19 onwards, see https://github.com/facebook/react/pull/24730
+                            // eslint-disable-next-line
+                            /* @ts-ignore */
+                            inert: this.props.open ? null : '', tabIndex: -1, ...parseAndGetAriaAttributes({
+                                'aria-modal': true,
+                                'aria-label': this.props.heading,
+                                'aria-hidden': !this.props.open,
+                                ...parseAndGetAriaAttributes(this.props.aria),
+                            }), children: jsx("div", { className: "scroller", children: jsxs("div", { className: "modal", children: [hasDismissButton && (jsx(PButtonPure, { className: "dismiss", type: "button", hideLabel: true, icon: "close", theme: this.props.theme, children: "Dismiss modal" })), hasHeader &&
+                                            (this.props.heading ? (jsx("h2", { children: this.props.heading })) : namedSlotChildren.filter(({ props: { slot } }) => slot === 'heading').length > 0 ? (jsx("slot", { name: "heading" })) : (jsx("slot", { name: "header" }))), jsx("slot", {}), hasFooter && jsx("slot", { name: "footer" })] }) }) })] }), this.props.children] }));
     }
 }
 

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

@@ -102,7 +102,7 @@ class DSRMultiSelect extends Component {
         const dropdownId = 'list';
         const inputId = 'filter';
         const style = minifyCss(stripFocusAndHoverStyles(getComponentCss$z('down', this.props.isOpen, this.props.disabled, this.props.hideLabel, this.props.state, this.props.isWithinForm, this.props.isNativePopoverCase, this.props.theme)));
-        return (jsxs(Fragment, { children: [jsxs("template", { shadowroot: "open", shadowrootmode: "open", children: [jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxs("div", { className: "root", children: [jsx(Label, { hasLabel: this.props.label || namedSlotChildren.filter(({ props: { slot } }) => slot === 'label').length > 0, hasDescription: this.props.description || namedSlotChildren.filter(({ props: { slot } }) => slot === 'description').length > 0, host: null, label: this.props.label, description: this.props.description, htmlFor: inputId, isRequired: this.props.required, isDisabled: this.props.disabled }), this.props.currentValue && (jsxs("span", { id: optionsSelectedId, className: "sr-only", children: [getSelectedOptions(this.props.multiSelectOptions).length, " options selected"] })), jsxs("div", { className: `wrapper${this.props.disabled ? ' disabled' : ''}`, children: [jsx("input", { id: inputId, role: "combobox", autoComplete: "off", disabled: this.props.disabled, required: this.props.required, "aria-invalid": this.props.state === 'error' ? 'true' : null }), jsx(PIcon, { className: "icon", name: "arrow-head-down", theme: this.props.theme, "aria-hidden": "true" }), this.props.currentValue && (jsx(PButtonPure, { className: "button", icon: "close", hideLabel: "true", theme: this.props.theme, disabled: this.props.disabled, children: "Reset selection" })), jsx("div", { ...(this.props.isNativePopoverCase && {
+        return (jsxs(Fragment, { children: [jsxs("template", { shadowroot: "open", shadowrootmode: "open", children: [jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxs("div", { className: "root", children: [jsx(Label, { hasLabel: this.props.label || namedSlotChildren.filter(({ props: { slot } }) => slot === 'label').length > 0, hasDescription: this.props.description || namedSlotChildren.filter(({ props: { slot } }) => slot === 'description').length > 0, host: null, label: this.props.label, description: this.props.description, htmlFor: inputId, isRequired: this.props.required, isDisabled: this.props.disabled }), this.props.currentValue && (jsxs("span", { id: optionsSelectedId, className: "sr-only", children: [getSelectedOptions(this.props.multiSelectOptions).length, " options selected"] })), jsxs("div", { className: `wrapper${this.props.disabled ? ' disabled' : ''}`, children: [jsx("input", { id: inputId, role: "combobox", autoComplete: "off", disabled: this.props.disabled, required: this.props.required, "aria-invalid": this.props.state === 'error' ? 'true' : null }), jsx(PIcon, { className: "icon", name: "arrow-head-down", theme: this.props.theme, "aria-hidden": "true" }), this.props.currentValue && (jsx(PButtonPure, { className: "button", icon: "close", hideLabel: true, theme: this.props.theme, disabled: this.props.disabled, children: "Reset selection" })), jsx("div", { ...(this.props.isNativePopoverCase && {
                                                 popover: 'auto',
                                                 className: 'popover',
                                                 ...(this.props.popoverElement?.matches(':popover-open') && {

package/ssr/esm/lib/components/flyout.wrapper.d.ts

@@ -5,6 +5,10 @@ export type PFlyoutProps = Omit<HTMLAttributes<{}>, 'color'> & {
      * Add ARIA attributes.
      */
     aria?: SelectedAriaAttributes<FlyoutAriaAttribute>;
+    /**
+     * If true, the flyout will not be closable via backdrop click.
+     */
+    disableBackdropClick?: boolean;
     /**
      * Emitted when the component requests to be dismissed.
      */
@@ -27,6 +31,10 @@ export declare const PFlyout: import("react").ForwardRefExoticComponent<Omit<HTM
      * Add ARIA attributes.
      */
     aria?: SelectedAriaAttributes<FlyoutAriaAttribute>;
+    /**
+     * If true, the flyout will not be closable via backdrop click.
+     */
+    disableBackdropClick?: boolean;
     /**
      * Emitted when the component requests to be dismissed.
      */

package/ssr/esm/lib/components/modal.wrapper.d.ts

@@ -27,7 +27,7 @@ export type PModalProps = Omit<HTMLAttributes<{}>, 'color'> & {
      */
     fullscreen?: BreakpointCustomizable<boolean>;
     /**
-     * The title of the modal
+     * @deprecated since v3.0.0, will be removed with next major release, use `header` slot instead The title of the modal
      */
     heading?: string;
     /**
@@ -74,7 +74,7 @@ export declare const PModal: import("react").ForwardRefExoticComponent<Omit<HTML
      */
     fullscreen?: BreakpointCustomizable<boolean>;
     /**
-     * The title of the modal
+     * @deprecated since v3.0.0, will be removed with next major release, use `header` slot instead The title of the modal
      */
     heading?: string;
     /**

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

@@ -0,0 +1,8 @@
+import { Component } from 'react';
+export declare class DSRBanner extends Component<any> {
+    host: HTMLElement;
+    private inlineNotificationElement;
+    private closeBtn;
+    private get hasDismissButton();
+    render(): JSX.Element;
+}

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

@@ -2,11 +2,9 @@ import { Component } from 'react';
 export declare class DSRFlyout extends Component<any> {
     host: HTMLElement;
     private dialog;
-    private wrapper;
-    private dismissBtn;
+    private scroller;
     private header;
     private footer;
-    private subFooter;
     private hasHeader;
     private hasFooter;
     private hasSubFooter;

package/ssr/esm/lib/types.d.ts

@@ -451,7 +451,7 @@ export type BreakpointValues<T> = {
 } & {
     base: T;
 };
-export type BreakpointCustomizable<T> = T | BreakpointValues<T> | string;
+export type BreakpointCustomizable<T> = T | BreakpointValues<T>;
 declare const LINK_TARGETS: readonly [
     "_self",
     "_blank",
@@ -616,7 +616,7 @@ export type PorscheDesignSystem = {
         prefixes: string[];
     };
 };
-export type SelectedAriaAttributes<T extends keyof AriaAttributes> = Pick<AriaAttributes, T> | string;
+export type SelectedAriaAttributes<T extends keyof AriaAttributes> = Pick<AriaAttributes, T>;
 declare const ACCORDION_SIZES: readonly [
     "small",
     "medium"
@@ -692,7 +692,7 @@ declare const CAROUSEL_ARIA_ATTRIBUTES: readonly [
     "aria-label"
 ];
 export type CarouselAriaAttribute = (typeof CAROUSEL_ARIA_ATTRIBUTES)[number];
-export type CarouselInternationalization = Partial<Record<"prev" | "next" | "first" | "last" | "slideLabel" | "slide", string>> | string;
+export type CarouselInternationalization = Partial<Record<"prev" | "next" | "first" | "last" | "slideLabel" | "slide", string>>;
 /** @deprecated */
 export type CarouselUpdateEvent = {
     activeIndex: number;
@@ -1143,7 +1143,7 @@ export type PaginationUpdateEvent = {
     previousPage: number;
 };
 export type PaginationUpdateEventDetail = PaginationUpdateEvent;
-export type PaginationInternationalization = Partial<Record<"root" | "prev" | "next" | "page", string>> | string;
+export type PaginationInternationalization = Partial<Record<"root" | "prev" | "next" | "page", string>>;
 declare const PIN_CODE_TYPES: readonly [
     "number",
     "password"