@porsche-design-system/components-react 3.27.0-rc.5 → 3.27.0-rc.6

package/CHANGELOG.md

@@ -14,6 +14,38 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0),
 
 ### [Unreleased]
 
+### [3.27.0-rc.6] - 2025-02-28
+
+#### Changed
+
+- `Carousel`: Center layout of Carousel on mobile view
+  ([#3765](https://github.com/porsche-design-system/porsche-design-system/pull/3765))
+- `Carousel`: `auto` value of `slides-per-page` prop is breakpoint customizable
+  ([#3767](https://github.com/porsche-design-system/porsche-design-system/pull/3767))
+
+#### Added
+
+- `Table`: `compact` prop to enable a smaller, space-saving version for compact layouts
+  ([#3758](https://github.com/porsche-design-system/porsche-design-system/pull/3758))
+- `Table`: `layout` prop to render table with `table-layout: fixed` css for manual control of column widths
+  ([#3758](https://github.com/porsche-design-system/porsche-design-system/pull/3758))
+- `Carousel`: `align-controls` prop to align the controls slot to the left or center (overwrites auto-alignment)
+  ([#3766](https://github.com/porsche-design-system/porsche-design-system/pull/3766))
+
+#### Changed
+
+- `Select`, `Multi Select`, `Select Wrapper`:
+  - gets rendered on `#top-layer` which enables it to be shown correctly even when used e.g. within a scroll container
+    or overflow context ([#3754](https://github.com/porsche-design-system/porsche-design-system/pull/3754))
+  - gets positioned by [CSS Anchor Positioning](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_anchor_positioning)
+    or [Floating UI](https://floating-ui.com) as fallback for browsers not supporting it yet
+    ([#3754](https://github.com/porsche-design-system/porsche-design-system/pull/3754))
+  - modernized visual appearance, dynamic max-height based on viewport and fade in animation of option list
+    ([#3754](https://github.com/porsche-design-system/porsche-design-system/pull/3754))
+- `Select`, `Select Wrapper`:
+  - focus outline becomes default focus style when no filter is used
+    ([#3754](https://github.com/porsche-design-system/porsche-design-system/pull/3754))
+
 ### [3.27.0-rc.5] - 2025-02-20
 
 #### Fixed

package/cjs/lib/components/carousel.wrapper.cjs

@@ -6,15 +6,15 @@ var react = require('react');
 var hooks = require('../../hooks.cjs');
 var utils = require('../../utils.cjs');
 
-const PCarousel = /*#__PURE__*/ react.forwardRef(({ activeSlideIndex = 0, alignHeader = 'start', aria, description, disablePagination, focusOnCenterSlide = false, gradientColor = 'none', heading, headingSize = 'x-large', intl, onCarouselChange, onUpdate, pagination = true, rewind = true, skipLinkTarget, slidesPerPage = 1, theme, trimSpace = true, width = 'basic', wrapContent, className, ...rest }, ref) => {
+const PCarousel = /*#__PURE__*/ react.forwardRef(({ activeSlideIndex = 0, alignControls = 'auto', alignHeader = 'start', aria, description, disablePagination, focusOnCenterSlide = false, gradientColor = 'none', heading, headingSize = 'x-large', intl, onCarouselChange, onUpdate, pagination = true, rewind = true, skipLinkTarget, slidesPerPage = 1, theme, trimSpace = true, width = 'basic', wrapContent, className, ...rest }, ref) => {
     const elementRef = react.useRef(undefined);
     hooks.useEventCallback(elementRef, 'carouselChange', onCarouselChange);
     hooks.useEventCallback(elementRef, 'update', onUpdate);
     const WebComponentTag = hooks.usePrefix('p-carousel');
-    const propsToSync = [activeSlideIndex, alignHeader, aria, description, disablePagination, focusOnCenterSlide, gradientColor, heading, headingSize, intl, pagination, rewind, skipLinkTarget, slidesPerPage, theme || hooks.useTheme(), trimSpace, width, wrapContent];
+    const propsToSync = [activeSlideIndex, alignControls, alignHeader, aria, description, disablePagination, focusOnCenterSlide, gradientColor, heading, headingSize, intl, pagination, rewind, skipLinkTarget, slidesPerPage, theme || hooks.useTheme(), trimSpace, width, wrapContent];
     hooks.useBrowserLayoutEffect(() => {
         const { current } = elementRef;
-        ['activeSlideIndex', 'alignHeader', 'aria', 'description', 'disablePagination', 'focusOnCenterSlide', 'gradientColor', 'heading', 'headingSize', 'intl', 'pagination', 'rewind', 'skipLinkTarget', 'slidesPerPage', 'theme', 'trimSpace', 'width', 'wrapContent'].forEach((propName, i) => (current[propName] = propsToSync[i]));
+        ['activeSlideIndex', 'alignControls', 'alignHeader', 'aria', 'description', 'disablePagination', 'focusOnCenterSlide', 'gradientColor', 'heading', 'headingSize', 'intl', 'pagination', 'rewind', 'skipLinkTarget', 'slidesPerPage', 'theme', 'trimSpace', 'width', 'wrapContent'].forEach((propName, i) => (current[propName] = propsToSync[i]));
     }, propsToSync);
     const props = {
         ...rest,

package/cjs/lib/components/table.wrapper.cjs

@@ -6,15 +6,15 @@ var react = require('react');
 var hooks = require('../../hooks.cjs');
 var utils = require('../../utils.cjs');
 
-const PTable = /*#__PURE__*/ react.forwardRef(({ caption, onSortingChange, onUpdate, theme, className, ...rest }, ref) => {
+const PTable = /*#__PURE__*/ react.forwardRef(({ caption, compact = false, layout = 'auto', onSortingChange, onUpdate, theme, className, ...rest }, ref) => {
     const elementRef = react.useRef(undefined);
     hooks.useEventCallback(elementRef, 'sortingChange', onSortingChange);
     hooks.useEventCallback(elementRef, 'update', onUpdate);
     const WebComponentTag = hooks.usePrefix('p-table');
-    const propsToSync = [caption, theme || hooks.useTheme()];
+    const propsToSync = [caption, compact, layout, theme || hooks.useTheme()];
     hooks.useBrowserLayoutEffect(() => {
         const { current } = elementRef;
-        ['caption', 'theme'].forEach((propName, i) => (current[propName] = propsToSync[i]));
+        ['caption', 'compact', 'layout', 'theme'].forEach((propName, i) => (current[propName] = propsToSync[i]));
     }, propsToSync);
     const props = {
         ...rest,

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

@@ -1,10 +1,14 @@
 import type { BaseProps } from '../../BaseProps';
-import type { CarouselAlignHeader, SelectedAriaAttributes, CarouselAriaAttribute, BreakpointCustomizable, CarouselGradientColor, CarouselHeadingSize, CarouselInternationalization, CarouselUpdateEventDetail, Theme, CarouselWidth } from '../types';
+import type { CarouselAlignControls, CarouselAlignHeader, SelectedAriaAttributes, CarouselAriaAttribute, BreakpointCustomizable, CarouselGradientColor, CarouselHeadingSize, CarouselInternationalization, CarouselUpdateEventDetail, CarouselSlidesPerPage, Theme, CarouselWidth } from '../types';
 export type PCarouselProps = BaseProps & {
     /**
      * Defines which slide to be active (zero-based numbering).
      */
     activeSlideIndex?: number;
+    /**
+     * Alignment of slotted controls
+     */
+    alignControls?: CarouselAlignControls;
     /**
      * Alignment of heading and description
      */
@@ -64,7 +68,7 @@ export type PCarouselProps = BaseProps & {
     /**
      * 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> | "auto";
+    slidesPerPage?: BreakpointCustomizable<CarouselSlidesPerPage>;
     /**
      * Adapts the color when used on dark background.
      */
@@ -88,6 +92,10 @@ export declare const PCarousel: import("react").ForwardRefExoticComponent<import
      * Defines which slide to be active (zero-based numbering).
      */
     activeSlideIndex?: number;
+    /**
+     * Alignment of slotted controls
+     */
+    alignControls?: CarouselAlignControls;
     /**
      * Alignment of heading and description
      */
@@ -147,7 +155,7 @@ export declare const PCarousel: import("react").ForwardRefExoticComponent<import
     /**
      * 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> | "auto";
+    slidesPerPage?: BreakpointCustomizable<CarouselSlidesPerPage>;
     /**
      * Adapts the color when used on dark background.
      */

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

@@ -4,15 +4,15 @@ import { forwardRef, useRef } from 'react';
 import { useEventCallback, usePrefix, useTheme, useBrowserLayoutEffect, useMergedClass } from '../../hooks.mjs';
 import { syncRef } from '../../utils.mjs';
 
-const PCarousel = /*#__PURE__*/ forwardRef(({ activeSlideIndex = 0, alignHeader = 'start', aria, description, disablePagination, focusOnCenterSlide = false, gradientColor = 'none', heading, headingSize = 'x-large', intl, onCarouselChange, onUpdate, pagination = true, rewind = true, skipLinkTarget, slidesPerPage = 1, theme, trimSpace = true, width = 'basic', wrapContent, className, ...rest }, ref) => {
+const PCarousel = /*#__PURE__*/ forwardRef(({ activeSlideIndex = 0, alignControls = 'auto', alignHeader = 'start', aria, description, disablePagination, focusOnCenterSlide = false, gradientColor = 'none', heading, headingSize = 'x-large', intl, onCarouselChange, onUpdate, pagination = true, rewind = true, skipLinkTarget, slidesPerPage = 1, theme, trimSpace = true, width = 'basic', wrapContent, className, ...rest }, ref) => {
     const elementRef = useRef(undefined);
     useEventCallback(elementRef, 'carouselChange', onCarouselChange);
     useEventCallback(elementRef, 'update', onUpdate);
     const WebComponentTag = usePrefix('p-carousel');
-    const propsToSync = [activeSlideIndex, alignHeader, aria, description, disablePagination, focusOnCenterSlide, gradientColor, heading, headingSize, intl, pagination, rewind, skipLinkTarget, slidesPerPage, theme || useTheme(), trimSpace, width, wrapContent];
+    const propsToSync = [activeSlideIndex, alignControls, alignHeader, aria, description, disablePagination, focusOnCenterSlide, gradientColor, heading, headingSize, intl, pagination, rewind, skipLinkTarget, slidesPerPage, theme || useTheme(), trimSpace, width, wrapContent];
     useBrowserLayoutEffect(() => {
         const { current } = elementRef;
-        ['activeSlideIndex', 'alignHeader', 'aria', 'description', 'disablePagination', 'focusOnCenterSlide', 'gradientColor', 'heading', 'headingSize', 'intl', 'pagination', 'rewind', 'skipLinkTarget', 'slidesPerPage', 'theme', 'trimSpace', 'width', 'wrapContent'].forEach((propName, i) => (current[propName] = propsToSync[i]));
+        ['activeSlideIndex', 'alignControls', 'alignHeader', 'aria', 'description', 'disablePagination', 'focusOnCenterSlide', 'gradientColor', 'heading', 'headingSize', 'intl', 'pagination', 'rewind', 'skipLinkTarget', 'slidesPerPage', 'theme', 'trimSpace', 'width', 'wrapContent'].forEach((propName, i) => (current[propName] = propsToSync[i]));
     }, propsToSync);
     const props = {
         ...rest,

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

@@ -1,10 +1,18 @@
 import type { BaseProps } from '../../BaseProps';
-import type { TableUpdateEventDetail, Theme } from '../types';
+import type { TableLayout, TableUpdateEventDetail, Theme } from '../types';
 export type PTableProps = BaseProps & {
     /**
      * A caption describing the contents of the table for accessibility only. This won't be visible in the browser. Use an element with an attribute of `slot="caption"` for a visible caption.
      */
     caption?: string;
+    /**
+     * Displays as compact version.
+     */
+    compact?: boolean;
+    /**
+     * Controls the layout behavior of the table.
+     */
+    layout?: TableLayout;
     /**
      * @deprecated since v3.0.0, will be removed with next major release, use `update` event instead. Emitted when sorting is changed.
      */
@@ -23,6 +31,14 @@ export declare const PTable: import("react").ForwardRefExoticComponent<import("r
      * A caption describing the contents of the table for accessibility only. This won't be visible in the browser. Use an element with an attribute of `slot="caption"` for a visible caption.
      */
     caption?: string;
+    /**
+     * Displays as compact version.
+     */
+    compact?: boolean;
+    /**
+     * Controls the layout behavior of the table.
+     */
+    layout?: TableLayout;
     /**
      * @deprecated since v3.0.0, will be removed with next major release, use `update` event instead. Emitted when sorting is changed.
      */

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

@@ -4,15 +4,15 @@ import { forwardRef, useRef } from 'react';
 import { useEventCallback, usePrefix, useTheme, useBrowserLayoutEffect, useMergedClass } from '../../hooks.mjs';
 import { syncRef } from '../../utils.mjs';
 
-const PTable = /*#__PURE__*/ forwardRef(({ caption, onSortingChange, onUpdate, theme, className, ...rest }, ref) => {
+const PTable = /*#__PURE__*/ forwardRef(({ caption, compact = false, layout = 'auto', onSortingChange, onUpdate, theme, className, ...rest }, ref) => {
     const elementRef = useRef(undefined);
     useEventCallback(elementRef, 'sortingChange', onSortingChange);
     useEventCallback(elementRef, 'update', onUpdate);
     const WebComponentTag = usePrefix('p-table');
-    const propsToSync = [caption, theme || useTheme()];
+    const propsToSync = [caption, compact, layout, theme || useTheme()];
     useBrowserLayoutEffect(() => {
         const { current } = elementRef;
-        ['caption', 'theme'].forEach((propName, i) => (current[propName] = propsToSync[i]));
+        ['caption', 'compact', 'layout', 'theme'].forEach((propName, i) => (current[propName] = propsToSync[i]));
     }, propsToSync);
     const props = {
         ...rest,

package/esm/lib/types.d.ts

@@ -767,6 +767,8 @@ declare const CAROUSEL_WIDTHS: readonly [
     "extended"
 ];
 export type CarouselWidth = (typeof CAROUSEL_WIDTHS)[number];
+declare const CAROUSEL_SLIDES_PER_PAGE: (string | number)[];
+export type CarouselSlidesPerPage = (typeof CAROUSEL_SLIDES_PER_PAGE)[number];
 declare const CAROUSEL_GRADIENT_COLORS: readonly [
     "background-base",
     "background-surface",
@@ -791,6 +793,12 @@ export type CarouselUpdateEvent = {
     previousIndex: number;
 };
 export type CarouselUpdateEventDetail = CarouselUpdateEvent;
+declare const CAROUSEL_ALIGN_CONTROLS: readonly [
+    "start",
+    "center",
+    "auto"
+];
+export type CarouselAlignControls = (typeof CAROUSEL_ALIGN_CONTROLS)[number];
 export type CheckboxState = FormState;
 export type CheckboxUpdateEventDetail = {
     name: string;
@@ -1357,6 +1365,11 @@ export type SwitchUpdateEvent = {
 };
 export type SwitchUpdateEventDetail = SwitchUpdateEvent;
 export type Direction = "asc" | "desc";
+declare const TABLE_LAYOUTS: readonly [
+    "auto",
+    "fixed"
+];
+export type TableLayout = (typeof TABLE_LAYOUTS)[number];
 export type TableHeadCellSort = {
     id: string;
     active?: boolean;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@porsche-design-system/components-react",
-  "version": "3.27.0-rc.5",
+  "version": "3.27.0-rc.6",
   "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.27.0-rc.5"
+    "@porsche-design-system/components-js": "3.27.0-rc.6"
   },
   "peerDependencies": {
     "ag-grid-community": ">= 33.0.0 <34.0.0",