@porsche-design-system/components-react 3.28.0-rc.1 → 3.28.0-rc.2

package/LICENSE.md

@@ -21,7 +21,7 @@ update this licensing agreement at any time.
 Subject to the terms of this Agreement, Porsche grants you a limited, worldwide, royalty-free, non-assignable,
 non-transferable, non-sublicensable, and non-exclusive license to use the Porsche Design System Assets solely to
 develop, test, and distribute software applications, websites, and interfaces on behalf of Porsche that are available
-via www.porsche.com or any associated websites or other Porsche software (“Applications”).
+via [https://porsche.com](https://porsche.com) or any associated websites or other Porsche software (“Applications”).
 
 ### License Restrictions
 

package/package.json

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

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

@@ -4098,6 +4098,10 @@ const getBannerPopoverResetStyles = () => {
     };
 };
 
+/**
+ * @css-variable {"name": "--p-banner-position-top", "description": "Position top of banner", "defaultValue": "56px"}
+ * @css-variable {"name": "--p-banner-position-bottom", "description": "Position bottom of banner. Only has an effect below breakpoint 's'.", "defaultValue": "56px"}
+ */
 const cssVariableTop = '--p-banner-position-top';
 const cssVariableBottom = '--p-banner-position-bottom';
 const cssVariableZIndex = '--p-internal-banner-z-index';
@@ -5036,6 +5040,9 @@ const getComponentCss$16 = (theme, isSidebarStartOpen, isSidebarEndOpen) => {
     });
 };
 
+/**
+ * @css-variable {"name": "--p-carousel-prev-next-filter", "description": "CSS Filter applied to the navigation (prev/next buttons)", "defaultValue": "none"}
+ */
 const cssVariablePrevNextFilter = '--p-carousel-prev-next-filter';
 const cssVariableGradientColorWidth = '--p-gradient-color-width';
 const carouselTransitionDuration = motionDurationModerate;
@@ -6925,6 +6932,9 @@ const getDialogStickyAreaJssStyle = (area, theme) => {
     };
 };
 
+/**
+ * @css-variable {"name": "--p-flyout-width", "description": "Width of the flyout.", "defaultValue": "auto"}
+ */
 const cssVariableWidth$2 = '--p-flyout-width';
 // TODO: we shouldn't expose --p-flyout-max-width
 const cssVariableMaxWidth = '--p-flyout-max-width';
@@ -7525,7 +7535,7 @@ const getUnitCounterJssStyle = (isDisabled, isReadonly, theme) => {
         }),
         ...(isReadonly && {
             color: contrastHighColor,
-        })
+        }),
     };
 };
 
@@ -8175,6 +8185,11 @@ const getComponentCss$G = (size) => {
     });
 };
 
+/**
+ * @css-variable {"name": "--p-modal-width", "description": "Width of the modal.", "defaultValue": "auto"}
+ * @css-variable {"name": "--p-modal-spacing-top", "description": "Spacing of the modal to the top.", "defaultValue": "clamp(16px, 10vh, 192px)"}
+ * @css-variable {"name": "--p-modal-spacing-bottom", "description": "Spacing of the modal to the bottom.", "defaultValue": "clamp(16px, 10vh, 192px)"}
+ */
 const cssVariableWidth$1 = '--p-modal-width';
 const cssVariableSpacingTop = '--p-modal-spacing-top'; // TODO: maybe --p-modal-spacing-block-start would be more precise?
 const cssVariableSpacingBottom = '--p-modal-spacing-bottom'; // TODO: maybe --p-modal-spacing-block-end would be more precise?
@@ -11175,6 +11190,9 @@ const getComponentCss$3 = (isDisabled, isReadonly, hideLabel, state, hasCounter,
     });
 };
 
+/**
+ * @css-variable {"name": "--p-toast-position-bottom", "description": "Defines the spacing between the toast and the bottom edge of its container.", "defaultValue": "56px"}
+ */
 const cssVariablePositionBottom = '--p-toast-position-bottom'; // CSS custom property exposed as public interface
 const cssVariablePositionBottomInternal = '--p-internal-toast-position-bottom';
 const ANIMATION_DURATION = motionDurationModerate;

package/ssr/cjs/components-react/projects/react-ssr-wrapper/src/lib/dsr-components/banner.cjs

@@ -10,7 +10,7 @@ var inlineNotification_wrapper = require('../components/inline-notification.wrap
 
 /**
  * @slot {"name": "heading", "description": "Defines the heading used in the banner. Can be used alternatively to the heading prop. Can be used for rich content.", "hasAltProp": true }
- * @slot {"name": "title", "description": "Defines the title used in the banner. Can be used alternatively to the heading prop. Can be used for rich content.", "hasAltProp": true }
+ * @slot {"name": "title", "description": "Please use the heading prop or slot=\"heading\" instead.", "hasAltProp": true, "isDeprecated": true }
  * @slot {"name": "description", "description": "Defines the description used in the banner. Can be used alternatively to the description prop. Can be used for rich content.", "hasAltProp": true }
  *
  * @controlled {"props": ["open"], "event": "dismiss"}

package/ssr/cjs/components-react/projects/react-ssr-wrapper/src/lib/dsr-components/canvas.cjs

@@ -33,10 +33,12 @@ class DSRCanvas extends react.Component {
     hasSidebarEndHeader;
     hasFooter;
     hasBackground;
-    sidebarStart;
-    sidebarEnd;
-    root;
-    header;
+    // TODO: Produces bug when using text-field-wrapper which looses focus
+    // private sidebarStart: any;
+    // private sidebarEnd: any;
+    // private root: any;
+    // private header: any;
+    // 
     render() {
         const { children, namedSlotChildren, otherChildren } = splitChildren.splitChildren(this.props.children);
         const hasTitle = namedSlotChildren.filter(({ props: { slot } }) => slot === 'title').length > 0;

package/ssr/cjs/components-react/projects/react-ssr-wrapper/src/lib/dsr-components/link.cjs

@@ -10,7 +10,7 @@ var utilsEntry = require('../../../../../../components/dist/utils/esm/utils-entr
 var icon_wrapper = require('../components/icon.wrapper.cjs');
 
 /**
- * @slot {"name": "", "description": "Default slot to render the link label." }
+ * @slot {"name": "", "description": "Default slot to render the link label. This slot can be used to slot an anchor tag instead of using the href prop." }
  */
 class DSRLink extends react.Component {
     host;

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

@@ -4096,6 +4096,10 @@ const getBannerPopoverResetStyles = () => {
     };
 };
 
+/**
+ * @css-variable {"name": "--p-banner-position-top", "description": "Position top of banner", "defaultValue": "56px"}
+ * @css-variable {"name": "--p-banner-position-bottom", "description": "Position bottom of banner. Only has an effect below breakpoint 's'.", "defaultValue": "56px"}
+ */
 const cssVariableTop = '--p-banner-position-top';
 const cssVariableBottom = '--p-banner-position-bottom';
 const cssVariableZIndex = '--p-internal-banner-z-index';
@@ -5034,6 +5038,9 @@ const getComponentCss$16 = (theme, isSidebarStartOpen, isSidebarEndOpen) => {
     });
 };
 
+/**
+ * @css-variable {"name": "--p-carousel-prev-next-filter", "description": "CSS Filter applied to the navigation (prev/next buttons)", "defaultValue": "none"}
+ */
 const cssVariablePrevNextFilter = '--p-carousel-prev-next-filter';
 const cssVariableGradientColorWidth = '--p-gradient-color-width';
 const carouselTransitionDuration = motionDurationModerate;
@@ -6923,6 +6930,9 @@ const getDialogStickyAreaJssStyle = (area, theme) => {
     };
 };
 
+/**
+ * @css-variable {"name": "--p-flyout-width", "description": "Width of the flyout.", "defaultValue": "auto"}
+ */
 const cssVariableWidth$2 = '--p-flyout-width';
 // TODO: we shouldn't expose --p-flyout-max-width
 const cssVariableMaxWidth = '--p-flyout-max-width';
@@ -7523,7 +7533,7 @@ const getUnitCounterJssStyle = (isDisabled, isReadonly, theme) => {
         }),
         ...(isReadonly && {
             color: contrastHighColor,
-        })
+        }),
     };
 };
 
@@ -8173,6 +8183,11 @@ const getComponentCss$G = (size) => {
     });
 };
 
+/**
+ * @css-variable {"name": "--p-modal-width", "description": "Width of the modal.", "defaultValue": "auto"}
+ * @css-variable {"name": "--p-modal-spacing-top", "description": "Spacing of the modal to the top.", "defaultValue": "clamp(16px, 10vh, 192px)"}
+ * @css-variable {"name": "--p-modal-spacing-bottom", "description": "Spacing of the modal to the bottom.", "defaultValue": "clamp(16px, 10vh, 192px)"}
+ */
 const cssVariableWidth$1 = '--p-modal-width';
 const cssVariableSpacingTop = '--p-modal-spacing-top'; // TODO: maybe --p-modal-spacing-block-start would be more precise?
 const cssVariableSpacingBottom = '--p-modal-spacing-bottom'; // TODO: maybe --p-modal-spacing-block-end would be more precise?
@@ -11173,6 +11188,9 @@ const getComponentCss$3 = (isDisabled, isReadonly, hideLabel, state, hasCounter,
     });
 };
 
+/**
+ * @css-variable {"name": "--p-toast-position-bottom", "description": "Defines the spacing between the toast and the bottom edge of its container.", "defaultValue": "56px"}
+ */
 const cssVariablePositionBottom = '--p-toast-position-bottom'; // CSS custom property exposed as public interface
 const cssVariablePositionBottomInternal = '--p-internal-toast-position-bottom';
 const ANIMATION_DURATION = motionDurationModerate;

package/ssr/esm/components-react/projects/react-ssr-wrapper/src/lib/dsr-components/banner.mjs

@@ -8,7 +8,7 @@ import { PInlineNotification } from '../components/inline-notification.wrapper.m
 
 /**
  * @slot {"name": "heading", "description": "Defines the heading used in the banner. Can be used alternatively to the heading prop. Can be used for rich content.", "hasAltProp": true }
- * @slot {"name": "title", "description": "Defines the title used in the banner. Can be used alternatively to the heading prop. Can be used for rich content.", "hasAltProp": true }
+ * @slot {"name": "title", "description": "Please use the heading prop or slot=\"heading\" instead.", "hasAltProp": true, "isDeprecated": true }
  * @slot {"name": "description", "description": "Defines the description used in the banner. Can be used alternatively to the description prop. Can be used for rich content.", "hasAltProp": true }
  *
  * @controlled {"props": ["open"], "event": "dismiss"}

package/ssr/esm/components-react/projects/react-ssr-wrapper/src/lib/dsr-components/canvas.mjs

@@ -31,10 +31,12 @@ class DSRCanvas extends Component {
     hasSidebarEndHeader;
     hasFooter;
     hasBackground;
-    sidebarStart;
-    sidebarEnd;
-    root;
-    header;
+    // TODO: Produces bug when using text-field-wrapper which looses focus
+    // private sidebarStart: any;
+    // private sidebarEnd: any;
+    // private root: any;
+    // private header: any;
+    // 
     render() {
         const { children, namedSlotChildren, otherChildren } = splitChildren(this.props.children);
         const hasTitle = namedSlotChildren.filter(({ props: { slot } }) => slot === 'title').length > 0;

package/ssr/esm/components-react/projects/react-ssr-wrapper/src/lib/dsr-components/link.mjs

@@ -8,7 +8,7 @@ import { parseAndGetAriaAttributes, hasVisibleIcon } from '../../../../../../com
 import { PIcon } from '../components/icon.wrapper.mjs';
 
 /**
- * @slot {"name": "", "description": "Default slot to render the link label." }
+ * @slot {"name": "", "description": "Default slot to render the link label. This slot can be used to slot an anchor tag instead of using the href prop." }
  */
 class DSRLink extends Component {
     host;

package/ssr/esm/lib/dsr-components/banner.d.ts

@@ -1,7 +1,7 @@
 import { Component } from 'react';
 /**
  * @slot {"name": "heading", "description": "Defines the heading used in the banner. Can be used alternatively to the heading prop. Can be used for rich content.", "hasAltProp": true }
- * @slot {"name": "title", "description": "Defines the title used in the banner. Can be used alternatively to the heading prop. Can be used for rich content.", "hasAltProp": true }
+ * @slot {"name": "title", "description": "Please use the heading prop or slot=\"heading\" instead.", "hasAltProp": true, "isDeprecated": true }
  * @slot {"name": "description", "description": "Defines the description used in the banner. Can be used alternatively to the description prop. Can be used for rich content.", "hasAltProp": true }
  *
  * @controlled {"props": ["open"], "event": "dismiss"}

package/ssr/esm/lib/dsr-components/canvas.d.ts

@@ -21,9 +21,5 @@ export declare class DSRCanvas extends Component<any> {
     private hasSidebarEndHeader;
     private hasFooter;
     private hasBackground;
-    private sidebarStart;
-    private sidebarEnd;
-    private root;
-    private header;
     render(): JSX.Element;
 }

package/ssr/esm/lib/dsr-components/link.d.ts

@@ -1,6 +1,6 @@
 import { Component } from 'react';
 /**
- * @slot {"name": "", "description": "Default slot to render the link label." }
+ * @slot {"name": "", "description": "Default slot to render the link label. This slot can be used to slot an anchor tag instead of using the href prop." }
  */
 export declare class DSRLink extends Component<any> {
     host: HTMLElement;