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

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

@@ -10,7 +10,7 @@ export type PCheckboxWrapperProps = Omit<HTMLAttributes<{}>, 'color'> & {
      */
     label?: string;
     /**
-     * Disables the checkbox and shows a loading indicator.
+     * __Experimental__: Disables the checkbox and shows a loading indicator.
      */
     loading?: boolean;
     /**
@@ -36,7 +36,7 @@ export declare const PCheckboxWrapper: import("react").ForwardRefExoticComponent
      */
     label?: string;
     /**
-     * Disables the checkbox and shows a loading indicator.
+     * __Experimental__: Disables the checkbox and shows a loading indicator.
      */
     loading?: boolean;
     /**

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

@@ -0,0 +1,48 @@
+import { HTMLAttributes } from 'react';
+import type { SelectedAriaAttributes, FlyoutAriaAttribute, FlyoutPosition, Theme } from '../types';
+export type PFlyoutProps = Omit<HTMLAttributes<{}>, 'color'> & {
+    /**
+     * Add ARIA attributes.
+     */
+    aria?: SelectedAriaAttributes<FlyoutAriaAttribute>;
+    /**
+     * Emitted when the component requests to be dismissed.
+     */
+    onDismiss?: (event: CustomEvent<void>) => void;
+    /**
+     * If true, the flyout is open.
+     */
+    open: boolean;
+    /**
+     * The position of the flyout
+     */
+    position?: FlyoutPosition;
+    /**
+     * Adapts the flyout color depending on the theme.
+     */
+    theme?: Theme;
+};
+export declare const PFlyout: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<{}>, "color"> & {
+    /**
+     * Add ARIA attributes.
+     */
+    aria?: SelectedAriaAttributes<FlyoutAriaAttribute>;
+    /**
+     * Emitted when the component requests to be dismissed.
+     */
+    onDismiss?: (event: CustomEvent<void>) => void;
+    /**
+     * If true, the flyout is open.
+     */
+    open: boolean;
+    /**
+     * The position of the flyout
+     */
+    position?: FlyoutPosition;
+    /**
+     * Adapts the flyout color depending on the theme.
+     */
+    theme?: Theme;
+} & {
+    children?: import("react").ReactNode;
+} & import("react").RefAttributes<HTMLElement>>;

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

@@ -14,6 +14,7 @@ export * from './fieldset.wrapper';
 export * from './fieldset-wrapper.wrapper';
 export * from './flex.wrapper';
 export * from './flex-item.wrapper';
+export * from './flyout.wrapper';
 export * from './grid.wrapper';
 export * from './grid-item.wrapper';
 export * from './heading.wrapper';

package/ssr/lib/components/text-field-wrapper.wrapper.d.ts

@@ -37,6 +37,10 @@ export type PTextFieldWrapperProps = Omit<HTMLAttributes<{}>, 'color'> & {
      * Show or hide max character count.
      */
     showCounter?: boolean;
+    /**
+     * __Experimental__: Show or hide password toggle for `input type="password"`.
+     */
+    showPasswordToggle?: boolean;
     /**
      * The validation state.
      */
@@ -91,6 +95,10 @@ export declare const PTextFieldWrapper: import("react").ForwardRefExoticComponen
      * Show or hide max character count.
      */
     showCounter?: boolean;
+    /**
+     * __Experimental__: Show or hide password toggle for `input type="password"`.
+     */
+    showPasswordToggle?: boolean;
     /**
      * The validation state.
      */

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

@@ -0,0 +1,14 @@
+import { Component } from 'react';
+export declare class DSRFlyout extends Component<any> {
+    host: HTMLElement;
+    private focusedElBeforeOpen;
+    private dialog;
+    private dismissBtn;
+    private header;
+    private footer;
+    private subFooter;
+    private hasHeader;
+    private hasFooter;
+    private hasSubFooter;
+    render(): JSX.Element;
+}

package/ssr/lib/types.d.ts

@@ -45,6 +45,7 @@ declare const ICON_NAMES: readonly [
     "co2-emission",
     "compare",
     "configurate",
+    "copy",
     "country-road",
     "cubic-capacity",
     "delete",
@@ -58,12 +59,15 @@ declare const ICON_NAMES: readonly [
     "exclamation",
     "external",
     "filter",
+    "fingerprint",
     "flash",
     "fuel-station",
     "garage",
     "gift",
     "globe",
     "grid",
+    "heart",
+    "heart-filled",
     "highway",
     "home",
     "horn",
@@ -143,6 +147,8 @@ declare const ICON_NAMES: readonly [
     "refresh",
     "replay",
     "reset",
+    "roof-closed",
+    "roof-open",
     "route",
     "rss",
     "save",
@@ -168,6 +174,7 @@ declare const ICON_NAMES: readonly [
     "switch",
     "tablet",
     "tachometer",
+    "tire",
     "truck",
     "upload",
     "user",
@@ -750,6 +757,15 @@ declare const FLEX_ITEM_FLEXS: readonly [
     "equal"
 ];
 export type FlexItemFlex = typeof FLEX_ITEM_FLEXS[number];
+declare const FLYOUT_POSITIONS: readonly [
+    "left",
+    "right"
+];
+export type FlyoutPosition = (typeof FLYOUT_POSITIONS)[number];
+declare const FLYOUT_ARIA_ATTRIBUTES: readonly [
+    "aria-label"
+];
+export type FlyoutAriaAttribute = (typeof FLYOUT_ARIA_ATTRIBUTES)[number];
 declare const GRID_DIRECTIONS: readonly [
     "row",
     "row-reverse",
@@ -1003,7 +1019,7 @@ declare const DROPDOWN_DIRECTIONS: readonly [
     "up",
     "auto"
 ];
-export type SelectWrapperDropdownDirection = typeof DROPDOWN_DIRECTIONS[number];
+export type SelectWrapperDropdownDirection = (typeof DROPDOWN_DIRECTIONS)[number];
 export type SelectWrapperState = FormState;
 declare const SPINNER_SIZES: readonly [
     "small",