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

package/lib/components/tabs-bar.wrapper.js

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

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

@@ -1,11 +1,11 @@
 import { HTMLAttributes } from 'react';
-export type PTabsItemProps = Omit<HTMLAttributes<{}>, 'color'> & {
+export type PTabsItemProps = Omit<HTMLAttributes<{}>, 'color' | 'onChange'> & {
     /**
      * Defines the label used in tabs.
      */
     label: string;
 };
-export declare const PTabsItem: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<{}>, "color"> & {
+export declare const PTabsItem: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<{}>, "color" | "onChange"> & {
     /**
      * Defines the label used in tabs.
      */

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

@@ -1,6 +1,6 @@
 import { HTMLAttributes } from 'react';
-import type { TabGradientColorTheme, TabChangeEvent, BreakpointCustomizable, TabSize, Theme, TabWeight } from '../types';
-export type PTabsProps = Omit<HTMLAttributes<{}>, 'color'> & {
+import type { TabsGradientColor, TabsGradientColorScheme, TabsChangeEvent, BreakpointCustomizable, TabsSize, Theme, TabsWeight } from '../types';
+export type PTabsProps = Omit<HTMLAttributes<{}>, 'color' | 'onChange'> & {
     /**
      * Defines which tab to be visualized as selected (zero-based numbering).
      */
@@ -8,15 +8,23 @@ export type PTabsProps = Omit<HTMLAttributes<{}>, 'color'> & {
     /**
      * Adapts the background gradient color of prev and next button.
      */
-    gradientColorScheme?: TabGradientColorTheme;
+    gradientColor?: TabsGradientColor;
+    /**
+     * @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?: TabsGradientColorScheme;
     /**
      * Emitted when active tab is changed.
      */
-    onTabChange?: (event: CustomEvent<TabChangeEvent>) => void;
+    onChange?: (event: CustomEvent<TabsChangeEvent>) => 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<TabsChangeEvent>) => void;
     /**
      * The text size.
      */
-    size?: BreakpointCustomizable<TabSize>;
+    size?: BreakpointCustomizable<TabsSize>;
     /**
      * Adapts the color when used on dark background.
      */
@@ -24,9 +32,9 @@ export type PTabsProps = Omit<HTMLAttributes<{}>, 'color'> & {
     /**
      * The text weight.
      */
-    weight?: TabWeight;
+    weight?: TabsWeight;
 };
-export declare const PTabs: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<{}>, "color"> & {
+export declare const PTabs: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<{}>, "color" | "onChange"> & {
     /**
      * Defines which tab to be visualized as selected (zero-based numbering).
      */
@@ -34,15 +42,23 @@ export declare const PTabs: import("react").ForwardRefExoticComponent<Omit<HTMLA
     /**
      * Adapts the background gradient color of prev and next button.
      */
-    gradientColorScheme?: TabGradientColorTheme;
+    gradientColor?: TabsGradientColor;
+    /**
+     * @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?: TabsGradientColorScheme;
     /**
      * Emitted when active tab is changed.
      */
-    onTabChange?: (event: CustomEvent<TabChangeEvent>) => void;
+    onChange?: (event: CustomEvent<TabsChangeEvent>) => 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<TabsChangeEvent>) => void;
     /**
      * The text size.
      */
-    size?: BreakpointCustomizable<TabSize>;
+    size?: BreakpointCustomizable<TabsSize>;
     /**
      * Adapts the color when used on dark background.
      */
@@ -50,7 +66,7 @@ export declare const PTabs: import("react").ForwardRefExoticComponent<Omit<HTMLA
     /**
      * The text weight.
      */
-    weight?: TabWeight;
+    weight?: TabsWeight;
 } & {
     children?: import("react").ReactNode;
 } & import("react").RefAttributes<HTMLElement>>;

package/lib/components/tabs.wrapper.js

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

package/lib/components/tag-dismissible.wrapper.d.ts

@@ -1,6 +1,6 @@
 import { HTMLAttributes } from 'react';
 import type { SelectedAriaAttributes, TagDismissibleAriaAttribute, TagDismissibleColor, Theme } from '../types';
-export type PTagDismissibleProps = Omit<HTMLAttributes<{}>, 'color'> & {
+export type PTagDismissibleProps = Omit<HTMLAttributes<{}>, 'color' | 'onChange'> & {
     /**
      * Add ARIA attributes.
      */
@@ -18,7 +18,7 @@ export type PTagDismissibleProps = Omit<HTMLAttributes<{}>, 'color'> & {
      */
     theme?: Theme;
 };
-export declare const PTagDismissible: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<{}>, "color"> & {
+export declare const PTagDismissible: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<{}>, "color" | "onChange"> & {
     /**
      * Add ARIA attributes.
      */

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

@@ -1,6 +1,6 @@
 import { HTMLAttributes } from 'react';
-import type { TagColor, IconName, Theme } from '../types';
-export type PTagProps = Omit<HTMLAttributes<{}>, 'color'> & {
+import type { TagColor, TagIcon, Theme } from '../types';
+export type PTagProps = Omit<HTMLAttributes<{}>, 'color' | 'onChange'> & {
     /**
      * Background color variations depending on theme property.
      */
@@ -8,7 +8,7 @@ export type PTagProps = Omit<HTMLAttributes<{}>, 'color'> & {
     /**
      * The icon shown.
      */
-    icon?: IconName;
+    icon?: TagIcon;
     /**
      * A URL path to a custom icon.
      */
@@ -18,7 +18,7 @@ export type PTagProps = Omit<HTMLAttributes<{}>, 'color'> & {
      */
     theme?: Theme;
 };
-export declare const PTag: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<{}>, "color"> & {
+export declare const PTag: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<{}>, "color" | "onChange"> & {
     /**
      * Background color variations depending on theme property.
      */
@@ -26,7 +26,7 @@ export declare const PTag: import("react").ForwardRefExoticComponent<Omit<HTMLAt
     /**
      * The icon shown.
      */
-    icon?: IconName;
+    icon?: TagIcon;
     /**
      * A URL path to a custom icon.
      */

package/lib/components/text-field-wrapper.wrapper.d.ts

@@ -1,10 +1,10 @@
 import { HTMLAttributes } from 'react';
-import type { IconName, BreakpointCustomizable, FormState, Theme, TextFieldWrapperUnitPosition } from '../types';
-export type PTextFieldWrapperProps = Omit<HTMLAttributes<{}>, 'color'> & {
+import type { TextFieldWrapperActionIcon, BreakpointCustomizable, TextFieldWrapperState, Theme, TextFieldWrapperUnitPosition } from '../types';
+export type PTextFieldWrapperProps = Omit<HTMLAttributes<{}>, 'color' | 'onChange'> & {
     /**
      * Action icon can be set to `locate` for `input type="search"` in order to display an action button.
      */
-    actionIcon?: Extract<IconName, "locate">;
+    actionIcon?: TextFieldWrapperActionIcon;
     /**
      * Disables the action button and shows a loading indicator. No events will be triggered while loading state is active.
      */
@@ -30,13 +30,17 @@ export type PTextFieldWrapperProps = Omit<HTMLAttributes<{}>, 'color'> & {
      */
     onAction?: (event: CustomEvent<void>) => void;
     /**
-     * Show or hide max character count.
+     * @deprecated since v3.0.0, will be removed with next major release, use `showCounter` instead. Show or hide max character count.
      */
     showCharacterCount?: boolean;
+    /**
+     * Show or hide max character count.
+     */
+    showCounter?: boolean;
     /**
      * The validation state.
      */
-    state?: FormState;
+    state?: TextFieldWrapperState;
     /**
      * Adapts the color depending on the theme.
      */
@@ -50,11 +54,11 @@ export type PTextFieldWrapperProps = Omit<HTMLAttributes<{}>, 'color'> & {
      */
     unitPosition?: TextFieldWrapperUnitPosition;
 };
-export declare const PTextFieldWrapper: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<{}>, "color"> & {
+export declare const PTextFieldWrapper: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<{}>, "color" | "onChange"> & {
     /**
      * Action icon can be set to `locate` for `input type="search"` in order to display an action button.
      */
-    actionIcon?: Extract<IconName, "locate">;
+    actionIcon?: TextFieldWrapperActionIcon;
     /**
      * Disables the action button and shows a loading indicator. No events will be triggered while loading state is active.
      */
@@ -80,13 +84,17 @@ export declare const PTextFieldWrapper: import("react").ForwardRefExoticComponen
      */
     onAction?: (event: CustomEvent<void>) => void;
     /**
-     * Show or hide max character count.
+     * @deprecated since v3.0.0, will be removed with next major release, use `showCounter` instead. Show or hide max character count.
      */
     showCharacterCount?: boolean;
+    /**
+     * Show or hide max character count.
+     */
+    showCounter?: boolean;
     /**
      * The validation state.
      */
-    state?: FormState;
+    state?: TextFieldWrapperState;
     /**
      * Adapts the color depending on the theme.
      */

package/lib/components/text-field-wrapper.wrapper.js

@@ -5,14 +5,14 @@ var react = require('react');
 var hooks = require('../../hooks.js');
 var utils = require('../../utils.js');
 
-const PTextFieldWrapper = react.forwardRef(({ actionIcon, actionLoading = false, description = '', hideLabel = false, label = '', message = '', onAction, showCharacterCount = true, state = 'none', theme = 'light', unit = '', unitPosition = 'prefix', className, ...rest }, ref) => {
+const PTextFieldWrapper = react.forwardRef(({ actionIcon, actionLoading = false, description = '', hideLabel = false, label = '', message = '', onAction, showCharacterCount, showCounter = true, state = 'none', theme = 'light', unit = '', unitPosition = 'prefix', className, ...rest }, ref) => {
     const elementRef = react.useRef();
     hooks.useEventCallback(elementRef, 'action', onAction);
     const WebComponentTag = hooks.usePrefix('p-text-field-wrapper');
-    const propsToSync = [actionIcon, actionLoading, description, hideLabel, label, message, showCharacterCount, state, theme, unit, unitPosition];
+    const propsToSync = [actionIcon, actionLoading, description, hideLabel, label, message, showCharacterCount, showCounter, state, theme, unit, unitPosition];
     hooks.useBrowserLayoutEffect(() => {
         const { current } = elementRef;
-        ['actionIcon', 'actionLoading', 'description', 'hideLabel', 'label', 'message', 'showCharacterCount', 'state', 'theme', 'unit', 'unitPosition'].forEach((propName, i) => (current[propName] = propsToSync[i]));
+        ['actionIcon', 'actionLoading', 'description', 'hideLabel', 'label', 'message', 'showCharacterCount', 'showCounter', 'state', 'theme', 'unit', 'unitPosition'].forEach((propName, i) => (current[propName] = propsToSync[i]));
     }, propsToSync);
     const props = {
         ...rest,

package/lib/components/text-list-item.wrapper.d.ts

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

package/lib/components/text-list.wrapper.d.ts

@@ -1,32 +1,40 @@
 import { HTMLAttributes } from 'react';
-import type { ListType, OrderType, Theme } from '../types';
-export type PTextListProps = Omit<HTMLAttributes<{}>, 'color'> & {
+import type { TextListListType, TextListOrderType, Theme, TextListType } from '../types';
+export type PTextListProps = Omit<HTMLAttributes<{}>, 'color' | 'onChange'> & {
     /**
-     * The type of the list.
+     * @deprecated since v3.0.0, will be removed with next major release, use `type` instead. The type of the list.
      */
-    listType?: ListType;
+    listType?: TextListListType;
     /**
-     * The list style type of ordered list. Only has effect when list type is set to 'ordered'.
+     * @deprecated since v3.0.0, will be removed with next major release, use `type` instead. The list style type of ordered list. Only has effect when list type is set to 'ordered'.
      */
-    orderType?: OrderType;
+    orderType?: TextListOrderType;
     /**
      * Adapts the text color depending on the theme.
      */
     theme?: Theme;
+    /**
+     * The list style type.
+     */
+    type?: TextListType;
 };
-export declare const PTextList: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<{}>, "color"> & {
+export declare const PTextList: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<{}>, "color" | "onChange"> & {
     /**
-     * The type of the list.
+     * @deprecated since v3.0.0, will be removed with next major release, use `type` instead. The type of the list.
      */
-    listType?: ListType;
+    listType?: TextListListType;
     /**
-     * The list style type of ordered list. Only has effect when list type is set to 'ordered'.
+     * @deprecated since v3.0.0, will be removed with next major release, use `type` instead. The list style type of ordered list. Only has effect when list type is set to 'ordered'.
      */
-    orderType?: OrderType;
+    orderType?: TextListOrderType;
     /**
      * Adapts the text color depending on the theme.
      */
     theme?: Theme;
+    /**
+     * The list style type.
+     */
+    type?: TextListType;
 } & {
     children?: import("react").ReactNode;
 } & import("react").RefAttributes<HTMLElement>>;

package/lib/components/text-list.wrapper.js

@@ -5,13 +5,13 @@ var react = require('react');
 var hooks = require('../../hooks.js');
 var utils = require('../../utils.js');
 
-const PTextList = react.forwardRef(({ listType = 'unordered', orderType = 'numbered', theme = 'light', className, ...rest }, ref) => {
+const PTextList = react.forwardRef(({ listType, orderType, theme = 'light', type = 'unordered', className, ...rest }, ref) => {
     const elementRef = react.useRef();
     const WebComponentTag = hooks.usePrefix('p-text-list');
-    const propsToSync = [listType, orderType, theme];
+    const propsToSync = [listType, orderType, theme, type];
     hooks.useBrowserLayoutEffect(() => {
         const { current } = elementRef;
-        ['listType', 'orderType', 'theme'].forEach((propName, i) => (current[propName] = propsToSync[i]));
+        ['listType', 'orderType', 'theme', 'type'].forEach((propName, i) => (current[propName] = propsToSync[i]));
     }, propsToSync);
     const props = {
         ...rest,

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

@@ -1,6 +1,6 @@
 import { HTMLAttributes } from 'react';
 import type { TextAlign, TextColor, BreakpointCustomizable, TextSize, TextTag, Theme, TextWeight } from '../types';
-export type PTextProps = Omit<HTMLAttributes<{}>, 'color'> & {
+export type PTextProps = Omit<HTMLAttributes<{}>, 'color' | 'onChange'> & {
     /**
      * Text alignment of the component.
      */
@@ -30,7 +30,7 @@ export type PTextProps = Omit<HTMLAttributes<{}>, 'color'> & {
      */
     weight?: TextWeight;
 };
-export declare const PText: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<{}>, "color"> & {
+export declare const PText: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<{}>, "color" | "onChange"> & {
     /**
      * Text alignment of the component.
      */

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

@@ -1,6 +1,6 @@
 import { HTMLAttributes } from 'react';
-import type { BreakpointCustomizable, FormState, Theme } from '../types';
-export type PTextareaWrapperProps = Omit<HTMLAttributes<{}>, 'color'> & {
+import type { BreakpointCustomizable, TextareaWrapperState, Theme } from '../types';
+export type PTextareaWrapperProps = Omit<HTMLAttributes<{}>, 'color' | 'onChange'> & {
     /**
      * The description text.
      */
@@ -18,19 +18,23 @@ export type PTextareaWrapperProps = Omit<HTMLAttributes<{}>, 'color'> & {
      */
     message?: string;
     /**
-     * Show or hide max character count.
+     * @deprecated since v3.0.0, will be removed with next major release, use `showCounter` instead. Show or hide max character count.
      */
     showCharacterCount?: boolean;
+    /**
+     * Show or hide max character count.
+     */
+    showCounter?: boolean;
     /**
      * The validation state.
      */
-    state?: FormState;
+    state?: TextareaWrapperState;
     /**
      * Adapts the color depending on the theme.
      */
     theme?: Theme;
 };
-export declare const PTextareaWrapper: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<{}>, "color"> & {
+export declare const PTextareaWrapper: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<{}>, "color" | "onChange"> & {
     /**
      * The description text.
      */
@@ -48,13 +52,17 @@ export declare const PTextareaWrapper: import("react").ForwardRefExoticComponent
      */
     message?: string;
     /**
-     * Show or hide max character count.
+     * @deprecated since v3.0.0, will be removed with next major release, use `showCounter` instead. Show or hide max character count.
      */
     showCharacterCount?: boolean;
+    /**
+     * Show or hide max character count.
+     */
+    showCounter?: boolean;
     /**
      * The validation state.
      */
-    state?: FormState;
+    state?: TextareaWrapperState;
     /**
      * Adapts the color depending on the theme.
      */

package/lib/components/textarea-wrapper.wrapper.js

@@ -5,13 +5,13 @@ var react = require('react');
 var hooks = require('../../hooks.js');
 var utils = require('../../utils.js');
 
-const PTextareaWrapper = react.forwardRef(({ description = '', hideLabel = false, label = '', message = '', showCharacterCount = true, state = 'none', theme = 'light', className, ...rest }, ref) => {
+const PTextareaWrapper = react.forwardRef(({ description = '', hideLabel = false, label = '', message = '', showCharacterCount, showCounter = true, state = 'none', theme = 'light', className, ...rest }, ref) => {
     const elementRef = react.useRef();
     const WebComponentTag = hooks.usePrefix('p-textarea-wrapper');
-    const propsToSync = [description, hideLabel, label, message, showCharacterCount, state, theme];
+    const propsToSync = [description, hideLabel, label, message, showCharacterCount, showCounter, state, theme];
     hooks.useBrowserLayoutEffect(() => {
         const { current } = elementRef;
-        ['description', 'hideLabel', 'label', 'message', 'showCharacterCount', 'state', 'theme'].forEach((propName, i) => (current[propName] = propsToSync[i]));
+        ['description', 'hideLabel', 'label', 'message', 'showCharacterCount', 'showCounter', 'state', 'theme'].forEach((propName, i) => (current[propName] = propsToSync[i]));
     }, propsToSync);
     const props = {
         ...rest,

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

@@ -1,12 +1,12 @@
 import { HTMLAttributes } from 'react';
 import type { Theme } from '../types';
-export type PToastProps = Omit<HTMLAttributes<{}>, 'color'> & {
+export type PToastProps = Omit<HTMLAttributes<{}>, 'color' | 'onChange'> & {
     /**
      * Adapts the toast color depending on the theme.
      */
     theme?: Theme;
 };
-export declare const PToast: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<{}>, "color"> & {
+export declare const PToast: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<{}>, "color" | "onChange"> & {
     /**
      * Adapts the toast color depending on the theme.
      */