@porsche-design-system/components-react 3.31.0 → 4.0.0-alpha.0

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

@@ -1,5 +1,5 @@
 import type { BaseProps } from '../../BaseProps';
-import type { TextAlign, TextColor, BreakpointCustomizable, TextSize, TextTag, Theme, TextWeight } from '../types';
+import type { TextAlign, TextColor, BreakpointCustomizable, TextSize, TextTag, TextWeight } from '../types';
 export type PTextProps = BaseProps & {
     /**
      * Text alignment of the component.
@@ -21,16 +21,12 @@ export type PTextProps = BaseProps & {
      * Sets a custom HTML tag depending on the usage of the text component.
      */
     tag?: TextTag;
-    /**
-     * Adapts the text color depending on the theme. Has no effect when "inherit" is set as color prop.
-     */
-    theme?: Theme;
     /**
      * The weight of the text.
      */
     weight?: TextWeight;
 };
-export declare const PText: import("react").ForwardRefExoticComponent<Omit<import("react").DOMAttributes<{}>, "onChange" | "onInput"> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "inert" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
+export declare const PText: import("react").ForwardRefExoticComponent<Omit<import("react").DOMAttributes<{}>, "onChange" | "onInput" | "onToggle"> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "inert" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
     /**
      * Text alignment of the component.
      */
@@ -51,10 +47,6 @@ export declare const PText: import("react").ForwardRefExoticComponent<Omit<impor
      * Sets a custom HTML tag depending on the usage of the text component.
      */
     tag?: TextTag;
-    /**
-     * Adapts the text color depending on the theme. Has no effect when "inherit" is set as color prop.
-     */
-    theme?: Theme;
     /**
      * The weight of the text.
      */

package/esm/lib/components/text.wrapper.mjs

@@ -1,16 +1,16 @@
 "use client";
 import { jsx } from 'react/jsx-runtime';
 import { forwardRef, useRef } from 'react';
-import { usePrefix, useTheme, useBrowserLayoutEffect, useMergedClass } from '../../hooks.mjs';
+import { usePrefix, useBrowserLayoutEffect, useMergedClass } from '../../hooks.mjs';
 import { syncRef } from '../../utils.mjs';
 
-const PText = /*#__PURE__*/ forwardRef(({ align = 'start', color = 'primary', ellipsis = false, size = 'small', tag = 'p', theme, weight = 'regular', className, ...rest }, ref) => {
+const PText = /*#__PURE__*/ forwardRef(({ align = 'start', color = 'primary', ellipsis = false, size = 'small', tag = 'p', weight = 'regular', className, ...rest }, ref) => {
     const elementRef = useRef(undefined);
     const WebComponentTag = usePrefix('p-text');
-    const propsToSync = [align, color, ellipsis, size, tag, theme || useTheme(), weight];
+    const propsToSync = [align, color, ellipsis, size, tag, weight];
     useBrowserLayoutEffect(() => {
         const { current } = elementRef;
-        ['align', 'color', 'ellipsis', 'size', 'tag', 'theme', 'weight'].forEach((propName, i) => (current[propName] = propsToSync[i]));
+        ['align', 'color', 'ellipsis', 'size', 'tag', 'weight'].forEach((propName, i) => (current[propName] = propsToSync[i]));
     }, propsToSync);
     const props = {
         ...rest,

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

@@ -1,10 +1,14 @@
 import type { BaseProps } from '../../BaseProps';
-import type { BreakpointCustomizable, TextareaBlurEventDetail, TextareaChangeEventDetail, TextareaInputEventDetail, TextareaResize, TextareaState, Theme, TextareaWrap } from '../types';
+import type { BreakpointCustomizable, TextareaBlurEventDetail, TextareaChangeEventDetail, TextareaInputEventDetail, TextareaResize, TextareaState, TextareaWrap } from '../types';
 export type PTextareaProps = BaseProps & {
     /**
      * Provides a hint to the browser about what type of data the field expects, which can assist with autofill features (e.g., autocomplete='on').
      */
     autoComplete?: string;
+    /**
+     * A boolean value that, if present, renders the textarea as a compact version.
+     */
+    compact?: boolean;
     /**
      * Show or hide the character counter.
      */
@@ -85,10 +89,6 @@ export type PTextareaProps = BaseProps & {
      * Indicates the validation or overall status of the textarea component.
      */
     state?: TextareaState;
-    /**
-     * Controls the visual appearance of the component.
-     */
-    theme?: Theme;
     /**
      * The textarea value.
      */
@@ -98,11 +98,15 @@ export type PTextareaProps = BaseProps & {
      */
     wrap?: TextareaWrap;
 };
-export declare const PTextarea: import("react").ForwardRefExoticComponent<Omit<import("react").DOMAttributes<{}>, "onChange" | "onInput"> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "inert" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
+export declare const PTextarea: import("react").ForwardRefExoticComponent<Omit<import("react").DOMAttributes<{}>, "onChange" | "onInput" | "onToggle"> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "inert" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
     /**
      * Provides a hint to the browser about what type of data the field expects, which can assist with autofill features (e.g., autocomplete='on').
      */
     autoComplete?: string;
+    /**
+     * A boolean value that, if present, renders the textarea as a compact version.
+     */
+    compact?: boolean;
     /**
      * Show or hide the character counter.
      */
@@ -183,10 +187,6 @@ export declare const PTextarea: import("react").ForwardRefExoticComponent<Omit<i
      * Indicates the validation or overall status of the textarea component.
      */
     state?: TextareaState;
-    /**
-     * Controls the visual appearance of the component.
-     */
-    theme?: Theme;
     /**
      * The textarea value.
      */

package/esm/lib/components/textarea.wrapper.mjs

@@ -1,19 +1,19 @@
 "use client";
 import { jsx } from 'react/jsx-runtime';
 import { forwardRef, useRef } from 'react';
-import { useEventCallback, usePrefix, useTheme, useBrowserLayoutEffect, useMergedClass } from '../../hooks.mjs';
+import { useEventCallback, usePrefix, useBrowserLayoutEffect, useMergedClass } from '../../hooks.mjs';
 import { syncRef } from '../../utils.mjs';
 
-const PTextarea = /*#__PURE__*/ forwardRef(({ autoComplete, counter = false, description = '', disabled = false, form, hideLabel = false, label = '', maxLength, message = '', minLength, name, onBlur, onChange, onInput, placeholder = '', readOnly = false, required = false, resize = 'vertical', rows = 7, spellCheck, state = 'none', theme, value = '', wrap = 'soft', className, ...rest }, ref) => {
+const PTextarea = /*#__PURE__*/ forwardRef(({ autoComplete, compact = false, counter = false, description = '', disabled = false, form, hideLabel = false, label = '', maxLength, message = '', minLength, name, onBlur, onChange, onInput, placeholder = '', readOnly = false, required = false, resize = 'vertical', rows = 7, spellCheck, state = 'none', value = '', wrap = 'soft', className, ...rest }, ref) => {
     const elementRef = useRef(undefined);
     useEventCallback(elementRef, 'blur', onBlur);
     useEventCallback(elementRef, 'change', onChange);
     useEventCallback(elementRef, 'input', onInput);
     const WebComponentTag = usePrefix('p-textarea');
-    const propsToSync = [autoComplete, counter, description, disabled, form, hideLabel, label, maxLength, message, minLength, name, placeholder, readOnly, required, resize, rows, spellCheck, state, theme || useTheme(), value, wrap];
+    const propsToSync = [autoComplete, compact, counter, description, disabled, form, hideLabel, label, maxLength, message, minLength, name, placeholder, readOnly, required, resize, rows, spellCheck, state, value, wrap];
     useBrowserLayoutEffect(() => {
         const { current } = elementRef;
-        ['autoComplete', 'counter', 'description', 'disabled', 'form', 'hideLabel', 'label', 'maxLength', 'message', 'minLength', 'name', 'placeholder', 'readOnly', 'required', 'resize', 'rows', 'spellCheck', 'state', 'theme', 'value', 'wrap'].forEach((propName, i) => (current[propName] = propsToSync[i]));
+        ['autoComplete', 'compact', 'counter', 'description', 'disabled', 'form', 'hideLabel', 'label', 'maxLength', 'message', 'minLength', 'name', 'placeholder', 'readOnly', 'required', 'resize', 'rows', 'spellCheck', 'state', 'value', 'wrap'].forEach((propName, i) => (current[propName] = propsToSync[i]));
     }, propsToSync);
     const props = {
         ...rest,

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

@@ -1,14 +1,3 @@
 import type { BaseProps } from '../../BaseProps';
-import type { Theme } from '../types';
-export type PToastProps = BaseProps & {
-    /**
-     * Adapts the toast color depending on the theme.
-     */
-    theme?: Theme;
-};
-export declare const PToast: import("react").ForwardRefExoticComponent<Omit<import("react").DOMAttributes<{}>, "onChange" | "onInput"> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "inert" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
-    /**
-     * Adapts the toast color depending on the theme.
-     */
-    theme?: Theme;
-} & import("react").RefAttributes<HTMLElement>>;
+export type PToastProps = BaseProps & {};
+export declare const PToast: import("react").ForwardRefExoticComponent<Omit<import("react").DOMAttributes<{}>, "onChange" | "onInput" | "onToggle"> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "inert" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & import("react").RefAttributes<HTMLElement>>;

package/esm/lib/components/toast.wrapper.mjs

@@ -1,16 +1,12 @@
 "use client";
 import { jsx } from 'react/jsx-runtime';
 import { forwardRef, useRef } from 'react';
-import { usePrefix, useTheme, useBrowserLayoutEffect, useMergedClass } from '../../hooks.mjs';
+import { usePrefix, useMergedClass } from '../../hooks.mjs';
 import { syncRef } from '../../utils.mjs';
 
-const PToast = /*#__PURE__*/ forwardRef(({ theme, className, ...rest }, ref) => {
+const PToast = /*#__PURE__*/ forwardRef(({ className, ...rest }, ref) => {
     const elementRef = useRef(undefined);
     const WebComponentTag = usePrefix('p-toast');
-    const themeValue = useTheme();
-    useBrowserLayoutEffect(() => {
-        elementRef.current.theme = theme || themeValue;
-    }, [theme, themeValue]);
     const props = {
         ...rest,
         class: useMergedClass(elementRef, className),

package/esm/lib/components/wordmark.wrapper.d.ts

@@ -1,5 +1,5 @@
 import type { BaseProps } from '../../BaseProps';
-import type { SelectedAriaAttributes, WordmarkAriaAttribute, WordmarkSize, WordmarkTarget, Theme } from '../types';
+import type { SelectedAriaAttributes, WordmarkAriaAttribute, WordmarkSize, WordmarkTarget } from '../types';
 export type PWordmarkProps = BaseProps & {
     /**
      * Add ARIA attributes.
@@ -17,12 +17,8 @@ export type PWordmarkProps = BaseProps & {
      * Target attribute where the link should be opened.
      */
     target?: WordmarkTarget;
-    /**
-     * Adapts color depending on theme.
-     */
-    theme?: Theme;
 };
-export declare const PWordmark: import("react").ForwardRefExoticComponent<Omit<import("react").DOMAttributes<{}>, "onChange" | "onInput"> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "inert" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
+export declare const PWordmark: import("react").ForwardRefExoticComponent<Omit<import("react").DOMAttributes<{}>, "onChange" | "onInput" | "onToggle"> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "inert" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
     /**
      * Add ARIA attributes.
      */
@@ -39,8 +35,4 @@ export declare const PWordmark: import("react").ForwardRefExoticComponent<Omit<i
      * Target attribute where the link should be opened.
      */
     target?: WordmarkTarget;
-    /**
-     * Adapts color depending on theme.
-     */
-    theme?: Theme;
 } & import("react").RefAttributes<HTMLElement>>;

package/esm/lib/components/wordmark.wrapper.mjs

@@ -1,16 +1,16 @@
 "use client";
 import { jsx } from 'react/jsx-runtime';
 import { forwardRef, useRef } from 'react';
-import { usePrefix, useTheme, useBrowserLayoutEffect, useMergedClass } from '../../hooks.mjs';
+import { usePrefix, useBrowserLayoutEffect, useMergedClass } from '../../hooks.mjs';
 import { syncRef } from '../../utils.mjs';
 
-const PWordmark = /*#__PURE__*/ forwardRef(({ aria, href, size = 'small', target = '_self', theme, className, ...rest }, ref) => {
+const PWordmark = /*#__PURE__*/ forwardRef(({ aria, href, size = 'small', target = '_self', className, ...rest }, ref) => {
     const elementRef = useRef(undefined);
     const WebComponentTag = usePrefix('p-wordmark');
-    const propsToSync = [aria, href, size, target, theme || useTheme()];
+    const propsToSync = [aria, href, size, target];
     useBrowserLayoutEffect(() => {
         const { current } = elementRef;
-        ['aria', 'href', 'size', 'target', 'theme'].forEach((propName, i) => (current[propName] = propsToSync[i]));
+        ['aria', 'href', 'size', 'target'].forEach((propName, i) => (current[propName] = propsToSync[i]));
     }, propsToSync);
     const props = {
         ...rest,