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

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

@@ -3,7 +3,7 @@ import { splitChildren } from '../../splitChildren.mjs';
 import { Component } from 'react';
 import { minifyCss } from '../../minifyCss.mjs';
 import { getSheetCss as getComponentCss$n } from '../../../../../../components/dist/styles/esm/styles-entry.mjs';
-import { parseAndGetAriaAttributes } from '../../../../../../components/dist/utils/esm/utils-entry.mjs';
+import { createTopLayerController, parseAndGetAriaAttributes, showDialog } from '../../../../../../components/dist/utils/esm/utils-entry.mjs';
 import { DialogBase } from './dialog-base.mjs';
 
 /**
@@ -17,6 +17,12 @@ class DSRSheet extends Component {
     dialog;
     scroller;
     hasHeader;
+    topLayer = createTopLayerController({
+        getElement: () => this.props.dialog,
+        isShown: () => !!this.props.dialog?.open,
+        show: () => showDialog(this.props.dialog, this.props.scroller),
+        hide: () => this.props.dialog?.close(),
+    });
     render() {
         const { children, namedSlotChildren, otherChildren } = splitChildren(this.props.children);
         const hasHeader = namedSlotChildren.filter(({ props: { slot } }) => slot === 'header').length > 0;

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

@@ -1,5 +1,5 @@
 import type { BaseProps } from '../../BaseProps';
-import type { SelectedAriaAttributes, FlyoutAriaAttribute, FlyoutBackdrop, FlyoutBackground, FlyoutFooterBehavior, FlyoutMotionHiddenEndEventDetail, FlyoutMotionVisibleEndEventDetail, FlyoutPosition } from '../types';
+import type { SelectedAriaAttributes, FlyoutAriaAttribute, FlyoutBackdrop, FlyoutBackground, FlyoutFooterBehavior, BreakpointCustomizable, FlyoutMotionHiddenEndEventDetail, FlyoutMotionVisibleEndEventDetail, FlyoutPosition } from '../types';
 export type PFlyoutProps = BaseProps & {
     /**
      * Sets ARIA attributes.
@@ -25,6 +25,11 @@ export type PFlyoutProps = BaseProps & {
      * @default 'sticky'
      */
     footerBehavior?: FlyoutFooterBehavior;
+    /**
+     * If true the flyout stretches to the full viewport width with squared corners. Useful for smaller viewports where the flyout would otherwise fill the screen but still show rounded corners.
+     * @default false
+     */
+    fullscreen?: BreakpointCustomizable<boolean>;
     /**
      * Emitted when the component requests to be dismissed.
      */
@@ -73,6 +78,11 @@ export declare const PFlyout: import("react").ForwardRefExoticComponent<Omit<imp
      * @default 'sticky'
      */
     footerBehavior?: FlyoutFooterBehavior;
+    /**
+     * If true the flyout stretches to the full viewport width with squared corners. Useful for smaller viewports where the flyout would otherwise fill the screen but still show rounded corners.
+     * @default false
+     */
+    fullscreen?: BreakpointCustomizable<boolean>;
     /**
      * Emitted when the component requests to be dismissed.
      */

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

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

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

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

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

@@ -14,8 +14,8 @@ type LabelProps = {
     isLoading?: boolean;
     isDisabled?: boolean;
     /**
-     * If true, clicking the label will not bubble to the host element,
-     * preventing duplicate handling on host click listeners.
+     * If true, clicks on the label use `htmlFor` only and do not bubble to the host.
+     * Clicks on the `label-after` slot are also stopped so they do not trigger host handlers (e.g. radio selection).
      */
     stopClickPropagation?: boolean;
 };

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

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

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

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