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

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

@@ -42,6 +42,8 @@ import '../components/radio-button-wrapper.wrapper.mjs';
 import '../components/scroller.wrapper.mjs';
 import '../components/segmented-control.wrapper.mjs';
 import '../components/segmented-control-item.wrapper.mjs';
+import '../components/select.wrapper.mjs';
+import '../components/select-option.wrapper.mjs';
 import '../components/select-wrapper.wrapper.mjs';
 import '../components/spinner.wrapper.mjs';
 import '../components/stepper-horizontal.wrapper.mjs';

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

@@ -42,6 +42,8 @@ import '../components/radio-button-wrapper.wrapper.mjs';
 import '../components/scroller.wrapper.mjs';
 import '../components/segmented-control.wrapper.mjs';
 import '../components/segmented-control-item.wrapper.mjs';
+import '../components/select.wrapper.mjs';
+import '../components/select-option.wrapper.mjs';
 import '../components/select-wrapper.wrapper.mjs';
 import '../components/spinner.wrapper.mjs';
 import '../components/stepper-horizontal.wrapper.mjs';

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

@@ -42,6 +42,8 @@ import '../components/radio-button-wrapper.wrapper.mjs';
 import '../components/scroller.wrapper.mjs';
 import '../components/segmented-control.wrapper.mjs';
 import '../components/segmented-control-item.wrapper.mjs';
+import '../components/select.wrapper.mjs';
+import '../components/select-option.wrapper.mjs';
 import '../components/select-wrapper.wrapper.mjs';
 import '../components/spinner.wrapper.mjs';
 import '../components/stepper-horizontal.wrapper.mjs';

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

@@ -43,6 +43,8 @@ import '../components/radio-button-wrapper.wrapper.mjs';
 import '../components/scroller.wrapper.mjs';
 import '../components/segmented-control.wrapper.mjs';
 import '../components/segmented-control-item.wrapper.mjs';
+import '../components/select.wrapper.mjs';
+import '../components/select-option.wrapper.mjs';
 import '../components/select-wrapper.wrapper.mjs';
 import '../components/spinner.wrapper.mjs';
 import '../components/stepper-horizontal.wrapper.mjs';

package/ssr/esm/components-react/projects/react-ssr-wrapper/src/provider.mjs

@@ -1,4 +1,4 @@
-'use client';
+"use client";
 import { jsx } from 'react/jsx-runtime';
 import { createContext, useEffect } from 'react';
 import { load } from '@porsche-design-system/components-js';

package/ssr/esm/components-react/projects/react-ssr-wrapper/src/public-api.mjs

@@ -42,6 +42,8 @@ export { PRadioButtonWrapper } from './lib/components/radio-button-wrapper.wrapp
 export { PScroller } from './lib/components/scroller.wrapper.mjs';
 export { PSegmentedControl } from './lib/components/segmented-control.wrapper.mjs';
 export { PSegmentedControlItem } from './lib/components/segmented-control-item.wrapper.mjs';
+export { PSelect } from './lib/components/select.wrapper.mjs';
+export { PSelectOption } from './lib/components/select-option.wrapper.mjs';
 export { PSelectWrapper } from './lib/components/select-wrapper.wrapper.mjs';
 export { PSpinner } from './lib/components/spinner.wrapper.mjs';
 export { PStepperHorizontal } from './lib/components/stepper-horizontal.wrapper.mjs';

package/ssr/esm/lib/components/index.d.ts

@@ -41,6 +41,8 @@ export * from './radio-button-wrapper.wrapper';
 export * from './scroller.wrapper';
 export * from './segmented-control.wrapper';
 export * from './segmented-control-item.wrapper';
+export * from './select.wrapper';
+export * from './select-option.wrapper';
 export * from './select-wrapper.wrapper';
 export * from './spinner.wrapper';
 export * from './stepper-horizontal.wrapper';

package/ssr/esm/lib/components/link-tile-product.wrapper.d.ts

@@ -6,11 +6,11 @@ export type PLinkTileProductProps = Omit<HTMLAttributes<{}>, 'color'> & {
      */
     aspectRatio?: BreakpointCustomizable<LinkTileProductAspectRatio>;
     /**
-     * Additional product description
+     * Additional product description.
      */
     description?: string;
     /**
-     * Product heading
+     * Product heading.
      */
     heading: string;
     /**
@@ -30,9 +30,13 @@ export type PLinkTileProductProps = Omit<HTMLAttributes<{}>, 'color'> & {
      */
     onLike?: (event: CustomEvent<LinkTileProductLikeEventDetail>) => void;
     /**
-     * Product price
+     * Product retail price (with or without discount).
      */
     price: string;
+    /**
+     * Shows original price (recommended retail price) with line-through. Needs prop "price" to be defined, otherwise this prop has no effect.
+     */
+    priceOriginal?: string;
     /**
      * Specifies the relationship of the target object to the link object.
      */
@@ -52,11 +56,11 @@ export declare const PLinkTileProduct: import("react").ForwardRefExoticComponent
      */
     aspectRatio?: BreakpointCustomizable<LinkTileProductAspectRatio>;
     /**
-     * Additional product description
+     * Additional product description.
      */
     description?: string;
     /**
-     * Product heading
+     * Product heading.
      */
     heading: string;
     /**
@@ -76,9 +80,13 @@ export declare const PLinkTileProduct: import("react").ForwardRefExoticComponent
      */
     onLike?: (event: CustomEvent<LinkTileProductLikeEventDetail>) => void;
     /**
-     * Product price
+     * Product retail price (with or without discount).
      */
     price: string;
+    /**
+     * Shows original price (recommended retail price) with line-through. Needs prop "price" to be defined, otherwise this prop has no effect.
+     */
+    priceOriginal?: string;
     /**
      * Specifies the relationship of the target object to the link object.
      */

package/ssr/esm/lib/components/modal.wrapper.d.ts

@@ -1,10 +1,14 @@
 import { type HTMLAttributes } from 'react';
-import type { SelectedAriaAttributes, ModalAriaAttribute, BreakpointCustomizable, Theme } from '../types';
+import type { SelectedAriaAttributes, ModalAriaAttribute, ModalBackdrop, BreakpointCustomizable, Theme } from '../types';
 export type PModalProps = Omit<HTMLAttributes<{}>, 'color'> & {
     /**
      * Add ARIA attributes.
      */
     aria?: SelectedAriaAttributes<ModalAriaAttribute>;
+    /**
+     * Defines the backdrop, 'blur' (should be used when Modal is opened by user interaction, e.g. after a click on a button) and 'shading' (should be used when Modal gets opened automatically, e.g. Cookie Consent).
+     */
+    backdrop?: ModalBackdrop;
     /**
      * If true, the modal will not be closable via backdrop click.
      */
@@ -48,6 +52,10 @@ export declare const PModal: import("react").ForwardRefExoticComponent<Omit<HTML
      * Add ARIA attributes.
      */
     aria?: SelectedAriaAttributes<ModalAriaAttribute>;
+    /**
+     * Defines the backdrop, 'blur' (should be used when Modal is opened by user interaction, e.g. after a click on a button) and 'shading' (should be used when Modal gets opened automatically, e.g. Cookie Consent).
+     */
+    backdrop?: ModalBackdrop;
     /**
      * If true, the modal will not be closable via backdrop click.
      */

package/ssr/esm/lib/components/select-option.wrapper.d.ts

@@ -0,0 +1,23 @@
+import { type HTMLAttributes } from 'react';
+export type PSelectOptionProps = Omit<HTMLAttributes<{}>, 'color'> & {
+    /**
+     * Disables the option.
+     */
+    disabled?: boolean;
+    /**
+     * The option value.
+     */
+    value?: string;
+};
+export declare const PSelectOption: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<{}>, "color"> & {
+    /**
+     * Disables the option.
+     */
+    disabled?: boolean;
+    /**
+     * The option value.
+     */
+    value?: string;
+} & {
+    children?: import("react").ReactNode;
+} & import("react").RefAttributes<HTMLElement>>;

package/ssr/esm/lib/components/select.wrapper.d.ts

@@ -0,0 +1,104 @@
+import { type HTMLAttributes } from 'react';
+import type { SelectDropdownDirection, BreakpointCustomizable, SelectUpdateEventDetail, SelectState, Theme } from '../types';
+export type PSelectProps = Omit<HTMLAttributes<{}>, 'color'> & {
+    /**
+     * The description text.
+     */
+    description?: string;
+    /**
+     * Disables the select
+     */
+    disabled?: boolean;
+    /**
+     * Changes the direction to which the dropdown list appears.
+     */
+    dropdownDirection?: SelectDropdownDirection;
+    /**
+     * Show or hide label. For better accessibility it is recommended to show the label.
+     */
+    hideLabel?: BreakpointCustomizable<boolean>;
+    /**
+     * The label text.
+     */
+    label?: string;
+    /**
+     * The message styled depending on validation state.
+     */
+    message?: string;
+    /**
+     * The name of the control.
+     */
+    name: string;
+    /**
+     * Emitted when the selection is changed.
+     */
+    onUpdate?: (event: CustomEvent<SelectUpdateEventDetail>) => void;
+    /**
+     * A Boolean attribute indicating that an option with a non-empty string value must be selected.
+     */
+    required?: boolean;
+    /**
+     * The validation state.
+     */
+    state?: SelectState;
+    /**
+     * Adapts the select color depending on the theme.
+     */
+    theme?: Theme;
+    /**
+     * The selected value.
+     */
+    value?: string;
+};
+export declare const PSelect: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<{}>, "color"> & {
+    /**
+     * The description text.
+     */
+    description?: string;
+    /**
+     * Disables the select
+     */
+    disabled?: boolean;
+    /**
+     * Changes the direction to which the dropdown list appears.
+     */
+    dropdownDirection?: SelectDropdownDirection;
+    /**
+     * Show or hide label. For better accessibility it is recommended to show the label.
+     */
+    hideLabel?: BreakpointCustomizable<boolean>;
+    /**
+     * The label text.
+     */
+    label?: string;
+    /**
+     * The message styled depending on validation state.
+     */
+    message?: string;
+    /**
+     * The name of the control.
+     */
+    name: string;
+    /**
+     * Emitted when the selection is changed.
+     */
+    onUpdate?: (event: CustomEvent<SelectUpdateEventDetail>) => void;
+    /**
+     * A Boolean attribute indicating that an option with a non-empty string value must be selected.
+     */
+    required?: boolean;
+    /**
+     * The validation state.
+     */
+    state?: SelectState;
+    /**
+     * Adapts the select color depending on the theme.
+     */
+    theme?: Theme;
+    /**
+     * The selected value.
+     */
+    value?: string;
+} & {
+    children?: import("react").ReactNode;
+} & import("react").RefAttributes<HTMLElement>>;

package/ssr/esm/lib/dsr-components/button-pure.d.ts

@@ -1,7 +1,6 @@
 import { Component } from 'react';
 export declare class DSRButtonPure extends Component<any> {
     host: HTMLElement;
-    private initialLoading;
     private get isDisabledOrLoading();
     render(): JSX.Element;
 }

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

@@ -1,6 +1,5 @@
 import { Component } from 'react';
 export declare class DSRButton extends Component<any> {
     host: HTMLElement;
-    private initialLoading;
     render(): JSX.Element;
 }

package/ssr/esm/lib/dsr-components/checkbox-wrapper.d.ts

@@ -2,6 +2,5 @@ import { Component } from 'react';
 export declare class DSRCheckboxWrapper extends Component<any> {
     host: HTMLElement;
     private input;
-    private initialLoading;
     render(): JSX.Element;
 }

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

@@ -1,8 +1,8 @@
 import { Component } from 'react';
 export declare class DSRFlyout extends Component<any> {
     host: HTMLElement;
-    private focusedElBeforeOpen;
     private dialog;
+    private wrapper;
     private dismissBtn;
     private header;
     private footer;

package/ssr/esm/lib/dsr-components/pin-code.d.ts

@@ -5,6 +5,5 @@ export declare class DSRPinCode extends Component<any> {
     private isWithinForm;
     private hiddenInput;
     private inputElements;
-    private initialLoading;
     render(): JSX.Element;
 }

package/ssr/esm/lib/dsr-components/radio-button-wrapper.d.ts

@@ -2,6 +2,5 @@ import { Component } from 'react';
 export declare class DSRRadioButtonWrapper extends Component<any> {
     host: HTMLElement;
     private input;
-    private initialLoading;
     render(): JSX.Element;
 }

package/ssr/esm/lib/dsr-components/select-option.d.ts

@@ -0,0 +1,6 @@
+import { Component } from 'react';
+import type { SelectOptionInternalHTMLProps } from '@porsche-design-system/components/dist/utils';
+export declare class DSRSelectOption extends Component<any> {
+    host: HTMLElement & SelectOptionInternalHTMLProps;
+    render(): JSX.Element;
+}

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

@@ -0,0 +1,17 @@
+import { Component } from 'react';
+export declare class DSRSelect extends Component<any> {
+    host: HTMLElement;
+    private isOpen;
+    private srHighlightedOptionText;
+    private nativeSelect;
+    private comboboxContainer;
+    private combobox;
+    private listElement;
+    private selectOptions;
+    private form;
+    private isWithinForm;
+    private preventOptionUpdate;
+    private searchString;
+    private searchTimeout;
+    render(): JSX.Element;
+}

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

@@ -1,6 +1,5 @@
 import { Component } from 'react';
 export declare class DSRSwitch extends Component<any> {
     host: HTMLElement;
-    private initialLoading;
     render(): JSX.Element;
 }

package/ssr/esm/lib/types.d.ts

@@ -209,7 +209,7 @@ export type AriaAttributes = {
     "aria-valuenow"?: number | undefined;
     /** Defines the human readable text alternative of aria-valuenow for a range widget. */
     "aria-valuetext"?: string | undefined;
-    /** All the WAI-ARIA 1.1 role attribute values from https://www.w3.org/TR/wai-aria-1.1/#role_definitions */
+    /** All the WAI-ARIA 1.1 role attribute values from https://w3.org/TR/wai-aria-1.1/#role_definitions */
     role?: AriaRole;
 };
 export type AriaRole = "alert" | "alertdialog" | "application" | "article" | "banner" | "button" | "cell" | "checkbox" | "columnheader" | "combobox" | "complementary" | "contentinfo" | "definition" | "dialog" | "directory" | "document" | "feed" | "figure" | "form" | "grid" | "gridcell" | "group" | "heading" | "img" | "link" | "list" | "listbox" | "listitem" | "log" | "main" | "marquee" | "math" | "menu" | "menubar" | "menuitem" | "menuitemcheckbox" | "menuitemradio" | "navigation" | "none" | "note" | "option" | "presentation" | "progressbar" | "radio" | "radiogroup" | "region" | "row" | "rowgroup" | "rowheader" | "scrollbar" | "search" | "searchbox" | "separator" | "slider" | "spinbutton" | "status" | "switch" | "tab" | "table" | "tablist" | "tabpanel" | "term" | "textbox" | "timer" | "toolbar" | "tooltip" | "tree" | "treegrid" | "treeitem";
@@ -517,7 +517,7 @@ declare const SELECT_DROPDOWN_DIRECTIONS: readonly [
     "up",
     "auto"
 ];
-export type SelectDropdownDirection = (typeof SELECT_DROPDOWN_DIRECTIONS)[number];
+export type SelectComponentsDropdownDirection = (typeof SELECT_DROPDOWN_DIRECTIONS)[number];
 declare const HEADING_SIZES: readonly [
     "small",
     "medium",
@@ -1046,10 +1046,16 @@ declare const MARQUE_SIZES: readonly [
     "medium"
 ];
 export type MarqueSize = typeof MARQUE_SIZES[number];
+declare const BACKDROPS: readonly [
+    "blur",
+    "shading"
+];
+export type Backdrop = (typeof BACKDROPS)[number];
 declare const MODAL_ARIA_ATTRIBUTES: readonly [
     "aria-label"
 ];
 export type ModalAriaAttribute = (typeof MODAL_ARIA_ATTRIBUTES)[number];
+export type ModalBackdrop = Backdrop;
 declare const MODEL_SIGNATURE_SIZES: readonly [
     "small",
     "inherit"
@@ -1065,7 +1071,7 @@ declare const MODEL_SIGNATURE_COLORS: readonly [
 ];
 export type ModelSignatureColor = (typeof MODEL_SIGNATURE_COLORS)[number];
 export type MultiSelectState = FormState;
-export type MultiSelectDropdownDirection = SelectDropdownDirection;
+export type MultiSelectDropdownDirection = SelectComponentsDropdownDirection;
 /** @deprecated */
 export type MultiSelectUpdateEvent = {
     name: string;
@@ -1131,6 +1137,12 @@ export type SegmentedControlUpdateEventDetail = SegmentedControlUpdateEvent;
 declare const SEGMENTED_CONTROL_COLUMNS: (string | number)[];
 export type SegmentedControlColumns = (typeof SEGMENTED_CONTROL_COLUMNS)[number];
 export type SegmentedControlItemIcon = LinkButtonIconName;
+export type SelectState = FormState;
+export type SelectDropdownDirection = SelectComponentsDropdownDirection;
+export type SelectUpdateEventDetail = {
+    name: string;
+    value: string;
+};
 declare const DROPDOWN_DIRECTIONS: readonly [
     "down",
     "up",