@porsche-design-system/components-react 3.29.0-rc.3 → 3.29.0-rc.5

package/esm/lib/components/input-time.wrapper.mjs

@@ -0,0 +1,27 @@
+"use client";
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef, useRef } from 'react';
+import { useEventCallback, usePrefix, useTheme, useBrowserLayoutEffect, useMergedClass } from '../../hooks.mjs';
+import { syncRef } from '../../utils.mjs';
+
+const PInputTime = /*#__PURE__*/ forwardRef(({ autoComplete, compact = false, description = '', disabled = false, form, hideLabel = false, label = '', loading = false, max, message = '', min, name, onBlur, onChange, onInput, readOnly = false, required = false, state = 'none', step = 60, theme, value = '', className, ...rest }, ref) => {
+    const elementRef = useRef(undefined);
+    useEventCallback(elementRef, 'blur', onBlur);
+    useEventCallback(elementRef, 'change', onChange);
+    useEventCallback(elementRef, 'input', onInput);
+    const WebComponentTag = usePrefix('p-input-time');
+    const propsToSync = [autoComplete, compact, description, disabled, form, hideLabel, label, loading, max, message, min, name, readOnly, required, state, step, theme || useTheme(), value];
+    useBrowserLayoutEffect(() => {
+        const { current } = elementRef;
+        ['autoComplete', 'compact', 'description', 'disabled', 'form', 'hideLabel', 'label', 'loading', 'max', 'message', 'min', 'name', 'readOnly', 'required', 'state', 'step', 'theme', 'value'].forEach((propName, i) => (current[propName] = propsToSync[i]));
+    }, propsToSync);
+    const props = {
+        ...rest,
+        class: useMergedClass(elementRef, className),
+        ref: syncRef(elementRef, ref)
+    };
+    // @ts-ignore
+    return jsx(WebComponentTag, { ...props });
+});
+
+export { PInputTime };

package/esm/lib/components/input-url.wrapper.d.ts

@@ -0,0 +1,192 @@
+import type { BaseProps } from '../../BaseProps';
+import type { BreakpointCustomizable, InputUrlBlurEventDetail, InputUrlChangeEventDetail, InputUrlInputEventDetail, InputUrlState, Theme } from '../types';
+export type PInputUrlProps = BaseProps & {
+    /**
+     * Provides a hint to the browser about what type of data the field expects, which can assist with autofill features (e.g., autocomplete='url').
+     */
+    autoComplete?: string;
+    /**
+     * A boolean value that, if present, renders the input field as a compact version.
+     */
+    compact?: boolean;
+    /**
+     * Supplementary text providing more context or explanation for the input.
+     */
+    description?: string;
+    /**
+     * A boolean value that, if present, makes the input field unusable and unclickable. The value will not be submitted with the form.
+     */
+    disabled?: boolean;
+    /**
+     * Specifies the id of the <form> element that the input belongs to (useful if the input is not a direct descendant of the form).
+     */
+    form?: string;
+    /**
+     * Controls the visibility of the label.
+     */
+    hideLabel?: BreakpointCustomizable<boolean>;
+    /**
+     * Controls the visibility of the url icon.
+     */
+    indicator?: boolean;
+    /**
+     * Text content for a user-facing label.
+     */
+    label?: string;
+    /**
+     * @experimental Shows a loading indicator.
+     */
+    loading?: boolean;
+    /**
+     * A non-negative integer specifying the maximum number of characters the user can enter into the input.
+     */
+    maxLength?: number;
+    /**
+     * Dynamic feedback text for validation or status.
+     */
+    message?: string;
+    /**
+     * A non-negative integer specifying the minimum number of characters required for the input's value to be considered valid.
+     */
+    minLength?: number;
+    /**
+     * The name of the input field, used when submitting the form data.
+     */
+    name: string;
+    /**
+     * Emitted when the url input has lost focus.
+     */
+    onBlur?: (event: CustomEvent<InputUrlBlurEventDetail>) => void;
+    /**
+     * Emitted when the url input loses focus after its value was changed.
+     */
+    onChange?: (event: CustomEvent<InputUrlChangeEventDetail>) => void;
+    /**
+     * Emitted when the value has been changed as a direct result of a user action.
+     */
+    onInput?: (event: CustomEvent<InputUrlInputEventDetail>) => void;
+    /**
+     * Specifies a regular expression that the input's value must match for the value to pass constraint validation. This allows for more specific url validation rules than the browser's default. If provided, it overrides the browser's default tel validation.
+     */
+    pattern?: string;
+    /**
+     * A string that provides a brief hint to the user about what kind of information is expected in the field (e.g., placeholder='https://porsche.com/')
+     */
+    placeholder?: string;
+    /**
+     * A boolean value that, if present, makes the input field uneditable by the user, but its value will still be submitted with the form.
+     */
+    readOnly?: boolean;
+    /**
+     * A boolean value that, if present, indicates that the input field must be filled out before the form can be submitted.
+     */
+    required?: boolean;
+    /**
+     * Indicates the validation or overall status of the input component.
+     */
+    state?: InputUrlState;
+    /**
+     * Controls the visual appearance of the component.
+     */
+    theme?: Theme;
+    /**
+     * The url input value.
+     */
+    value?: string;
+};
+export declare const PInputUrl: import("react").ForwardRefExoticComponent<import("react").DOMAttributes<{}> & 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='url').
+     */
+    autoComplete?: string;
+    /**
+     * A boolean value that, if present, renders the input field as a compact version.
+     */
+    compact?: boolean;
+    /**
+     * Supplementary text providing more context or explanation for the input.
+     */
+    description?: string;
+    /**
+     * A boolean value that, if present, makes the input field unusable and unclickable. The value will not be submitted with the form.
+     */
+    disabled?: boolean;
+    /**
+     * Specifies the id of the <form> element that the input belongs to (useful if the input is not a direct descendant of the form).
+     */
+    form?: string;
+    /**
+     * Controls the visibility of the label.
+     */
+    hideLabel?: BreakpointCustomizable<boolean>;
+    /**
+     * Controls the visibility of the url icon.
+     */
+    indicator?: boolean;
+    /**
+     * Text content for a user-facing label.
+     */
+    label?: string;
+    /**
+     * @experimental Shows a loading indicator.
+     */
+    loading?: boolean;
+    /**
+     * A non-negative integer specifying the maximum number of characters the user can enter into the input.
+     */
+    maxLength?: number;
+    /**
+     * Dynamic feedback text for validation or status.
+     */
+    message?: string;
+    /**
+     * A non-negative integer specifying the minimum number of characters required for the input's value to be considered valid.
+     */
+    minLength?: number;
+    /**
+     * The name of the input field, used when submitting the form data.
+     */
+    name: string;
+    /**
+     * Emitted when the url input has lost focus.
+     */
+    onBlur?: (event: CustomEvent<InputUrlBlurEventDetail>) => void;
+    /**
+     * Emitted when the url input loses focus after its value was changed.
+     */
+    onChange?: (event: CustomEvent<InputUrlChangeEventDetail>) => void;
+    /**
+     * Emitted when the value has been changed as a direct result of a user action.
+     */
+    onInput?: (event: CustomEvent<InputUrlInputEventDetail>) => void;
+    /**
+     * Specifies a regular expression that the input's value must match for the value to pass constraint validation. This allows for more specific url validation rules than the browser's default. If provided, it overrides the browser's default tel validation.
+     */
+    pattern?: string;
+    /**
+     * A string that provides a brief hint to the user about what kind of information is expected in the field (e.g., placeholder='https://porsche.com/')
+     */
+    placeholder?: string;
+    /**
+     * A boolean value that, if present, makes the input field uneditable by the user, but its value will still be submitted with the form.
+     */
+    readOnly?: boolean;
+    /**
+     * A boolean value that, if present, indicates that the input field must be filled out before the form can be submitted.
+     */
+    required?: boolean;
+    /**
+     * Indicates the validation or overall status of the input component.
+     */
+    state?: InputUrlState;
+    /**
+     * Controls the visual appearance of the component.
+     */
+    theme?: Theme;
+    /**
+     * The url input value.
+     */
+    value?: string;
+} & {
+    children?: import("react").ReactNode | undefined;
+} & import("react").RefAttributes<HTMLElement>>;

package/esm/lib/components/input-url.wrapper.mjs

@@ -0,0 +1,27 @@
+"use client";
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef, useRef } from 'react';
+import { useEventCallback, usePrefix, useTheme, useBrowserLayoutEffect, useMergedClass } from '../../hooks.mjs';
+import { syncRef } from '../../utils.mjs';
+
+const PInputUrl = /*#__PURE__*/ forwardRef(({ autoComplete, compact = false, description = '', disabled = false, form, hideLabel = false, indicator = false, label = '', loading = false, maxLength, message = '', minLength, name, onBlur, onChange, onInput, pattern, placeholder = '', readOnly = false, required = false, state = 'none', theme, value = '', className, ...rest }, ref) => {
+    const elementRef = useRef(undefined);
+    useEventCallback(elementRef, 'blur', onBlur);
+    useEventCallback(elementRef, 'change', onChange);
+    useEventCallback(elementRef, 'input', onInput);
+    const WebComponentTag = usePrefix('p-input-url');
+    const propsToSync = [autoComplete, compact, description, disabled, form, hideLabel, indicator, label, loading, maxLength, message, minLength, name, pattern, placeholder, readOnly, required, state, theme || useTheme(), value];
+    useBrowserLayoutEffect(() => {
+        const { current } = elementRef;
+        ['autoComplete', 'compact', 'description', 'disabled', 'form', 'hideLabel', 'indicator', 'label', 'loading', 'maxLength', 'message', 'minLength', 'name', 'pattern', 'placeholder', 'readOnly', 'required', 'state', 'theme', 'value'].forEach((propName, i) => (current[propName] = propsToSync[i]));
+    }, propsToSync);
+    const props = {
+        ...rest,
+        class: useMergedClass(elementRef, className),
+        ref: syncRef(elementRef, ref)
+    };
+    // @ts-ignore
+    return jsx(WebComponentTag, { ...props });
+});
+
+export { PInputUrl };

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

@@ -1,6 +1,10 @@
 import type { BaseProps } from '../../BaseProps';
 import type { MultiSelectDropdownDirection, BreakpointCustomizable, MultiSelectUpdateEventDetail, MultiSelectState, Theme } from '../types';
 export type PMultiSelectProps = BaseProps & {
+    /**
+     * Displays as compact version.
+     */
+    compact?: boolean;
     /**
      * The description text.
      */
@@ -55,6 +59,10 @@ export type PMultiSelectProps = BaseProps & {
     value?: string[];
 };
 export declare const PMultiSelect: import("react").ForwardRefExoticComponent<import("react").DOMAttributes<{}> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "inert" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
+    /**
+     * Displays as compact version.
+     */
+    compact?: boolean;
     /**
      * The description text.
      */

package/esm/lib/components/multi-select.wrapper.mjs

@@ -4,14 +4,14 @@ import { forwardRef, useRef } from 'react';
 import { useEventCallback, usePrefix, useTheme, useBrowserLayoutEffect, useMergedClass } from '../../hooks.mjs';
 import { syncRef } from '../../utils.mjs';
 
-const PMultiSelect = /*#__PURE__*/ forwardRef(({ description = '', disabled = false, dropdownDirection = 'auto', form, hideLabel = false, label = '', message = '', name, onUpdate, required = false, state = 'none', theme, value = [], className, ...rest }, ref) => {
+const PMultiSelect = /*#__PURE__*/ forwardRef(({ compact = false, description = '', disabled = false, dropdownDirection = 'auto', form, hideLabel = false, label = '', message = '', name, onUpdate, required = false, state = 'none', theme, value = [], className, ...rest }, ref) => {
     const elementRef = useRef(undefined);
     useEventCallback(elementRef, 'update', onUpdate);
     const WebComponentTag = usePrefix('p-multi-select');
-    const propsToSync = [description, disabled, dropdownDirection, form, hideLabel, label, message, name, required, state, theme || useTheme(), value];
+    const propsToSync = [compact, description, disabled, dropdownDirection, form, hideLabel, label, message, name, required, state, theme || useTheme(), value];
     useBrowserLayoutEffect(() => {
         const { current } = elementRef;
-        ['description', 'disabled', 'dropdownDirection', 'form', 'hideLabel', 'label', 'message', 'name', 'required', 'state', 'theme', 'value'].forEach((propName, i) => (current[propName] = propsToSync[i]));
+        ['compact', 'description', 'disabled', 'dropdownDirection', 'form', 'hideLabel', 'label', 'message', 'name', 'required', 'state', 'theme', 'value'].forEach((propName, i) => (current[propName] = propsToSync[i]));
     }, propsToSync);
     const props = {
         ...rest,

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

@@ -13,14 +13,6 @@ export type PPopoverProps = BaseProps & {
      * Preferred direction in which popover should open, given there is enough space in viewport. Otherwise, it will be opened in the direction with most available space.
      */
     direction?: PopoverDirection;
-    /**
-     * Emitted when the component requests to be dismissed.
-     */
-    onDismiss?: (event: CustomEvent<void>) => void;
-    /**
-     * If true, the popover is open.
-     */
-    open?: boolean;
     /**
      * Adapts the popover color depending on the theme.
      */
@@ -39,14 +31,6 @@ export declare const PPopover: import("react").ForwardRefExoticComponent<import(
      * Preferred direction in which popover should open, given there is enough space in viewport. Otherwise, it will be opened in the direction with most available space.
      */
     direction?: PopoverDirection;
-    /**
-     * Emitted when the component requests to be dismissed.
-     */
-    onDismiss?: (event: CustomEvent<void>) => void;
-    /**
-     * If true, the popover is open.
-     */
-    open?: boolean;
     /**
      * Adapts the popover color depending on the theme.
      */

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

@@ -1,17 +1,16 @@
 "use client";
 import { jsx } from 'react/jsx-runtime';
 import { forwardRef, useRef } from 'react';
-import { useEventCallback, usePrefix, useTheme, useBrowserLayoutEffect, useMergedClass } from '../../hooks.mjs';
+import { usePrefix, useTheme, useBrowserLayoutEffect, useMergedClass } from '../../hooks.mjs';
 import { syncRef } from '../../utils.mjs';
 
-const PPopover = /*#__PURE__*/ forwardRef(({ aria, description, direction = 'bottom', onDismiss, open = false, theme, className, ...rest }, ref) => {
+const PPopover = /*#__PURE__*/ forwardRef(({ aria, description, direction = 'bottom', theme, className, ...rest }, ref) => {
     const elementRef = useRef(undefined);
-    useEventCallback(elementRef, 'dismiss', onDismiss);
     const WebComponentTag = usePrefix('p-popover');
-    const propsToSync = [aria, description, direction, open, theme || useTheme()];
+    const propsToSync = [aria, description, direction, theme || useTheme()];
     useBrowserLayoutEffect(() => {
         const { current } = elementRef;
-        ['aria', 'description', 'direction', 'open', 'theme'].forEach((propName, i) => (current[propName] = propsToSync[i]));
+        ['aria', 'description', 'direction', 'theme'].forEach((propName, i) => (current[propName] = propsToSync[i]));
     }, propsToSync);
     const props = {
         ...rest,

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

@@ -10,11 +10,11 @@ export type PScrollerProps = BaseProps & {
      */
     aria?: SelectedAriaAttributes<ScrollerAriaAttribute>;
     /**
-     * Adapts the background gradient color of prev and next button.
+     * @deprecated since v3.29.0, will be removed with next major release. Adapts the background gradient color of prev and next button.
      */
     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.
+     * @deprecated since v3.0.0, will be removed with next major release. Adapts the background gradient color of prev and next button.
      */
     gradientColorScheme?: ScrollerGradientColorScheme;
     /**
@@ -44,11 +44,11 @@ export declare const PScroller: import("react").ForwardRefExoticComponent<import
      */
     aria?: SelectedAriaAttributes<ScrollerAriaAttribute>;
     /**
-     * Adapts the background gradient color of prev and next button.
+     * @deprecated since v3.29.0, will be removed with next major release. Adapts the background gradient color of prev and next button.
      */
     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.
+     * @deprecated since v3.0.0, will be removed with next major release. Adapts the background gradient color of prev and next button.
      */
     gradientColorScheme?: ScrollerGradientColorScheme;
     /**

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

@@ -4,7 +4,7 @@ import { forwardRef, useRef } from 'react';
 import { usePrefix, useTheme, useBrowserLayoutEffect, useMergedClass } from '../../hooks.mjs';
 import { syncRef } from '../../utils.mjs';
 
-const PScroller = /*#__PURE__*/ forwardRef(({ alignScrollIndicator = 'center', aria, gradientColor = 'background-base', gradientColorScheme, scrollIndicatorPosition, scrollToPosition, scrollbar = false, theme, className, ...rest }, ref) => {
+const PScroller = /*#__PURE__*/ forwardRef(({ alignScrollIndicator = 'center', aria, gradientColor, gradientColorScheme, scrollIndicatorPosition, scrollToPosition, scrollbar = false, theme, className, ...rest }, ref) => {
     const elementRef = useRef(undefined);
     const WebComponentTag = usePrefix('p-scroller');
     const propsToSync = [alignScrollIndicator, aria, gradientColor, gradientColorScheme, scrollIndicatorPosition, scrollToPosition, scrollbar, theme || useTheme()];

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

@@ -38,6 +38,7 @@ export type PSelectWrapperProps = BaseProps & {
      */
     theme?: Theme;
 };
+/** @deprecated since v3.29.0, will be removed with next major release. Please use `p-select` instead. */
 export declare const PSelectWrapper: import("react").ForwardRefExoticComponent<import("react").DOMAttributes<{}> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "inert" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
     /**
      * The description text.

package/esm/lib/components/select-wrapper.wrapper.mjs

@@ -4,6 +4,7 @@ import { forwardRef, useRef } from 'react';
 import { usePrefix, useTheme, useBrowserLayoutEffect, useMergedClass } from '../../hooks.mjs';
 import { syncRef } from '../../utils.mjs';
 
+/** @deprecated since v3.29.0, will be removed with next major release. Please use `p-select` instead. */
 const PSelectWrapper = /*#__PURE__*/ forwardRef(({ description = '', dropdownDirection = 'auto', filter = false, hideLabel = false, label = '', message = '', native = false, state = 'none', theme, className, ...rest }, ref) => {
     const elementRef = useRef(undefined);
     const WebComponentTag = usePrefix('p-select-wrapper');

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

@@ -6,11 +6,11 @@ export type PTabsBarProps = BaseProps & {
      */
     activeTabIndex?: number | undefined;
     /**
-     * Adapts the background gradient color of prev and next button.
+     * @deprecated since v3.29.0, will be removed with next major release. Adapts the background gradient color of prev and next button.
      */
     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.
+     * @deprecated since v3.0.0, will be removed with next major release. Adapts the background gradient color of prev and next button.
      */
     gradientColorScheme?: TabsBarGradientColorScheme;
     /**
@@ -40,11 +40,11 @@ export declare const PTabsBar: import("react").ForwardRefExoticComponent<import(
      */
     activeTabIndex?: number | undefined;
     /**
-     * Adapts the background gradient color of prev and next button.
+     * @deprecated since v3.29.0, will be removed with next major release. Adapts the background gradient color of prev and next button.
      */
     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.
+     * @deprecated since v3.0.0, will be removed with next major release. Adapts the background gradient color of prev and next button.
      */
     gradientColorScheme?: TabsBarGradientColorScheme;
     /**

package/esm/lib/components/tabs-bar.wrapper.mjs

@@ -4,7 +4,7 @@ import { forwardRef, useRef } from 'react';
 import { useEventCallback, usePrefix, useTheme, useBrowserLayoutEffect, useMergedClass } from '../../hooks.mjs';
 import { syncRef } from '../../utils.mjs';
 
-const PTabsBar = /*#__PURE__*/ forwardRef(({ activeTabIndex, gradientColor = 'background-base', gradientColorScheme, onTabChange, onUpdate, size = 'small', theme, weight = 'regular', className, ...rest }, ref) => {
+const PTabsBar = /*#__PURE__*/ forwardRef(({ activeTabIndex, gradientColor, gradientColorScheme, onTabChange, onUpdate, size = 'small', theme, weight = 'regular', className, ...rest }, ref) => {
     const elementRef = useRef(undefined);
     useEventCallback(elementRef, 'tabChange', onTabChange);
     useEventCallback(elementRef, 'update', onUpdate);

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

@@ -6,7 +6,7 @@ export type PTabsProps = BaseProps & {
      */
     activeTabIndex?: number;
     /**
-     * Adapts the background gradient color of prev and next button.
+     * @deprecated since v3.29.0, will be removed with next major release. Adapts the background gradient color of prev and next button.
      */
     gradientColor?: TabsGradientColor;
     /**
@@ -40,7 +40,7 @@ export declare const PTabs: import("react").ForwardRefExoticComponent<import("re
      */
     activeTabIndex?: number;
     /**
-     * Adapts the background gradient color of prev and next button.
+     * @deprecated since v3.29.0, will be removed with next major release. Adapts the background gradient color of prev and next button.
      */
     gradientColor?: TabsGradientColor;
     /**

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

@@ -4,7 +4,7 @@ import { forwardRef, useRef } from 'react';
 import { useEventCallback, usePrefix, useTheme, useBrowserLayoutEffect, useMergedClass } from '../../hooks.mjs';
 import { syncRef } from '../../utils.mjs';
 
-const PTabs = /*#__PURE__*/ forwardRef(({ activeTabIndex = 0, gradientColor = 'background-base', gradientColorScheme, onTabChange, onUpdate, size = 'small', theme, weight = 'regular', className, ...rest }, ref) => {
+const PTabs = /*#__PURE__*/ forwardRef(({ activeTabIndex = 0, gradientColor, gradientColorScheme, onTabChange, onUpdate, size = 'small', theme, weight = 'regular', className, ...rest }, ref) => {
     const elementRef = useRef(undefined);
     useEventCallback(elementRef, 'tabChange', onTabChange);
     useEventCallback(elementRef, 'update', onUpdate);

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

@@ -62,6 +62,7 @@ export type PTextFieldWrapperProps = BaseProps & {
      */
     unitPosition?: TextFieldWrapperUnitPosition;
 };
+/** @deprecated since v3.29.0, will be removed with next major release. Please use one of the specific input components instead: `p-input-date`, `p-input-email`, `p-input-number`, `p-input-password`, `p-input-search`, `p-input-tel`, `p-input-text`, `p-input-time` or `p-input-url`. */
 export declare const PTextFieldWrapper: import("react").ForwardRefExoticComponent<import("react").DOMAttributes<{}> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "inert" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
     /**
      * Action icon can be set to `locate` for `input type="search"` in order to display an action button.

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

@@ -4,6 +4,7 @@ import { forwardRef, useRef } from 'react';
 import { useEventCallback, usePrefix, useTheme, useBrowserLayoutEffect, useMergedClass } from '../../hooks.mjs';
 import { syncRef } from '../../utils.mjs';
 
+/** @deprecated since v3.29.0, will be removed with next major release. Please use one of the specific input components instead: `p-input-date`, `p-input-email`, `p-input-number`, `p-input-password`, `p-input-search`, `p-input-tel`, `p-input-text`, `p-input-time` or `p-input-url`. */
 const PTextFieldWrapper = /*#__PURE__*/ forwardRef(({ actionIcon, actionLoading = false, description = '', hideLabel = false, label = '', message = '', onAction, showCharacterCount, showCounter = true, showPasswordToggle = true, state = 'none', submitButton = true, theme, unit = '', unitPosition = 'prefix', className, ...rest }, ref) => {
     const elementRef = useRef(undefined);
     useEventCallback(elementRef, 'action', onAction);

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

@@ -34,6 +34,7 @@ export type PTextareaWrapperProps = BaseProps & {
      */
     theme?: Theme;
 };
+/** @deprecated since v3.29.0, will be removed with next major release. Please use `p-textarea` instead. */
 export declare const PTextareaWrapper: import("react").ForwardRefExoticComponent<import("react").DOMAttributes<{}> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "inert" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
     /**
      * The description text.

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

@@ -4,6 +4,7 @@ import { forwardRef, useRef } from 'react';
 import { usePrefix, useTheme, useBrowserLayoutEffect, useMergedClass } from '../../hooks.mjs';
 import { syncRef } from '../../utils.mjs';
 
+/** @deprecated since v3.29.0, will be removed with next major release. Please use `p-textarea` instead. */
 const PTextareaWrapper = /*#__PURE__*/ forwardRef(({ description = '', hideLabel = false, label = '', message = '', showCharacterCount, showCounter = true, state = 'none', theme, className, ...rest }, ref) => {
     const elementRef = useRef(undefined);
     const WebComponentTag = usePrefix('p-textarea-wrapper');