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

package/CHANGELOG.md

@@ -14,6 +14,37 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0),
 
 ## [Unreleased]
 
+## [4.4.0-rc.1] - 2026-07-10
+
+### Fixed
+
+- `Flyout`, `Modal`, `Sheet` ([#4578](https://github.com/porsche-design-system/porsche-design-system/pull/4578)):
+  - enable selecting text within dialog element
+  - prevent dialog from being dismissed when a text selection started inside the dialog is released on the backdrop
+- `Popover`, `Banner`: prevent entry animation from playing when initially rendered in an open state
+  ([#4578](https://github.com/porsche-design-system/porsche-design-system/pull/4578))
+
+## [4.4.0-rc.0] - 2026-07-06
+
+### Added
+
+- `Popover` ([#4562](https://github.com/porsche-design-system/porsche-design-system/pull/4562)):
+  - Support for controlled and uncontrolled usage: when the `open` prop is omitted the component manages its own
+    visibility (uncontrolled), when it is set the consumer owns the open state via a custom trigger projected through
+    the named `button` slot (controlled)
+  - `open` prop to control the popover's visibility in controlled mode
+  - `compact` prop to reduce padding and spacing for a more compact layout, useful in space-constrained interfaces
+  - `dismiss` event emitted in controlled mode when the user requests to close the popover via the `Escape` key, an
+    outside click, or when keyboard focus leaves the popover (`Tab` / `Shift+Tab`)
+  - CSS variables to customize the popover panel: `--p-popover-w`, `--p-popover-h`, `--p-popover-min-w`,
+    `--p-popover-min-h`, `--p-popover-max-w`, `--p-popover-max-h`, `--p-popover-px`, `--p-popover-py` and
+    `--p-popover-radius`
+
+### Changed
+
+- `Popover`: Improved visual appearance
+  ([#4562](https://github.com/porsche-design-system/porsche-design-system/pull/4562))
+
 ## [4.3.0] - 2026-06-24
 
 ## [4.3.0-rc.0] - 2026-06-24

package/cjs/lib/components/popover.wrapper.cjs

@@ -6,13 +6,14 @@ var react = require('react');
 var hooks = require('../../hooks.cjs');
 var utils = require('../../utils.cjs');
 
-const PPopover = /*#__PURE__*/ react.forwardRef(({ aria, description, direction = 'bottom', className, ...rest }, ref) => {
+const PPopover = /*#__PURE__*/ react.forwardRef(({ aria, compact, description, direction = 'bottom', onDismiss, open, className, ...rest }, ref) => {
     const elementRef = react.useRef(undefined);
+    hooks.useEventCallback(elementRef, 'dismiss', onDismiss);
     const WebComponentTag = hooks.usePrefix('p-popover');
-    const propsToSync = [aria, description, direction];
+    const propsToSync = [aria, compact, description, direction, open];
     hooks.useBrowserLayoutEffect(() => {
         const { current } = elementRef;
-        ['aria', 'description', 'direction'].forEach((propName, i) => (current[propName] = propsToSync[i]));
+        ['aria', 'compact', 'description', 'direction', 'open'].forEach((propName, i) => (current[propName] = propsToSync[i]));
     }, propsToSync);
     const props = {
         ...rest,

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

@@ -6,7 +6,11 @@ export type PPopoverProps = BaseProps & {
      */
     aria?: SelectedAriaAttributes<PopoverAriaAttribute>;
     /**
-     * Sets the text content displayed inside the popover panel when it is open, providing contextual help or information.
+     * Reduces padding and spacing for a more compact layout, useful in space-constrained interfaces.
+     */
+    compact?: boolean;
+    /**
+     * Sets the text content displayed inside the popover panel when it is open, providing contextual help or information. Takes precedence over the default slot when both are provided.
      */
     description?: string;
     /**
@@ -14,6 +18,14 @@ export type PPopoverProps = BaseProps & {
      * @default 'bottom'
      */
     direction?: PopoverDirection;
+    /**
+     * Emitted in controlled mode when the user requests to close the popover via the Escape key, an outside click, or when keyboard focus leaves the popover (Tab / Shift+Tab).
+     */
+    onDismiss?: (event: CustomEvent<void>) => void;
+    /**
+     * Controls whether the popover is visible. When set (controlled mode), visibility follows this prop and the consumer owns the open state via a slotted `button`. When omitted (uncontrolled mode), the component manages visibility itself.
+     */
+    open?: boolean;
 };
 export declare const PPopover: import("react").ForwardRefExoticComponent<Omit<import("react").DOMAttributes<{}>, "onChange" | "onInput" | "onToggle"> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "inert" | "inputMode" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
     /**
@@ -21,7 +33,11 @@ export declare const PPopover: import("react").ForwardRefExoticComponent<Omit<im
      */
     aria?: SelectedAriaAttributes<PopoverAriaAttribute>;
     /**
-     * Sets the text content displayed inside the popover panel when it is open, providing contextual help or information.
+     * Reduces padding and spacing for a more compact layout, useful in space-constrained interfaces.
+     */
+    compact?: boolean;
+    /**
+     * Sets the text content displayed inside the popover panel when it is open, providing contextual help or information. Takes precedence over the default slot when both are provided.
      */
     description?: string;
     /**
@@ -29,6 +45,14 @@ export declare const PPopover: import("react").ForwardRefExoticComponent<Omit<im
      * @default 'bottom'
      */
     direction?: PopoverDirection;
+    /**
+     * Emitted in controlled mode when the user requests to close the popover via the Escape key, an outside click, or when keyboard focus leaves the popover (Tab / Shift+Tab).
+     */
+    onDismiss?: (event: CustomEvent<void>) => void;
+    /**
+     * Controls whether the popover is visible. When set (controlled mode), visibility follows this prop and the consumer owns the open state via a slotted `button`. When omitted (uncontrolled mode), the component manages visibility itself.
+     */
+    open?: boolean;
 } & {
     children?: import("react").ReactNode | undefined;
 } & import("react").RefAttributes<HTMLElement>>;

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

@@ -1,16 +1,17 @@
 "use client";
 import { jsx } from 'react/jsx-runtime';
 import { forwardRef, useRef } from 'react';
-import { usePrefix, useBrowserLayoutEffect, useMergedClass } from '../../hooks.mjs';
+import { useEventCallback, usePrefix, useBrowserLayoutEffect, useMergedClass } from '../../hooks.mjs';
 import { syncRef } from '../../utils.mjs';
 
-const PPopover = /*#__PURE__*/ forwardRef(({ aria, description, direction = 'bottom', className, ...rest }, ref) => {
+const PPopover = /*#__PURE__*/ forwardRef(({ aria, compact, description, direction = 'bottom', onDismiss, open, className, ...rest }, ref) => {
     const elementRef = useRef(undefined);
+    useEventCallback(elementRef, 'dismiss', onDismiss);
     const WebComponentTag = usePrefix('p-popover');
-    const propsToSync = [aria, description, direction];
+    const propsToSync = [aria, compact, description, direction, open];
     useBrowserLayoutEffect(() => {
         const { current } = elementRef;
-        ['aria', 'description', 'direction'].forEach((propName, i) => (current[propName] = propsToSync[i]));
+        ['aria', 'compact', 'description', 'direction', 'open'].forEach((propName, i) => (current[propName] = propsToSync[i]));
     }, propsToSync);
     const props = {
         ...rest,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@porsche-design-system/components-react",
-  "version": "4.3.0",
+  "version": "4.4.0-rc.1",
   "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",
@@ -21,7 +21,7 @@
     "url": "https://github.com/porsche-design-system/porsche-design-system"
   },
   "dependencies": {
-    "@porsche-design-system/components-js": "4.3.0"
+    "@porsche-design-system/components-js": "4.4.0-rc.1"
   },
   "peerDependencies": {
     "ag-grid-community": ">= 35.0.0 <36.0.0",