@porsche-design-system/components-react 2.17.0 → 2.18.0-rc.0

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

@@ -0,0 +1,56 @@
+import { HTMLAttributes } from 'react';
+import type { TextAlign, TextColor, HeadlineTag, Theme, HeadlineVariant } from '../types';
+export declare type PHeadlineProps = Omit<HTMLAttributes<{}>, 'color'> & {
+    /**
+     * Text alignment of the component.
+     */
+    align?: TextAlign;
+    /**
+     * Basic text color variations depending on theme property.
+     */
+    color?: Extract<TextColor, "default" | "inherit">;
+    /**
+     * Adds an ellipsis to a single line of text if it overflows.
+     */
+    ellipsis?: boolean;
+    /**
+     * Sets a custom HTML tag depending of the usage of the headline component.
+     */
+    tag?: HeadlineTag;
+    /**
+     * Adapts the text color depending on the theme. Has no effect when "inherit" is set as color prop.
+     */
+    theme?: Theme;
+    /**
+     * Predefined style of the headline.
+     */
+    variant?: HeadlineVariant;
+};
+export declare const PHeadline: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<{}>, "color"> & {
+    /**
+     * Text alignment of the component.
+     */
+    align?: TextAlign;
+    /**
+     * Basic text color variations depending on theme property.
+     */
+    color?: Extract<TextColor, "default" | "inherit">;
+    /**
+     * Adds an ellipsis to a single line of text if it overflows.
+     */
+    ellipsis?: boolean;
+    /**
+     * Sets a custom HTML tag depending of the usage of the headline component.
+     */
+    tag?: HeadlineTag;
+    /**
+     * Adapts the text color depending on the theme. Has no effect when "inherit" is set as color prop.
+     */
+    theme?: Theme;
+    /**
+     * Predefined style of the headline.
+     */
+    variant?: HeadlineVariant;
+} & {
+    children?: import("react").ReactNode;
+} & import("react").RefAttributes<HTMLElement>>;

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

@@ -0,0 +1,62 @@
+import { HTMLAttributes } from 'react';
+import type { SelectedAriaAttributes, IconAriaAttributes, TextColor, IconName, IconSize, ThemeExtendedElectricDark } from '../types';
+export declare type PIconProps = Omit<HTMLAttributes<{}>, 'color'> & {
+    /**
+     * Add ARIA attributes.
+     */
+    aria?: SelectedAriaAttributes<IconAriaAttributes>;
+    /**
+     * Basic color variations depending on theme property.
+     */
+    color?: TextColor;
+    /**
+     * If enabled, icon will be loaded lazily when it's visible in the viewport.
+     */
+    lazy?: boolean;
+    /**
+     * Specifies which icon to use.
+     */
+    name?: IconName;
+    /**
+     * The size of the icon.
+     */
+    size?: IconSize;
+    /**
+     * Specifies a whole icon path which can be used for custom icons.
+     */
+    source?: string;
+    /**
+     * Adapts the text color depending on the theme. Has no effect when "inherit" is set as color prop.
+     */
+    theme?: ThemeExtendedElectricDark;
+};
+export declare const PIcon: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<{}>, "color"> & {
+    /**
+     * Add ARIA attributes.
+     */
+    aria?: SelectedAriaAttributes<IconAriaAttributes>;
+    /**
+     * Basic color variations depending on theme property.
+     */
+    color?: TextColor;
+    /**
+     * If enabled, icon will be loaded lazily when it's visible in the viewport.
+     */
+    lazy?: boolean;
+    /**
+     * Specifies which icon to use.
+     */
+    name?: IconName;
+    /**
+     * The size of the icon.
+     */
+    size?: IconSize;
+    /**
+     * Specifies a whole icon path which can be used for custom icons.
+     */
+    source?: string;
+    /**
+     * Adapts the text color depending on the theme. Has no effect when "inherit" is set as color prop.
+     */
+    theme?: ThemeExtendedElectricDark;
+} & import("react").RefAttributes<HTMLElement>>;

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

@@ -0,0 +1,52 @@
+export * from './accordion.wrapper';
+export * from './banner.wrapper';
+export * from './button.wrapper';
+export * from './button-group.wrapper';
+export * from './button-pure.wrapper';
+export * from './carousel.wrapper';
+export * from './checkbox-wrapper.wrapper';
+export * from './content-wrapper.wrapper';
+export * from './divider.wrapper';
+export * from './fieldset-wrapper.wrapper';
+export * from './flex.wrapper';
+export * from './flex-item.wrapper';
+export * from './grid.wrapper';
+export * from './grid-item.wrapper';
+export * from './headline.wrapper';
+export * from './icon.wrapper';
+export * from './inline-notification.wrapper';
+export * from './link.wrapper';
+export * from './link-pure.wrapper';
+export * from './link-social.wrapper';
+export * from './link-tile.wrapper';
+export * from './marque.wrapper';
+export * from './modal.wrapper';
+export * from './pagination.wrapper';
+export * from './popover.wrapper';
+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.wrapper';
+export * from './spinner.wrapper';
+export * from './stepper-horizontal.wrapper';
+export * from './stepper-horizontal-item.wrapper';
+export * from './switch.wrapper';
+export * from './table.wrapper';
+export * from './table-body.wrapper';
+export * from './table-cell.wrapper';
+export * from './table-head.wrapper';
+export * from './table-head-cell.wrapper';
+export * from './table-head-row.wrapper';
+export * from './table-row.wrapper';
+export * from './tabs.wrapper';
+export * from './tabs-bar.wrapper';
+export * from './tabs-item.wrapper';
+export * from './tag.wrapper';
+export * from './tag-dismissible.wrapper';
+export * from './text.wrapper';
+export * from './text-field-wrapper.wrapper';
+export * from './text-list.wrapper';
+export * from './text-list-item.wrapper';
+export * from './textarea-wrapper.wrapper';
+export * from './toast.wrapper';

package/ssr/lib/components/inline-notification.wrapper.d.ts

@@ -0,0 +1,88 @@
+import { HTMLAttributes } from 'react';
+import type { IconName, InlineNotificationState, Theme } from '../types';
+export declare type PInlineNotificationProps = Omit<HTMLAttributes<{}>, 'color'> & {
+    /**
+     * Action icon of the inline-notification.
+     */
+    actionIcon?: IconName;
+    /**
+     * Action label of the inline-notification.
+     */
+    actionLabel?: string;
+    /**
+     * Disables the action button and shows a loading indicator. No events will be triggered while loading state is active.
+     */
+    actionLoading?: boolean;
+    /**
+     * Description of the inline-notification.
+     */
+    description?: string;
+    /**
+     * Heading of the inline-notification.
+     */
+    heading?: string;
+    /**
+     * Emitted when the action button is clicked.
+     */
+    onAction?: (event: CustomEvent<void>) => void;
+    /**
+     * Emitted when the close button is clicked.
+     */
+    onDismiss?: (event: CustomEvent<void>) => void;
+    /**
+     * Defines if the inline-notification can be closed/removed by the user.
+     */
+    persistent?: boolean;
+    /**
+     * State of the inline-notification.
+     */
+    state?: InlineNotificationState;
+    /**
+     * Adapts the inline-notification color depending on the theme.
+     */
+    theme?: Theme;
+};
+export declare const PInlineNotification: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<{}>, "color"> & {
+    /**
+     * Action icon of the inline-notification.
+     */
+    actionIcon?: IconName;
+    /**
+     * Action label of the inline-notification.
+     */
+    actionLabel?: string;
+    /**
+     * Disables the action button and shows a loading indicator. No events will be triggered while loading state is active.
+     */
+    actionLoading?: boolean;
+    /**
+     * Description of the inline-notification.
+     */
+    description?: string;
+    /**
+     * Heading of the inline-notification.
+     */
+    heading?: string;
+    /**
+     * Emitted when the action button is clicked.
+     */
+    onAction?: (event: CustomEvent<void>) => void;
+    /**
+     * Emitted when the close button is clicked.
+     */
+    onDismiss?: (event: CustomEvent<void>) => void;
+    /**
+     * Defines if the inline-notification can be closed/removed by the user.
+     */
+    persistent?: boolean;
+    /**
+     * State of the inline-notification.
+     */
+    state?: InlineNotificationState;
+    /**
+     * Adapts the inline-notification color depending on the theme.
+     */
+    theme?: Theme;
+} & {
+    children?: import("react").ReactNode;
+} & import("react").RefAttributes<HTMLElement>>;

package/ssr/lib/components/link-pure.wrapper.d.ts

@@ -0,0 +1,120 @@
+import { HTMLAttributes } from 'react';
+import type { AlignLabel, SelectedAriaAttributes, LinkAriaAttributes, BreakpointCustomizable, LinkButtonPureIconName, TextSize, LinkTarget, ThemeExtendedElectricDark, TextWeight } from '../types';
+export declare type PLinkPureProps = Omit<HTMLAttributes<{}>, 'color'> & {
+    /**
+     * Display link in active state.
+     */
+    active?: boolean;
+    /**
+     * Aligns the label.
+     */
+    alignLabel?: AlignLabel;
+    /**
+     * Add ARIA attributes.
+     */
+    aria?: SelectedAriaAttributes<LinkAriaAttributes>;
+    /**
+     * Special download attribute to open native browser download dialog if target url points to a downloadable file.
+     */
+    download?: string;
+    /**
+     * Show or hide label. For better accessibility it is recommended to show the label.
+     */
+    hideLabel?: BreakpointCustomizable<boolean>;
+    /**
+     * When providing an url then the component will be rendered as `<a>`.
+     */
+    href?: string;
+    /**
+     * The icon shown. By choosing 'none', no icon is displayed
+     */
+    icon?: LinkButtonPureIconName;
+    /**
+     * A URL path to a custom icon.
+     */
+    iconSource?: string;
+    /**
+     * Specifies the relationship of the target object to the link object.
+     */
+    rel?: string;
+    /**
+     * Size of the link.
+     */
+    size?: BreakpointCustomizable<TextSize>;
+    /**
+     * Stretches the area between icon and label to max available space.
+     */
+    stretch?: BreakpointCustomizable<boolean>;
+    /**
+     * Target attribute where the link should be opened.
+     */
+    target?: LinkTarget;
+    /**
+     * Adapts the button color depending on the theme.
+     */
+    theme?: ThemeExtendedElectricDark;
+    /**
+     * The weight of the text (only has effect with visible label).
+     */
+    weight?: TextWeight;
+};
+export declare const PLinkPure: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<{}>, "color"> & {
+    /**
+     * Display link in active state.
+     */
+    active?: boolean;
+    /**
+     * Aligns the label.
+     */
+    alignLabel?: AlignLabel;
+    /**
+     * Add ARIA attributes.
+     */
+    aria?: SelectedAriaAttributes<LinkAriaAttributes>;
+    /**
+     * Special download attribute to open native browser download dialog if target url points to a downloadable file.
+     */
+    download?: string;
+    /**
+     * Show or hide label. For better accessibility it is recommended to show the label.
+     */
+    hideLabel?: BreakpointCustomizable<boolean>;
+    /**
+     * When providing an url then the component will be rendered as `<a>`.
+     */
+    href?: string;
+    /**
+     * The icon shown. By choosing 'none', no icon is displayed
+     */
+    icon?: LinkButtonPureIconName;
+    /**
+     * A URL path to a custom icon.
+     */
+    iconSource?: string;
+    /**
+     * Specifies the relationship of the target object to the link object.
+     */
+    rel?: string;
+    /**
+     * Size of the link.
+     */
+    size?: BreakpointCustomizable<TextSize>;
+    /**
+     * Stretches the area between icon and label to max available space.
+     */
+    stretch?: BreakpointCustomizable<boolean>;
+    /**
+     * Target attribute where the link should be opened.
+     */
+    target?: LinkTarget;
+    /**
+     * Adapts the button color depending on the theme.
+     */
+    theme?: ThemeExtendedElectricDark;
+    /**
+     * The weight of the text (only has effect with visible label).
+     */
+    weight?: TextWeight;
+} & {
+    children?: import("react").ReactNode;
+} & import("react").RefAttributes<HTMLElement>>;

package/ssr/lib/components/link-social.wrapper.d.ts

@@ -0,0 +1,64 @@
+import { HTMLAttributes } from 'react';
+import type { BreakpointCustomizable, SocialIconName, LinkTarget, Theme } from '../types';
+export declare type PLinkSocialProps = Omit<HTMLAttributes<{}>, 'color'> & {
+    /**
+     * Show or hide label.
+     */
+    hideLabel?: BreakpointCustomizable<boolean>;
+    /**
+     * When providing an url then the component will be rendered as `<a>`.
+     */
+    href?: string;
+    /**
+     * The icon shown.
+     */
+    icon?: SocialIconName;
+    /**
+     * A URL path to a custom icon.
+     */
+    iconSource?: string;
+    /**
+     * Specifies the relationship of the target object to the link object.
+     */
+    rel?: string;
+    /**
+     * Target attribute where the link should be opened.
+     */
+    target?: LinkTarget;
+    /**
+     * Adapts the link color when used on dark background.
+     */
+    theme?: Theme;
+};
+export declare const PLinkSocial: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<{}>, "color"> & {
+    /**
+     * Show or hide label.
+     */
+    hideLabel?: BreakpointCustomizable<boolean>;
+    /**
+     * When providing an url then the component will be rendered as `<a>`.
+     */
+    href?: string;
+    /**
+     * The icon shown.
+     */
+    icon?: SocialIconName;
+    /**
+     * A URL path to a custom icon.
+     */
+    iconSource?: string;
+    /**
+     * Specifies the relationship of the target object to the link object.
+     */
+    rel?: string;
+    /**
+     * Target attribute where the link should be opened.
+     */
+    target?: LinkTarget;
+    /**
+     * Adapts the link color when used on dark background.
+     */
+    theme?: Theme;
+} & {
+    children?: import("react").ReactNode;
+} & import("react").RefAttributes<HTMLElement>>;

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

@@ -0,0 +1,112 @@
+import { HTMLAttributes } from 'react';
+import type { LinkTileAlign, SelectedAriaAttributes, LinkAriaAttributes, BreakpointCustomizable, LinkTileAspectRatio, LinkTileSize, LinkTarget, LinkTileWeight } from '../types';
+export declare type PLinkTileProps = Omit<HTMLAttributes<{}>, 'color'> & {
+    /**
+     * Alignment of link and description.
+     */
+    align?: LinkTileAlign;
+    /**
+     * Add ARIA attributes.
+     */
+    aria?: SelectedAriaAttributes<LinkAriaAttributes>;
+    /**
+     * Aspect ratio of the link-tile.
+     */
+    aspectRatio?: BreakpointCustomizable<LinkTileAspectRatio>;
+    /**
+     * Displays the tile-link as compact version with description and link icon only.
+     */
+    compact?: BreakpointCustomizable<boolean>;
+    /**
+     * Description text.
+     */
+    description: string;
+    /**
+     * Special download attribute to open native browser download dialog if target url points to a downloadable file.
+     */
+    download?: string;
+    /**
+     * Show gradient.
+     */
+    gradient?: boolean;
+    /**
+     * href of the `<a>`.
+     */
+    href: string;
+    /**
+     * Label of the <a />.
+     */
+    label: string;
+    /**
+     * Specifies the relationship of the target object to the link object.
+     */
+    rel?: string;
+    /**
+     * Font size of the description.
+     */
+    size?: BreakpointCustomizable<LinkTileSize>;
+    /**
+     * Target attribute where the link should be opened.
+     */
+    target?: LinkTarget;
+    /**
+     * Font weight of the description.
+     */
+    weight?: BreakpointCustomizable<LinkTileWeight>;
+};
+export declare const PLinkTile: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<{}>, "color"> & {
+    /**
+     * Alignment of link and description.
+     */
+    align?: LinkTileAlign;
+    /**
+     * Add ARIA attributes.
+     */
+    aria?: SelectedAriaAttributes<LinkAriaAttributes>;
+    /**
+     * Aspect ratio of the link-tile.
+     */
+    aspectRatio?: BreakpointCustomizable<LinkTileAspectRatio>;
+    /**
+     * Displays the tile-link as compact version with description and link icon only.
+     */
+    compact?: BreakpointCustomizable<boolean>;
+    /**
+     * Description text.
+     */
+    description: string;
+    /**
+     * Special download attribute to open native browser download dialog if target url points to a downloadable file.
+     */
+    download?: string;
+    /**
+     * Show gradient.
+     */
+    gradient?: boolean;
+    /**
+     * href of the `<a>`.
+     */
+    href: string;
+    /**
+     * Label of the <a />.
+     */
+    label: string;
+    /**
+     * Specifies the relationship of the target object to the link object.
+     */
+    rel?: string;
+    /**
+     * Font size of the description.
+     */
+    size?: BreakpointCustomizable<LinkTileSize>;
+    /**
+     * Target attribute where the link should be opened.
+     */
+    target?: LinkTarget;
+    /**
+     * Font weight of the description.
+     */
+    weight?: BreakpointCustomizable<LinkTileWeight>;
+} & {
+    children?: import("react").ReactNode;
+} & import("react").RefAttributes<HTMLElement>>;

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

@@ -0,0 +1,88 @@
+import { HTMLAttributes } from 'react';
+import type { SelectedAriaAttributes, LinkAriaAttributes, BreakpointCustomizable, IconName, LinkTarget, ThemeExtendedElectric, LinkVariant } from '../types';
+export declare type PLinkProps = Omit<HTMLAttributes<{}>, 'color'> & {
+    /**
+     * Add ARIA attributes.
+     */
+    aria?: SelectedAriaAttributes<LinkAriaAttributes>;
+    /**
+     * Special download attribute to open native browser download dialog if target url points to a downloadable file.
+     */
+    download?: string;
+    /**
+     * Show or hide label. For better accessibility it is recommended to show the label.
+     */
+    hideLabel?: BreakpointCustomizable<boolean>;
+    /**
+     * When providing an url then the component will be rendered as `<a>`.
+     */
+    href?: string;
+    /**
+     * The icon shown.
+     */
+    icon?: IconName;
+    /**
+     * A URL path to a custom icon.
+     */
+    iconSource?: string;
+    /**
+     * Specifies the relationship of the target object to the link object.
+     */
+    rel?: string;
+    /**
+     * Target attribute where the link should be opened.
+     */
+    target?: LinkTarget;
+    /**
+     * Adapts the link color when used on dark background.
+     */
+    theme?: ThemeExtendedElectric;
+    /**
+     * The style variant of the link.
+     */
+    variant?: LinkVariant;
+};
+export declare const PLink: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<{}>, "color"> & {
+    /**
+     * Add ARIA attributes.
+     */
+    aria?: SelectedAriaAttributes<LinkAriaAttributes>;
+    /**
+     * Special download attribute to open native browser download dialog if target url points to a downloadable file.
+     */
+    download?: string;
+    /**
+     * Show or hide label. For better accessibility it is recommended to show the label.
+     */
+    hideLabel?: BreakpointCustomizable<boolean>;
+    /**
+     * When providing an url then the component will be rendered as `<a>`.
+     */
+    href?: string;
+    /**
+     * The icon shown.
+     */
+    icon?: IconName;
+    /**
+     * A URL path to a custom icon.
+     */
+    iconSource?: string;
+    /**
+     * Specifies the relationship of the target object to the link object.
+     */
+    rel?: string;
+    /**
+     * Target attribute where the link should be opened.
+     */
+    target?: LinkTarget;
+    /**
+     * Adapts the link color when used on dark background.
+     */
+    theme?: ThemeExtendedElectric;
+    /**
+     * The style variant of the link.
+     */
+    variant?: LinkVariant;
+} & {
+    children?: import("react").ReactNode;
+} & import("react").RefAttributes<HTMLElement>>;

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

@@ -0,0 +1,46 @@
+import { HTMLAttributes } from 'react';
+import type { SelectedAriaAttributes, MarqueAriaAttributes, MarqueSize, LinkTarget } from '../types';
+export declare type PMarqueProps = Omit<HTMLAttributes<{}>, 'color'> & {
+    /**
+     * Add ARIA attributes.
+     */
+    aria?: SelectedAriaAttributes<MarqueAriaAttributes>;
+    /**
+     * When providing an url then the component will be rendered as `<a>`.
+     */
+    href?: string;
+    /**
+     * Adapts sizing of marque.
+     */
+    size?: MarqueSize;
+    /**
+     * Target attribute where the link should be opened.
+     */
+    target?: LinkTarget;
+    /**
+     * Show/hide trademark sign.
+     */
+    trademark?: boolean;
+};
+export declare const PMarque: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<{}>, "color"> & {
+    /**
+     * Add ARIA attributes.
+     */
+    aria?: SelectedAriaAttributes<MarqueAriaAttributes>;
+    /**
+     * When providing an url then the component will be rendered as `<a>`.
+     */
+    href?: string;
+    /**
+     * Adapts sizing of marque.
+     */
+    size?: MarqueSize;
+    /**
+     * Target attribute where the link should be opened.
+     */
+    target?: LinkTarget;
+    /**
+     * Show/hide trademark sign.
+     */
+    trademark?: boolean;
+} & import("react").RefAttributes<HTMLElement>>;