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

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 text 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 an ordered list.
+     * @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. Has no effect when "inherit" is set as color prop.
+     * 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 text 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 an ordered list.
+     * @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. Has no effect when "inherit" is set as color prop.
+     * 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.
      */