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

package/lib/components/inline-notification.wrapper.js

@@ -5,15 +5,15 @@ var react = require('react');
 var hooks = require('../../hooks.js');
 var utils = require('../../utils.js');
 
-const PInlineNotification = react.forwardRef(({ actionIcon = 'arrow-right', actionLabel, actionLoading = false, description = '', heading = '', onAction, onDismiss, persistent = false, state = 'info', theme = 'light', className, ...rest }, ref) => {
+const PInlineNotification = react.forwardRef(({ actionIcon = 'arrow-right', actionLabel, actionLoading = false, description = '', dismissButton = true, heading = '', onAction, onDismiss, persistent, state = 'info', theme = 'light', className, ...rest }, ref) => {
     const elementRef = react.useRef();
     hooks.useEventCallback(elementRef, 'action', onAction);
     hooks.useEventCallback(elementRef, 'dismiss', onDismiss);
     const WebComponentTag = hooks.usePrefix('p-inline-notification');
-    const propsToSync = [actionIcon, actionLabel, actionLoading, description, heading, persistent, state, theme];
+    const propsToSync = [actionIcon, actionLabel, actionLoading, description, dismissButton, heading, persistent, state, theme];
     hooks.useBrowserLayoutEffect(() => {
         const { current } = elementRef;
-        ['actionIcon', 'actionLabel', 'actionLoading', 'description', 'heading', 'persistent', 'state', 'theme'].forEach((propName, i) => (current[propName] = propsToSync[i]));
+        ['actionIcon', 'actionLabel', 'actionLoading', 'description', 'dismissButton', 'heading', 'persistent', 'state', 'theme'].forEach((propName, i) => (current[propName] = propsToSync[i]));
     }, propsToSync);
     const props = {
         ...rest,

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

@@ -1,5 +1,5 @@
 import { HTMLAttributes } from 'react';
-import type { PaginationInternationalization, BreakpointCustomizable, PaginationMaxNumberOfPageLinks, PaginationChangeEvent, Theme } from '../types';
+import type { PaginationInternationalization, BreakpointCustomizable, PaginationMaxNumberOfPageLinks, PaginationUpdateEvent, Theme } from '../types';
 export type PPaginationProps = Omit<HTMLAttributes<{}>, 'color' | 'onChange'> & {
     /**
      * Index of the currently active page.
@@ -34,13 +34,13 @@ export type PPaginationProps = Omit<HTMLAttributes<{}>, 'color' | 'onChange'> &
      */
     maxNumberOfPageLinks?: BreakpointCustomizable<PaginationMaxNumberOfPageLinks>;
     /**
-     * Emitted when the page changes.
+     * @deprecated since v3.0.0, will be removed with next major release, use `update` event instead. Emitted when the page changes.
      */
-    onChange?: (event: CustomEvent<PaginationChangeEvent>) => void;
+    onPageChange?: (event: CustomEvent<PaginationUpdateEvent>) => void;
     /**
-     * @deprecated since v3.0.0, will be removed with next major release, use `change` event instead. Emitted when the page changes.
+     * Emitted when the page changes.
      */
-    onPageChange?: (event: CustomEvent<PaginationChangeEvent>) => void;
+    onUpdate?: (event: CustomEvent<PaginationUpdateEvent>) => void;
     /**
      * Adapts the color when used on dark background.
      */
@@ -84,13 +84,13 @@ export declare const PPagination: import("react").ForwardRefExoticComponent<Omit
      */
     maxNumberOfPageLinks?: BreakpointCustomizable<PaginationMaxNumberOfPageLinks>;
     /**
-     * Emitted when the page changes.
+     * @deprecated since v3.0.0, will be removed with next major release, use `update` event instead. Emitted when the page changes.
      */
-    onChange?: (event: CustomEvent<PaginationChangeEvent>) => void;
+    onPageChange?: (event: CustomEvent<PaginationUpdateEvent>) => void;
     /**
-     * @deprecated since v3.0.0, will be removed with next major release, use `change` event instead. Emitted when the page changes.
+     * Emitted when the page changes.
      */
-    onPageChange?: (event: CustomEvent<PaginationChangeEvent>) => void;
+    onUpdate?: (event: CustomEvent<PaginationUpdateEvent>) => void;
     /**
      * Adapts the color when used on dark background.
      */

package/lib/components/pagination.wrapper.js

@@ -5,10 +5,10 @@ var react = require('react');
 var hooks = require('../../hooks.js');
 var utils = require('../../utils.js');
 
-const PPagination = react.forwardRef(({ activePage = 1, allyLabel, allyLabelNext, allyLabelPage, allyLabelPrev, intl = { root: 'Pagination', prev: 'Previous page', next: 'Next page', page: 'Page', }, itemsPerPage = 1, maxNumberOfPageLinks = { base: 5, xs: 7, }, onChange, onPageChange, theme = 'light', totalItemsCount = 1, className, ...rest }, ref) => {
+const PPagination = react.forwardRef(({ activePage = 1, allyLabel, allyLabelNext, allyLabelPage, allyLabelPrev, intl = { root: 'Pagination', prev: 'Previous page', next: 'Next page', page: 'Page', }, itemsPerPage = 1, maxNumberOfPageLinks = { base: 5, xs: 7, }, onPageChange, onUpdate, theme = 'light', totalItemsCount = 1, className, ...rest }, ref) => {
     const elementRef = react.useRef();
-    hooks.useEventCallback(elementRef, 'change', onChange);
     hooks.useEventCallback(elementRef, 'pageChange', onPageChange);
+    hooks.useEventCallback(elementRef, 'update', onUpdate);
     const WebComponentTag = hooks.usePrefix('p-pagination');
     const propsToSync = [activePage, allyLabel, allyLabelNext, allyLabelPage, allyLabelPrev, intl, itemsPerPage, maxNumberOfPageLinks, theme, totalItemsCount];
     hooks.useBrowserLayoutEffect(() => {

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

@@ -1,18 +1,18 @@
 import { HTMLAttributes } from 'react';
-import type { SegmentedControlBackgroundColor, SegmentedControlChangeEvent, Theme } from '../types';
+import type { SegmentedControlBackgroundColor, SegmentedControlUpdateEvent, Theme } from '../types';
 export type PSegmentedControlProps = Omit<HTMLAttributes<{}>, 'color' | 'onChange'> & {
     /**
      * @deprecated since v3.0.0, will be removed with next major release. Background color variations
      */
     backgroundColor?: SegmentedControlBackgroundColor;
     /**
-     * Emitted when selected element changes.
+     * @deprecated since v3.0.0, will be removed with next major release, use `update` event instead. Emitted when selected element changes.
      */
-    onChange?: (event: CustomEvent<SegmentedControlChangeEvent>) => void;
+    onSegmentedControlChange?: (event: CustomEvent<SegmentedControlUpdateEvent>) => void;
     /**
-     * @deprecated since v3.0.0, will be removed with next major release, use `change` event instead. Emitted when selected element changes.
+     * Emitted when selected element changes.
      */
-    onSegmentedControlChange?: (event: CustomEvent<SegmentedControlChangeEvent>) => void;
+    onUpdate?: (event: CustomEvent<SegmentedControlUpdateEvent>) => void;
     /**
      * Adapts the segmented-control color depending on the theme.
      */
@@ -28,13 +28,13 @@ export declare const PSegmentedControl: import("react").ForwardRefExoticComponen
      */
     backgroundColor?: SegmentedControlBackgroundColor;
     /**
-     * Emitted when selected element changes.
+     * @deprecated since v3.0.0, will be removed with next major release, use `update` event instead. Emitted when selected element changes.
      */
-    onChange?: (event: CustomEvent<SegmentedControlChangeEvent>) => void;
+    onSegmentedControlChange?: (event: CustomEvent<SegmentedControlUpdateEvent>) => void;
     /**
-     * @deprecated since v3.0.0, will be removed with next major release, use `change` event instead. Emitted when selected element changes.
+     * Emitted when selected element changes.
      */
-    onSegmentedControlChange?: (event: CustomEvent<SegmentedControlChangeEvent>) => void;
+    onUpdate?: (event: CustomEvent<SegmentedControlUpdateEvent>) => void;
     /**
      * Adapts the segmented-control color depending on the theme.
      */

package/lib/components/segmented-control.wrapper.js

@@ -5,10 +5,10 @@ var react = require('react');
 var hooks = require('../../hooks.js');
 var utils = require('../../utils.js');
 
-const PSegmentedControl = react.forwardRef(({ backgroundColor, onChange, onSegmentedControlChange, theme = 'light', value, className, ...rest }, ref) => {
+const PSegmentedControl = react.forwardRef(({ backgroundColor, onSegmentedControlChange, onUpdate, theme = 'light', value, className, ...rest }, ref) => {
     const elementRef = react.useRef();
-    hooks.useEventCallback(elementRef, 'change', onChange);
     hooks.useEventCallback(elementRef, 'segmentedControlChange', onSegmentedControlChange);
+    hooks.useEventCallback(elementRef, 'update', onUpdate);
     const WebComponentTag = hooks.usePrefix('p-segmented-control');
     const propsToSync = [backgroundColor, theme, value];
     hooks.useBrowserLayoutEffect(() => {

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

@@ -1,14 +1,14 @@
 import { HTMLAttributes } from 'react';
-import type { StepperHorizontalChangeEvent, BreakpointCustomizable, StepperHorizontalSize, Theme } from '../types';
+import type { StepperHorizontalUpdateEvent, BreakpointCustomizable, StepperHorizontalSize, Theme } from '../types';
 export type PStepperHorizontalProps = Omit<HTMLAttributes<{}>, 'color' | 'onChange'> & {
     /**
-     * Emitted when active step is changed.
+     * @deprecated since v3.0.0, will be removed with next major release, use `update` event instead. Emitted when active step is changed.
      */
-    onChange?: (event: CustomEvent<StepperHorizontalChangeEvent>) => void;
+    onStepChange?: (event: CustomEvent<StepperHorizontalUpdateEvent>) => void;
     /**
-     * @deprecated since v3.0.0, will be removed with next major release, use `change` event instead. Emitted when active step is changed.
+     * Emitted when active step is changed.
      */
-    onStepChange?: (event: CustomEvent<StepperHorizontalChangeEvent>) => void;
+    onUpdate?: (event: CustomEvent<StepperHorizontalUpdateEvent>) => void;
     /**
      * The text size.
      */
@@ -20,13 +20,13 @@ export type PStepperHorizontalProps = Omit<HTMLAttributes<{}>, 'color' | 'onChan
 };
 export declare const PStepperHorizontal: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<{}>, "color" | "onChange"> & {
     /**
-     * Emitted when active step is changed.
+     * @deprecated since v3.0.0, will be removed with next major release, use `update` event instead. Emitted when active step is changed.
      */
-    onChange?: (event: CustomEvent<StepperHorizontalChangeEvent>) => void;
+    onStepChange?: (event: CustomEvent<StepperHorizontalUpdateEvent>) => void;
     /**
-     * @deprecated since v3.0.0, will be removed with next major release, use `change` event instead. Emitted when active step is changed.
+     * Emitted when active step is changed.
      */
-    onStepChange?: (event: CustomEvent<StepperHorizontalChangeEvent>) => void;
+    onUpdate?: (event: CustomEvent<StepperHorizontalUpdateEvent>) => void;
     /**
      * The text size.
      */

package/lib/components/stepper-horizontal.wrapper.js

@@ -5,10 +5,10 @@ var react = require('react');
 var hooks = require('../../hooks.js');
 var utils = require('../../utils.js');
 
-const PStepperHorizontal = react.forwardRef(({ onChange, onStepChange, size = 'small', theme = 'light', className, ...rest }, ref) => {
+const PStepperHorizontal = react.forwardRef(({ onStepChange, onUpdate, size = 'small', theme = 'light', className, ...rest }, ref) => {
     const elementRef = react.useRef();
-    hooks.useEventCallback(elementRef, 'change', onChange);
     hooks.useEventCallback(elementRef, 'stepChange', onStepChange);
+    hooks.useEventCallback(elementRef, 'update', onUpdate);
     const WebComponentTag = hooks.usePrefix('p-stepper-horizontal');
     const propsToSync = [size, theme];
     hooks.useBrowserLayoutEffect(() => {

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

@@ -1,5 +1,5 @@
 import { HTMLAttributes } from 'react';
-import type { BreakpointCustomizable, SwitchAlignLabel, SwitchChangeEvent, Theme } from '../types';
+import type { BreakpointCustomizable, SwitchAlignLabel, SwitchUpdateEvent, Theme } from '../types';
 export type PSwitchProps = Omit<HTMLAttributes<{}>, 'color' | 'onChange'> & {
     /**
      * Aligns the label.
@@ -22,13 +22,13 @@ export type PSwitchProps = Omit<HTMLAttributes<{}>, 'color' | 'onChange'> & {
      */
     loading?: boolean;
     /**
-     * Emitted when checked status is changed.
+     * @deprecated since v3.0.0, will be removed with next major release, use `update` event instead. Emitted when checked status is changed.
      */
-    onChange?: (event: CustomEvent<SwitchChangeEvent>) => void;
+    onSwitchChange?: (event: CustomEvent<SwitchUpdateEvent>) => void;
     /**
-     * @deprecated since v3.0.0, will be removed with next major release, use `change` event instead. Emitted when checked status is changed.
+     * Emitted when checked status is changed.
      */
-    onSwitchChange?: (event: CustomEvent<SwitchChangeEvent>) => void;
+    onUpdate?: (event: CustomEvent<SwitchUpdateEvent>) => void;
     /**
      * Stretches the contents to max available space.
      */
@@ -60,13 +60,13 @@ export declare const PSwitch: import("react").ForwardRefExoticComponent<Omit<HTM
      */
     loading?: boolean;
     /**
-     * Emitted when checked status is changed.
+     * @deprecated since v3.0.0, will be removed with next major release, use `update` event instead. Emitted when checked status is changed.
      */
-    onChange?: (event: CustomEvent<SwitchChangeEvent>) => void;
+    onSwitchChange?: (event: CustomEvent<SwitchUpdateEvent>) => void;
     /**
-     * @deprecated since v3.0.0, will be removed with next major release, use `change` event instead. Emitted when checked status is changed.
+     * Emitted when checked status is changed.
      */
-    onSwitchChange?: (event: CustomEvent<SwitchChangeEvent>) => void;
+    onUpdate?: (event: CustomEvent<SwitchUpdateEvent>) => void;
     /**
      * Stretches the contents to max available space.
      */

package/lib/components/switch.wrapper.js

@@ -5,10 +5,10 @@ var react = require('react');
 var hooks = require('../../hooks.js');
 var utils = require('../../utils.js');
 
-const PSwitch = react.forwardRef(({ alignLabel = 'right', checked = false, disabled = false, hideLabel = false, loading = false, onChange, onSwitchChange, stretch = false, theme = 'light', className, ...rest }, ref) => {
+const PSwitch = react.forwardRef(({ alignLabel = 'right', checked = false, disabled = false, hideLabel = false, loading = false, onSwitchChange, onUpdate, stretch = false, theme = 'light', className, ...rest }, ref) => {
     const elementRef = react.useRef();
-    hooks.useEventCallback(elementRef, 'change', onChange);
     hooks.useEventCallback(elementRef, 'switchChange', onSwitchChange);
+    hooks.useEventCallback(elementRef, 'update', onUpdate);
     const WebComponentTag = hooks.usePrefix('p-switch');
     const propsToSync = [alignLabel, checked, disabled, hideLabel, loading, stretch, theme];
     hooks.useBrowserLayoutEffect(() => {

package/lib/components/table.wrapper.d.ts

@@ -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/lib/components/table.wrapper.js

@@ -5,10 +5,10 @@ var react = require('react');
 var hooks = require('../../hooks.js');
 var utils = require('../../utils.js');
 
-const PTable = react.forwardRef(({ caption, onChange, onSortingChange, theme = 'light', className, ...rest }, ref) => {
+const PTable = react.forwardRef(({ caption, onSortingChange, onUpdate, theme = 'light', className, ...rest }, ref) => {
     const elementRef = react.useRef();
-    hooks.useEventCallback(elementRef, 'change', onChange);
     hooks.useEventCallback(elementRef, 'sortingChange', onSortingChange);
+    hooks.useEventCallback(elementRef, 'update', onUpdate);
     const WebComponentTag = hooks.usePrefix('p-table');
     const propsToSync = [caption, theme];
     hooks.useBrowserLayoutEffect(() => {

package/lib/components/tabs-bar.wrapper.d.ts

@@ -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/lib/components/tabs-bar.wrapper.js

@@ -5,10 +5,10 @@ var react = require('react');
 var hooks = require('../../hooks.js');
 var utils = require('../../utils.js');
 
-const PTabsBar = react.forwardRef(({ activeTabIndex, gradientColor = 'background-base', gradientColorScheme, onChange, onTabChange, size = 'small', theme = 'light', weight = 'regular', className, ...rest }, ref) => {
+const PTabsBar = react.forwardRef(({ activeTabIndex, gradientColor = 'background-base', gradientColorScheme, onTabChange, onUpdate, size = 'small', theme = 'light', weight = 'regular', className, ...rest }, ref) => {
     const elementRef = react.useRef();
-    hooks.useEventCallback(elementRef, 'change', onChange);
     hooks.useEventCallback(elementRef, 'tabChange', onTabChange);
+    hooks.useEventCallback(elementRef, 'update', onUpdate);
     const WebComponentTag = hooks.usePrefix('p-tabs-bar');
     const propsToSync = [activeTabIndex, gradientColor, gradientColorScheme, size, theme, weight];
     hooks.useBrowserLayoutEffect(() => {

package/lib/components/tabs.wrapper.d.ts

@@ -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/lib/components/tabs.wrapper.js

@@ -5,10 +5,10 @@ var react = require('react');
 var hooks = require('../../hooks.js');
 var utils = require('../../utils.js');
 
-const PTabs = react.forwardRef(({ activeTabIndex = 0, gradientColor = 'background-base', gradientColorScheme, onChange, onTabChange, size = 'small', theme = 'light', weight = 'regular', className, ...rest }, ref) => {
+const PTabs = react.forwardRef(({ activeTabIndex = 0, gradientColor = 'background-base', gradientColorScheme, onTabChange, onUpdate, size = 'small', theme = 'light', weight = 'regular', className, ...rest }, ref) => {
     const elementRef = react.useRef();
-    hooks.useEventCallback(elementRef, 'change', onChange);
     hooks.useEventCallback(elementRef, 'tabChange', onTabChange);
+    hooks.useEventCallback(elementRef, 'update', onUpdate);
     const WebComponentTag = hooks.usePrefix('p-tabs');
     const propsToSync = [activeTabIndex, gradientColor, gradientColorScheme, size, theme, weight];
     hooks.useBrowserLayoutEffect(() => {

package/lib/types.d.ts

@@ -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;
 };
@@ -937,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;
 };
@@ -959,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;
@@ -986,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 [
@@ -997,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";
@@ -1006,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 */
@@ -1029,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",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@porsche-design-system/components-react",
-  "version": "3.0.0-alpha.5",
+  "version": "3.0.0-alpha.6",
   "description": "Porsche Design System is a component library designed to help developers create the best experience for software or services distributed by Dr. Ing. h.c. F. Porsche AG.",
   "keywords": [
     "porsche",
@@ -17,7 +17,7 @@
   "license": "SEE LICENSE IN LICENSE",
   "homepage": "https://designsystem.porsche.com",
   "dependencies": {
-    "@porsche-design-system/components-js": "3.0.0-alpha.5"
+    "@porsche-design-system/components-js": "3.0.0-alpha.6"
   },
   "peerDependencies": {
     "react": ">=17.0.0 <19.0.0",