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

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/popover.wrapper.d.ts

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

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

@@ -5,6 +5,10 @@ export type PTextareaProps = BaseProps & {
      * Specifies whether the input can be autofilled by the browser
      */
     autoComplete?: TextareaAutoComplete;
+    /**
+     * Show or hide the character counter.
+     */
+    counter?: boolean;
     /**
      * The description text.
      */
@@ -18,7 +22,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,13 +74,9 @@ export type PTextareaProps = BaseProps & {
      */
     resize?: TextareaResize;
     /**
-     * The amount of rows of the textarea.
+     * The number of rows of the textarea.
      */
     rows?: number;
-    /**
-     * Show or hide max character count.
-     */
-    showCounter?: boolean;
     /**
      * Specifies whether the input should have its spelling and grammar checked
      */
@@ -103,6 +103,10 @@ export declare const PTextarea: import("react").ForwardRefExoticComponent<import
      * Specifies whether the input can be autofilled by the browser
      */
     autoComplete?: TextareaAutoComplete;
+    /**
+     * Show or hide the character counter.
+     */
+    counter?: boolean;
     /**
      * The description text.
      */
@@ -116,7 +120,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,13 +172,9 @@ 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;
-    /**
-     * Show or hide max character count.
-     */
-    showCounter?: boolean;
     /**
      * Specifies whether the input should have its spelling and grammar checked
      */

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

@@ -4,16 +4,16 @@ 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, 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 elementRef = useRef(undefined);
     useEventCallback(elementRef, 'blur', onBlur);
     useEventCallback(elementRef, 'change', onChange);
     useEventCallback(elementRef, 'input', onInput);
     const WebComponentTag = usePrefix('p-textarea');
-    const propsToSync = [autoComplete, description, disabled, form, hideLabel, label, maxLength, message, minLength, name, placeholder, readOnly, required, resize, rows, showCounter, spellCheck, state, theme || useTheme(), value, wrap];
+    const propsToSync = [autoComplete, counter, description, disabled, form, hideLabel, label, maxLength, message, minLength, name, placeholder, readOnly, required, resize, rows, spellCheck, state, theme || useTheme(), value, wrap];
     useBrowserLayoutEffect(() => {
         const { current } = elementRef;
-        ['autoComplete', 'description', 'disabled', 'form', 'hideLabel', 'label', 'maxLength', 'message', 'minLength', 'name', 'placeholder', 'readOnly', 'required', 'resize', 'rows', 'showCounter', 'spellCheck', 'state', 'theme', 'value', 'wrap'].forEach((propName, i) => (current[propName] = propsToSync[i]));
+        ['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]));
     }, propsToSync);
     const props = {
         ...rest,

package/esm/lib/types.d.ts

@@ -221,6 +221,8 @@ declare const ICON_NAMES: readonly [
     "add",
     "adjust",
     "aggregation",
+    "ai-spark",
+    "ai-spark-filled",
     "arrow-compact-down",
     "arrow-compact-left",
     "arrow-compact-right",
@@ -1091,8 +1093,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 +1103,6 @@ export type InputPasswordState = FormState;
 declare const INPUT_PASSWORD_AUTO_COMPLETE: readonly [
     "off",
     "on",
-    "",
     "current-password",
     "new-password"
 ];
@@ -1110,6 +1110,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 +1518,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

@@ -29,6 +29,8 @@ 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",
+  "version": "3.29.0-rc.1",
   "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"
+    "@porsche-design-system/components-js": "3.29.0-rc.1"
   },
   "peerDependencies": {
     "ag-grid-community": ">= 33.0.0 <34.0.0",