@porsche-design-system/components-react 3.0.0-alpha.2 → 3.0.0-alpha.3

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

@@ -1,6 +1,6 @@
 import { HTMLAttributes } from 'react';
-import type { BreakpointCustomizable, FormState, Theme } from '../types';
-export type PRadioButtonWrapperProps = Omit<HTMLAttributes<{}>, 'color'> & {
+import type { BreakpointCustomizable, RadioButtonWrapperState, Theme } from '../types';
+export type PRadioButtonWrapperProps = Omit<HTMLAttributes<{}>, 'color' | 'onChange'> & {
     /**
      * Show or hide label. For better accessibility it's recommended to show the label.
      */
@@ -16,13 +16,13 @@ export type PRadioButtonWrapperProps = Omit<HTMLAttributes<{}>, 'color'> & {
     /**
      * The validation state.
      */
-    state?: FormState;
+    state?: RadioButtonWrapperState;
     /**
      * Adapts the color depending on the theme.
      */
     theme?: Theme;
 };
-export declare const PRadioButtonWrapper: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<{}>, "color"> & {
+export declare const PRadioButtonWrapper: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<{}>, "color" | "onChange"> & {
     /**
      * Show or hide label. For better accessibility it's recommended to show the label.
      */
@@ -38,7 +38,7 @@ export declare const PRadioButtonWrapper: import("react").ForwardRefExoticCompon
     /**
      * The validation state.
      */
-    state?: FormState;
+    state?: RadioButtonWrapperState;
     /**
      * Adapts the color depending on the theme.
      */

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

@@ -1,36 +1,52 @@
 import { HTMLAttributes } from 'react';
-import type { GradientColorTheme, ScrollIndicatorPosition, ScrollToPosition, Theme } from '../types';
-export type PScrollerProps = Omit<HTMLAttributes<{}>, 'color'> & {
+import type { ScrollerAlignScrollIndicator, ScrollerGradientColor, ScrollerGradientColorScheme, ScrollerScrollIndicatorPosition, ScrollerScrollToPosition, Theme } from '../types';
+export type PScrollerProps = Omit<HTMLAttributes<{}>, 'color' | 'onChange'> & {
+    /**
+     * Sets the vertical position of scroll indicator
+     */
+    alignScrollIndicator?: ScrollerAlignScrollIndicator;
     /**
      * Adapts the background gradient color of prev and next button.
      */
-    gradientColorScheme?: GradientColorTheme;
+    gradientColor?: ScrollerGradientColor;
+    /**
+     * @deprecated since v3.0.0, will be removed with next major release, use `gradientColor` instead. Adapts the background gradient color of prev and next button.
+     */
+    gradientColorScheme?: ScrollerGradientColorScheme;
     /**
-     * Sets the vertical position of scroll indicator icon
+     * @deprecated since v3.0.0, will be removed with next major release, use `alignScrollIndicator` instead. Sets the vertical position of scroll indicator
      */
-    scrollIndicatorPosition?: ScrollIndicatorPosition;
+    scrollIndicatorPosition?: ScrollerScrollIndicatorPosition;
     /**
      * Scrolls the scroll area to the left either smooth or immediately
      */
-    scrollToPosition?: ScrollToPosition;
+    scrollToPosition?: ScrollerScrollToPosition;
     /**
      * Adapts the color when used on dark background.
      */
     theme?: Theme;
 };
-export declare const PScroller: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<{}>, "color"> & {
+export declare const PScroller: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<{}>, "color" | "onChange"> & {
+    /**
+     * Sets the vertical position of scroll indicator
+     */
+    alignScrollIndicator?: ScrollerAlignScrollIndicator;
     /**
      * Adapts the background gradient color of prev and next button.
      */
-    gradientColorScheme?: GradientColorTheme;
+    gradientColor?: ScrollerGradientColor;
+    /**
+     * @deprecated since v3.0.0, will be removed with next major release, use `gradientColor` instead. Adapts the background gradient color of prev and next button.
+     */
+    gradientColorScheme?: ScrollerGradientColorScheme;
     /**
-     * Sets the vertical position of scroll indicator icon
+     * @deprecated since v3.0.0, will be removed with next major release, use `alignScrollIndicator` instead. Sets the vertical position of scroll indicator
      */
-    scrollIndicatorPosition?: ScrollIndicatorPosition;
+    scrollIndicatorPosition?: ScrollerScrollIndicatorPosition;
     /**
      * Scrolls the scroll area to the left either smooth or immediately
      */
-    scrollToPosition?: ScrollToPosition;
+    scrollToPosition?: ScrollerScrollToPosition;
     /**
      * Adapts the color when used on dark background.
      */

package/lib/components/scroller.wrapper.js

@@ -5,13 +5,13 @@ var react = require('react');
 var hooks = require('../../hooks.js');
 var utils = require('../../utils.js');
 
-const PScroller = react.forwardRef(({ gradientColorScheme = 'default', scrollIndicatorPosition = 'center', scrollToPosition, theme = 'light', className, ...rest }, ref) => {
+const PScroller = react.forwardRef(({ alignScrollIndicator = 'center', gradientColor = 'background-base', gradientColorScheme, scrollIndicatorPosition, scrollToPosition, theme = 'light', className, ...rest }, ref) => {
     const elementRef = react.useRef();
     const WebComponentTag = hooks.usePrefix('p-scroller');
-    const propsToSync = [gradientColorScheme, scrollIndicatorPosition, scrollToPosition, theme];
+    const propsToSync = [alignScrollIndicator, gradientColor, gradientColorScheme, scrollIndicatorPosition, scrollToPosition, theme];
     hooks.useBrowserLayoutEffect(() => {
         const { current } = elementRef;
-        ['gradientColorScheme', 'scrollIndicatorPosition', 'scrollToPosition', 'theme'].forEach((propName, i) => (current[propName] = propsToSync[i]));
+        ['alignScrollIndicator', 'gradientColor', 'gradientColorScheme', 'scrollIndicatorPosition', 'scrollToPosition', 'theme'].forEach((propName, i) => (current[propName] = propsToSync[i]));
     }, propsToSync);
     const props = {
         ...rest,

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

@@ -1,6 +1,6 @@
 import { HTMLAttributes } from 'react';
-import type { IconName } from '../types';
-export type PSegmentedControlItemProps = Omit<HTMLAttributes<{}>, 'color'> & {
+import type { SegmentedControlItemIcon } from '../types';
+export type PSegmentedControlItemProps = Omit<HTMLAttributes<{}>, 'color' | 'onChange'> & {
     /**
      * Disables the button. No events will be triggered while disabled state is active.
      */
@@ -8,7 +8,7 @@ export type PSegmentedControlItemProps = Omit<HTMLAttributes<{}>, 'color'> & {
     /**
      * The icon shown.
      */
-    icon?: IconName;
+    icon?: SegmentedControlItemIcon;
     /**
      * A URL path to a custom icon.
      */
@@ -22,7 +22,7 @@ export type PSegmentedControlItemProps = Omit<HTMLAttributes<{}>, 'color'> & {
      */
     value: string | number;
 };
-export declare const PSegmentedControlItem: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<{}>, "color"> & {
+export declare const PSegmentedControlItem: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<{}>, "color" | "onChange"> & {
     /**
      * Disables the button. No events will be triggered while disabled state is active.
      */
@@ -30,7 +30,7 @@ export declare const PSegmentedControlItem: import("react").ForwardRefExoticComp
     /**
      * The icon shown.
      */
-    icon?: IconName;
+    icon?: SegmentedControlItemIcon;
     /**
      * A URL path to a custom icon.
      */

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

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

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

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

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

@@ -1,6 +1,6 @@
 import { HTMLAttributes } from 'react';
-import type { DropdownDirection, BreakpointCustomizable, FormState, Theme } from '../types';
-export type PSelectWrapperProps = Omit<HTMLAttributes<{}>, 'color'> & {
+import type { SelectWrapperDropdownDirection, BreakpointCustomizable, SelectWrapperState, Theme } from '../types';
+export type PSelectWrapperProps = Omit<HTMLAttributes<{}>, 'color' | 'onChange'> & {
     /**
      * The description text.
      */
@@ -8,7 +8,7 @@ export type PSelectWrapperProps = Omit<HTMLAttributes<{}>, 'color'> & {
     /**
      * Changes the direction to which the dropdown list appears.
      */
-    dropdownDirection?: DropdownDirection;
+    dropdownDirection?: SelectWrapperDropdownDirection;
     /**
      * Filters select options by typing a character
      */
@@ -32,13 +32,13 @@ export type PSelectWrapperProps = Omit<HTMLAttributes<{}>, 'color'> & {
     /**
      * The validation state.
      */
-    state?: FormState;
+    state?: SelectWrapperState;
     /**
      * Adapts the select color depending on the theme.
      */
     theme?: Theme;
 };
-export declare const PSelectWrapper: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<{}>, "color"> & {
+export declare const PSelectWrapper: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<{}>, "color" | "onChange"> & {
     /**
      * The description text.
      */
@@ -46,7 +46,7 @@ export declare const PSelectWrapper: import("react").ForwardRefExoticComponent<O
     /**
      * Changes the direction to which the dropdown list appears.
      */
-    dropdownDirection?: DropdownDirection;
+    dropdownDirection?: SelectWrapperDropdownDirection;
     /**
      * Filters select options by typing a character
      */
@@ -70,7 +70,7 @@ export declare const PSelectWrapper: import("react").ForwardRefExoticComponent<O
     /**
      * The validation state.
      */
-    state?: FormState;
+    state?: SelectWrapperState;
     /**
      * Adapts the select color depending on the theme.
      */

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

@@ -1,6 +1,6 @@
 import { HTMLAttributes } from 'react';
 import type { SelectedAriaAttributes, SpinnerAriaAttribute, BreakpointCustomizable, SpinnerSize, Theme } from '../types';
-export type PSpinnerProps = Omit<HTMLAttributes<{}>, 'color'> & {
+export type PSpinnerProps = Omit<HTMLAttributes<{}>, 'color' | 'onChange'> & {
     /**
      * Add ARIA attributes.
      */
@@ -14,7 +14,7 @@ export type PSpinnerProps = Omit<HTMLAttributes<{}>, 'color'> & {
      */
     theme?: Theme;
 };
-export declare const PSpinner: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<{}>, "color"> & {
+export declare const PSpinner: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<{}>, "color" | "onChange"> & {
     /**
      * Add ARIA attributes.
      */

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

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

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

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

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

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

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

@@ -1,10 +1,10 @@
 import { HTMLAttributes } from 'react';
-import type { BreakpointCustomizable, AlignLabel, SwitchChangeEvent, Theme } from '../types';
-export type PSwitchProps = Omit<HTMLAttributes<{}>, 'color'> & {
+import type { BreakpointCustomizable, SwitchAlignLabel, SwitchChangeEvent, Theme } from '../types';
+export type PSwitchProps = Omit<HTMLAttributes<{}>, 'color' | 'onChange'> & {
     /**
      * Aligns the label.
      */
-    alignLabel?: BreakpointCustomizable<AlignLabel>;
+    alignLabel?: BreakpointCustomizable<SwitchAlignLabel>;
     /**
      * Visualize the switch with on/off status.
      */
@@ -24,6 +24,10 @@ export type PSwitchProps = Omit<HTMLAttributes<{}>, 'color'> & {
     /**
      * Emitted when checked status is changed.
      */
+    onChange?: (event: CustomEvent<SwitchChangeEvent>) => void;
+    /**
+     * @deprecated since v3.0.0, will be removed with next major release, use `change` event instead. Emitted when checked status is changed.
+     */
     onSwitchChange?: (event: CustomEvent<SwitchChangeEvent>) => void;
     /**
      * Stretches the contents to max available space.
@@ -34,11 +38,11 @@ export type PSwitchProps = Omit<HTMLAttributes<{}>, 'color'> & {
      */
     theme?: Theme;
 };
-export declare const PSwitch: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<{}>, "color"> & {
+export declare const PSwitch: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<{}>, "color" | "onChange"> & {
     /**
      * Aligns the label.
      */
-    alignLabel?: BreakpointCustomizable<AlignLabel>;
+    alignLabel?: BreakpointCustomizable<SwitchAlignLabel>;
     /**
      * Visualize the switch with on/off status.
      */
@@ -58,6 +62,10 @@ export declare const PSwitch: import("react").ForwardRefExoticComponent<Omit<HTM
     /**
      * Emitted when checked status is changed.
      */
+    onChange?: (event: CustomEvent<SwitchChangeEvent>) => void;
+    /**
+     * @deprecated since v3.0.0, will be removed with next major release, use `change` event instead. Emitted when checked status is changed.
+     */
     onSwitchChange?: (event: CustomEvent<SwitchChangeEvent>) => void;
     /**
      * Stretches the contents to max available space.

package/lib/components/switch.wrapper.js

@@ -5,8 +5,9 @@ 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, onSwitchChange, stretch = false, theme = 'light', className, ...rest }, ref) => {
+const PSwitch = react.forwardRef(({ alignLabel = 'right', checked = false, disabled = false, hideLabel = false, loading = false, onChange, onSwitchChange, stretch = false, theme = 'light', className, ...rest }, ref) => {
     const elementRef = react.useRef();
+    hooks.useEventCallback(elementRef, 'change', onChange);
     hooks.useEventCallback(elementRef, 'switchChange', onSwitchChange);
     const WebComponentTag = hooks.usePrefix('p-switch');
     const propsToSync = [alignLabel, checked, disabled, hideLabel, loading, stretch, theme];

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

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

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

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

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

@@ -1,6 +1,6 @@
 import { HTMLAttributes } from 'react';
 import type { TableHeadCellSort } from '../types';
-export type PTableHeadCellProps = Omit<HTMLAttributes<{}>, 'color'> & {
+export type PTableHeadCellProps = Omit<HTMLAttributes<{}>, 'color' | 'onChange'> & {
     /**
      * Hides the label but stays accessible for screen readers. This property only takes effect when sort property is not defined.
      */
@@ -14,7 +14,7 @@ export type PTableHeadCellProps = Omit<HTMLAttributes<{}>, 'color'> & {
      */
     sort?: TableHeadCellSort;
 };
-export declare const PTableHeadCell: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<{}>, "color"> & {
+export declare const PTableHeadCell: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<{}>, "color" | "onChange"> & {
     /**
      * Hides the label but stays accessible for screen readers. This property only takes effect when sort property is not defined.
      */

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

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

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

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

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

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

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

@@ -1,6 +1,6 @@
 import { HTMLAttributes } from 'react';
-import type { SortingChangeEvent } from '../types';
-export type PTableProps = Omit<HTMLAttributes<{}>, 'color'> & {
+import type { TableChangeEvent } 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.
      */
@@ -8,9 +8,13 @@ export type PTableProps = Omit<HTMLAttributes<{}>, 'color'> & {
     /**
      * Emitted when sorting is changed.
      */
-    onSortingChange?: (event: CustomEvent<SortingChangeEvent>) => void;
+    onChange?: (event: CustomEvent<TableChangeEvent>) => void;
+    /**
+     * @deprecated since v3.0.0, will be removed with next major release, use `change` event instead. Emitted when sorting is changed.
+     */
+    onSortingChange?: (event: CustomEvent<TableChangeEvent>) => void;
 };
-export declare const PTable: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<{}>, "color"> & {
+export declare const PTable: import("react").ForwardRefExoticComponent<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.
      */
@@ -18,7 +22,11 @@ export declare const PTable: import("react").ForwardRefExoticComponent<Omit<HTML
     /**
      * Emitted when sorting is changed.
      */
-    onSortingChange?: (event: CustomEvent<SortingChangeEvent>) => void;
+    onChange?: (event: CustomEvent<TableChangeEvent>) => void;
+    /**
+     * @deprecated since v3.0.0, will be removed with next major release, use `change` event instead. Emitted when sorting is changed.
+     */
+    onSortingChange?: (event: CustomEvent<TableChangeEvent>) => void;
 } & {
     children?: import("react").ReactNode;
 } & import("react").RefAttributes<HTMLElement>>;

package/lib/components/table.wrapper.js

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

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

@@ -1,6 +1,6 @@
 import { HTMLAttributes } from 'react';
-import type { TabGradientColorTheme, TabChangeEvent, BreakpointCustomizable, TabSize, Theme, TabWeight } from '../types';
-export type PTabsBarProps = Omit<HTMLAttributes<{}>, 'color'> & {
+import type { TabsBarGradientColor, TabsBarGradientColorScheme, TabsBarChangeEvent, 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.
      */
@@ -8,15 +8,23 @@ export type PTabsBarProps = Omit<HTMLAttributes<{}>, 'color'> & {
     /**
      * Adapts the background gradient color of prev and next button.
      */
-    gradientColorScheme?: TabGradientColorTheme;
+    gradientColor?: TabsBarGradientColor;
+    /**
+     * @deprecated since v3.0.0, will be removed with next major release, use `gradientColor` instead. Adapts the background gradient color of prev and next button.
+     */
+    gradientColorScheme?: TabsBarGradientColorScheme;
     /**
      * Emitted when active tab is changed.
      */
-    onTabChange?: (event: CustomEvent<TabChangeEvent>) => void;
+    onChange?: (event: CustomEvent<TabsBarChangeEvent>) => void;
+    /**
+     * @deprecated since v3.0.0, will be removed with next major release, use `change` event instead. Emitted when active tab is changed.
+     */
+    onTabChange?: (event: CustomEvent<TabsBarChangeEvent>) => void;
     /**
      * The text size.
      */
-    size?: BreakpointCustomizable<TabSize>;
+    size?: BreakpointCustomizable<TabsBarSize>;
     /**
      * Adapts the color when used on dark background.
      */
@@ -24,9 +32,9 @@ export type PTabsBarProps = Omit<HTMLAttributes<{}>, 'color'> & {
     /**
      * The text weight.
      */
-    weight?: TabWeight;
+    weight?: TabsBarWeight;
 };
-export declare const PTabsBar: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<{}>, "color"> & {
+export declare const PTabsBar: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<{}>, "color" | "onChange"> & {
     /**
      * Defines which tab to be visualized as selected (zero-based numbering), undefined if none should be selected.
      */
@@ -34,15 +42,23 @@ export declare const PTabsBar: import("react").ForwardRefExoticComponent<Omit<HT
     /**
      * Adapts the background gradient color of prev and next button.
      */
-    gradientColorScheme?: TabGradientColorTheme;
+    gradientColor?: TabsBarGradientColor;
+    /**
+     * @deprecated since v3.0.0, will be removed with next major release, use `gradientColor` instead. Adapts the background gradient color of prev and next button.
+     */
+    gradientColorScheme?: TabsBarGradientColorScheme;
     /**
      * Emitted when active tab is changed.
      */
-    onTabChange?: (event: CustomEvent<TabChangeEvent>) => void;
+    onChange?: (event: CustomEvent<TabsBarChangeEvent>) => void;
+    /**
+     * @deprecated since v3.0.0, will be removed with next major release, use `change` event instead. Emitted when active tab is changed.
+     */
+    onTabChange?: (event: CustomEvent<TabsBarChangeEvent>) => void;
     /**
      * The text size.
      */
-    size?: BreakpointCustomizable<TabSize>;
+    size?: BreakpointCustomizable<TabsBarSize>;
     /**
      * Adapts the color when used on dark background.
      */
@@ -50,7 +66,7 @@ export declare const PTabsBar: import("react").ForwardRefExoticComponent<Omit<HT
     /**
      * The text weight.
      */
-    weight?: TabWeight;
+    weight?: TabsBarWeight;
 } & {
     children?: import("react").ReactNode;
 } & import("react").RefAttributes<HTMLElement>>;