@porsche-design-system/components-react 3.1.0 → 3.2.0-rc.0

package/CHANGELOG.md

@@ -2,26 +2,57 @@
 
 ## Porsche Design System
 
-
 All notable changes to this project will be documented in this file and published as following npm packages:
 
-* `@porsche-design-system/components-js`
-* `@porsche-design-system/components-angular`
-* `@porsche-design-system/components-react`
-* `@porsche-design-system/components-vue`
+- `@porsche-design-system/components-js`
+- `@porsche-design-system/components-angular`
+- `@porsche-design-system/components-react`
+- `@porsche-design-system/components-vue`
 
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/), and this project adheres to
 [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
 ### [Unreleased]
 
+### [3.2.0-rc.0] - 2023-06-19
+
+#### Added
+
+- `skipLinkTarget` property to `Carousel` component to enhance keyboard functionality
+  ([#2557](https://github.com/porsche-design-system/porsche-design-system/pull/2557))
+- `showLastPage` property to `Pagination` component
+  ([#2606](https://github.com/porsche-design-system/porsche-design-system/pull/2606))
+
+#### Fixed
+
+- Partials: `getInitialStyles` supports `Flyout` component
+  ([#2598](https://github.com/porsche-design-system/porsche-design-system/pull/2598))
+- `Popover` content can be selected/highlighted
+  ([#2599](https://github.com/porsche-design-system/porsche-design-system/pull/2599))
+
+#### Changed
+
+- `Carousel` pagination now shows 5 "infinite bullets" when using more than 5 slides
+  ([#2600](https://github.com/porsche-design-system/porsche-design-system/pull/2600))
+- `Carousel` supports click events on non-active slides and changed keyboard navigation
+  ([#2557](https://github.com/porsche-design-system/porsche-design-system/pull/2557))
+- Unified wordings of all console warnings, errors and exceptions
+  ([#2602](https://github.com/porsche-design-system/porsche-design-system/pull/2602))
+- Angular: increased peer dependency to `>=15.0.0 <17.0.0`
+  ([#2602](https://github.com/porsche-design-system/porsche-design-system/pull/2602))
+- `Toast` allows line break markups within toast message
+  ([#2584](https://github.com/porsche-design-system/porsche-design-system/pull/2584))
+- `Toast` shows always the latest toast message and clears its queue immediately if a new message is added
+  ([#2584](https://github.com/porsche-design-system/porsche-design-system/pull/2584))
+
 ### [3.1.0] - 2023-06-09
 
 ### [3.1.0-rc.2] - 2023-06-09
 
 #### Changed
 
-- `Crest` replaced final assets and meta icons
+- `Crest` updated assets ([#2595](https://github.com/porsche-design-system/porsche-design-system/pull/2595))
+- Partials: `getMetaTagsAndIconLinks` updated assets
   ([#2595](https://github.com/porsche-design-system/porsche-design-system/pull/2595))
 
 #### Added
@@ -1650,7 +1681,7 @@ accessible regarding its color contrast and might even be removed in an upcoming
 
 #### Changed
 
-- Angular: Increased peer dependency to `>=12.0.0 <14.0.0`
+- Angular: increased peer dependency to `>=12.0.0 <14.0.0`
 
 ### [2.7.0] - 2021-12-14
 
@@ -1944,7 +1975,7 @@ color contrast and might even be removed in an upcoming major release again.
 
 #### Fixed
 
-- Angular: Events firing twice in `Pagination`, `Modal`, `Tabs`, `Tabs Bar` and `Banner` component
+- Angular: events firing twice in `Pagination`, `Modal`, `Tabs`, `Tabs Bar` and `Banner` component
 
 ### [2.0.2] - 2021-04-21
 
@@ -1961,7 +1992,7 @@ color contrast and might even be removed in an upcoming major release again.
 - Visual appearance of `Checkbox Wrapper` in iOS Safari
 - A bug where `Text Field Wrapper` would throw an error when reattaching to DOM too quickly
 - Visual bug in Firefox when zooming out `Text Field Wrapper`, `Checkbox Wrapper` and `Textarea Wrapper`
-- Angular: Streamline component styles in dark theme
+- Angular: streamline component styles in dark theme
 
 #### Changed
 

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

@@ -3,15 +3,15 @@ import { forwardRef, useRef } from 'react';
 import { useEventCallback, usePrefix, useBrowserLayoutEffect, useMergedClass } from '../../hooks.js';
 import { syncRef } from '../../utils.js';
 
-const PCarousel = forwardRef(({ activeSlideIndex = 0, alignHeader = 'left', description, disablePagination, heading, intl, onCarouselChange, onUpdate, pagination = true, rewind = true, slidesPerPage = 1, theme = 'light', width = 'basic', wrapContent, className, ...rest }, ref) => {
+const PCarousel = forwardRef(({ activeSlideIndex = 0, alignHeader = 'left', description, disablePagination, heading, intl, onCarouselChange, onUpdate, pagination = true, rewind = true, skipLinkTarget, slidesPerPage = 1, theme = 'light', 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, description, disablePagination, heading, intl, pagination, rewind, slidesPerPage, theme, width, wrapContent];
+    const propsToSync = [activeSlideIndex, alignHeader, description, disablePagination, heading, intl, pagination, rewind, skipLinkTarget, slidesPerPage, theme, width, wrapContent];
     useBrowserLayoutEffect(() => {
         const { current } = elementRef;
-        ['activeSlideIndex', 'alignHeader', 'description', 'disablePagination', 'heading', 'intl', 'pagination', 'rewind', 'slidesPerPage', 'theme', 'width', 'wrapContent'].forEach((propName, i) => (current[propName] = propsToSync[i]));
+        ['activeSlideIndex', 'alignHeader', 'description', 'disablePagination', 'heading', 'intl', 'pagination', 'rewind', 'skipLinkTarget', 'slidesPerPage', 'theme', 'width', 'wrapContent'].forEach((propName, i) => (current[propName] = propsToSync[i]));
     }, propsToSync);
     const props = {
         ...rest,

package/esm/lib/components/pagination.wrapper.js

@@ -3,15 +3,15 @@ import { forwardRef, useRef } from 'react';
 import { useEventCallback, usePrefix, useBrowserLayoutEffect, useMergedClass } from '../../hooks.js';
 import { syncRef } from '../../utils.js';
 
-const PPagination = forwardRef(({ activePage = 1, allyLabel, allyLabelNext, allyLabelPage, allyLabelPrev, intl = { root: 'Pagination', prev: 'Previous page', next: 'Next page', page: 'Page', }, itemsPerPage = 1, maxNumberOfPageLinks = { base: 5, xs: 7, }, onPageChange, onUpdate, theme = 'light', totalItemsCount = 1, className, ...rest }, ref) => {
+const PPagination = forwardRef(({ activePage = 1, allyLabel, allyLabelNext, allyLabelPage, allyLabelPrev, intl = { root: 'Pagination', prev: 'Previous page', next: 'Next page', page: 'Page', }, itemsPerPage = 1, maxNumberOfPageLinks = { base: 5, xs: 7, }, onPageChange, onUpdate, showLastPage = true, theme = 'light', totalItemsCount = 1, className, ...rest }, ref) => {
     const elementRef = useRef();
     useEventCallback(elementRef, 'pageChange', onPageChange);
     useEventCallback(elementRef, 'update', onUpdate);
     const WebComponentTag = usePrefix('p-pagination');
-    const propsToSync = [activePage, allyLabel, allyLabelNext, allyLabelPage, allyLabelPrev, intl, itemsPerPage, maxNumberOfPageLinks, theme, totalItemsCount];
+    const propsToSync = [activePage, allyLabel, allyLabelNext, allyLabelPage, allyLabelPrev, intl, itemsPerPage, maxNumberOfPageLinks, showLastPage, theme, totalItemsCount];
     useBrowserLayoutEffect(() => {
         const { current } = elementRef;
-        ['activePage', 'allyLabel', 'allyLabelNext', 'allyLabelPage', 'allyLabelPrev', 'intl', 'itemsPerPage', 'maxNumberOfPageLinks', 'theme', 'totalItemsCount'].forEach((propName, i) => (current[propName] = propsToSync[i]));
+        ['activePage', 'allyLabel', 'allyLabelNext', 'allyLabelPage', 'allyLabelPrev', 'intl', 'itemsPerPage', 'maxNumberOfPageLinks', 'showLastPage', 'theme', 'totalItemsCount'].forEach((propName, i) => (current[propName] = propsToSync[i]));
     }, propsToSync);
     const props = {
         ...rest,

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

@@ -41,6 +41,10 @@ export type PCarouselProps = Omit<HTMLAttributes<{}>, 'color'> & {
      * Whether the slides should rewind from last to first slide and vice versa.
      */
     rewind?: boolean;
+    /**
+     * Defines target of skip link (to skip carousel entries).
+     */
+    skipLinkTarget?: string;
     /**
      * 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.
      */
@@ -100,6 +104,10 @@ export declare const PCarousel: import("react").ForwardRefExoticComponent<Omit<H
      * Whether the slides should rewind from last to first slide and vice versa.
      */
     rewind?: boolean;
+    /**
+     * Defines target of skip link (to skip carousel entries).
+     */
+    skipLinkTarget?: string;
     /**
      * 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.
      */

package/lib/components/carousel.wrapper.js

@@ -5,15 +5,15 @@ var react = require('react');
 var hooks = require('../../hooks.js');
 var utils = require('../../utils.js');
 
-const PCarousel = react.forwardRef(({ activeSlideIndex = 0, alignHeader = 'left', description, disablePagination, heading, intl, onCarouselChange, onUpdate, pagination = true, rewind = true, slidesPerPage = 1, theme = 'light', width = 'basic', wrapContent, className, ...rest }, ref) => {
+const PCarousel = react.forwardRef(({ activeSlideIndex = 0, alignHeader = 'left', description, disablePagination, heading, intl, onCarouselChange, onUpdate, pagination = true, rewind = true, skipLinkTarget, slidesPerPage = 1, theme = 'light', 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, description, disablePagination, heading, intl, pagination, rewind, slidesPerPage, theme, width, wrapContent];
+    const propsToSync = [activeSlideIndex, alignHeader, description, disablePagination, heading, intl, pagination, rewind, skipLinkTarget, slidesPerPage, theme, width, wrapContent];
     hooks.useBrowserLayoutEffect(() => {
         const { current } = elementRef;
-        ['activeSlideIndex', 'alignHeader', 'description', 'disablePagination', 'heading', 'intl', 'pagination', 'rewind', 'slidesPerPage', 'theme', 'width', 'wrapContent'].forEach((propName, i) => (current[propName] = propsToSync[i]));
+        ['activeSlideIndex', 'alignHeader', 'description', 'disablePagination', 'heading', 'intl', 'pagination', 'rewind', 'skipLinkTarget', 'slidesPerPage', 'theme', 'width', 'wrapContent'].forEach((propName, i) => (current[propName] = propsToSync[i]));
     }, propsToSync);
     const props = {
         ...rest,

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

@@ -30,7 +30,7 @@ export type PPaginationProps = Omit<HTMLAttributes<{}>, 'color'> & {
      */
     itemsPerPage?: number;
     /**
-     * The maximum number of page links rendered
+     * The maximum number of page links rendered.
      */
     maxNumberOfPageLinks?: BreakpointCustomizable<PaginationMaxNumberOfPageLinks>;
     /**
@@ -41,6 +41,10 @@ export type PPaginationProps = Omit<HTMLAttributes<{}>, 'color'> & {
      * Emitted when the page changes.
      */
     onUpdate?: (event: CustomEvent<PaginationUpdateEvent>) => void;
+    /**
+     * Show or hide the button to jump to the last page.
+     */
+    showLastPage?: boolean;
     /**
      * Adapts the color when used on dark background.
      */
@@ -80,7 +84,7 @@ export declare const PPagination: import("react").ForwardRefExoticComponent<Omit
      */
     itemsPerPage?: number;
     /**
-     * The maximum number of page links rendered
+     * The maximum number of page links rendered.
      */
     maxNumberOfPageLinks?: BreakpointCustomizable<PaginationMaxNumberOfPageLinks>;
     /**
@@ -91,6 +95,10 @@ export declare const PPagination: import("react").ForwardRefExoticComponent<Omit
      * Emitted when the page changes.
      */
     onUpdate?: (event: CustomEvent<PaginationUpdateEvent>) => void;
+    /**
+     * Show or hide the button to jump to the last page.
+     */
+    showLastPage?: boolean;
     /**
      * Adapts the color when used on dark background.
      */

package/lib/components/pagination.wrapper.js

@@ -5,15 +5,15 @@ var react = require('react');
 var hooks = require('../../hooks.js');
 var utils = require('../../utils.js');
 
-const PPagination = react.forwardRef(({ activePage = 1, allyLabel, allyLabelNext, allyLabelPage, allyLabelPrev, intl = { root: 'Pagination', prev: 'Previous page', next: 'Next page', page: 'Page', }, itemsPerPage = 1, maxNumberOfPageLinks = { base: 5, xs: 7, }, onPageChange, onUpdate, theme = 'light', totalItemsCount = 1, className, ...rest }, ref) => {
+const PPagination = react.forwardRef(({ activePage = 1, allyLabel, allyLabelNext, allyLabelPage, allyLabelPrev, intl = { root: 'Pagination', prev: 'Previous page', next: 'Next page', page: 'Page', }, itemsPerPage = 1, maxNumberOfPageLinks = { base: 5, xs: 7, }, onPageChange, onUpdate, showLastPage = true, theme = 'light', totalItemsCount = 1, className, ...rest }, ref) => {
     const elementRef = react.useRef();
     hooks.useEventCallback(elementRef, 'pageChange', onPageChange);
     hooks.useEventCallback(elementRef, 'update', onUpdate);
     const WebComponentTag = hooks.usePrefix('p-pagination');
-    const propsToSync = [activePage, allyLabel, allyLabelNext, allyLabelPage, allyLabelPrev, intl, itemsPerPage, maxNumberOfPageLinks, theme, totalItemsCount];
+    const propsToSync = [activePage, allyLabel, allyLabelNext, allyLabelPage, allyLabelPrev, intl, itemsPerPage, maxNumberOfPageLinks, showLastPage, theme, totalItemsCount];
     hooks.useBrowserLayoutEffect(() => {
         const { current } = elementRef;
-        ['activePage', 'allyLabel', 'allyLabelNext', 'allyLabelPage', 'allyLabelPrev', 'intl', 'itemsPerPage', 'maxNumberOfPageLinks', 'theme', 'totalItemsCount'].forEach((propName, i) => (current[propName] = propsToSync[i]));
+        ['activePage', 'allyLabel', 'allyLabelNext', 'allyLabelPage', 'allyLabelPrev', 'intl', 'itemsPerPage', 'maxNumberOfPageLinks', 'showLastPage', 'theme', 'totalItemsCount'].forEach((propName, i) => (current[propName] = propsToSync[i]));
     }, propsToSync);
     const props = {
         ...rest,