@porsche-design-system/components-react 3.20.0 → 3.21.0

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

@@ -8,7 +8,7 @@ export type PButtonProps = BaseProps & {
     /**
      * Displays as compact version.
      */
-    compact?: boolean;
+    compact?: BreakpointCustomizable<boolean>;
     /**
      * Disables the button. No events will be triggered while disabled state is active.
      */
@@ -58,7 +58,7 @@ export declare const PButton: import("react").ForwardRefExoticComponent<import("
     /**
      * Displays as compact version.
      */
-    compact?: boolean;
+    compact?: BreakpointCustomizable<boolean>;
     /**
      * Disables the button. No events will be triggered while disabled state is active.
      */

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

@@ -1,5 +1,5 @@
 import type { BaseProps } from '../../BaseProps';
-import type { SelectedAriaAttributes, FlyoutAriaAttribute, FlyoutMotionHiddenEndEventDetail, FlyoutMotionVisibleEndEventDetail, FlyoutPosition, Theme } from '../types';
+import type { SelectedAriaAttributes, FlyoutAriaAttribute, FlyoutFooterBehavior, FlyoutMotionHiddenEndEventDetail, FlyoutMotionVisibleEndEventDetail, FlyoutPosition, Theme } from '../types';
 export type PFlyoutProps = BaseProps & {
     /**
      * Add ARIA attributes.
@@ -9,6 +9,10 @@ export type PFlyoutProps = BaseProps & {
      * If true, the flyout will not be closable via backdrop click.
      */
     disableBackdropClick?: boolean;
+    /**
+     * Determines the footer's position behavior. When set to "fixed," the flyout content stretches to fill the full height, keeping the footer permanently at the bottom. When set to "sticky," the footer flows beneath the content and only becomes fixed if the content overflows.
+     */
+    footerBehavior?: FlyoutFooterBehavior;
     /**
      * Emitted when the component requests to be dismissed.
      */
@@ -43,6 +47,10 @@ export declare const PFlyout: import("react").ForwardRefExoticComponent<import("
      * If true, the flyout will not be closable via backdrop click.
      */
     disableBackdropClick?: boolean;
+    /**
+     * Determines the footer's position behavior. When set to "fixed," the flyout content stretches to fill the full height, keeping the footer permanently at the bottom. When set to "sticky," the footer flows beneath the content and only becomes fixed if the content overflows.
+     */
+    footerBehavior?: FlyoutFooterBehavior;
     /**
      * Emitted when the component requests to be dismissed.
      */

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

@@ -8,7 +8,7 @@ export type PLinkProps = BaseProps & {
     /**
      * Displays as compact version.
      */
-    compact?: boolean;
+    compact?: BreakpointCustomizable<boolean>;
     /**
      * Special download attribute to open native browser download dialog if target url points to a downloadable file.
      */
@@ -54,7 +54,7 @@ export declare const PLink: import("react").ForwardRefExoticComponent<import("re
     /**
      * Displays as compact version.
      */
-    compact?: boolean;
+    compact?: BreakpointCustomizable<boolean>;
     /**
      * Special download attribute to open native browser download dialog if target url points to a downloadable file.
      */

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

@@ -13,6 +13,10 @@ export type PMultiSelectProps = BaseProps & {
      * Changes the direction to which the dropdown list appears.
      */
     dropdownDirection?: MultiSelectDropdownDirection;
+    /**
+     * The id of a form element the multi-select should be associated with.
+     */
+    form?: string;
     /**
      * Show or hide label. For better accessibility it is recommended to show the label.
      */
@@ -42,7 +46,7 @@ export type PMultiSelectProps = BaseProps & {
      */
     state?: MultiSelectState;
     /**
-     * Adapts the select color depending on the theme.
+     * Adapts the multi-select color depending on the theme.
      */
     theme?: Theme;
     /**
@@ -63,6 +67,10 @@ export declare const PMultiSelect: import("react").ForwardRefExoticComponent<imp
      * Changes the direction to which the dropdown list appears.
      */
     dropdownDirection?: MultiSelectDropdownDirection;
+    /**
+     * The id of a form element the multi-select should be associated with.
+     */
+    form?: string;
     /**
      * Show or hide label. For better accessibility it is recommended to show the label.
      */
@@ -92,7 +100,7 @@ export declare const PMultiSelect: import("react").ForwardRefExoticComponent<imp
      */
     state?: MultiSelectState;
     /**
-     * Adapts the select color depending on the theme.
+     * Adapts the multi-select color depending on the theme.
      */
     theme?: Theme;
     /**

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

@@ -13,6 +13,10 @@ export type PSelectProps = BaseProps & {
      * Changes the direction to which the dropdown list appears.
      */
     dropdownDirection?: SelectDropdownDirection;
+    /**
+     * The id of a form element the select should be associated with.
+     */
+    form?: string;
     /**
      * Show or hide label. For better accessibility it is recommended to show the label.
      */
@@ -63,6 +67,10 @@ export declare const PSelect: import("react").ForwardRefExoticComponent<import("
      * Changes the direction to which the dropdown list appears.
      */
     dropdownDirection?: SelectDropdownDirection;
+    /**
+     * The id of a form element the select should be associated with.
+     */
+    form?: string;
     /**
      * Show or hide label. For better accessibility it is recommended to show the label.
      */

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

@@ -6,7 +6,10 @@ import { Component } from 'react';
 export declare class DSRCheckbox extends Component<any> {
     host: HTMLElement;
     private internals;
+    private defaultChecked;
     private checkboxInputElement;
     formResetCallback(): void;
+    formDisabledCallback(): void;
+    formStateRestoreCallback(): void;
     render(): JSX.Element;
 }

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

@@ -9,5 +9,11 @@ import { Component } from 'react';
  */
 export declare class DSRModal extends Component<any> {
     host: HTMLElement;
+    private dialog;
+    private scroller;
+    private footer;
+    private hasHeader;
+    private hasFooter;
+    private get hasDismissButton();
     render(): JSX.Element;
 }

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

@@ -12,18 +12,21 @@ export declare class DSRMultiSelect extends Component<any> {
     private isOpen;
     private srHighlightedOptionText;
     private hasFilterResults;
-    private nativeSelect;
+    private internals;
+    private defaultValue;
     private multiSelectOptions;
     private multiSelectOptgroups;
     private inputContainer;
     private inputElement;
     private listElement;
-    private form;
-    private isWithinForm;
     private preventOptionUpdate;
     private isNativePopoverCase;
     private parentTableElement;
     private popoverElement;
     private get currentValue();
+    setFormValue(value: string[]): void;
+    formDisabledCallback(): void;
+    formStateRestoreCallback(): void;
+    formResetCallback(): void;
     render(): JSX.Element;
 }

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

@@ -11,19 +11,21 @@ export declare class DSRSelect extends Component<any> {
     host: HTMLElement;
     private isOpen;
     private srHighlightedOptionText;
-    private nativeSelect;
+    private internals;
+    private defaultValue;
     private comboboxContainer;
     private combobox;
     private listElement;
     private selectOptions;
     private selectOptgroups;
-    private form;
-    private isWithinForm;
     private preventOptionUpdate;
     private searchString;
     private searchTimeout;
     private isNativePopoverCase;
     private parentTableElement;
     private popoverElement;
+    formDisabledCallback(): void;
+    formStateRestoreCallback(): void;
+    formResetCallback(): void;
     render(): JSX.Element;
 }

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

@@ -7,10 +7,13 @@ import { Component } from 'react';
 export declare class DSRTextarea extends Component<any> {
     host: HTMLElement;
     private internals;
+    private defaultValue;
     private textAreaElement;
     private counterElement;
     private hasCounter;
     private setCounterAriaTextDebounced;
     formResetCallback(): void;
+    formDisabledCallback(): void;
+    formStateRestoreCallback(): void;
     render(): JSX.Element;
 }

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

@@ -440,7 +440,8 @@ declare const BUTTON_ARIA_ATTRIBUTES: readonly [
 export type ButtonAriaAttribute = typeof BUTTON_ARIA_ATTRIBUTES[number];
 declare const LINK_ARIA_ATTRIBUTES: readonly [
     "aria-label",
-    "aria-current"
+    "aria-current",
+    "aria-haspopup"
 ];
 export type LinkAriaAttribute = (typeof LINK_ARIA_ATTRIBUTES)[number];
 declare const breakpoints: readonly [
@@ -885,6 +886,11 @@ declare const FLYOUT_POSITIONS: readonly [
     "right"
 ];
 export type FlyoutPosition = (typeof FLYOUT_POSITIONS)[number];
+declare const FLYOUT_FOOTER_BEHAVIOR: readonly [
+    "sticky",
+    "fixed"
+];
+export type FlyoutFooterBehavior = (typeof FLYOUT_FOOTER_BEHAVIOR)[number];
 declare const FLYOUT_ARIA_ATTRIBUTES: readonly [
     "aria-label"
 ];