@porsche-design-system/components-react 3.12.0 → 3.13.0-rc.1

package/README.md

@@ -8,7 +8,7 @@ to learn more.
 
 ### Installation
 
-Run the following command using [npm](https://www.npmjs.com):
+Run the following command using [npm](https://npmjs.com):
 
 ```bash
 npm install @porsche-design-system/components-react

package/cjs/hooks.cjs

@@ -1,4 +1,4 @@
-'use client';
+"use client";
 'use strict';
 
 var react = require('react');

package/cjs/lib/components/accordion.wrapper.cjs

@@ -1,4 +1,4 @@
-'use client';
+"use client";
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');

package/cjs/lib/components/banner.wrapper.cjs

@@ -1,4 +1,4 @@
-'use client';
+"use client";
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');

package/cjs/lib/components/button-group.wrapper.cjs

@@ -1,4 +1,4 @@
-'use client';
+"use client";
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');

package/cjs/lib/components/button-pure.wrapper.cjs

@@ -1,4 +1,4 @@
-'use client';
+"use client";
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');

package/cjs/lib/components/button-tile.wrapper.cjs

@@ -1,4 +1,4 @@
-'use client';
+"use client";
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');

package/cjs/lib/components/button.wrapper.cjs

@@ -1,4 +1,4 @@
-'use client';
+"use client";
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');

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

@@ -1,4 +1,4 @@
-'use client';
+"use client";
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');

package/cjs/lib/components/checkbox-wrapper.wrapper.cjs

@@ -1,4 +1,4 @@
-'use client';
+"use client";
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');

package/cjs/lib/components/content-wrapper.wrapper.cjs

@@ -1,4 +1,4 @@
-'use client';
+"use client";
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');

package/cjs/lib/components/crest.wrapper.cjs

@@ -1,4 +1,4 @@
-'use client';
+"use client";
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');

package/cjs/lib/components/display.wrapper.cjs

@@ -1,4 +1,4 @@
-'use client';
+"use client";
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');

package/cjs/lib/components/divider.wrapper.cjs

@@ -1,4 +1,4 @@
-'use client';
+"use client";
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');

package/cjs/lib/components/fieldset-wrapper.wrapper.cjs

@@ -1,4 +1,4 @@
-'use client';
+"use client";
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');

package/cjs/lib/components/fieldset.wrapper.cjs

@@ -1,4 +1,4 @@
-'use client';
+"use client";
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');

package/cjs/lib/components/flex-item.wrapper.cjs

@@ -1,4 +1,4 @@
-'use client';
+"use client";
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');

package/cjs/lib/components/flex.wrapper.cjs

@@ -1,4 +1,4 @@
-'use client';
+"use client";
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');

package/cjs/lib/components/flyout-navigation-item.wrapper.cjs

@@ -1,4 +1,4 @@
-'use client';
+"use client";
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');

package/cjs/lib/components/flyout-navigation.wrapper.cjs

@@ -1,4 +1,4 @@
-'use client';
+"use client";
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');

package/cjs/lib/components/flyout.wrapper.cjs

@@ -1,4 +1,4 @@
-'use client';
+"use client";
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');

package/cjs/lib/components/grid-item.wrapper.cjs

@@ -1,4 +1,4 @@
-'use client';
+"use client";
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');

package/cjs/lib/components/grid.wrapper.cjs

@@ -1,4 +1,4 @@
-'use client';
+"use client";
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');

package/cjs/lib/components/heading.wrapper.cjs

@@ -1,4 +1,4 @@
-'use client';
+"use client";
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');

package/cjs/lib/components/headline.wrapper.cjs

@@ -1,4 +1,4 @@
-'use client';
+"use client";
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');

package/cjs/lib/components/icon.wrapper.cjs

@@ -1,4 +1,4 @@
-'use client';
+"use client";
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');

package/cjs/lib/components/inline-notification.wrapper.cjs

@@ -1,4 +1,4 @@
-'use client';
+"use client";
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');

package/cjs/lib/components/link-pure.wrapper.cjs

@@ -1,4 +1,4 @@
-'use client';
+"use client";
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');

package/cjs/lib/components/link-social.wrapper.cjs

@@ -1,4 +1,4 @@
-'use client';
+"use client";
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');

package/cjs/lib/components/link-tile-model-signature.wrapper.cjs

@@ -1,4 +1,4 @@
-'use client';
+"use client";
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');

package/cjs/lib/components/link-tile-product.wrapper.cjs

@@ -1,4 +1,4 @@
-'use client';
+"use client";
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');
@@ -6,14 +6,14 @@ var react = require('react');
 var hooks = require('../../hooks.cjs');
 var utils = require('../../utils.cjs');
 
-const PLinkTileProduct = react.forwardRef(({ aspectRatio = '3:4', description, heading, href, likeButton = true, liked = false, onLike, price, rel, target = '_self', theme, className, ...rest }, ref) => {
+const PLinkTileProduct = react.forwardRef(({ aspectRatio = '3:4', description, heading, href, likeButton = true, liked = false, onLike, price, priceOriginal, rel, target = '_self', theme, className, ...rest }, ref) => {
     const elementRef = react.useRef();
     hooks.useEventCallback(elementRef, 'like', onLike);
     const WebComponentTag = hooks.usePrefix('p-link-tile-product');
-    const propsToSync = [aspectRatio, description, heading, href, likeButton, liked, price, rel, target, theme || hooks.useTheme()];
+    const propsToSync = [aspectRatio, description, heading, href, likeButton, liked, price, priceOriginal, rel, target, theme || hooks.useTheme()];
     hooks.useBrowserLayoutEffect(() => {
         const { current } = elementRef;
-        ['aspectRatio', 'description', 'heading', 'href', 'likeButton', 'liked', 'price', 'rel', 'target', 'theme'].forEach((propName, i) => (current[propName] = propsToSync[i]));
+        ['aspectRatio', 'description', 'heading', 'href', 'likeButton', 'liked', 'price', 'priceOriginal', 'rel', 'target', 'theme'].forEach((propName, i) => (current[propName] = propsToSync[i]));
     }, propsToSync);
     const props = {
         ...rest,

package/cjs/lib/components/link-tile.wrapper.cjs

@@ -1,4 +1,4 @@
-'use client';
+"use client";
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');

package/cjs/lib/components/link.wrapper.cjs

@@ -1,4 +1,4 @@
-'use client';
+"use client";
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');

package/cjs/lib/components/marque.wrapper.cjs

@@ -1,4 +1,4 @@
-'use client';
+"use client";
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');

package/cjs/lib/components/modal.wrapper.cjs

@@ -1,4 +1,4 @@
-'use client';
+"use client";
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');
@@ -6,15 +6,15 @@ var react = require('react');
 var hooks = require('../../hooks.cjs');
 var utils = require('../../utils.cjs');
 
-const PModal = react.forwardRef(({ aria, disableBackdropClick = false, disableCloseButton, dismissButton = true, fullscreen = false, heading, onClose, onDismiss, open = false, theme, className, ...rest }, ref) => {
+const PModal = react.forwardRef(({ aria, backdrop = 'blur', disableBackdropClick = false, disableCloseButton, dismissButton = true, fullscreen = false, heading, onClose, onDismiss, open = false, theme, className, ...rest }, ref) => {
     const elementRef = react.useRef();
     hooks.useEventCallback(elementRef, 'close', onClose);
     hooks.useEventCallback(elementRef, 'dismiss', onDismiss);
     const WebComponentTag = hooks.usePrefix('p-modal');
-    const propsToSync = [aria, disableBackdropClick, disableCloseButton, dismissButton, fullscreen, heading, open, theme || hooks.useTheme()];
+    const propsToSync = [aria, backdrop, disableBackdropClick, disableCloseButton, dismissButton, fullscreen, heading, open, theme || hooks.useTheme()];
     hooks.useBrowserLayoutEffect(() => {
         const { current } = elementRef;
-        ['aria', 'disableBackdropClick', 'disableCloseButton', 'dismissButton', 'fullscreen', 'heading', 'open', 'theme'].forEach((propName, i) => (current[propName] = propsToSync[i]));
+        ['aria', 'backdrop', 'disableBackdropClick', 'disableCloseButton', 'dismissButton', 'fullscreen', 'heading', 'open', 'theme'].forEach((propName, i) => (current[propName] = propsToSync[i]));
     }, propsToSync);
     const props = {
         ...rest,

package/cjs/lib/components/model-signature.wrapper.cjs

@@ -1,4 +1,4 @@
-'use client';
+"use client";
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');

package/cjs/lib/components/multi-select-option.wrapper.cjs

@@ -1,4 +1,4 @@
-'use client';
+"use client";
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');

package/cjs/lib/components/multi-select.wrapper.cjs

@@ -1,4 +1,4 @@
-'use client';
+"use client";
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');

package/cjs/lib/components/pagination.wrapper.cjs

@@ -1,4 +1,4 @@
-'use client';
+"use client";
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');

package/cjs/lib/components/pin-code.wrapper.cjs

@@ -1,4 +1,4 @@
-'use client';
+"use client";
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');

package/cjs/lib/components/popover.wrapper.cjs

@@ -1,4 +1,4 @@
-'use client';
+"use client";
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');

package/cjs/lib/components/radio-button-wrapper.wrapper.cjs

@@ -1,4 +1,4 @@
-'use client';
+"use client";
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');

package/cjs/lib/components/scroller.wrapper.cjs

@@ -1,4 +1,4 @@
-'use client';
+"use client";
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');

package/cjs/lib/components/segmented-control-item.wrapper.cjs

@@ -1,4 +1,4 @@
-'use client';
+"use client";
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');

package/cjs/lib/components/segmented-control.wrapper.cjs

@@ -1,4 +1,4 @@
-'use client';
+"use client";
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');

package/cjs/lib/components/select-option.wrapper.cjs

@@ -0,0 +1,25 @@
+"use client";
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
+var hooks = require('../../hooks.cjs');
+var utils = require('../../utils.cjs');
+
+const PSelectOption = react.forwardRef(({ disabled = false, value, className, ...rest }, ref) => {
+    const elementRef = react.useRef();
+    const WebComponentTag = hooks.usePrefix('p-select-option');
+    const propsToSync = [disabled, value];
+    hooks.useBrowserLayoutEffect(() => {
+        const { current } = elementRef;
+        ['disabled', 'value'].forEach((propName, i) => (current[propName] = propsToSync[i]));
+    }, propsToSync);
+    const props = {
+        ...rest,
+        class: hooks.useMergedClass(elementRef, className),
+        ref: utils.syncRef(elementRef, ref)
+    };
+    return jsxRuntime.jsx(WebComponentTag, { ...props });
+});
+
+exports.PSelectOption = PSelectOption;

package/cjs/lib/components/select-wrapper.wrapper.cjs

@@ -1,4 +1,4 @@
-'use client';
+"use client";
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');

package/cjs/lib/components/select.wrapper.cjs

@@ -0,0 +1,26 @@
+"use client";
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
+var hooks = require('../../hooks.cjs');
+var utils = require('../../utils.cjs');
+
+const PSelect = react.forwardRef(({ description = '', disabled = false, dropdownDirection = 'auto', hideLabel = false, label = '', message = '', name, onUpdate, required = false, state = 'none', theme, value, className, ...rest }, ref) => {
+    const elementRef = react.useRef();
+    hooks.useEventCallback(elementRef, 'update', onUpdate);
+    const WebComponentTag = hooks.usePrefix('p-select');
+    const propsToSync = [description, disabled, dropdownDirection, hideLabel, label, message, name, required, state, theme || hooks.useTheme(), value];
+    hooks.useBrowserLayoutEffect(() => {
+        const { current } = elementRef;
+        ['description', 'disabled', 'dropdownDirection', 'hideLabel', 'label', 'message', 'name', 'required', 'state', 'theme', 'value'].forEach((propName, i) => (current[propName] = propsToSync[i]));
+    }, propsToSync);
+    const props = {
+        ...rest,
+        class: hooks.useMergedClass(elementRef, className),
+        ref: utils.syncRef(elementRef, ref)
+    };
+    return jsxRuntime.jsx(WebComponentTag, { ...props });
+});
+
+exports.PSelect = PSelect;

package/cjs/lib/components/spinner.wrapper.cjs

@@ -1,4 +1,4 @@
-'use client';
+"use client";
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');

package/cjs/lib/components/stepper-horizontal-item.wrapper.cjs

@@ -1,4 +1,4 @@
-'use client';
+"use client";
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');

package/cjs/lib/components/stepper-horizontal.wrapper.cjs

@@ -1,4 +1,4 @@
-'use client';
+"use client";
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');

package/cjs/lib/components/switch.wrapper.cjs

@@ -1,4 +1,4 @@
-'use client';
+"use client";
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');

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

@@ -1,4 +1,4 @@
-'use client';
+"use client";
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');

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

@@ -1,4 +1,4 @@
-'use client';
+"use client";
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');

package/cjs/lib/components/table-head-cell.wrapper.cjs

@@ -1,4 +1,4 @@
-'use client';
+"use client";
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');

package/cjs/lib/components/table-head-row.wrapper.cjs

@@ -1,4 +1,4 @@
-'use client';
+"use client";
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');

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

@@ -1,4 +1,4 @@
-'use client';
+"use client";
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');

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

@@ -1,4 +1,4 @@
-'use client';
+"use client";
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');

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

@@ -1,4 +1,4 @@
-'use client';
+"use client";
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');

package/cjs/lib/components/tabs-bar.wrapper.cjs

@@ -1,4 +1,4 @@
-'use client';
+"use client";
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');

package/cjs/lib/components/tabs-item.wrapper.cjs

@@ -1,4 +1,4 @@
-'use client';
+"use client";
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');

package/cjs/lib/components/tabs.wrapper.cjs

@@ -1,4 +1,4 @@
-'use client';
+"use client";
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');

package/cjs/lib/components/tag-dismissible.wrapper.cjs

@@ -1,4 +1,4 @@
-'use client';
+"use client";
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');

package/cjs/lib/components/tag.wrapper.cjs

@@ -1,4 +1,4 @@
-'use client';
+"use client";
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');

package/cjs/lib/components/text-field-wrapper.wrapper.cjs

@@ -1,4 +1,4 @@
-'use client';
+"use client";
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');

package/cjs/lib/components/text-list-item.wrapper.cjs

@@ -1,4 +1,4 @@
-'use client';
+"use client";
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');

package/cjs/lib/components/text-list.wrapper.cjs

@@ -1,4 +1,4 @@
-'use client';
+"use client";
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');

package/cjs/lib/components/text.wrapper.cjs

@@ -1,4 +1,4 @@
-'use client';
+"use client";
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');

package/cjs/lib/components/textarea-wrapper.wrapper.cjs

@@ -1,4 +1,4 @@
-'use client';
+"use client";
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');

package/cjs/lib/components/toast.wrapper.cjs

@@ -1,4 +1,4 @@
-'use client';
+"use client";
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');

package/cjs/lib/components/wordmark.wrapper.cjs

@@ -1,4 +1,4 @@
-'use client';
+"use client";
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');

package/cjs/provider.cjs

@@ -1,4 +1,4 @@
-'use client';
+"use client";
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');

package/cjs/public-api.cjs

@@ -44,6 +44,8 @@ var radioButtonWrapper_wrapper = require('./lib/components/radio-button-wrapper.
 var scroller_wrapper = require('./lib/components/scroller.wrapper.cjs');
 var segmentedControl_wrapper = require('./lib/components/segmented-control.wrapper.cjs');
 var segmentedControlItem_wrapper = require('./lib/components/segmented-control-item.wrapper.cjs');
+var select_wrapper = require('./lib/components/select.wrapper.cjs');
+var selectOption_wrapper = require('./lib/components/select-option.wrapper.cjs');
 var selectWrapper_wrapper = require('./lib/components/select-wrapper.wrapper.cjs');
 var spinner_wrapper = require('./lib/components/spinner.wrapper.cjs');
 var stepperHorizontal_wrapper = require('./lib/components/stepper-horizontal.wrapper.cjs');
@@ -121,6 +123,8 @@ exports.PRadioButtonWrapper = radioButtonWrapper_wrapper.PRadioButtonWrapper;
 exports.PScroller = scroller_wrapper.PScroller;
 exports.PSegmentedControl = segmentedControl_wrapper.PSegmentedControl;
 exports.PSegmentedControlItem = segmentedControlItem_wrapper.PSegmentedControlItem;
+exports.PSelect = select_wrapper.PSelect;
+exports.PSelectOption = selectOption_wrapper.PSelectOption;
 exports.PSelectWrapper = selectWrapper_wrapper.PSelectWrapper;
 exports.PSpinner = spinner_wrapper.PSpinner;
 exports.PStepperHorizontal = stepperHorizontal_wrapper.PStepperHorizontal;