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

package/CHANGELOG.md

@@ -14,6 +14,40 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0),
 
 ### [Unreleased]
 
+### [3.16.0-rc.0] - 2024-06-05
+
+#### Added
+
+- `Flyout`:
+  - CSS variable `--p-flyout-sticky-top` (experimental)
+    ([#3191](https://github.com/porsche-design-system/porsche-design-system/pull/3191))
+  - Prop `disableBackdropClick` ([#3191](https://github.com/porsche-design-system/porsche-design-system/pull/3191))
+- `Modal`:
+  - CSS variable `--p-modal-width` (experimental)
+    ([#3191](https://github.com/porsche-design-system/porsche-design-system/pull/3191))
+  - Named slot `header` ([#3191](https://github.com/porsche-design-system/porsche-design-system/pull/3191))
+
+#### Changed
+
+- `Modal`, `Flyout`:
+  - Sticky dismiss button ([#3191](https://github.com/porsche-design-system/porsche-design-system/pull/3191))
+  - Aligned layout, spacing and UX behaviour
+    ([#3191](https://github.com/porsche-design-system/porsche-design-system/pull/3191))
+  - Renders fully on `#top-layer`, stacking behaviour has changed and follows W3C standards now, see
+    https://developer.mozilla.org/en-US/docs/Glossary/Top_layer and
+    https://developer.chrome.com/blog/what-is-the-top-layer
+    ([#3191](https://github.com/porsche-design-system/porsche-design-system/pull/3191))
+- `Modal`: `heading` prop and `slot="heading"` are deprecated. Use `slot="header"` instead.
+
+#### Fixed
+
+- Types: Fixed incorrectly allowed type `string` in types `BreakpointCustomizable`, `SelectedAriaAttributes`,
+  `CarouselInternationalization`, `PaginationInternationalization` and `ScrollToPosition`
+- `Modal`, `Flyout`: Dynamically react to adding/removing named slots
+  ([#3191](https://github.com/porsche-design-system/porsche-design-system/pull/3191))
+- `Modal`: Uses native `<dialog />` element to resolve focus issues, focus trap
+  ([#3191](https://github.com/porsche-design-system/porsche-design-system/pull/3191))
+
 ### [3.15.2] - 2024-05-29
 
 #### Fixed

package/cjs/lib/components/flyout.wrapper.cjs

@@ -6,14 +6,14 @@ var react = require('react');
 var hooks = require('../../hooks.cjs');
 var utils = require('../../utils.cjs');
 
-const PFlyout = react.forwardRef(({ aria, onDismiss, open = false, position = 'end', theme, className, ...rest }, ref) => {
+const PFlyout = react.forwardRef(({ aria, disableBackdropClick = false, onDismiss, open = false, position = 'end', theme, className, ...rest }, ref) => {
     const elementRef = react.useRef();
     hooks.useEventCallback(elementRef, 'dismiss', onDismiss);
     const WebComponentTag = hooks.usePrefix('p-flyout');
-    const propsToSync = [aria, open, position, theme || hooks.useTheme()];
+    const propsToSync = [aria, disableBackdropClick, open, position, theme || hooks.useTheme()];
     hooks.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);
     const props = {
         ...rest,

package/esm/lib/components/carousel.wrapper.d.ts

@@ -103,7 +103,7 @@ export declare const PCarousel: import("react").ForwardRefExoticComponent<Omit<H
     /**
      * Override the default wordings that are used for aria-labels on the next/prev buttons and pagination.
      */
-    intl?: CarouselInternationalization | undefined;
+    intl?: Partial<Record<"prev" | "next" | "first" | "last" | "slideLabel" | "slide", string>> | undefined;
     /**
      * @deprecated since v3.0.0, will be removed with next major release, use `update` event instead. Emitted when carousel's content slides.
      */
@@ -127,7 +127,7 @@ export declare const PCarousel: import("react").ForwardRefExoticComponent<Omit<H
     /**
      * Sets the amount of slides visible at the same time. Can be set to `auto` if you want to define different widths per slide via CSS.
      */
-    slidesPerPage?: BreakpointCustomizable<number> | undefined;
+    slidesPerPage?: "auto" | BreakpointCustomizable<number> | undefined;
     /**
      * Adapts the color when used on dark background.
      */

package/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<"aria-label"> | undefined;
+    /**
+     * If true, the flyout will not be closable via backdrop click.
+     */
+    disableBackdropClick?: boolean | undefined;
     /**
      * Emitted when the component requests to be dismissed.
      */

package/esm/lib/components/flyout.wrapper.mjs

@@ -4,14 +4,14 @@ import { forwardRef, useRef } from 'react';
 import { useEventCallback, usePrefix, useTheme, useBrowserLayoutEffect, useMergedClass } from '../../hooks.mjs';
 import { syncRef } from '../../utils.mjs';
 
-const PFlyout = forwardRef(({ aria, onDismiss, open = false, position = 'end', theme, className, ...rest }, ref) => {
+const PFlyout = forwardRef(({ aria, disableBackdropClick = false, onDismiss, open = false, position = 'end', theme, className, ...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);
     const props = {
         ...rest,

package/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> | undefined;
     /**
-     * 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 | undefined;
     /**

package/esm/lib/components/pagination.wrapper.d.ts

@@ -79,7 +79,7 @@ export declare const PPagination: import("react").ForwardRefExoticComponent<Omit
     /**
      * Override the default wordings that are used for aria-labels on the next/prev and page buttons.
      */
-    intl?: PaginationInternationalization | undefined;
+    intl?: Partial<Record<"page" | "prev" | "next" | "root", string>> | undefined;
     /**
      * The total count of items which should be shown per page.
      */

package/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"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@porsche-design-system/components-react",
-  "version": "3.15.2",
+  "version": "3.16.0-rc.0",
   "description": "Porsche Design System is a component library designed to help developers create the best experience for software or services distributed by Dr. Ing. h.c. F. Porsche AG.",
   "keywords": [
     "porsche",
@@ -17,7 +17,7 @@
   "license": "SEE LICENSE IN LICENSE",
   "homepage": "https://designsystem.porsche.com",
   "dependencies": {
-    "@porsche-design-system/components-js": "3.15.2"
+    "@porsche-design-system/components-js": "3.16.0-rc.0"
   },
   "peerDependencies": {
     "react": ">=18.0.0 <19.0.0",