@porsche-design-system/components-react 2.20.0 → 3.0.0-alpha.0

package/lib/components/switch.wrapper.js

@@ -5,14 +5,14 @@ var react = require('react');
 var hooks = require('../../hooks.js');
 var utils = require('../../utils.js');
 
-const PSwitch = /*#__PURE__*/ react.forwardRef(({ alignLabel = 'right', checked = false, disabled = false, hideLabel = false, loading = false, onSwitchChange, stretch = false, tabbable = true, theme = 'light', className, ...rest }, ref) => {
+const PSwitch = react.forwardRef(({ alignLabel = 'right', checked = false, disabled = false, hideLabel = false, loading = false, onSwitchChange, stretch = false, theme = 'light', className, ...rest }, ref) => {
     const elementRef = react.useRef();
     hooks.useEventCallback(elementRef, 'switchChange', onSwitchChange);
     const WebComponentTag = hooks.usePrefix('p-switch');
-    const propsToSync = [alignLabel, checked, disabled, hideLabel, loading, stretch, tabbable, theme];
+    const propsToSync = [alignLabel, checked, disabled, hideLabel, loading, stretch, theme];
     hooks.useBrowserLayoutEffect(() => {
         const { current } = elementRef;
-        ['alignLabel', 'checked', 'disabled', 'hideLabel', 'loading', 'stretch', 'tabbable', 'theme'].forEach((propName, i) => (current[propName] = propsToSync[i]));
+        ['alignLabel', 'checked', 'disabled', 'hideLabel', 'loading', 'stretch', 'theme'].forEach((propName, i) => (current[propName] = propsToSync[i]));
     }, propsToSync);
     const props = {
         ...rest,

package/lib/components/table-body.wrapper.js

@@ -5,7 +5,7 @@ var react = require('react');
 var hooks = require('../../hooks.js');
 var utils = require('../../utils.js');
 
-const PTableBody = /*#__PURE__*/ react.forwardRef(({ className, ...rest }, ref) => {
+const PTableBody = react.forwardRef(({ className, ...rest }, ref) => {
     const elementRef = react.useRef();
     const WebComponentTag = hooks.usePrefix('p-table-body');
     const props = {

package/lib/components/table-cell.wrapper.js

@@ -5,7 +5,7 @@ var react = require('react');
 var hooks = require('../../hooks.js');
 var utils = require('../../utils.js');
 
-const PTableCell = /*#__PURE__*/ react.forwardRef(({ multiline = false, className, ...rest }, ref) => {
+const PTableCell = react.forwardRef(({ multiline = false, className, ...rest }, ref) => {
     const elementRef = react.useRef();
     const WebComponentTag = hooks.usePrefix('p-table-cell');
     hooks.useBrowserLayoutEffect(() => {

package/lib/components/table-head-cell.wrapper.js

@@ -5,7 +5,7 @@ var react = require('react');
 var hooks = require('../../hooks.js');
 var utils = require('../../utils.js');
 
-const PTableHeadCell = /*#__PURE__*/ react.forwardRef(({ hideLabel = false, multiline = false, sort, className, ...rest }, ref) => {
+const PTableHeadCell = react.forwardRef(({ hideLabel = false, multiline = false, sort, className, ...rest }, ref) => {
     const elementRef = react.useRef();
     const WebComponentTag = hooks.usePrefix('p-table-head-cell');
     const propsToSync = [hideLabel, multiline, sort];

package/lib/components/table-head-row.wrapper.js

@@ -5,7 +5,7 @@ var react = require('react');
 var hooks = require('../../hooks.js');
 var utils = require('../../utils.js');
 
-const PTableHeadRow = /*#__PURE__*/ react.forwardRef(({ className, ...rest }, ref) => {
+const PTableHeadRow = react.forwardRef(({ className, ...rest }, ref) => {
     const elementRef = react.useRef();
     const WebComponentTag = hooks.usePrefix('p-table-head-row');
     const props = {

package/lib/components/table-head.wrapper.js

@@ -5,7 +5,7 @@ var react = require('react');
 var hooks = require('../../hooks.js');
 var utils = require('../../utils.js');
 
-const PTableHead = /*#__PURE__*/ react.forwardRef(({ className, ...rest }, ref) => {
+const PTableHead = react.forwardRef(({ className, ...rest }, ref) => {
     const elementRef = react.useRef();
     const WebComponentTag = hooks.usePrefix('p-table-head');
     const props = {

package/lib/components/table-row.wrapper.js

@@ -5,7 +5,7 @@ var react = require('react');
 var hooks = require('../../hooks.js');
 var utils = require('../../utils.js');
 
-const PTableRow = /*#__PURE__*/ react.forwardRef(({ className, ...rest }, ref) => {
+const PTableRow = react.forwardRef(({ className, ...rest }, ref) => {
     const elementRef = react.useRef();
     const WebComponentTag = hooks.usePrefix('p-table-row');
     const props = {

package/lib/components/table.wrapper.js

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

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

@@ -1,5 +1,5 @@
 import { HTMLAttributes } from 'react';
-import type { TabGradientColorTheme, TabChangeEvent, BreakpointCustomizable, TabSize, ThemeExtendedElectric, TabWeight } from '../types';
+import type { TabGradientColorTheme, TabChangeEvent, BreakpointCustomizable, TabSize, Theme, TabWeight } from '../types';
 export type PTabsBarProps = Omit<HTMLAttributes<{}>, 'color'> & {
     /**
      * Defines which tab to be visualized as selected (zero-based numbering), undefined if none should be selected.
@@ -20,7 +20,7 @@ export type PTabsBarProps = Omit<HTMLAttributes<{}>, 'color'> & {
     /**
      * Adapts the color when used on dark background.
      */
-    theme?: ThemeExtendedElectric;
+    theme?: Theme;
     /**
      * The text weight.
      */
@@ -46,7 +46,7 @@ export declare const PTabsBar: import("react").ForwardRefExoticComponent<Omit<HT
     /**
      * Adapts the color when used on dark background.
      */
-    theme?: ThemeExtendedElectric;
+    theme?: Theme;
     /**
      * The text weight.
      */

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

@@ -5,7 +5,7 @@ var react = require('react');
 var hooks = require('../../hooks.js');
 var utils = require('../../utils.js');
 
-const PTabsBar = /*#__PURE__*/ react.forwardRef(({ activeTabIndex, gradientColorScheme = 'default', onTabChange, size = 'small', theme = 'light', weight = 'regular', className, ...rest }, ref) => {
+const PTabsBar = react.forwardRef(({ activeTabIndex, gradientColorScheme = 'default', onTabChange, size = 'small', theme = 'light', weight = 'regular', className, ...rest }, ref) => {
     const elementRef = react.useRef();
     hooks.useEventCallback(elementRef, 'tabChange', onTabChange);
     const WebComponentTag = hooks.usePrefix('p-tabs-bar');

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

@@ -5,7 +5,7 @@ var react = require('react');
 var hooks = require('../../hooks.js');
 var utils = require('../../utils.js');
 
-const PTabsItem = /*#__PURE__*/ react.forwardRef(({ label, className, ...rest }, ref) => {
+const PTabsItem = react.forwardRef(({ label, className, ...rest }, ref) => {
     const elementRef = react.useRef();
     const WebComponentTag = hooks.usePrefix('p-tabs-item');
     hooks.useBrowserLayoutEffect(() => {

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

@@ -1,5 +1,5 @@
 import { HTMLAttributes } from 'react';
-import type { TabGradientColorTheme, TabChangeEvent, BreakpointCustomizable, TabSize, ThemeExtendedElectric, TabWeight } from '../types';
+import type { TabGradientColorTheme, TabChangeEvent, BreakpointCustomizable, TabSize, Theme, TabWeight } from '../types';
 export type PTabsProps = Omit<HTMLAttributes<{}>, 'color'> & {
     /**
      * Defines which tab to be visualized as selected (zero-based numbering).
@@ -20,7 +20,7 @@ export type PTabsProps = Omit<HTMLAttributes<{}>, 'color'> & {
     /**
      * Adapts the color when used on dark background.
      */
-    theme?: ThemeExtendedElectric;
+    theme?: Theme;
     /**
      * The text weight.
      */
@@ -46,7 +46,7 @@ export declare const PTabs: import("react").ForwardRefExoticComponent<Omit<HTMLA
     /**
      * Adapts the color when used on dark background.
      */
-    theme?: ThemeExtendedElectric;
+    theme?: Theme;
     /**
      * The text weight.
      */

package/lib/components/tabs.wrapper.js

@@ -5,7 +5,7 @@ var react = require('react');
 var hooks = require('../../hooks.js');
 var utils = require('../../utils.js');
 
-const PTabs = /*#__PURE__*/ react.forwardRef(({ activeTabIndex = 0, gradientColorScheme = 'default', onTabChange, size = 'small', theme = 'light', weight = 'regular', className, ...rest }, ref) => {
+const PTabs = react.forwardRef(({ activeTabIndex = 0, gradientColorScheme = 'default', onTabChange, size = 'small', theme = 'light', weight = 'regular', className, ...rest }, ref) => {
     const elementRef = react.useRef();
     hooks.useEventCallback(elementRef, 'tabChange', onTabChange);
     const WebComponentTag = hooks.usePrefix('p-tabs');

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

@@ -1,5 +1,5 @@
 import { HTMLAttributes } from 'react';
-import type { SelectedAriaAttributes, TagDismissibleAriaAttribute, TagDismissibleColor } from '../types';
+import type { SelectedAriaAttributes, TagDismissibleAriaAttribute, TagDismissibleColor, Theme } from '../types';
 export type PTagDismissibleProps = Omit<HTMLAttributes<{}>, 'color'> & {
     /**
      * Add ARIA attributes.
@@ -13,6 +13,10 @@ export type PTagDismissibleProps = Omit<HTMLAttributes<{}>, 'color'> & {
      * The label text.
      */
     label?: string;
+    /**
+     * Adapts the color when used on dark background.
+     */
+    theme?: Theme;
 };
 export declare const PTagDismissible: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<{}>, "color"> & {
     /**
@@ -27,6 +31,10 @@ export declare const PTagDismissible: import("react").ForwardRefExoticComponent<
      * The label text.
      */
     label?: string;
+    /**
+     * Adapts the color when used on dark background.
+     */
+    theme?: Theme;
 } & {
     children?: import("react").ReactNode;
 } & import("react").RefAttributes<HTMLElement>>;

package/lib/components/tag-dismissible.wrapper.js

@@ -5,13 +5,13 @@ var react = require('react');
 var hooks = require('../../hooks.js');
 var utils = require('../../utils.js');
 
-const PTagDismissible = /*#__PURE__*/ react.forwardRef(({ aria, color = 'background-surface', label, className, ...rest }, ref) => {
+const PTagDismissible = react.forwardRef(({ aria, color = 'background-surface', label, theme = 'light', className, ...rest }, ref) => {
     const elementRef = react.useRef();
     const WebComponentTag = hooks.usePrefix('p-tag-dismissible');
-    const propsToSync = [aria, color, label];
+    const propsToSync = [aria, color, label, theme];
     hooks.useBrowserLayoutEffect(() => {
         const { current } = elementRef;
-        ['aria', 'color', 'label'].forEach((propName, i) => (current[propName] = propsToSync[i]));
+        ['aria', 'color', 'label', 'theme'].forEach((propName, i) => (current[propName] = propsToSync[i]));
     }, propsToSync);
     const props = {
         ...rest,

package/lib/components/tag.wrapper.js

@@ -5,7 +5,7 @@ var react = require('react');
 var hooks = require('../../hooks.js');
 var utils = require('../../utils.js');
 
-const PTag = /*#__PURE__*/ react.forwardRef(({ color = 'background-surface', icon, iconSource, theme = 'light', className, ...rest }, ref) => {
+const PTag = react.forwardRef(({ color = 'background-surface', icon, iconSource, theme = 'light', className, ...rest }, ref) => {
     const elementRef = react.useRef();
     const WebComponentTag = hooks.usePrefix('p-tag');
     const propsToSync = [color, icon, iconSource, theme];

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

@@ -1,5 +1,5 @@
 import { HTMLAttributes } from 'react';
-import type { IconName, BreakpointCustomizable, FormState, TextFieldWrapperUnitPosition } from '../types';
+import type { IconName, BreakpointCustomizable, FormState, Theme, TextFieldWrapperUnitPosition } from '../types';
 export type PTextFieldWrapperProps = Omit<HTMLAttributes<{}>, 'color'> & {
     /**
      * Action icon can be set to `locate` for `input type="search"` in order to display an action button.
@@ -37,6 +37,10 @@ export type PTextFieldWrapperProps = Omit<HTMLAttributes<{}>, 'color'> & {
      * The validation state.
      */
     state?: FormState;
+    /**
+     * Adapts the color depending on the theme.
+     */
+    theme?: Theme;
     /**
      * The unit text.
      */
@@ -83,6 +87,10 @@ export declare const PTextFieldWrapper: import("react").ForwardRefExoticComponen
      * The validation state.
      */
     state?: FormState;
+    /**
+     * Adapts the color depending on the theme.
+     */
+    theme?: Theme;
     /**
      * The unit text.
      */

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 = /*#__PURE__*/ react.forwardRef(({ actionIcon, actionLoading = false, description = '', hideLabel = false, label = '', message = '', onAction, showCharacterCount = true, state = 'none', unit = '', unitPosition = 'prefix', className, ...rest }, ref) => {
+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 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, unit, unitPosition];
+    const propsToSync = [actionIcon, actionLoading, description, hideLabel, label, message, showCharacterCount, state, theme, unit, unitPosition];
     hooks.useBrowserLayoutEffect(() => {
         const { current } = elementRef;
-        ['actionIcon', 'actionLoading', 'description', 'hideLabel', 'label', 'message', 'showCharacterCount', 'state', 'unit', 'unitPosition'].forEach((propName, i) => (current[propName] = propsToSync[i]));
+        ['actionIcon', 'actionLoading', 'description', 'hideLabel', 'label', 'message', 'showCharacterCount', 'state', 'theme', 'unit', 'unitPosition'].forEach((propName, i) => (current[propName] = propsToSync[i]));
     }, propsToSync);
     const props = {
         ...rest,

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

@@ -5,7 +5,7 @@ var react = require('react');
 var hooks = require('../../hooks.js');
 var utils = require('../../utils.js');
 
-const PTextListItem = /*#__PURE__*/ react.forwardRef(({ className, ...rest }, ref) => {
+const PTextListItem = react.forwardRef(({ className, ...rest }, ref) => {
     const elementRef = react.useRef();
     const WebComponentTag = hooks.usePrefix('p-text-list-item');
     const props = {

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

@@ -5,7 +5,7 @@ var react = require('react');
 var hooks = require('../../hooks.js');
 var utils = require('../../utils.js');
 
-const PTextList = /*#__PURE__*/ react.forwardRef(({ listType = 'unordered', orderType = 'numbered', theme = 'light', className, ...rest }, ref) => {
+const PTextList = react.forwardRef(({ listType = 'unordered', orderType = 'numbered', theme = 'light', className, ...rest }, ref) => {
     const elementRef = react.useRef();
     const WebComponentTag = hooks.usePrefix('p-text-list');
     const propsToSync = [listType, orderType, theme];

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

@@ -18,7 +18,7 @@ export type PTextProps = Omit<HTMLAttributes<{}>, 'color'> & {
      */
     size?: BreakpointCustomizable<TextSize>;
     /**
-     * Sets a custom HTML tag depending of the usage of the text component.
+     * Sets a custom HTML tag depending on the usage of the text component.
      */
     tag?: TextTag;
     /**
@@ -48,7 +48,7 @@ export declare const PText: import("react").ForwardRefExoticComponent<Omit<HTMLA
      */
     size?: BreakpointCustomizable<TextSize>;
     /**
-     * Sets a custom HTML tag depending of the usage of the text component.
+     * Sets a custom HTML tag depending on the usage of the text component.
      */
     tag?: TextTag;
     /**

package/lib/components/text.wrapper.js

@@ -5,7 +5,7 @@ var react = require('react');
 var hooks = require('../../hooks.js');
 var utils = require('../../utils.js');
 
-const PText = /*#__PURE__*/ react.forwardRef(({ align = 'left', color = 'default', ellipsis = false, size = 'small', tag = 'p', theme = 'light', weight = 'regular', className, ...rest }, ref) => {
+const PText = react.forwardRef(({ align = 'left', color = 'primary', ellipsis = false, size = 'small', tag = 'p', theme = 'light', weight = 'regular', className, ...rest }, ref) => {
     const elementRef = react.useRef();
     const WebComponentTag = hooks.usePrefix('p-text');
     const propsToSync = [align, color, ellipsis, size, tag, theme, weight];

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

@@ -1,5 +1,5 @@
 import { HTMLAttributes } from 'react';
-import type { BreakpointCustomizable, FormState } from '../types';
+import type { BreakpointCustomizable, FormState, Theme } from '../types';
 export type PTextareaWrapperProps = Omit<HTMLAttributes<{}>, 'color'> & {
     /**
      * The description text.
@@ -25,6 +25,10 @@ export type PTextareaWrapperProps = Omit<HTMLAttributes<{}>, 'color'> & {
      * The validation state.
      */
     state?: FormState;
+    /**
+     * Adapts the color depending on the theme.
+     */
+    theme?: Theme;
 };
 export declare const PTextareaWrapper: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<{}>, "color"> & {
     /**
@@ -51,6 +55,10 @@ export declare const PTextareaWrapper: import("react").ForwardRefExoticComponent
      * The validation state.
      */
     state?: FormState;
+    /**
+     * Adapts the color depending on the theme.
+     */
+    theme?: Theme;
 } & {
     children?: import("react").ReactNode;
 } & import("react").RefAttributes<HTMLElement>>;

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 = /*#__PURE__*/ react.forwardRef(({ description = '', hideLabel = false, label = '', message = '', showCharacterCount = true, state = 'none', className, ...rest }, ref) => {
+const PTextareaWrapper = react.forwardRef(({ description = '', hideLabel = false, label = '', message = '', showCharacterCount = 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];
+    const propsToSync = [description, hideLabel, label, message, showCharacterCount, state, theme];
     hooks.useBrowserLayoutEffect(() => {
         const { current } = elementRef;
-        ['description', 'hideLabel', 'label', 'message', 'showCharacterCount', 'state'].forEach((propName, i) => (current[propName] = propsToSync[i]));
+        ['description', 'hideLabel', 'label', 'message', 'showCharacterCount', 'state', 'theme'].forEach((propName, i) => (current[propName] = propsToSync[i]));
     }, propsToSync);
     const props = {
         ...rest,

package/lib/components/toast.wrapper.js

@@ -5,7 +5,7 @@ var react = require('react');
 var hooks = require('../../hooks.js');
 var utils = require('../../utils.js');
 
-const PToast = /*#__PURE__*/ react.forwardRef(({ theme = 'light', className, ...rest }, ref) => {
+const PToast = react.forwardRef(({ theme = 'light', className, ...rest }, ref) => {
     const elementRef = react.useRef();
     const WebComponentTag = hooks.usePrefix('p-toast');
     hooks.useBrowserLayoutEffect(() => {