npm - @porsche-design-system/components-react - Versions diffs - 3.13.0-rc.0 → 3.13.0-rc.2 - Mend

@porsche-design-system/components-react 3.13.0-rc.0 → 3.13.0-rc.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (420) hide show

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

@@ -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 ADDED Viewed

@@ -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 ADDED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 ADDED Viewed

@@ -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 ADDED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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";
@@ -235,6 +235,7 @@ declare const ICON_NAMES: readonly [
     "arrow-up",
     "augmented-reality",
     "battery-empty",
+    "battery-empty-co2",
     "battery-full",
     "bell",
     "bookmark",
@@ -258,6 +259,7 @@ declare const ICON_NAMES: readonly [
     "clock",
     "close",
     "closed-caption",
+    "co2-class",
     "co2-emission",
     "compare",
     "configurate",
@@ -517,7 +519,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 +1048,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 +1073,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 +1139,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",