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

package/ssr/esm/components-react/projects/react-ssr-wrapper/src/lib/dsr-components/select.mjs

@@ -4,10 +4,11 @@ import '../../provider.mjs';
 import { splitChildren } from '../../splitChildren.mjs';
 import { minifyCss } from '../../minifyCss.mjs';
 import { getSelectCss as getComponentCss$q } from '../../../../../../components/dist/styles/esm/styles-entry.mjs';
-import { getHasNativePopoverSupport, getSelectedOptionString, getComboboxAriaAttributes, getListAriaAttributes, labelId } from '../../../../../../components/dist/utils/esm/utils-entry.mjs';
+import { getHasNativePopoverSupport, getSelectedOptionString, getComboboxAriaAttributes, getComboboxFilterAriaAttributes, labelId } from '../../../../../../components/dist/utils/esm/utils-entry.mjs';
 import { Label } from './label.mjs';
 import { messageId, StateMessage } from './state-message.mjs';
 import { PIcon } from '../components/icon.wrapper.mjs';
+import { PInputSearch } from '../components/input-search.wrapper.mjs';
 
 /**
  * @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." }
@@ -22,11 +23,12 @@ class DSRSelect extends Component {
     // The "name" property is reflected as an attribute to ensure compatibility with native form submission.
     // In the React wrapper, all props are synced as properties on the element ref, so reflecting "name" as an attribute ensures it is properly handled in the form submission process.
     isOpen = false;
-    srHighlightedOptionText = '';
+    hasFilterResults = true;
     internals;
     defaultValue;
     buttonElement;
     popoverElement;
+    filterInputElement;
     selectOptions = [];
     selectOptgroups = [];
     preventOptionUpdate = false; // Used to prevent value watcher from updating options when options are already updated
@@ -48,11 +50,10 @@ class DSRSelect extends Component {
         const popoverId = 'list';
         const descriptionId = this.props.description ? 'description' : undefined;
         const selectMessageId = (this.props.message || namedSlotChildren.filter(({ props: { slot } }) => slot === 'message').length > 0) && ['success', 'error'].includes(this.props.state) ? messageId : undefined;
-        const initialStatusId = 'initial-status';
-        const ariaDescribedBy = [descriptionId, selectMessageId, initialStatusId].filter(Boolean).join(' ');
+        const ariaDescribedBy = [descriptionId, selectMessageId].filter(Boolean).join(' ');
         const selectedOption = getSelectedOptionString(otherChildren);
         const style = minifyCss(getComponentCss$q(this.props.isOpen, this.props.disabled, this.props.hideLabel, this.props.state, this.props.compact, this.props.theme, !!this.props.slottedImagePath));
-        return (jsxs(Fragment, { children: [jsxs("template", { shadowroot: "open", shadowrootmode: "open", shadowrootdelegatesfocus: "true", children: [jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxs("div", { className: "root", children: [jsx(Label, { hasLabel: this.props.label || namedSlotChildren.filter(({ props: { slot } }) => slot === 'label').length > 0, hasDescription: this.props.description || namedSlotChildren.filter(({ props: { slot } }) => slot === 'description').length > 0, host: null, label: this.props.label, description: this.props.description, htmlFor: buttonId, isRequired: this.props.required, isDisabled: this.props.disabled }), jsxs("button", { "aria-invalid": this.props.state === 'error' ? 'true' : null, type: "button", role: "combobox", id: buttonId, ...getComboboxAriaAttributes(this.props.isOpen, this.props.required, labelId, ariaDescribedBy, popoverId), disabled: this.props.disabled, children: [this.props.slottedImagePath && jsx("img", { src: this.props.slottedImagePath, alt: "" }), jsx("span", { children: selectedOption }), jsx(PIcon, { className: "icon", name: "arrow-head-down", theme: this.props.theme, color: this.props.disabled ? 'state-disabled' : 'primary', "aria-hidden": "true" })] }), jsx("div", { id: popoverId, popover: "manual", tabIndex: -1, ...getListAriaAttributes(this.props.label, this.props.required, false, this.props.isOpen), children: jsx("slot", {}) }), jsx(StateMessage, { hasMessage: (this.props.message || namedSlotChildren.filter(({ props: { slot } }) => slot === 'message').length > 0) && ['success', 'error'].includes(this.props.state), state: this.props.state, message: this.props.message, theme: this.props.theme, host: null }), jsx("span", { className: "sr-only", role: "status", "aria-live": "assertive", "aria-relevant": "additions text", children: this.props.srHighlightedOptionText })] })] }), this.props.children] }));
+        return (jsxs(Fragment, { children: [jsxs("template", { shadowroot: "open", shadowrootmode: "open", shadowrootdelegatesfocus: "true", children: [jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxs("div", { className: "root", children: [jsx(Label, { hasLabel: this.props.label || namedSlotChildren.filter(({ props: { slot } }) => slot === 'label').length > 0, hasDescription: this.props.description || namedSlotChildren.filter(({ props: { slot } }) => slot === 'description').length > 0, host: null, label: this.props.label, description: this.props.description, htmlFor: buttonId, isRequired: this.props.required, isDisabled: this.props.disabled }), jsxs("button", { "aria-invalid": this.props.state === 'error' ? 'true' : null, type: "button", role: "combobox", id: buttonId, ...getComboboxAriaAttributes(this.props.isOpen, this.props.required, labelId, ariaDescribedBy, popoverId), disabled: this.props.disabled, children: [this.props.slottedImagePath && jsx("img", { src: this.props.slottedImagePath, alt: "" }), jsx("span", { children: selectedOption }), jsx(PIcon, { className: "icon", name: "arrow-head-down", theme: this.props.theme, color: this.props.disabled ? 'state-disabled' : 'primary', "aria-hidden": "true" })] }), jsxs("div", { id: popoverId, popover: "manual", tabIndex: -1, role: "dialog", "aria-label": this.props.label, "aria-hidden": this.props.isOpen ? null : 'true', children: [this.props.filter && (jsx(PInputSearch, { className: "filter", name: "filter", label: "Filter options", hideLabel: true, autoComplete: "off", clear: true, compact: true, theme: this.props.theme, ...getComboboxFilterAriaAttributes() })), jsxs("div", { className: "options", role: "listbox", "aria-label": this.props.label, children: [this.props.filter && !this.props.hasFilterResults && (jsx("div", { className: "no-results", "aria-live": "polite", role: "option", children: jsx("span", { "aria-hidden": "true", children: "\u2013" }) })), jsx("slot", {})] })] }), jsx(StateMessage, { hasMessage: (this.props.message || namedSlotChildren.filter(({ props: { slot } }) => slot === 'message').length > 0) && ['success', 'error'].includes(this.props.state), state: this.props.state, message: this.props.message, theme: this.props.theme, host: null })] })] }), this.props.children] }));
     }
     getSelectedOptionImagePath = (options) => {
         return (options

package/ssr/esm/components-react/projects/react-ssr-wrapper/src/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/ssr/esm/lib/components/index.d.ts

@@ -26,7 +26,10 @@ export * from './heading.wrapper';
 export * from './headline.wrapper';
 export * from './icon.wrapper';
 export * from './inline-notification.wrapper';
+export * from './input-number.wrapper';
 export * from './input-password.wrapper';
+export * from './input-search.wrapper';
+export * from './input-text.wrapper';
 export * from './link.wrapper';
 export * from './link-pure.wrapper';
 export * from './link-social.wrapper';

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

@@ -0,0 +1,192 @@
+import type { BaseProps } from '../../BaseProps';
+import type { InputNumberAutoComplete, BreakpointCustomizable, InputNumberBlurEventDetail, InputNumberChangeEventDetail, InputNumberInputEventDetail, InputNumberState, Theme } from '../types';
+export type PInputNumberProps = BaseProps & {
+    /**
+     * Specifies whether the input can be autofilled by the browser
+     */
+    autoComplete?: InputNumberAutoComplete;
+    /**
+     * Displays as a compact version.
+     */
+    compact?: boolean;
+    /**
+     * Show or hide the increment/decrement stepper controls.
+     */
+    controls?: boolean;
+    /**
+     * The description text.
+     */
+    description?: string;
+    /**
+     * Marks the number input as disabled.
+     */
+    disabled?: boolean;
+    /**
+     * The id of a form element the number 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 value of the number input.
+     */
+    max?: number;
+    /**
+     * The message styled depending on validation state.
+     */
+    message?: string;
+    /**
+     * The min value of the number input.
+     */
+    min?: number;
+    /**
+     * The name of the number input.
+     */
+    name: string;
+    /**
+     * Emitted when the number input has lost focus.
+     */
+    onBlur?: (event: CustomEvent<InputNumberBlurEventDetail>) => void;
+    /**
+     * Emitted when the number input loses focus after its value was changed.
+     */
+    onChange?: (event: CustomEvent<InputNumberChangeEventDetail>) => void;
+    /**
+     * Emitted when the value has been changed as a direct result of a user action.
+     */
+    onInput?: (event: CustomEvent<InputNumberInputEventDetail>) => void;
+    /**
+     * The placeholder text.
+     */
+    placeholder?: string;
+    /**
+     * Specifies whether the number input should be read-only.
+     */
+    readOnly?: boolean;
+    /**
+     * Marks the number input as required.
+     */
+    required?: boolean;
+    /**
+     * The validation state.
+     */
+    state?: InputNumberState;
+    /**
+     * The granularity that the value must adhere to.
+     */
+    step?: number;
+    /**
+     * Adapts the color depending on the theme.
+     */
+    theme?: Theme;
+    /**
+     * The number input value.
+     */
+    value?: string;
+};
+export declare const PInputNumber: 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?: InputNumberAutoComplete;
+    /**
+     * Displays as a compact version.
+     */
+    compact?: boolean;
+    /**
+     * Show or hide the increment/decrement stepper controls.
+     */
+    controls?: boolean;
+    /**
+     * The description text.
+     */
+    description?: string;
+    /**
+     * Marks the number input as disabled.
+     */
+    disabled?: boolean;
+    /**
+     * The id of a form element the number 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 value of the number input.
+     */
+    max?: number;
+    /**
+     * The message styled depending on validation state.
+     */
+    message?: string;
+    /**
+     * The min value of the number input.
+     */
+    min?: number;
+    /**
+     * The name of the number input.
+     */
+    name: string;
+    /**
+     * Emitted when the number input has lost focus.
+     */
+    onBlur?: (event: CustomEvent<InputNumberBlurEventDetail>) => void;
+    /**
+     * Emitted when the number input loses focus after its value was changed.
+     */
+    onChange?: (event: CustomEvent<InputNumberChangeEventDetail>) => void;
+    /**
+     * Emitted when the value has been changed as a direct result of a user action.
+     */
+    onInput?: (event: CustomEvent<InputNumberInputEventDetail>) => void;
+    /**
+     * The placeholder text.
+     */
+    placeholder?: string;
+    /**
+     * Specifies whether the number input should be read-only.
+     */
+    readOnly?: boolean;
+    /**
+     * Marks the number input as required.
+     */
+    required?: boolean;
+    /**
+     * The validation state.
+     */
+    state?: InputNumberState;
+    /**
+     * The granularity that the value must adhere to.
+     */
+    step?: number;
+    /**
+     * Adapts the color depending on the theme.
+     */
+    theme?: Theme;
+    /**
+     * The number input value.
+     */
+    value?: string;
+} & {
+    children?: import("react").ReactNode | undefined;
+} & import("react").RefAttributes<HTMLElement>>;

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

@@ -6,7 +6,7 @@ export type PInputPasswordProps = BaseProps & {
      */
     autoComplete?: InputPasswordAutoComplete;
     /**
-     * Displays as compact version.
+     * Displays as a compact version.
      */
     compact?: boolean;
     /**
@@ -29,6 +29,10 @@ export type PInputPasswordProps = BaseProps & {
      * The label text.
      */
     label?: string;
+    /**
+     * @experimental Shows a loading indicator.
+     */
+    loading?: boolean;
     /**
      * The max length of the password input.
      */
@@ -92,7 +96,7 @@ export declare const PInputPassword: import("react").ForwardRefExoticComponent<i
      */
     autoComplete?: InputPasswordAutoComplete;
     /**
-     * Displays as compact version.
+     * Displays as a compact version.
      */
     compact?: boolean;
     /**
@@ -115,6 +119,10 @@ export declare const PInputPassword: import("react").ForwardRefExoticComponent<i
      * The label text.
      */
     label?: string;
+    /**
+     * @experimental Shows a loading indicator.
+     */
+    loading?: boolean;
     /**
      * The max length of the password input.
      */

package/ssr/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/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.
      */