@porsche-design-system/components-react 3.28.0 → 3.29.0-rc.0

package/ssr/esm/lib/components/input-text.wrapper.d.ts

@@ -0,0 +1,192 @@
+import type { BaseProps } from '../../BaseProps';
+import type { InputTextAutoComplete, BreakpointCustomizable, InputTextBlurEventDetail, InputTextChangeEventDetail, InputTextInputEventDetail, InputTextState, Theme } from '../types';
+export type PInputTextProps = BaseProps & {
+    /**
+     * Specifies whether the input can be autofilled by the browser
+     */
+    autoComplete?: InputTextAutoComplete;
+    /**
+     * Displays as a compact version.
+     */
+    compact?: boolean;
+    /**
+     * Show or hide the character counter.
+     */
+    counter?: boolean;
+    /**
+     * The description text.
+     */
+    description?: string;
+    /**
+     * Marks the text input as disabled.
+     */
+    disabled?: boolean;
+    /**
+     * The id of a form element the text input should be associated with.
+     */
+    form?: string;
+    /**
+     * Show or hide label and description text. For better accessibility, it is recommended to show the label.
+     */
+    hideLabel?: BreakpointCustomizable<boolean>;
+    /**
+     * The label text.
+     */
+    label?: string;
+    /**
+     * @experimental Shows a loading indicator.
+     */
+    loading?: boolean;
+    /**
+     * The max length of the text input.
+     */
+    maxLength?: number;
+    /**
+     * The message styled depending on validation state.
+     */
+    message?: string;
+    /**
+     * The min length of the text input.
+     */
+    minLength?: number;
+    /**
+     * The name of the text input.
+     */
+    name: string;
+    /**
+     * Emitted when the text input has lost focus.
+     */
+    onBlur?: (event: CustomEvent<InputTextBlurEventDetail>) => void;
+    /**
+     * Emitted when the text input loses focus after its value was changed.
+     */
+    onChange?: (event: CustomEvent<InputTextChangeEventDetail>) => void;
+    /**
+     * Emitted when the value has been changed as a direct result of a user action.
+     */
+    onInput?: (event: CustomEvent<InputTextInputEventDetail>) => void;
+    /**
+     * The placeholder text.
+     */
+    placeholder?: string;
+    /**
+     * Specifies whether the text input should be read-only.
+     */
+    readOnly?: boolean;
+    /**
+     * Marks the text input as required.
+     */
+    required?: boolean;
+    /**
+     * Indicate whether to enable spell-checking.
+     */
+    spellCheck?: boolean;
+    /**
+     * The validation state.
+     */
+    state?: InputTextState;
+    /**
+     * Adapts the color depending on the theme.
+     */
+    theme?: Theme;
+    /**
+     * The text input value.
+     */
+    value?: string;
+};
+export declare const PInputText: import("react").ForwardRefExoticComponent<import("react").DOMAttributes<{}> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "inert" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
+    /**
+     * Specifies whether the input can be autofilled by the browser
+     */
+    autoComplete?: InputTextAutoComplete;
+    /**
+     * Displays as a compact version.
+     */
+    compact?: boolean;
+    /**
+     * Show or hide the character counter.
+     */
+    counter?: boolean;
+    /**
+     * The description text.
+     */
+    description?: string;
+    /**
+     * Marks the text input as disabled.
+     */
+    disabled?: boolean;
+    /**
+     * The id of a form element the text input should be associated with.
+     */
+    form?: string;
+    /**
+     * Show or hide label and description text. For better accessibility, it is recommended to show the label.
+     */
+    hideLabel?: BreakpointCustomizable<boolean>;
+    /**
+     * The label text.
+     */
+    label?: string;
+    /**
+     * @experimental Shows a loading indicator.
+     */
+    loading?: boolean;
+    /**
+     * The max length of the text input.
+     */
+    maxLength?: number;
+    /**
+     * The message styled depending on validation state.
+     */
+    message?: string;
+    /**
+     * The min length of the text input.
+     */
+    minLength?: number;
+    /**
+     * The name of the text input.
+     */
+    name: string;
+    /**
+     * Emitted when the text input has lost focus.
+     */
+    onBlur?: (event: CustomEvent<InputTextBlurEventDetail>) => void;
+    /**
+     * Emitted when the text input loses focus after its value was changed.
+     */
+    onChange?: (event: CustomEvent<InputTextChangeEventDetail>) => void;
+    /**
+     * Emitted when the value has been changed as a direct result of a user action.
+     */
+    onInput?: (event: CustomEvent<InputTextInputEventDetail>) => void;
+    /**
+     * The placeholder text.
+     */
+    placeholder?: string;
+    /**
+     * Specifies whether the text input should be read-only.
+     */
+    readOnly?: boolean;
+    /**
+     * Marks the text input as required.
+     */
+    required?: boolean;
+    /**
+     * Indicate whether to enable spell-checking.
+     */
+    spellCheck?: boolean;
+    /**
+     * The validation state.
+     */
+    state?: InputTextState;
+    /**
+     * Adapts the color depending on the theme.
+     */
+    theme?: Theme;
+    /**
+     * The text input value.
+     */
+    value?: string;
+} & {
+    children?: import("react").ReactNode | undefined;
+} & import("react").RefAttributes<HTMLElement>>;

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

@@ -17,6 +17,10 @@ export type PSelectProps = BaseProps & {
      * Changes the direction to which the dropdown list appears.
      */
     dropdownDirection?: SelectDropdownDirection;
+    /**
+     * Shows an input in the dropdown allowing options to be filtered.
+     */
+    filter?: boolean;
     /**
      * The id of a form element the select should be associated with.
      */
@@ -75,6 +79,10 @@ export declare const PSelect: import("react").ForwardRefExoticComponent<import("
      * Changes the direction to which the dropdown list appears.
      */
     dropdownDirection?: SelectDropdownDirection;
+    /**
+     * Shows an input in the dropdown allowing options to be filtered.
+     */
+    filter?: boolean;
     /**
      * The id of a form element the select should be associated with.
      */

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

@@ -18,7 +18,7 @@ export type PTextareaProps = BaseProps & {
      */
     form?: string;
     /**
-     * Show or hide label. For better accessibility it is recommended to show the label.
+     * Show or hide label. For better accessibility, it is recommended to show the label.
      */
     hideLabel?: BreakpointCustomizable<boolean>;
     /**
@@ -70,7 +70,7 @@ export type PTextareaProps = BaseProps & {
      */
     resize?: TextareaResize;
     /**
-     * The amount of rows of the textarea.
+     * The number of rows of the textarea.
      */
     rows?: number;
     /**
@@ -116,7 +116,7 @@ export declare const PTextarea: import("react").ForwardRefExoticComponent<import
      */
     form?: string;
     /**
-     * Show or hide label. For better accessibility it is recommended to show the label.
+     * Show or hide label. For better accessibility, it is recommended to show the label.
      */
     hideLabel?: BreakpointCustomizable<boolean>;
     /**
@@ -168,7 +168,7 @@ export declare const PTextarea: import("react").ForwardRefExoticComponent<import
      */
     resize?: TextareaResize;
     /**
-     * The amount of rows of the textarea.
+     * The number of rows of the textarea.
      */
     rows?: number;
     /**

package/ssr/esm/lib/dsr-components/input-base.d.ts

@@ -1,11 +1,13 @@
 import type { FC } from 'react';
-import type { InputBaseState, InputBaseWheelEventDetail } from '@porsche-design-system/components/dist/utils';
+import type { InputBaseState } from '@porsche-design-system/components/dist/utils';
 type InputBaseProps = {
     children?: JSX.Element;
     host: HTMLElement;
     id: string;
     label?: string;
     description?: string;
+    loading?: boolean;
+    initialLoading?: boolean;
     required?: boolean;
     disabled?: boolean;
     state?: InputBaseState;
@@ -23,7 +25,7 @@ type InputBaseProps = {
     type: string;
     value?: string;
     step?: number;
-    onWheel?: (e: InputBaseWheelEventDetail) => void;
+    spellCheck?: boolean;
     start?: JSX.Element;
     end?: JSX.Element;
 };

package/ssr/esm/lib/dsr-components/input-number.d.ts

@@ -9,6 +9,7 @@ import { Component } from 'react';
 export declare class DSRInputNumber extends Component<any> {
     host: HTMLElement;
     private internals;
+    private initialLoading;
     private inputElement;
     private defaultValue;
     formResetCallback(): void;

package/ssr/esm/lib/dsr-components/input-password.d.ts

@@ -10,6 +10,7 @@ export declare class DSRInputPassword extends Component<any> {
     host: HTMLElement;
     private internals;
     private showPassword;
+    private initialLoading;
     private inputElement;
     private defaultValue;
     formResetCallback(): void;

package/ssr/esm/lib/dsr-components/input-search.d.ts

@@ -0,0 +1,20 @@
+import { Component } from 'react';
+/**
+ * @slot {"name": "label", "description": "Shows a label. Only [phrasing content](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Content_categories#Phrasing_content) is allowed."}
+ * @slot {"name": "description", "description": "Shows a description. Only [phrasing content](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Content_categories#Phrasing_content) is allowed."}
+ * @slot {"name": "message", "description": "Shows a state message. Only [phrasing content](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Content_categories#Phrasing_content) is allowed."}
+ * @slot {"name": "start", "description": "Shows content at the start of the input (e.g. icon)."}
+ * @slot {"name": "end", "description": "Shows content at the end of the input (e.g. search button)."}
+ */
+export declare class DSRInputSearch extends Component<any> {
+    host: HTMLElement;
+    private internals;
+    private isClearable;
+    private initialLoading;
+    private inputElement;
+    private defaultValue;
+    formResetCallback(): void;
+    formDisabledCallback(): void;
+    formStateRestoreCallback(): void;
+    render(): JSX.Element;
+}

package/ssr/esm/lib/dsr-components/input-text.d.ts

@@ -0,0 +1,19 @@
+import { Component } from 'react';
+/**
+ * @slot {"name": "label", "description": "Shows a label. Only [phrasing content](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Content_categories#Phrasing_content) is allowed."}
+ * @slot {"name": "description", "description": "Shows a description. Only [phrasing content](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Content_categories#Phrasing_content) is allowed."}
+ * @slot {"name": "message", "description": "Shows a state message. Only [phrasing content](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Content_categories#Phrasing_content) is allowed."}
+ * @slot {"name": "start", "description": "Shows content at the start of the input (e.g. unit prefix)."}
+ * @slot {"name": "end", "description": "Shows content at the end of the input (e.g. toggle button, unit suffix)."}
+ */
+export declare class DSRInputText extends Component<any> {
+    host: HTMLElement;
+    private internals;
+    private initialLoading;
+    private inputElement;
+    private defaultValue;
+    formResetCallback(): void;
+    formDisabledCallback(): void;
+    formStateRestoreCallback(): void;
+    render(): JSX.Element;
+}

package/ssr/esm/lib/dsr-components/select.d.ts

@@ -10,10 +10,12 @@ import { Component } from 'react';
 export declare class DSRSelect extends Component<any> {
     host: HTMLElement;
     private isOpen;
+    private hasFilterResults;
     private internals;
     private defaultValue;
     private buttonElement;
     private popoverElement;
+    private filterInputElement;
     private selectOptions;
     private selectOptgroups;
     private preventOptionUpdate;

package/ssr/esm/lib/types.d.ts

@@ -1091,8 +1091,7 @@ export type IconColor = (typeof ICON_COLORS)[number];
 export type InputNumberState = FormState;
 declare const INPUT_NUMBER_AUTO_COMPLETE: readonly [
     "off",
-    "on",
-    ""
+    "on"
 ];
 export type InputNumberAutoComplete = (typeof INPUT_NUMBER_AUTO_COMPLETE)[number];
 export type InputNumberChangeEventDetail = Event;
@@ -1102,7 +1101,6 @@ export type InputPasswordState = FormState;
 declare const INPUT_PASSWORD_AUTO_COMPLETE: readonly [
     "off",
     "on",
-    "",
     "current-password",
     "new-password"
 ];
@@ -1110,6 +1108,24 @@ export type InputPasswordAutoComplete = (typeof INPUT_PASSWORD_AUTO_COMPLETE)[nu
 export type InputPasswordChangeEventDetail = Event;
 export type InputPasswordBlurEventDetail = Event;
 export type InputPasswordInputEventDetail = InputEvent;
+export type InputSearchState = FormState;
+declare const INPUT_SEARCH_AUTO_COMPLETE: readonly [
+    "off",
+    "on"
+];
+export type InputSearchAutoComplete = (typeof INPUT_SEARCH_AUTO_COMPLETE)[number];
+export type InputSearchChangeEventDetail = Event;
+export type InputSearchBlurEventDetail = Event;
+export type InputSearchInputEventDetail = InputEvent;
+export type InputTextState = FormState;
+declare const INPUT_TEXT_AUTO_COMPLETE: readonly [
+    "off",
+    "on"
+];
+export type InputTextAutoComplete = (typeof INPUT_TEXT_AUTO_COMPLETE)[number];
+export type InputTextChangeEventDetail = Event;
+export type InputTextBlurEventDetail = Event;
+export type InputTextInputEventDetail = InputEvent;
 export type LinkIcon = LinkButtonIconName;
 export type LinkPureIcon = LinkButtonIconName;
 export type LinkPureAriaAttribute = LinkAriaAttribute;
@@ -1500,8 +1516,7 @@ export type TextListType = (typeof TEXT_LIST_TYPES)[number];
 export type TextareaState = FormState;
 declare const AUTO_COMPLETE: readonly [
     "off",
-    "on",
-    ""
+    "on"
 ];
 export type TextareaAutoComplete = (typeof AUTO_COMPLETE)[number];
 declare const TEXTAREA_WRAPS: readonly [