@porsche-design-system/components-react 3.18.0 → 3.19.0-rc.1

package/CHANGELOG.md

@@ -14,6 +14,31 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0),
 
 ### [Unreleased]
 
+### [3.19.0-rc.1] - 2024-09-06
+
+#### Changed
+
+- `Canvas`: Improve UX ([#3494](https://github.com/porsche-design-system/porsche-design-system/pull/3494))
+
+### [3.19.0-rc.0] - 2024-09-03
+
+#### Added
+
+- `componentsReady()`: Introduce optional `readyState` parameter
+  ([#3460](https://github.com/porsche-design-system/porsche-design-system/pull/3460))
+- `Carousel`: introduce `focusOnCenterSlide` & `gradientColor` props
+  ([#3488](https://github.com/porsche-design-system/porsche-design-system/pull/3488))
+
+#### Changed
+
+- `Text Field Wrapper`: width calculation of counter and unit element are now CSS based in relation to the number of
+  characters ([#3472](https://github.com/porsche-design-system/porsche-design-system/pull/3472))
+
+#### Fixed
+
+- `jsdom-polyfill`: errors from included polyfill packages
+  ([3481](https://github.com/porsche-design-system/porsche-design-system/pull/3481))
+
 ### [3.18.0] - 2024-08-21
 
 ### [3.18.0-rc.0] - 2024-08-21

package/cjs/lib/components/canvas.wrapper.cjs

@@ -6,15 +6,13 @@ var react = require('react');
 var hooks = require('../../hooks.cjs');
 var utils = require('../../utils.cjs');
 
-const PCanvas = react.forwardRef(({ onDismissSidebarEnd, onDismissSidebarStart, sidebarEndOpen = false, sidebarEndWidth = 'medium', sidebarStartOpen = false, sidebarStartWidth = 'medium', className, ...rest }, ref) => {
+const PCanvas = react.forwardRef(({ sidebarEndIcon = 'configurate', sidebarEndOpen = false, sidebarStartIcon = 'menu-lines', sidebarStartOpen = false, theme, className, ...rest }, ref) => {
     const elementRef = react.useRef();
-    hooks.useEventCallback(elementRef, 'dismissSidebarEnd', onDismissSidebarEnd);
-    hooks.useEventCallback(elementRef, 'dismissSidebarStart', onDismissSidebarStart);
     const WebComponentTag = hooks.usePrefix('p-canvas');
-    const propsToSync = [sidebarEndOpen, sidebarEndWidth, sidebarStartOpen, sidebarStartWidth];
+    const propsToSync = [sidebarEndIcon, sidebarEndOpen, sidebarStartIcon, sidebarStartOpen, theme || hooks.useTheme()];
     hooks.useBrowserLayoutEffect(() => {
         const { current } = elementRef;
-        ['sidebarEndOpen', 'sidebarEndWidth', 'sidebarStartOpen', 'sidebarStartWidth'].forEach((propName, i) => (current[propName] = propsToSync[i]));
+        ['sidebarEndIcon', 'sidebarEndOpen', 'sidebarStartIcon', 'sidebarStartOpen', 'theme'].forEach((propName, i) => (current[propName] = propsToSync[i]));
     }, propsToSync);
     const props = {
         ...rest,

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 = react.forwardRef(({ activeSlideIndex = 0, alignHeader = 'start', aria, description, disablePagination, heading, headingSize = 'x-large', intl, onCarouselChange, onUpdate, pagination = true, rewind = true, skipLinkTarget, slidesPerPage = 1, theme, width = 'basic', wrapContent, className, ...rest }, ref) => {
+const PCarousel = 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, width = 'basic', wrapContent, className, ...rest }, ref) => {
     const elementRef = react.useRef();
     hooks.useEventCallback(elementRef, 'carouselChange', onCarouselChange);
     hooks.useEventCallback(elementRef, 'update', onUpdate);
     const WebComponentTag = hooks.usePrefix('p-carousel');
-    const propsToSync = [activeSlideIndex, alignHeader, aria, description, disablePagination, heading, headingSize, intl, pagination, rewind, skipLinkTarget, slidesPerPage, theme || hooks.useTheme(), width, wrapContent];
+    const propsToSync = [activeSlideIndex, alignHeader, aria, description, disablePagination, focusOnCenterSlide, gradientColor, heading, headingSize, intl, pagination, rewind, skipLinkTarget, slidesPerPage, theme || hooks.useTheme(), width, wrapContent];
     hooks.useBrowserLayoutEffect(() => {
         const { current } = elementRef;
-        ['activeSlideIndex', 'alignHeader', 'aria', 'description', 'disablePagination', 'heading', 'headingSize', 'intl', 'pagination', 'rewind', 'skipLinkTarget', 'slidesPerPage', 'theme', 'width', 'wrapContent'].forEach((propName, i) => (current[propName] = propsToSync[i]));
+        ['activeSlideIndex', 'alignHeader', 'aria', 'description', 'disablePagination', 'focusOnCenterSlide', 'gradientColor', 'heading', 'headingSize', 'intl', 'pagination', 'rewind', 'skipLinkTarget', 'slidesPerPage', 'theme', 'width', 'wrapContent'].forEach((propName, i) => (current[propName] = propsToSync[i]));
     }, propsToSync);
     const props = {
         ...rest,

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

@@ -1,56 +1,48 @@
 import type { BaseProps } from '../../BaseProps';
-import type { CanvasSidebarEndWidth, CanvasSidebarStartWidth } from '../types';
+import type { CanvasSidebarEndIcon, CanvasSidebarStartIcon, Theme } from '../types';
 export type PCanvasProps = BaseProps & {
     /**
-     * Emitted when the component requests to close the sidebar on the end side.
+     * The icon to toggle the Sidebar on the end side
      */
-    onDismissSidebarEnd?: (event: CustomEvent<void>) => void;
-    /**
-     * Emitted when the component requests to close the sidebar on the start side.
-     */
-    onDismissSidebarStart?: (event: CustomEvent<void>) => void;
+    sidebarEndIcon?: CanvasSidebarEndIcon;
     /**
      * Open Sidebar on the end side
      */
     sidebarEndOpen?: boolean;
     /**
-     * Defines the width of the sidebar on the end side
+     * The icon to toggle the Sidebar on the start side
      */
-    sidebarEndWidth?: CanvasSidebarEndWidth;
+    sidebarStartIcon?: CanvasSidebarStartIcon;
     /**
      * Open Sidebar on the start side
      */
     sidebarStartOpen?: boolean;
     /**
-     * Defines the width of the sidebar on the start side
+     * Adapts the color depending on the theme. Has no effect when "inherit" is set as color prop.
      */
-    sidebarStartWidth?: CanvasSidebarStartWidth;
+    theme?: Theme;
 };
 export declare const PCanvas: import("react").ForwardRefExoticComponent<import("react").DOMAttributes<{}> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
     /**
-     * Emitted when the component requests to close the sidebar on the end side.
-     */
-    onDismissSidebarEnd?: (event: CustomEvent<void>) => void;
-    /**
-     * Emitted when the component requests to close the sidebar on the start side.
+     * The icon to toggle the Sidebar on the end side
      */
-    onDismissSidebarStart?: (event: CustomEvent<void>) => void;
+    sidebarEndIcon?: CanvasSidebarEndIcon;
     /**
      * Open Sidebar on the end side
      */
     sidebarEndOpen?: boolean;
     /**
-     * Defines the width of the sidebar on the end side
+     * The icon to toggle the Sidebar on the start side
      */
-    sidebarEndWidth?: CanvasSidebarEndWidth;
+    sidebarStartIcon?: CanvasSidebarStartIcon;
     /**
      * Open Sidebar on the start side
      */
     sidebarStartOpen?: boolean;
     /**
-     * Defines the width of the sidebar on the start side
+     * Adapts the color depending on the theme. Has no effect when "inherit" is set as color prop.
      */
-    sidebarStartWidth?: CanvasSidebarStartWidth;
+    theme?: Theme;
 } & {
     children?: import("react").ReactNode | undefined;
 } & import("react").RefAttributes<HTMLElement>>;

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

@@ -1,18 +1,16 @@
 "use client";
 import { jsx } from 'react/jsx-runtime';
 import { forwardRef, useRef } from 'react';
-import { useEventCallback, usePrefix, useBrowserLayoutEffect, useMergedClass } from '../../hooks.mjs';
+import { usePrefix, useTheme, useBrowserLayoutEffect, useMergedClass } from '../../hooks.mjs';
 import { syncRef } from '../../utils.mjs';
 
-const PCanvas = forwardRef(({ onDismissSidebarEnd, onDismissSidebarStart, sidebarEndOpen = false, sidebarEndWidth = 'medium', sidebarStartOpen = false, sidebarStartWidth = 'medium', className, ...rest }, ref) => {
+const PCanvas = forwardRef(({ sidebarEndIcon = 'configurate', sidebarEndOpen = false, sidebarStartIcon = 'menu-lines', sidebarStartOpen = false, theme, className, ...rest }, ref) => {
     const elementRef = useRef();
-    useEventCallback(elementRef, 'dismissSidebarEnd', onDismissSidebarEnd);
-    useEventCallback(elementRef, 'dismissSidebarStart', onDismissSidebarStart);
     const WebComponentTag = usePrefix('p-canvas');
-    const propsToSync = [sidebarEndOpen, sidebarEndWidth, sidebarStartOpen, sidebarStartWidth];
+    const propsToSync = [sidebarEndIcon, sidebarEndOpen, sidebarStartIcon, sidebarStartOpen, theme || useTheme()];
     useBrowserLayoutEffect(() => {
         const { current } = elementRef;
-        ['sidebarEndOpen', 'sidebarEndWidth', 'sidebarStartOpen', 'sidebarStartWidth'].forEach((propName, i) => (current[propName] = propsToSync[i]));
+        ['sidebarEndIcon', 'sidebarEndOpen', 'sidebarStartIcon', 'sidebarStartOpen', 'theme'].forEach((propName, i) => (current[propName] = propsToSync[i]));
     }, propsToSync);
     const props = {
         ...rest,

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

@@ -1,5 +1,5 @@
 import type { BaseProps } from '../../BaseProps';
-import type { CarouselAlignHeader, SelectedAriaAttributes, CarouselAriaAttribute, BreakpointCustomizable, CarouselHeadingSize, CarouselInternationalization, CarouselUpdateEventDetail, Theme, CarouselWidth } from '../types';
+import type { CarouselAlignHeader, SelectedAriaAttributes, CarouselAriaAttribute, BreakpointCustomizable, CarouselGradientColor, CarouselHeadingSize, CarouselInternationalization, CarouselUpdateEventDetail, Theme, CarouselWidth } from '../types';
 export type PCarouselProps = BaseProps & {
     /**
      * Defines which slide to be active (zero-based numbering).
@@ -21,6 +21,14 @@ export type PCarouselProps = BaseProps & {
      * @deprecated since v3.0.0, will be removed with next major release, use `pagination` instead. If true, the carousel will not show pagination bullets at the bottom.
      */
     disablePagination?: BreakpointCustomizable<boolean>;
+    /**
+     * Indicates whether focus should be set on the center slide. If true, the carousel loops by individual slide; otherwise, it loops by page.
+     */
+    focusOnCenterSlide?: boolean;
+    /**
+     * Adapts the background gradient for the left and right edge.
+     */
+    gradientColor?: CarouselGradientColor;
     /**
      * Defines the heading used in the carousel.
      */
@@ -92,6 +100,14 @@ export declare const PCarousel: import("react").ForwardRefExoticComponent<import
      * @deprecated since v3.0.0, will be removed with next major release, use `pagination` instead. If true, the carousel will not show pagination bullets at the bottom.
      */
     disablePagination?: BreakpointCustomizable<boolean>;
+    /**
+     * Indicates whether focus should be set on the center slide. If true, the carousel loops by individual slide; otherwise, it loops by page.
+     */
+    focusOnCenterSlide?: boolean;
+    /**
+     * Adapts the background gradient for the left and right edge.
+     */
+    gradientColor?: CarouselGradientColor;
     /**
      * Defines the heading used in the carousel.
      */

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 = forwardRef(({ activeSlideIndex = 0, alignHeader = 'start', aria, description, disablePagination, heading, headingSize = 'x-large', intl, onCarouselChange, onUpdate, pagination = true, rewind = true, skipLinkTarget, slidesPerPage = 1, theme, width = 'basic', wrapContent, className, ...rest }, ref) => {
+const PCarousel = 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, width = 'basic', wrapContent, className, ...rest }, ref) => {
     const elementRef = useRef();
     useEventCallback(elementRef, 'carouselChange', onCarouselChange);
     useEventCallback(elementRef, 'update', onUpdate);
     const WebComponentTag = usePrefix('p-carousel');
-    const propsToSync = [activeSlideIndex, alignHeader, aria, description, disablePagination, heading, headingSize, intl, pagination, rewind, skipLinkTarget, slidesPerPage, theme || useTheme(), width, wrapContent];
+    const propsToSync = [activeSlideIndex, alignHeader, aria, description, disablePagination, focusOnCenterSlide, gradientColor, heading, headingSize, intl, pagination, rewind, skipLinkTarget, slidesPerPage, theme || useTheme(), width, wrapContent];
     useBrowserLayoutEffect(() => {
         const { current } = elementRef;
-        ['activeSlideIndex', 'alignHeader', 'aria', 'description', 'disablePagination', 'heading', 'headingSize', 'intl', 'pagination', 'rewind', 'skipLinkTarget', 'slidesPerPage', 'theme', 'width', 'wrapContent'].forEach((propName, i) => (current[propName] = propsToSync[i]));
+        ['activeSlideIndex', 'alignHeader', 'aria', 'description', 'disablePagination', 'focusOnCenterSlide', 'gradientColor', 'heading', 'headingSize', 'intl', 'pagination', 'rewind', 'skipLinkTarget', 'slidesPerPage', 'theme', 'width', 'wrapContent'].forEach((propName, i) => (current[propName] = propsToSync[i]));
     }, propsToSync);
     const props = {
         ...rest,

package/esm/lib/types.d.ts

@@ -684,18 +684,19 @@ export type ButtonTileSize = TileSize;
 export type ButtonTileBackground = TileBackground;
 export type ButtonTileWeight = TileWeight;
 export type ButtonTileAlign = TileAlign;
-declare const CANVAS_SIDEBAR_WIDTHS: readonly [
-    "medium",
-    "large"
-];
-export type CanvasSidebarWidth = (typeof CANVAS_SIDEBAR_WIDTHS)[number];
-export type CanvasSidebarStartWidth = CanvasSidebarWidth;
-export type CanvasSidebarEndWidth = CanvasSidebarWidth;
+export type CanvasSidebarStartIcon = IconName;
+export type CanvasSidebarEndIcon = IconName;
 declare const CAROUSEL_WIDTHS: readonly [
     "basic",
     "extended"
 ];
 export type CarouselWidth = (typeof CAROUSEL_WIDTHS)[number];
+declare const CAROUSEL_GRADIENT_COLORS: readonly [
+    "background-base",
+    "background-surface",
+    "none"
+];
+export type CarouselGradientColor = (typeof CAROUSEL_GRADIENT_COLORS)[number];
 declare const CAROUSEL_ALIGN_HEADERS: readonly [
     "start",
     "center",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@porsche-design-system/components-react",
-  "version": "3.18.0",
+  "version": "3.19.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",
@@ -17,7 +17,7 @@
   "license": "SEE LICENSE IN LICENSE",
   "homepage": "https://designsystem.porsche.com",
   "dependencies": {
-    "@porsche-design-system/components-js": "3.18.0"
+    "@porsche-design-system/components-js": "3.19.0-rc.1"
   },
   "peerDependencies": {
     "react": ">=18.0.0 <19.0.0",