@porsche-design-system/components-react 2.18.0-rc.0 → 2.18.0-rc.1

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

@@ -21,6 +21,10 @@ export declare type PCarouselProps = Omit<HTMLAttributes<{}>, 'color'> & {
      * Emitted when carousel's content slides.
      */
     onCarouselChange?: (event: CustomEvent<CarouselChangeEvent>) => void;
+    /**
+     * Whether the slides should rewind from last to first slide and vice versa.
+     */
+    rewind?: boolean;
     /**
      * Sets the amount of slides visible at the same time.
      */
@@ -55,6 +59,10 @@ export declare const PCarousel: import("react").ForwardRefExoticComponent<Omit<H
      * Emitted when carousel's content slides.
      */
     onCarouselChange?: (event: CustomEvent<CarouselChangeEvent>) => void;
+    /**
+     * Whether the slides should rewind from last to first slide and vice versa.
+     */
+    rewind?: boolean;
     /**
      * Sets the amount of slides visible at the same time.
      */

package/lib/components/carousel.wrapper.js

@@ -7,14 +7,14 @@ var react = require('react');
 var hooks = require('../../hooks.js');
 var utils = require('../../utils.js');
 
-const PCarousel = /*#__PURE__*/ react.forwardRef(({ description, disablePagination = false, heading, intl = {}, onCarouselChange, slidesPerPage = 1, theme = 'light', wrapContent, className, ...rest }, ref) => {
+const PCarousel = /*#__PURE__*/ react.forwardRef(({ description, disablePagination = false, heading, intl = {}, onCarouselChange, rewind = true, slidesPerPage = 1, theme = 'light', wrapContent, className, ...rest }, ref) => {
     const elementRef = react.useRef();
     hooks.useEventCallback(elementRef, 'carouselChange', onCarouselChange);
     const WebComponentTag = hooks.usePrefix('p-carousel');
-    const propsToSync = [description, disablePagination, heading, intl, slidesPerPage, theme, wrapContent];
+    const propsToSync = [description, disablePagination, heading, intl, rewind, slidesPerPage, theme, wrapContent];
     hooks.useBrowserLayoutEffect(() => {
         const { current } = elementRef;
-        ['description', 'disablePagination', 'heading', 'intl', 'slidesPerPage', 'theme', 'wrapContent'].forEach((propName, i) => (current[propName] = propsToSync[i]));
+        ['description', 'disablePagination', 'heading', 'intl', 'rewind', 'slidesPerPage', 'theme', 'wrapContent'].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": "2.18.0-rc.0",
+  "version": "2.18.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": "2.18.0-rc.0"
+    "@porsche-design-system/components-js": "2.18.0-rc.1"
   },
   "peerDependencies": {
     "react": ">=17.0.0 <19.0.0",

package/ssr/components/dist/styles/esm/styles-entry.js

@@ -6173,9 +6173,8 @@ const getComponentCss$M = (wrapContent, disablePagination, theme) => {
                     gap: pxToRemWithUnit(32),
                 },
             }),
-            'h2,::slotted([slot=heading])': addImportantToEachRule(Object.assign(Object.assign({}, headingMedium), { margin: 0, color: baseColor })),
-            // NOTE: might come back in later version '::slotted([slot=post-heading])'
-            p: Object.assign(Object.assign({}, textSmall), { margin: 0, color: baseColor, gridColumn: 1 }),
+            'h2,::slotted([slot=heading])': addImportantToEachRule(Object.assign(Object.assign({}, headingMedium), { margin: 0, color: baseColor, maxWidth: pxToRemWithUnit(900) })),
+            'p,::slotted([slot=description])': addImportantToEachRule(Object.assign(Object.assign({}, textSmall), { margin: 0, color: baseColor, maxWidth: pxToRemWithUnit(550), gridColumn: 1 })),
         }, splide: {
             overflow: 'hidden',
             // visibility: 'hidden',

package/ssr/components-react/projects/react-ssr-wrapper/src/lib/components/carousel.wrapper.js

@@ -8,14 +8,14 @@ var hooks = require('../../hooks.js');
 var utils = require('../../utils.js');
 var carousel = require('../dsr-components/carousel.js');
 
-const PCarousel = /*#__PURE__*/ react.forwardRef(({ description, disablePagination = false, heading, intl = {}, onCarouselChange, slidesPerPage = 1, theme = 'light', wrapContent, className, children, ...rest }, ref) => {
+const PCarousel = /*#__PURE__*/ react.forwardRef(({ description, disablePagination = false, heading, intl = {}, onCarouselChange, rewind = true, slidesPerPage = 1, theme = 'light', wrapContent, className, children, ...rest }, ref) => {
     const elementRef = react.useRef();
     hooks.useEventCallback(elementRef, 'carouselChange', onCarouselChange);
     const WebComponentTag = hooks.usePrefix('p-carousel');
-    const propsToSync = [description, disablePagination, heading, intl, slidesPerPage, theme, wrapContent];
+    const propsToSync = [description, disablePagination, heading, intl, rewind, slidesPerPage, theme, wrapContent];
     hooks.useBrowserLayoutEffect(() => {
         const { current } = elementRef;
-        ['description', 'disablePagination', 'heading', 'intl', 'slidesPerPage', 'theme', 'wrapContent'].forEach((propName, i) => (current[propName] = propsToSync[i]));
+        ['description', 'disablePagination', 'heading', 'intl', 'rewind', 'slidesPerPage', 'theme', 'wrapContent'].forEach((propName, i) => (current[propName] = propsToSync[i]));
     }, propsToSync);
     // @ts-ignore
     if (!process.browser) {
@@ -26,7 +26,7 @@ const PCarousel = /*#__PURE__*/ react.forwardRef(({ description, disablePaginati
         // @ts-ignore
         ...(!process.browser
             ? {
-                children: (jsxRuntime.jsx(carousel.DSRCarousel, { ...{ description, disablePagination, heading, intl, slidesPerPage, theme, wrapContent, children } })),
+                children: (jsxRuntime.jsx(carousel.DSRCarousel, { ...{ description, disablePagination, heading, intl, rewind, slidesPerPage, theme, wrapContent, children } })),
             }
             : {
                 children,

package/ssr/components-react/projects/react-ssr-wrapper/src/lib/dsr-components/carousel.js

@@ -32,7 +32,8 @@ class DSRCarousel extends react.Component {
             // 'aria-controls': 'splide-track', // TODO: cross shadow dom? use native button tag instead of p-button-pure?
         };
         const style = minifyCss.minifyCss(stripFocusAndHoverStyles.stripFocusAndHoverStyles(stylesEntry.getCarouselCss(this.props.wrapContent, this.props.disablePagination, this.props.theme)));
-        return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("template", { shadowroot: "open", children: [jsxRuntime.jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("div", { className: "header", children: [this.props.heading ? jsxRuntime.jsx("h2", { children: this.props.heading }) : jsxRuntime.jsx("slot", { name: "heading" }), this.props.description && jsxRuntime.jsx("p", { children: this.props.description }), jsxRuntime.jsxs("div", { className: "nav", children: [jsxRuntime.jsx(buttonPure_wrapper.PButtonPure, { ...btnProps, icon: "arrow-head-left" }), jsxRuntime.jsx(buttonPure_wrapper.PButtonPure, { ...btnProps, icon: "arrow-head-right" })] })] }), jsxRuntime.jsx("div", { id: "splide", className: "splide", "aria-label": this.props.heading || ((_a = namedSlottedChildren.find(({ props: { slot } }) => slot === 'heading')) === null || _a === void 0 ? void 0 : _a.props.children), children: jsxRuntime.jsx("div", { className: "splide__track", children: jsxRuntime.jsx("div", { className: "splide__list", children: defaultChildren.map((_, i) => (jsxRuntime.jsx("div", { className: "splide__slide", children: jsxRuntime.jsx("slot", { name: `slide-${i}` }) }, i))) }) }) }), this.props.disablePagination !== true && jsxRuntime.jsx("div", { className: "pagination" })] })] }), this.props.children] }));
+        return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("template", { shadowroot: "open", children: [jsxRuntime.jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("div", { className: "header", children: [this.props.heading ? jsxRuntime.jsx("h2", { children: this.props.heading }) : jsxRuntime.jsx("slot", { name: "heading" }), (this.props.description || namedSlottedChildren.filter(({ props: { slot } }) => slot === 'description').length > 0) &&
+                                            ((this.props.description && jsxRuntime.jsx("p", { children: this.props.description })) || jsxRuntime.jsx("slot", { name: "description" })), jsxRuntime.jsxs("div", { className: "nav", children: [jsxRuntime.jsx(buttonPure_wrapper.PButtonPure, { ...btnProps, icon: "arrow-left" }), jsxRuntime.jsx(buttonPure_wrapper.PButtonPure, { ...btnProps, icon: "arrow-right" })] })] }), jsxRuntime.jsx("div", { id: "splide", className: "splide", "aria-label": this.props.heading || ((_a = namedSlottedChildren.find(({ props: { slot } }) => slot === 'heading')) === null || _a === void 0 ? void 0 : _a.props.children), children: jsxRuntime.jsx("div", { className: "splide__track", children: jsxRuntime.jsx("div", { className: "splide__list", children: defaultChildren.map((_, i) => (jsxRuntime.jsx("div", { className: "splide__slide", children: jsxRuntime.jsx("slot", { name: `slide-${i}` }) }, i))) }) }) }), this.props.disablePagination !== true && jsxRuntime.jsx("div", { className: "pagination" })] })] }), this.props.children] }));
     }
 }
 

package/ssr/esm/components/dist/styles/esm/styles-entry.js

@@ -6169,9 +6169,8 @@ const getComponentCss$M = (wrapContent, disablePagination, theme) => {
                     gap: pxToRemWithUnit(32),
                 },
             }),
-            'h2,::slotted([slot=heading])': addImportantToEachRule(Object.assign(Object.assign({}, headingMedium), { margin: 0, color: baseColor })),
-            // NOTE: might come back in later version '::slotted([slot=post-heading])'
-            p: Object.assign(Object.assign({}, textSmall), { margin: 0, color: baseColor, gridColumn: 1 }),
+            'h2,::slotted([slot=heading])': addImportantToEachRule(Object.assign(Object.assign({}, headingMedium), { margin: 0, color: baseColor, maxWidth: pxToRemWithUnit(900) })),
+            'p,::slotted([slot=description])': addImportantToEachRule(Object.assign(Object.assign({}, textSmall), { margin: 0, color: baseColor, maxWidth: pxToRemWithUnit(550), gridColumn: 1 })),
         }, splide: {
             overflow: 'hidden',
             // visibility: 'hidden',

package/ssr/esm/components-react/projects/react-ssr-wrapper/src/lib/components/carousel.wrapper.js

@@ -4,14 +4,14 @@ import { useEventCallback, usePrefix, useBrowserLayoutEffect, useMergedClass } f
 import { syncRef } from '../../utils.js';
 import { DSRCarousel } from '../dsr-components/carousel.js';
 
-const PCarousel = /*#__PURE__*/ forwardRef(({ description, disablePagination = false, heading, intl = {}, onCarouselChange, slidesPerPage = 1, theme = 'light', wrapContent, className, children, ...rest }, ref) => {
+const PCarousel = /*#__PURE__*/ forwardRef(({ description, disablePagination = false, heading, intl = {}, onCarouselChange, rewind = true, slidesPerPage = 1, theme = 'light', wrapContent, className, children, ...rest }, ref) => {
     const elementRef = useRef();
     useEventCallback(elementRef, 'carouselChange', onCarouselChange);
     const WebComponentTag = usePrefix('p-carousel');
-    const propsToSync = [description, disablePagination, heading, intl, slidesPerPage, theme, wrapContent];
+    const propsToSync = [description, disablePagination, heading, intl, rewind, slidesPerPage, theme, wrapContent];
     useBrowserLayoutEffect(() => {
         const { current } = elementRef;
-        ['description', 'disablePagination', 'heading', 'intl', 'slidesPerPage', 'theme', 'wrapContent'].forEach((propName, i) => (current[propName] = propsToSync[i]));
+        ['description', 'disablePagination', 'heading', 'intl', 'rewind', 'slidesPerPage', 'theme', 'wrapContent'].forEach((propName, i) => (current[propName] = propsToSync[i]));
     }, propsToSync);
     // @ts-ignore
     if (!process.browser) {
@@ -22,7 +22,7 @@ const PCarousel = /*#__PURE__*/ forwardRef(({ description, disablePagination = f
         // @ts-ignore
         ...(!process.browser
             ? {
-                children: (jsx(DSRCarousel, { ...{ description, disablePagination, heading, intl, slidesPerPage, theme, wrapContent, children } })),
+                children: (jsx(DSRCarousel, { ...{ description, disablePagination, heading, intl, rewind, slidesPerPage, theme, wrapContent, children } })),
             }
             : {
                 children,

package/ssr/esm/components-react/projects/react-ssr-wrapper/src/lib/dsr-components/carousel.js

@@ -28,7 +28,8 @@ class DSRCarousel extends Component {
             // 'aria-controls': 'splide-track', // TODO: cross shadow dom? use native button tag instead of p-button-pure?
         };
         const style = minifyCss(stripFocusAndHoverStyles(getComponentCss$M(this.props.wrapContent, this.props.disablePagination, this.props.theme)));
-        return (jsxs(Fragment, { children: [jsxs("template", { shadowroot: "open", children: [jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxs(Fragment, { children: [jsxs("div", { className: "header", children: [this.props.heading ? jsx("h2", { children: this.props.heading }) : jsx("slot", { name: "heading" }), this.props.description && jsx("p", { children: this.props.description }), jsxs("div", { className: "nav", children: [jsx(PButtonPure, { ...btnProps, icon: "arrow-head-left" }), jsx(PButtonPure, { ...btnProps, icon: "arrow-head-right" })] })] }), jsx("div", { id: "splide", className: "splide", "aria-label": this.props.heading || ((_a = namedSlottedChildren.find(({ props: { slot } }) => slot === 'heading')) === null || _a === void 0 ? void 0 : _a.props.children), children: jsx("div", { className: "splide__track", children: jsx("div", { className: "splide__list", children: defaultChildren.map((_, i) => (jsx("div", { className: "splide__slide", children: jsx("slot", { name: `slide-${i}` }) }, i))) }) }) }), this.props.disablePagination !== true && jsx("div", { className: "pagination" })] })] }), this.props.children] }));
+        return (jsxs(Fragment, { children: [jsxs("template", { shadowroot: "open", children: [jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxs(Fragment, { children: [jsxs("div", { className: "header", children: [this.props.heading ? jsx("h2", { children: this.props.heading }) : jsx("slot", { name: "heading" }), (this.props.description || namedSlottedChildren.filter(({ props: { slot } }) => slot === 'description').length > 0) &&
+                                            ((this.props.description && jsx("p", { children: this.props.description })) || jsx("slot", { name: "description" })), jsxs("div", { className: "nav", children: [jsx(PButtonPure, { ...btnProps, icon: "arrow-left" }), jsx(PButtonPure, { ...btnProps, icon: "arrow-right" })] })] }), jsx("div", { id: "splide", className: "splide", "aria-label": this.props.heading || ((_a = namedSlottedChildren.find(({ props: { slot } }) => slot === 'heading')) === null || _a === void 0 ? void 0 : _a.props.children), children: jsx("div", { className: "splide__track", children: jsx("div", { className: "splide__list", children: defaultChildren.map((_, i) => (jsx("div", { className: "splide__slide", children: jsx("slot", { name: `slide-${i}` }) }, i))) }) }) }), this.props.disablePagination !== true && jsx("div", { className: "pagination" })] })] }), this.props.children] }));
     }
 }
 

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

@@ -21,6 +21,10 @@ export declare type PCarouselProps = Omit<HTMLAttributes<{}>, 'color'> & {
      * Emitted when carousel's content slides.
      */
     onCarouselChange?: (event: CustomEvent<CarouselChangeEvent>) => void;
+    /**
+     * Whether the slides should rewind from last to first slide and vice versa.
+     */
+    rewind?: boolean;
     /**
      * Sets the amount of slides visible at the same time.
      */
@@ -55,6 +59,10 @@ export declare const PCarousel: import("react").ForwardRefExoticComponent<Omit<H
      * Emitted when carousel's content slides.
      */
     onCarouselChange?: (event: CustomEvent<CarouselChangeEvent>) => void;
+    /**
+     * Whether the slides should rewind from last to first slide and vice versa.
+     */
+    rewind?: boolean;
     /**
      * Sets the amount of slides visible at the same time.
      */