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

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

@@ -0,0 +1,64 @@
+import { HTMLAttributes } from 'react';
+import type { SelectedAriaAttributes, ModalAriaAttributes, BreakpointCustomizable } from '../types';
+export declare type PModalProps = Omit<HTMLAttributes<{}>, 'color'> & {
+    /**
+     * Add ARIA attributes.
+     */
+    aria?: SelectedAriaAttributes<ModalAriaAttributes>;
+    /**
+     * If true, the modal will not be closable via backdrop click.
+     */
+    disableBackdropClick?: boolean;
+    /**
+     * If true, the modal will not have a close button.
+     */
+    disableCloseButton?: boolean;
+    /**
+     * If true the modal uses max viewport height and width. Should only be used for mobile.
+     */
+    fullscreen?: BreakpointCustomizable<boolean>;
+    /**
+     * The title of the modal
+     */
+    heading?: string;
+    /**
+     * Emitted when the component requests to be closed.
+     */
+    onClose?: (event: CustomEvent<void>) => void;
+    /**
+     * If true, the modal is open.
+     */
+    open: boolean;
+};
+export declare const PModal: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<{}>, "color"> & {
+    /**
+     * Add ARIA attributes.
+     */
+    aria?: SelectedAriaAttributes<ModalAriaAttributes>;
+    /**
+     * If true, the modal will not be closable via backdrop click.
+     */
+    disableBackdropClick?: boolean;
+    /**
+     * If true, the modal will not have a close button.
+     */
+    disableCloseButton?: boolean;
+    /**
+     * If true the modal uses max viewport height and width. Should only be used for mobile.
+     */
+    fullscreen?: BreakpointCustomizable<boolean>;
+    /**
+     * The title of the modal
+     */
+    heading?: string;
+    /**
+     * Emitted when the component requests to be closed.
+     */
+    onClose?: (event: CustomEvent<void>) => void;
+    /**
+     * If true, the modal is open.
+     */
+    open: boolean;
+} & {
+    children?: import("react").ReactNode;
+} & import("react").RefAttributes<HTMLElement>>;

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

@@ -0,0 +1,86 @@
+import { HTMLAttributes } from 'react';
+import type { BreakpointCustomizable, NumberOfPageLinks, PageChangeEvent, Theme } from '../types';
+export declare type PPaginationProps = Omit<HTMLAttributes<{}>, 'color'> & {
+    /**
+     * Index of the currently active page.
+     */
+    activePage: number;
+    /**
+     * Aria label what the pagination is used for.
+     */
+    allyLabel?: string;
+    /**
+     * Aria label for next page icon.
+     */
+    allyLabelNext?: string;
+    /**
+     * Aria label for page navigation.
+     */
+    allyLabelPage?: string;
+    /**
+     * Aria label for previous page icon.
+     */
+    allyLabelPrev?: string;
+    /**
+     * The total count of items which should be shown per page.
+     */
+    itemsPerPage?: number;
+    /**
+     * The maximum number of page links rendered
+     */
+    maxNumberOfPageLinks?: BreakpointCustomizable<NumberOfPageLinks>;
+    /**
+     * Emitted when the page changes.
+     */
+    onPageChange?: (event: CustomEvent<PageChangeEvent>) => void;
+    /**
+     * Adapts the color when used on dark background.
+     */
+    theme?: Theme;
+    /**
+     * The total count of items.
+     */
+    totalItemsCount: number;
+};
+export declare const PPagination: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<{}>, "color"> & {
+    /**
+     * Index of the currently active page.
+     */
+    activePage: number;
+    /**
+     * Aria label what the pagination is used for.
+     */
+    allyLabel?: string;
+    /**
+     * Aria label for next page icon.
+     */
+    allyLabelNext?: string;
+    /**
+     * Aria label for page navigation.
+     */
+    allyLabelPage?: string;
+    /**
+     * Aria label for previous page icon.
+     */
+    allyLabelPrev?: string;
+    /**
+     * The total count of items which should be shown per page.
+     */
+    itemsPerPage?: number;
+    /**
+     * The maximum number of page links rendered
+     */
+    maxNumberOfPageLinks?: BreakpointCustomizable<NumberOfPageLinks>;
+    /**
+     * Emitted when the page changes.
+     */
+    onPageChange?: (event: CustomEvent<PageChangeEvent>) => void;
+    /**
+     * Adapts the color when used on dark background.
+     */
+    theme?: Theme;
+    /**
+     * The total count of items.
+     */
+    totalItemsCount: number;
+} & import("react").RefAttributes<HTMLElement>>;

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

@@ -0,0 +1,32 @@
+import { HTMLAttributes } from 'react';
+import type { SelectedAriaAttributes, PopoverDirection } from '../types';
+export declare type PPopoverProps = Omit<HTMLAttributes<{}>, 'color'> & {
+    /**
+     * Add ARIA attributes.
+     */
+    aria?: SelectedAriaAttributes<"aria-label">;
+    /**
+     * Descriptive text to show additional information when popover is open
+     */
+    description?: string;
+    /**
+     * Preferred direction in which popover should open, given there is enough space in viewport. Otherwise, it will be opened in the direction with most available space.
+     */
+    direction?: PopoverDirection;
+};
+export declare const PPopover: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<{}>, "color"> & {
+    /**
+     * Add ARIA attributes.
+     */
+    aria?: SelectedAriaAttributes<"aria-label">;
+    /**
+     * Descriptive text to show additional information when popover is open
+     */
+    description?: string;
+    /**
+     * Preferred direction in which popover should open, given there is enough space in viewport. Otherwise, it will be opened in the direction with most available space.
+     */
+    direction?: PopoverDirection;
+} & {
+    children?: import("react").ReactNode;
+} & import("react").RefAttributes<HTMLElement>>;

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

@@ -0,0 +1,40 @@
+import { HTMLAttributes } from 'react';
+import type { BreakpointCustomizable, FormState } from '../types';
+export declare type PRadioButtonWrapperProps = Omit<HTMLAttributes<{}>, 'color'> & {
+    /**
+     * Show or hide label. For better accessibility it's recommended to show the label.
+     */
+    hideLabel?: BreakpointCustomizable<boolean>;
+    /**
+     * The label text.
+     */
+    label?: string;
+    /**
+     * The message styled depending on validation state.
+     */
+    message?: string;
+    /**
+     * The validation state.
+     */
+    state?: FormState;
+};
+export declare const PRadioButtonWrapper: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<{}>, "color"> & {
+    /**
+     * Show or hide label. For better accessibility it's recommended to show the label.
+     */
+    hideLabel?: BreakpointCustomizable<boolean>;
+    /**
+     * The label text.
+     */
+    label?: string;
+    /**
+     * The message styled depending on validation state.
+     */
+    message?: string;
+    /**
+     * The validation state.
+     */
+    state?: FormState;
+} & {
+    children?: import("react").ReactNode;
+} & import("react").RefAttributes<HTMLElement>>;

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

@@ -0,0 +1,40 @@
+import { HTMLAttributes } from 'react';
+import type { GradientColorTheme, ScrollIndicatorPosition, ScrollToPosition, ThemeExtendedElectric } from '../types';
+export declare type PScrollerProps = Omit<HTMLAttributes<{}>, 'color'> & {
+    /**
+     * Adapts the background gradient color of prev and next button.
+     */
+    gradientColorScheme?: GradientColorTheme;
+    /**
+     * Sets the vertical position of scroll indicator icon
+     */
+    scrollIndicatorPosition?: ScrollIndicatorPosition;
+    /**
+     * Scrolls the scroll area to the left either smooth or immediately
+     */
+    scrollToPosition?: ScrollToPosition;
+    /**
+     * Adapts the color when used on dark background.
+     */
+    theme?: ThemeExtendedElectric;
+};
+export declare const PScroller: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<{}>, "color"> & {
+    /**
+     * Adapts the background gradient color of prev and next button.
+     */
+    gradientColorScheme?: GradientColorTheme;
+    /**
+     * Sets the vertical position of scroll indicator icon
+     */
+    scrollIndicatorPosition?: ScrollIndicatorPosition;
+    /**
+     * Scrolls the scroll area to the left either smooth or immediately
+     */
+    scrollToPosition?: ScrollToPosition;
+    /**
+     * Adapts the color when used on dark background.
+     */
+    theme?: ThemeExtendedElectric;
+} & {
+    children?: import("react").ReactNode;
+} & import("react").RefAttributes<HTMLElement>>;

package/ssr/lib/components/segmented-control-item.wrapper.d.ts

@@ -0,0 +1,48 @@
+import { HTMLAttributes } from 'react';
+import type { IconName } from '../types';
+export declare type PSegmentedControlItemProps = Omit<HTMLAttributes<{}>, 'color'> & {
+    /**
+     * Disables the button. No events will be triggered while disabled state is active.
+     */
+    disabled?: boolean;
+    /**
+     * The icon shown.
+     */
+    icon?: IconName;
+    /**
+     * A URL path to a custom icon.
+     */
+    iconSource?: string;
+    /**
+     * The label text.
+     */
+    label?: string;
+    /**
+     * The value of this item which is emitted by the parent element if it becomes selected. This property is **required**.
+     */
+    value: string | number;
+};
+export declare const PSegmentedControlItem: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<{}>, "color"> & {
+    /**
+     * Disables the button. No events will be triggered while disabled state is active.
+     */
+    disabled?: boolean;
+    /**
+     * The icon shown.
+     */
+    icon?: IconName;
+    /**
+     * A URL path to a custom icon.
+     */
+    iconSource?: string;
+    /**
+     * The label text.
+     */
+    label?: string;
+    /**
+     * The value of this item which is emitted by the parent element if it becomes selected. This property is **required**.
+     */
+    value: string | number;
+} & {
+    children?: import("react").ReactNode;
+} & import("react").RefAttributes<HTMLElement>>;

package/ssr/lib/components/segmented-control.wrapper.d.ts

@@ -0,0 +1,40 @@
+import { HTMLAttributes } from 'react';
+import type { SegmentedControlBackgroundColor, SegmentedControlChangeEvent, Theme } from '../types';
+export declare type PSegmentedControlProps = Omit<HTMLAttributes<{}>, 'color'> & {
+    /**
+     * Background color variations
+     */
+    backgroundColor?: SegmentedControlBackgroundColor;
+    /**
+     * Emitted when selected element changes.
+     */
+    onSegmentedControlChange?: (event: CustomEvent<SegmentedControlChangeEvent>) => void;
+    /**
+     * Adapts the segmented-control color depending on the theme.
+     */
+    theme?: Theme;
+    /**
+     * Sets the initial value of the segmented-control.
+     */
+    value?: string | number;
+};
+export declare const PSegmentedControl: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<{}>, "color"> & {
+    /**
+     * Background color variations
+     */
+    backgroundColor?: SegmentedControlBackgroundColor;
+    /**
+     * Emitted when selected element changes.
+     */
+    onSegmentedControlChange?: (event: CustomEvent<SegmentedControlChangeEvent>) => void;
+    /**
+     * Adapts the segmented-control color depending on the theme.
+     */
+    theme?: Theme;
+    /**
+     * Sets the initial value of the segmented-control.
+     */
+    value?: string | number;
+} & {
+    children?: import("react").ReactNode;
+} & import("react").RefAttributes<HTMLElement>>;

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

@@ -0,0 +1,80 @@
+import { HTMLAttributes } from 'react';
+import type { DropdownDirection, BreakpointCustomizable, FormState, Theme } from '../types';
+export declare type PSelectWrapperProps = Omit<HTMLAttributes<{}>, 'color'> & {
+    /**
+     * The description text.
+     */
+    description?: string;
+    /**
+     * Changes the direction to which the dropdown list appears.
+     */
+    dropdownDirection?: DropdownDirection;
+    /**
+     * Filters select options by typing a character
+     */
+    filter?: boolean;
+    /**
+     * 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;
+    /**
+     * Forces rendering of native browser select dropdown
+     */
+    native?: boolean;
+    /**
+     * The validation state.
+     */
+    state?: FormState;
+    /**
+     * Adapts the select color depending on the theme.
+     */
+    theme?: Theme;
+};
+export declare const PSelectWrapper: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<{}>, "color"> & {
+    /**
+     * The description text.
+     */
+    description?: string;
+    /**
+     * Changes the direction to which the dropdown list appears.
+     */
+    dropdownDirection?: DropdownDirection;
+    /**
+     * Filters select options by typing a character
+     */
+    filter?: boolean;
+    /**
+     * 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;
+    /**
+     * Forces rendering of native browser select dropdown
+     */
+    native?: boolean;
+    /**
+     * The validation state.
+     */
+    state?: FormState;
+    /**
+     * Adapts the select color depending on the theme.
+     */
+    theme?: Theme;
+} & {
+    children?: import("react").ReactNode;
+} & import("react").RefAttributes<HTMLElement>>;

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

@@ -0,0 +1,30 @@
+import { HTMLAttributes } from 'react';
+import type { SelectedAriaAttributes, SpinnerAriaAttributes, SpinnerSize, ThemeExtendedElectricDark } from '../types';
+export declare type PSpinnerProps = Omit<HTMLAttributes<{}>, 'color'> & {
+    /**
+     * Add ARIA attributes.
+     */
+    aria?: SelectedAriaAttributes<SpinnerAriaAttributes>;
+    /**
+     * Size of the spinner.
+     */
+    size?: SpinnerSize;
+    /**
+     * Adapts the spinner color depending on the theme.
+     */
+    theme?: ThemeExtendedElectricDark;
+};
+export declare const PSpinner: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<{}>, "color"> & {
+    /**
+     * Add ARIA attributes.
+     */
+    aria?: SelectedAriaAttributes<SpinnerAriaAttributes>;
+    /**
+     * Size of the spinner.
+     */
+    size?: SpinnerSize;
+    /**
+     * Adapts the spinner color depending on the theme.
+     */
+    theme?: ThemeExtendedElectricDark;
+} & import("react").RefAttributes<HTMLElement>>;

package/ssr/lib/components/stepper-horizontal-item.wrapper.d.ts

@@ -0,0 +1,24 @@
+import { HTMLAttributes } from 'react';
+import type { StepperState } from '../types';
+export declare type PStepperHorizontalItemProps = Omit<HTMLAttributes<{}>, 'color'> & {
+    /**
+     * Disables the stepper-horizontal-item. No events will be triggered while disabled state is active.
+     */
+    disabled?: boolean;
+    /**
+     * The validation state.
+     */
+    state?: StepperState;
+};
+export declare const PStepperHorizontalItem: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<{}>, "color"> & {
+    /**
+     * Disables the stepper-horizontal-item. No events will be triggered while disabled state is active.
+     */
+    disabled?: boolean;
+    /**
+     * The validation state.
+     */
+    state?: StepperState;
+} & {
+    children?: import("react").ReactNode;
+} & import("react").RefAttributes<HTMLElement>>;

package/ssr/lib/components/stepper-horizontal.wrapper.d.ts

@@ -0,0 +1,32 @@
+import { HTMLAttributes } from 'react';
+import type { StepChangeEvent, BreakpointCustomizable, StepperHorizontalSize, Theme } from '../types';
+export declare type PStepperHorizontalProps = Omit<HTMLAttributes<{}>, 'color'> & {
+    /**
+     * Emitted when active step is changed.
+     */
+    onStepChange?: (event: CustomEvent<StepChangeEvent>) => void;
+    /**
+     * The text size.
+     */
+    size?: BreakpointCustomizable<StepperHorizontalSize>;
+    /**
+     * Adapts the tag color depending on the theme.
+     */
+    theme?: Theme;
+};
+export declare const PStepperHorizontal: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<{}>, "color"> & {
+    /**
+     * Emitted when active step is changed.
+     */
+    onStepChange?: (event: CustomEvent<StepChangeEvent>) => void;
+    /**
+     * The text size.
+     */
+    size?: BreakpointCustomizable<StepperHorizontalSize>;
+    /**
+     * Adapts the tag color depending on the theme.
+     */
+    theme?: Theme;
+} & {
+    children?: import("react").ReactNode;
+} & import("react").RefAttributes<HTMLElement>>;

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

@@ -0,0 +1,82 @@
+import { HTMLAttributes } from 'react';
+import type { AlignLabel, BreakpointCustomizable, SwitchChangeEvent, ThemeExtendedElectric } from '../types';
+export declare type PSwitchProps = Omit<HTMLAttributes<{}>, 'color'> & {
+    /**
+     * Aligns the label.
+     */
+    alignLabel?: AlignLabel;
+    /**
+     * Visualize the switch with on/off status.
+     */
+    checked?: boolean;
+    /**
+     * Disables the switch. No events will be triggered while disabled state is active.
+     */
+    disabled?: boolean;
+    /**
+     * Show or hide label. For better accessibility it's recommended to show the label.
+     */
+    hideLabel?: BreakpointCustomizable<boolean>;
+    /**
+     * Disables the switch and shows a loading indicator. No events will be triggered while loading state is active.
+     */
+    loading?: boolean;
+    /**
+     * Emitted when checked status is changed.
+     */
+    onSwitchChange?: (event: CustomEvent<SwitchChangeEvent>) => void;
+    /**
+     * Stretches the contents to max available space.
+     */
+    stretch?: BreakpointCustomizable<boolean>;
+    /**
+     * To remove the element from tab order.
+     * @deprecated since v2.8.0, use `tabindex="-1"` instead
+     */
+    tabbable?: boolean;
+    /**
+     * Adapts the switch color depending on the theme.
+     */
+    theme?: ThemeExtendedElectric;
+};
+export declare const PSwitch: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<{}>, "color"> & {
+    /**
+     * Aligns the label.
+     */
+    alignLabel?: AlignLabel;
+    /**
+     * Visualize the switch with on/off status.
+     */
+    checked?: boolean;
+    /**
+     * Disables the switch. No events will be triggered while disabled state is active.
+     */
+    disabled?: boolean;
+    /**
+     * Show or hide label. For better accessibility it's recommended to show the label.
+     */
+    hideLabel?: BreakpointCustomizable<boolean>;
+    /**
+     * Disables the switch and shows a loading indicator. No events will be triggered while loading state is active.
+     */
+    loading?: boolean;
+    /**
+     * Emitted when checked status is changed.
+     */
+    onSwitchChange?: (event: CustomEvent<SwitchChangeEvent>) => void;
+    /**
+     * Stretches the contents to max available space.
+     */
+    stretch?: BreakpointCustomizable<boolean>;
+    /**
+     * To remove the element from tab order.
+     * @deprecated since v2.8.0, use `tabindex="-1"` instead
+     */
+    tabbable?: boolean;
+    /**
+     * Adapts the switch color depending on the theme.
+     */
+    theme?: ThemeExtendedElectric;
+} & {
+    children?: import("react").ReactNode;
+} & import("react").RefAttributes<HTMLElement>>;

package/ssr/lib/components/table-body.wrapper.d.ts

@@ -0,0 +1,5 @@
+import { HTMLAttributes } from 'react';
+export declare type PTableBodyProps = Omit<HTMLAttributes<{}>, 'color'> & {};
+export declare const PTableBody: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<{}>, "color"> & {
+    children?: import("react").ReactNode;
+} & import("react").RefAttributes<HTMLElement>>;

package/ssr/lib/components/table-cell.wrapper.d.ts

@@ -0,0 +1,15 @@
+import { HTMLAttributes } from 'react';
+export declare type PTableCellProps = Omit<HTMLAttributes<{}>, 'color'> & {
+    /**
+     * Displays slotted text multiline or forced into a single line.
+     */
+    multiline?: boolean;
+};
+export declare const PTableCell: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<{}>, "color"> & {
+    /**
+     * Displays slotted text multiline or forced into a single line.
+     */
+    multiline?: boolean;
+} & {
+    children?: import("react").ReactNode;
+} & import("react").RefAttributes<HTMLElement>>;

package/ssr/lib/components/table-head-cell.wrapper.d.ts

@@ -0,0 +1,32 @@
+import { HTMLAttributes } from 'react';
+import type { TableHeadCellSort } from '../types';
+export declare type PTableHeadCellProps = Omit<HTMLAttributes<{}>, 'color'> & {
+    /**
+     * Hides the label but stays accessible for screen readers. This property only takes effect when sort property is not defined.
+     */
+    hideLabel?: boolean;
+    /**
+     * Displays slotted text multiline or forced into a single line.
+     */
+    multiline?: boolean;
+    /**
+     * Defines sortability properties.
+     */
+    sort?: TableHeadCellSort;
+};
+export declare const PTableHeadCell: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<{}>, "color"> & {
+    /**
+     * Hides the label but stays accessible for screen readers. This property only takes effect when sort property is not defined.
+     */
+    hideLabel?: boolean;
+    /**
+     * Displays slotted text multiline or forced into a single line.
+     */
+    multiline?: boolean;
+    /**
+     * Defines sortability properties.
+     */
+    sort?: TableHeadCellSort;
+} & {
+    children?: import("react").ReactNode;
+} & import("react").RefAttributes<HTMLElement>>;

package/ssr/lib/components/table-head-row.wrapper.d.ts

@@ -0,0 +1,5 @@
+import { HTMLAttributes } from 'react';
+export declare type PTableHeadRowProps = Omit<HTMLAttributes<{}>, 'color'> & {};
+export declare const PTableHeadRow: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<{}>, "color"> & {
+    children?: import("react").ReactNode;
+} & import("react").RefAttributes<HTMLElement>>;

package/ssr/lib/components/table-head.wrapper.d.ts

@@ -0,0 +1,5 @@
+import { HTMLAttributes } from 'react';
+export declare type PTableHeadProps = Omit<HTMLAttributes<{}>, 'color'> & {};
+export declare const PTableHead: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<{}>, "color"> & {
+    children?: import("react").ReactNode;
+} & import("react").RefAttributes<HTMLElement>>;