npm - @porsche-design-system/components-react - Versions diffs - 3.0.0-alpha.4 → 3.0.0-alpha.6 - Mend

@porsche-design-system/components-react 3.0.0-alpha.4 → 3.0.0-alpha.6

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 (197) hide show

package/ssr/lib/components/table.wrapper.d.ts CHANGED Viewed

@@ -1,18 +1,18 @@
 import { HTMLAttributes } from 'react';
-import type { TableChangeEvent, Theme } from '../types';
+import type { TableUpdateEvent, Theme } from '../types';
 export type PTableProps = Omit<HTMLAttributes<{}>, 'color' | 'onChange'> & {
     /**
      * A caption describing the contents of the table for accessibility only. This won't be visible in the browser. Use an element with an attribute of `slot="caption"` for a visible caption.
      */
     caption?: string;
     /**
-     * Emitted when sorting is changed.
+     * @deprecated since v3.0.0, will be removed with next major release, use `update` event instead. Emitted when sorting is changed.
      */
-    onChange?: (event: CustomEvent<TableChangeEvent>) => void;
+    onSortingChange?: (event: CustomEvent<TableUpdateEvent>) => void;
     /**
-     * @deprecated since v3.0.0, will be removed with next major release, use `change` event instead. Emitted when sorting is changed.
+     * Emitted when sorting is changed.
      */
-    onSortingChange?: (event: CustomEvent<TableChangeEvent>) => void;
+    onUpdate?: (event: CustomEvent<TableUpdateEvent>) => void;
     /**
      * Adapts the color when used on dark background.
      */
@@ -24,13 +24,13 @@ export declare const PTable: import("react").ForwardRefExoticComponent<Omit<HTML
      */
     caption?: string;
     /**
-     * Emitted when sorting is changed.
+     * @deprecated since v3.0.0, will be removed with next major release, use `update` event instead. Emitted when sorting is changed.
      */
-    onChange?: (event: CustomEvent<TableChangeEvent>) => void;
+    onSortingChange?: (event: CustomEvent<TableUpdateEvent>) => void;
     /**
-     * @deprecated since v3.0.0, will be removed with next major release, use `change` event instead. Emitted when sorting is changed.
+     * Emitted when sorting is changed.
      */
-    onSortingChange?: (event: CustomEvent<TableChangeEvent>) => void;
+    onUpdate?: (event: CustomEvent<TableUpdateEvent>) => void;
     /**
      * Adapts the color when used on dark background.
      */

package/ssr/lib/components/tabs-bar.wrapper.d.ts CHANGED Viewed

@@ -1,5 +1,5 @@
 import { HTMLAttributes } from 'react';
-import type { TabsBarGradientColor, TabsBarGradientColorScheme, TabsBarChangeEvent, BreakpointCustomizable, TabsBarSize, Theme, TabsBarWeight } from '../types';
+import type { TabsBarGradientColor, TabsBarGradientColorScheme, TabsBarUpdateEvent, BreakpointCustomizable, TabsBarSize, Theme, TabsBarWeight } from '../types';
 export type PTabsBarProps = Omit<HTMLAttributes<{}>, 'color' | 'onChange'> & {
     /**
      * Defines which tab to be visualized as selected (zero-based numbering), undefined if none should be selected.
@@ -14,13 +14,13 @@ export type PTabsBarProps = Omit<HTMLAttributes<{}>, 'color' | 'onChange'> & {
      */
     gradientColorScheme?: TabsBarGradientColorScheme;
     /**
-     * Emitted when active tab is changed.
+     * @deprecated since v3.0.0, will be removed with next major release, use `update` event instead. Emitted when active tab is changed.
      */
-    onChange?: (event: CustomEvent<TabsBarChangeEvent>) => void;
+    onTabChange?: (event: CustomEvent<TabsBarUpdateEvent>) => void;
     /**
-     * @deprecated since v3.0.0, will be removed with next major release, use `change` event instead. Emitted when active tab is changed.
+     * Emitted when active tab is changed.
      */
-    onTabChange?: (event: CustomEvent<TabsBarChangeEvent>) => void;
+    onUpdate?: (event: CustomEvent<TabsBarUpdateEvent>) => void;
     /**
      * The text size.
      */
@@ -48,13 +48,13 @@ export declare const PTabsBar: import("react").ForwardRefExoticComponent<Omit<HT
      */
     gradientColorScheme?: TabsBarGradientColorScheme;
     /**
-     * Emitted when active tab is changed.
+     * @deprecated since v3.0.0, will be removed with next major release, use `update` event instead. Emitted when active tab is changed.
      */
-    onChange?: (event: CustomEvent<TabsBarChangeEvent>) => void;
+    onTabChange?: (event: CustomEvent<TabsBarUpdateEvent>) => void;
     /**
-     * @deprecated since v3.0.0, will be removed with next major release, use `change` event instead. Emitted when active tab is changed.
+     * Emitted when active tab is changed.
      */
-    onTabChange?: (event: CustomEvent<TabsBarChangeEvent>) => void;
+    onUpdate?: (event: CustomEvent<TabsBarUpdateEvent>) => void;
     /**
      * The text size.
      */

package/ssr/lib/components/tabs.wrapper.d.ts CHANGED Viewed

@@ -1,5 +1,5 @@
 import { HTMLAttributes } from 'react';
-import type { TabsGradientColor, TabsGradientColorScheme, TabsChangeEvent, BreakpointCustomizable, TabsSize, Theme, TabsWeight } from '../types';
+import type { TabsGradientColor, TabsGradientColorScheme, TabsUpdateEvent, BreakpointCustomizable, TabsSize, Theme, TabsWeight } from '../types';
 export type PTabsProps = Omit<HTMLAttributes<{}>, 'color' | 'onChange'> & {
     /**
      * Defines which tab to be visualized as selected (zero-based numbering).
@@ -14,13 +14,13 @@ export type PTabsProps = Omit<HTMLAttributes<{}>, 'color' | 'onChange'> & {
      */
     gradientColorScheme?: TabsGradientColorScheme;
     /**
-     * Emitted when active tab is changed.
+     * @deprecated since v3.0.0, will be removed with next major release, use `update` event instead. Emitted when active tab is changed.
      */
-    onChange?: (event: CustomEvent<TabsChangeEvent>) => void;
+    onTabChange?: (event: CustomEvent<TabsUpdateEvent>) => void;
     /**
-     * @deprecated since v3.0.0, will be removed with next major release, use `change` event instead. Emitted when active tab is changed.
+     * Emitted when active tab is changed.
      */
-    onTabChange?: (event: CustomEvent<TabsChangeEvent>) => void;
+    onUpdate?: (event: CustomEvent<TabsUpdateEvent>) => void;
     /**
      * The text size.
      */
@@ -48,13 +48,13 @@ export declare const PTabs: import("react").ForwardRefExoticComponent<Omit<HTMLA
      */
     gradientColorScheme?: TabsGradientColorScheme;
     /**
-     * Emitted when active tab is changed.
+     * @deprecated since v3.0.0, will be removed with next major release, use `update` event instead. Emitted when active tab is changed.
      */
-    onChange?: (event: CustomEvent<TabsChangeEvent>) => void;
+    onTabChange?: (event: CustomEvent<TabsUpdateEvent>) => void;
     /**
-     * @deprecated since v3.0.0, will be removed with next major release, use `change` event instead. Emitted when active tab is changed.
+     * Emitted when active tab is changed.
      */
-    onTabChange?: (event: CustomEvent<TabsChangeEvent>) => void;
+    onUpdate?: (event: CustomEvent<TabsUpdateEvent>) => void;
     /**
      * The text size.
      */

package/ssr/lib/components/wordmark.wrapper.d.ts ADDED Viewed

@@ -0,0 +1,46 @@
+import { HTMLAttributes } from 'react';
+import type { SelectedAriaAttributes, WordmarkAriaAttribute, WordmarkSize, WordmarkTarget, Theme } from '../types';
+export type PWordmarkProps = Omit<HTMLAttributes<{}>, 'color' | 'onChange'> & {
+    /**
+     * Add ARIA attributes.
+     */
+    aria?: SelectedAriaAttributes<WordmarkAriaAttribute>;
+    /**
+     * When providing an url then the component will be rendered as `<a>`.
+     */
+    href?: string;
+    /**
+     * Adapts sizing of wordmark.
+     */
+    size?: WordmarkSize;
+    /**
+     * Target attribute where the link should be opened.
+     */
+    target?: WordmarkTarget;
+    /**
+     * Adapts color depending on theme.
+     */
+    theme?: Theme;
+};
+export declare const PWordmark: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<{}>, "color" | "onChange"> & {
+    /**
+     * Add ARIA attributes.
+     */
+    aria?: SelectedAriaAttributes<WordmarkAriaAttribute>;
+    /**
+     * When providing an url then the component will be rendered as `<a>`.
+     */
+    href?: string;
+    /**
+     * Adapts sizing of wordmark.
+     */
+    size?: WordmarkSize;
+    /**
+     * Target attribute where the link should be opened.
+     */
+    target?: WordmarkTarget;
+    /**
+     * Adapts color depending on theme.
+     */
+    theme?: Theme;
+} & import("react").RefAttributes<HTMLElement>>;

package/ssr/lib/dsr-components/banner.d.ts CHANGED Viewed

@@ -2,5 +2,7 @@ import { Component } from 'react';
 export declare class DSRBanner extends Component<any> {
     host: HTMLElement;
     private inlineNotificationElement;
+    private closeBtn;
+    private get hasDismissButton();
     render(): JSX.Element;
 }

package/ssr/lib/dsr-components/crest.d.ts ADDED Viewed

@@ -0,0 +1,5 @@
+import { Component } from 'react';
+export declare class DSRCrest extends Component<any> {
+    host: HTMLElement;
+    render(): JSX.Element;
+}

package/ssr/lib/dsr-components/inline-notification.d.ts CHANGED Viewed

@@ -1,5 +1,6 @@
 import { Component } from 'react';
 export declare class DSRInlineNotification extends Component<any> {
     host: HTMLElement;
+    private get hasDismissButton();
     render(): JSX.Element;
 }

package/ssr/lib/dsr-components/marque.d.ts CHANGED Viewed

@@ -1,4 +1,5 @@
 import { Component } from 'react';
+/** @deprecated since v3.0.0, will be removed with next major release. Please use "p-wordmark" instead. */
 export declare class DSRMarque extends Component<any> {
     host: HTMLElement;
     render(): JSX.Element;

package/ssr/lib/dsr-components/switch.d.ts CHANGED Viewed

@@ -1,7 +1,4 @@
 import { Component } from 'react';
-export type SwitchChangeEvent = {
-    checked: boolean;
-};
 export declare class DSRSwitch extends Component<any> {
     host: HTMLElement;
     render(): JSX.Element;

package/ssr/lib/dsr-components/wordmark.d.ts ADDED Viewed

@@ -0,0 +1,5 @@
+import { Component } from 'react';
+export declare class DSRWordmark extends Component<any> {
+    host: HTMLElement;
+    render(): JSX.Element;
+}

package/ssr/lib/types.d.ts CHANGED Viewed

@@ -194,17 +194,18 @@ declare const BUTTON_ARIA_ATTRIBUTES: readonly [
     "aria-haspopup"
 ];
 export declare type ButtonAriaAttribute = typeof BUTTON_ARIA_ATTRIBUTES[number];
-declare const BREAKPOINTS: readonly [
+declare const breakpoints: readonly [
     "base",
     "xs",
     "s",
     "m",
     "l",
-    "xl"
+    "xl",
+    "xxl"
 ];
-export declare type BreakpointKey = typeof BREAKPOINTS[number];
+export type Breakpoint = (typeof breakpoints)[number];
 export declare type BreakpointValues<T> = {
-    [key in BreakpointKey]?: T;
+    [key in Breakpoint]?: T;
 } & {
     base: T;
 };
@@ -529,8 +530,8 @@ declare const ACCORDION_SIZES: readonly [
     "small",
     "medium"
 ];
-export declare type AccordionSize = typeof ACCORDION_SIZES[number];
-export declare type AccordionChangeEvent = {
+export declare type AccordionSize = (typeof ACCORDION_SIZES)[number];
+export declare type AccordionUpdateEvent = {
     open: boolean;
 };
 export declare type AccordionTag = HeadingTag;
@@ -579,7 +580,7 @@ declare const CAROUSEL_ALIGN_HEADERS: readonly [
 ];
 export declare type CarouselAlignHeader = (typeof CAROUSEL_ALIGN_HEADERS)[number];
 export declare type CarouselInternationalization = Partial<Record<"prev" | "next" | "first" | "last" | "slideLabel" | "slide", string>>;
-export declare type CarouselChangeEvent = {
+export declare type CarouselUpdateEvent = {
     activeIndex: number;
     previousIndex: number;
 };
@@ -597,6 +598,11 @@ declare const CONTENT_WRAPPER_WIDTHS: readonly [
     "full"
 ];
 export declare type ContentWrapperWidth = typeof CONTENT_WRAPPER_WIDTHS[number];
+export declare type CrestTarget = LinkTarget;
+declare const CREST_ARIA_ATTRIBUTES: readonly [
+    "aria-label"
+];
+export declare type CrestAriaAttribute = (typeof CREST_ARIA_ATTRIBUTES)[number];
 declare const DISPLAY_TAGS: readonly [
     "h1",
     "h2",
@@ -932,8 +938,8 @@ declare const PAGINATION_NUMBER_OF_PAGE_LINKS: readonly [
     5,
     7
 ];
-export declare type PaginationMaxNumberOfPageLinks = typeof PAGINATION_NUMBER_OF_PAGE_LINKS[number];
-export declare type PaginationChangeEvent = {
+export declare type PaginationMaxNumberOfPageLinks = (typeof PAGINATION_NUMBER_OF_PAGE_LINKS)[number];
+export declare type PaginationUpdateEvent = {
     page: number;
     previousPage: number;
 };
@@ -954,8 +960,8 @@ declare const SEGMENTED_CONTROL_BACKGROUND_COLORS: readonly [
     "background-surface",
     "background-default"
 ];
-export declare type SegmentedControlBackgroundColor = typeof SEGMENTED_CONTROL_BACKGROUND_COLORS[number];
-export declare type SegmentedControlChangeEvent = {
+export declare type SegmentedControlBackgroundColor = (typeof SEGMENTED_CONTROL_BACKGROUND_COLORS)[number];
+export declare type SegmentedControlUpdateEvent = {
     value: string | number;
 };
 export declare type SegmentedControlItemIcon = LinkButtonIconName;
@@ -981,8 +987,8 @@ declare const STEPPER_HORIZONTAL_SIZES: readonly [
     "small",
     "medium"
 ];
-export declare type StepperHorizontalSize = typeof STEPPER_HORIZONTAL_SIZES[number];
-export declare type StepperHorizontalChangeEvent = {
+export declare type StepperHorizontalSize = (typeof STEPPER_HORIZONTAL_SIZES)[number];
+export declare type StepperHorizontalUpdateEvent = {
     activeStepIndex: number;
 };
 declare const STEPPER_ITEM_STATES: readonly [
@@ -992,7 +998,7 @@ declare const STEPPER_ITEM_STATES: readonly [
 ];
 export declare type StepperHorizontalItemState = typeof STEPPER_ITEM_STATES[number];
 export declare type SwitchAlignLabel = AlignLabel;
-export declare type SwitchChangeEvent = {
+export declare type SwitchUpdateEvent = {
     checked: boolean;
 };
 export declare type Direction = "asc" | "desc";
@@ -1001,19 +1007,19 @@ export declare type TableHeadCellSort = {
     active?: boolean;
     direction?: Direction;
 };
-export declare type TableChangeEvent = TableHeadCellSort;
+export declare type TableUpdateEvent = TableHeadCellSort;
 declare const TABS_BAR_SIZES: readonly [
     "small",
     "medium"
 ];
-export declare type TabsBarSize = typeof TABS_BAR_SIZES[number];
+export declare type TabsBarSize = (typeof TABS_BAR_SIZES)[number];
 declare const TABS_BAR_WEIGHTS: readonly [
     "regular",
     "semi-bold",
     "semibold"
 ];
-export declare type TabsBarWeight = typeof TABS_BAR_WEIGHTS[number];
-export declare type TabsBarChangeEvent = {
+export declare type TabsBarWeight = (typeof TABS_BAR_WEIGHTS)[number];
+export declare type TabsBarUpdateEvent = {
     activeTabIndex: number;
 };
 /** @deprecated */
@@ -1024,7 +1030,7 @@ export declare type TabsWeight = TabsBarWeight;
 /** @deprecated */
 export declare type TabsGradientColorScheme = TabsBarGradientColorScheme;
 export declare type TabsGradientColor = TabsBarGradientColor;
-export declare type TabsChangeEvent = TabsBarChangeEvent;
+export declare type TabsUpdateEvent = TabsBarUpdateEvent;
 declare const TAG_DISMISSIBLE_COLORS: readonly [
     "background-base",
     "background-surface",
@@ -1100,4 +1106,14 @@ export declare type ToastMessage = {
     text: string;
     state?: ToastState;
 };
+declare const WORDMARK_SIZES: readonly [
+    "small",
+    "inherit"
+];
+export declare type WordmarkSize = (typeof WORDMARK_SIZES)[number];
+export declare type WordmarkTarget = LinkTarget;
+declare const WORDMARK_ARIA_ATTRIBUTES: readonly [
+    "aria-label"
+];
+export declare type WordmarkAriaAttribute = (typeof WORDMARK_ARIA_ATTRIBUTES)[number];
 export {};