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

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

@@ -0,0 +1,176 @@
+import type { BaseProps } from '../../BaseProps';
+import type { InputSearchAutoComplete, BreakpointCustomizable, InputSearchBlurEventDetail, InputSearchChangeEventDetail, InputSearchInputEventDetail, InputSearchState, Theme } from '../types';
+export type PInputSearchProps = BaseProps & {
+    /**
+     * Specifies whether the input can be autofilled by the browser
+     */
+    autoComplete?: InputSearchAutoComplete;
+    /**
+     * Show clear input value button
+     */
+    clear?: boolean;
+    /**
+     * Displays as a compact version.
+     */
+    compact?: boolean;
+    /**
+     * The description text.
+     */
+    description?: string;
+    /**
+     * Marks the search input as disabled.
+     */
+    disabled?: boolean;
+    /**
+     * The id of a form element the search 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>;
+    /**
+     * Show search indicator icon
+     */
+    indicator?: boolean;
+    /**
+     * The label text.
+     */
+    label?: string;
+    /**
+     * @experimental Shows a loading indicator.
+     */
+    loading?: boolean;
+    /**
+     * The message styled depending on validation state.
+     */
+    message?: string;
+    /**
+     * The name of the search input.
+     */
+    name: string;
+    /**
+     * Emitted when the search input has lost focus.
+     */
+    onBlur?: (event: CustomEvent<InputSearchBlurEventDetail>) => void;
+    /**
+     * Emitted when the search input loses focus after its value was changed.
+     */
+    onChange?: (event: CustomEvent<InputSearchChangeEventDetail>) => void;
+    /**
+     * Emitted when the value has been changed as a direct result of a user action.
+     */
+    onInput?: (event: CustomEvent<InputSearchInputEventDetail>) => void;
+    /**
+     * The placeholder text.
+     */
+    placeholder?: string;
+    /**
+     * Specifies whether the search input should be read-only.
+     */
+    readOnly?: boolean;
+    /**
+     * Marks the search input as required.
+     */
+    required?: boolean;
+    /**
+     * The validation state.
+     */
+    state?: InputSearchState;
+    /**
+     * Adapts the color depending on the theme.
+     */
+    theme?: Theme;
+    /**
+     * The search input value.
+     */
+    value?: string;
+};
+export declare const PInputSearch: 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?: InputSearchAutoComplete;
+    /**
+     * Show clear input value button
+     */
+    clear?: boolean;
+    /**
+     * Displays as a compact version.
+     */
+    compact?: boolean;
+    /**
+     * The description text.
+     */
+    description?: string;
+    /**
+     * Marks the search input as disabled.
+     */
+    disabled?: boolean;
+    /**
+     * The id of a form element the search 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>;
+    /**
+     * Show search indicator icon
+     */
+    indicator?: boolean;
+    /**
+     * The label text.
+     */
+    label?: string;
+    /**
+     * @experimental Shows a loading indicator.
+     */
+    loading?: boolean;
+    /**
+     * The message styled depending on validation state.
+     */
+    message?: string;
+    /**
+     * The name of the search input.
+     */
+    name: string;
+    /**
+     * Emitted when the search input has lost focus.
+     */
+    onBlur?: (event: CustomEvent<InputSearchBlurEventDetail>) => void;
+    /**
+     * Emitted when the search input loses focus after its value was changed.
+     */
+    onChange?: (event: CustomEvent<InputSearchChangeEventDetail>) => void;
+    /**
+     * Emitted when the value has been changed as a direct result of a user action.
+     */
+    onInput?: (event: CustomEvent<InputSearchInputEventDetail>) => void;
+    /**
+     * The placeholder text.
+     */
+    placeholder?: string;
+    /**
+     * Specifies whether the search input should be read-only.
+     */
+    readOnly?: boolean;
+    /**
+     * Marks the search input as required.
+     */
+    required?: boolean;
+    /**
+     * The validation state.
+     */
+    state?: InputSearchState;
+    /**
+     * Adapts the color depending on the theme.
+     */
+    theme?: Theme;
+    /**
+     * The search input value.
+     */
+    value?: string;
+} & {
+    children?: import("react").ReactNode | undefined;
+} & import("react").RefAttributes<HTMLElement>>;

package/esm/lib/components/input-search.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 PInputSearch = /*#__PURE__*/ forwardRef(({ autoComplete, clear = false, compact = false, description = '', disabled = false, form, hideLabel = false, indicator = true, label = '', loading = false, message = '', name, onBlur, onChange, onInput, 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-search');
+    const propsToSync = [autoComplete, clear, compact, description, disabled, form, hideLabel, indicator, label, loading, message, name, placeholder, readOnly, required, state, theme || useTheme(), value];
+    useBrowserLayoutEffect(() => {
+        const { current } = elementRef;
+        ['autoComplete', 'clear', 'compact', 'description', 'disabled', 'form', 'hideLabel', 'indicator', 'label', 'loading', 'message', 'name', '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 { PInputSearch };

package/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/esm/lib/components/input-text.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 PInputText = /*#__PURE__*/ forwardRef(({ autoComplete, compact = false, counter = false, description = '', disabled = false, form, hideLabel = false, label = '', loading = false, maxLength, message = '', minLength, name, onBlur, onChange, onInput, placeholder = '', readOnly = false, required = false, spellCheck, 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-text');
+    const propsToSync = [autoComplete, compact, counter, description, disabled, form, hideLabel, label, loading, maxLength, message, minLength, name, placeholder, readOnly, required, spellCheck, state, theme || useTheme(), value];
+    useBrowserLayoutEffect(() => {
+        const { current } = elementRef;
+        ['autoComplete', 'compact', 'counter', 'description', 'disabled', 'form', 'hideLabel', 'label', 'loading', 'maxLength', 'message', 'minLength', 'name', 'placeholder', 'readOnly', 'required', 'spellCheck', '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 { PInputText };

package/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/esm/lib/components/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 PSelect = /*#__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 PSelect = /*#__PURE__*/ forwardRef(({ compact = false, description = '', disabled = false, dropdownDirection = 'auto', filter = false, 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-select');
-    const propsToSync = [compact, description, disabled, dropdownDirection, form, hideLabel, label, message, name, required, state, theme || useTheme(), value];
+    const propsToSync = [compact, description, disabled, dropdownDirection, filter, form, hideLabel, label, message, name, required, state, theme || useTheme(), value];
     useBrowserLayoutEffect(() => {
         const { current } = elementRef;
-        ['compact', 'description', 'disabled', 'dropdownDirection', 'form', 'hideLabel', 'label', 'message', 'name', 'required', 'state', 'theme', 'value'].forEach((propName, i) => (current[propName] = propsToSync[i]));
+        ['compact', 'description', 'disabled', 'dropdownDirection', 'filter', 'form', 'hideLabel', 'label', 'message', 'name', 'required', 'state', 'theme', 'value'].forEach((propName, i) => (current[propName] = propsToSync[i]));
     }, propsToSync);
     const props = {
         ...rest,

package/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/esm/lib/components/textarea.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 PTextarea = /*#__PURE__*/ forwardRef(({ autoComplete = '', description = '', disabled = false, form, hideLabel = false, label = '', maxLength, message = '', minLength, name, onBlur, onChange, onInput, placeholder = '', readOnly = false, required = false, resize = 'vertical', rows = 7, showCounter = true, spellCheck, state = 'none', theme, value = '', wrap = 'soft', className, ...rest }, ref) => {
+const PTextarea = /*#__PURE__*/ forwardRef(({ autoComplete, description = '', disabled = false, form, hideLabel = false, label = '', maxLength, message = '', minLength, name, onBlur, onChange, onInput, placeholder = '', readOnly = false, required = false, resize = 'vertical', rows = 7, showCounter = true, spellCheck, state = 'none', theme, value = '', wrap = 'soft', className, ...rest }, ref) => {
     const elementRef = useRef(undefined);
     useEventCallback(elementRef, 'blur', onBlur);
     useEventCallback(elementRef, 'change', onChange);

package/esm/lib/types.d.ts

@@ -1088,18 +1088,44 @@ declare const ICON_COLORS: readonly [
     "state-disabled"
 ];
 export type IconColor = (typeof ICON_COLORS)[number];
+export type InputNumberState = FormState;
+declare const INPUT_NUMBER_AUTO_COMPLETE: readonly [
+    "off",
+    "on"
+];
+export type InputNumberAutoComplete = (typeof INPUT_NUMBER_AUTO_COMPLETE)[number];
+export type InputNumberChangeEventDetail = Event;
+export type InputNumberBlurEventDetail = Event;
+export type InputNumberInputEventDetail = InputEvent;
 export type InputPasswordState = FormState;
 declare const INPUT_PASSWORD_AUTO_COMPLETE: readonly [
     "off",
     "on",
     "current-password",
-    "new-password",
-    ""
+    "new-password"
 ];
 export type InputPasswordAutoComplete = (typeof INPUT_PASSWORD_AUTO_COMPLETE)[number];
 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;
@@ -1490,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 [

package/esm/public-api.mjs

@@ -27,7 +27,10 @@ export { PHeading } from './lib/components/heading.wrapper.mjs';
 export { PHeadline } from './lib/components/headline.wrapper.mjs';
 export { PIcon } from './lib/components/icon.wrapper.mjs';
 export { PInlineNotification } from './lib/components/inline-notification.wrapper.mjs';
+export { PInputNumber } from './lib/components/input-number.wrapper.mjs';
 export { PInputPassword } from './lib/components/input-password.wrapper.mjs';
+export { PInputSearch } from './lib/components/input-search.wrapper.mjs';
+export { PInputText } from './lib/components/input-text.wrapper.mjs';
 export { PLink } from './lib/components/link.wrapper.mjs';
 export { PLinkPure } from './lib/components/link-pure.wrapper.mjs';
 export { PLinkSocial } from './lib/components/link-social.wrapper.mjs';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@porsche-design-system/components-react",
-  "version": "3.28.0-rc.3",
+  "version": "3.29.0-rc.0",
   "description": "Porsche Design System is a component library designed to help developers create the best experience for software or services distributed by Dr. Ing. h.c. F. Porsche AG.",
   "keywords": [
     "porsche",
@@ -17,7 +17,7 @@
   "license": "SEE LICENSE IN LICENSE",
   "homepage": "https://designsystem.porsche.com",
   "dependencies": {
-    "@porsche-design-system/components-js": "3.28.0-rc.3"
+    "@porsche-design-system/components-js": "3.29.0-rc.0"
   },
   "peerDependencies": {
     "ag-grid-community": ">= 33.0.0 <34.0.0",
@@ -76,7 +76,7 @@
       "default": "./styles/vanilla-extract/cjs/vanilla-extract/index.cjs"
     },
     "./tailwindcss": {
-      "style": "./tailwind/index.css"
+      "style": "./tailwindcss/index.css"
     },
     "./ag-grid": {
       "types": "./ag-grid/esm/index.d.ts",