@porsche-design-system/components-react 3.6.1-rc.0 → 3.7.0-rc.0

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

@@ -30,6 +30,8 @@ import '../components/link-tile-model-signature.wrapper.mjs';
 import '../components/marque.wrapper.mjs';
 import '../components/modal.wrapper.mjs';
 import '../components/model-signature.wrapper.mjs';
+import '../components/multi-select.wrapper.mjs';
+import '../components/multi-select-option.wrapper.mjs';
 import '../components/pagination.wrapper.mjs';
 import '../components/popover.wrapper.mjs';
 import '../components/radio-button-wrapper.wrapper.mjs';

package/ssr/esm/components-react/projects/react-ssr-wrapper/src/lib/dsr-components/table-head-cell.mjs

@@ -30,6 +30,8 @@ import '../components/link-tile-model-signature.wrapper.mjs';
 import '../components/marque.wrapper.mjs';
 import '../components/modal.wrapper.mjs';
 import '../components/model-signature.wrapper.mjs';
+import '../components/multi-select.wrapper.mjs';
+import '../components/multi-select-option.wrapper.mjs';
 import '../components/pagination.wrapper.mjs';
 import '../components/popover.wrapper.mjs';
 import '../components/radio-button-wrapper.wrapper.mjs';

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

@@ -30,6 +30,8 @@ import '../components/link-tile-model-signature.wrapper.mjs';
 import '../components/marque.wrapper.mjs';
 import '../components/modal.wrapper.mjs';
 import '../components/model-signature.wrapper.mjs';
+import '../components/multi-select.wrapper.mjs';
+import '../components/multi-select-option.wrapper.mjs';
 import '../components/pagination.wrapper.mjs';
 import '../components/popover.wrapper.mjs';
 import '../components/radio-button-wrapper.wrapper.mjs';

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

@@ -30,6 +30,8 @@ import '../components/link-tile-model-signature.wrapper.mjs';
 import '../components/marque.wrapper.mjs';
 import '../components/modal.wrapper.mjs';
 import '../components/model-signature.wrapper.mjs';
+import '../components/multi-select.wrapper.mjs';
+import '../components/multi-select-option.wrapper.mjs';
 import '../components/pagination.wrapper.mjs';
 import '../components/popover.wrapper.mjs';
 import '../components/radio-button-wrapper.wrapper.mjs';

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

@@ -30,6 +30,8 @@ import '../components/link-tile-model-signature.wrapper.mjs';
 import '../components/marque.wrapper.mjs';
 import '../components/modal.wrapper.mjs';
 import '../components/model-signature.wrapper.mjs';
+import '../components/multi-select.wrapper.mjs';
+import '../components/multi-select-option.wrapper.mjs';
 import '../components/pagination.wrapper.mjs';
 import '../components/popover.wrapper.mjs';
 import '../components/radio-button-wrapper.wrapper.mjs';

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

@@ -30,6 +30,8 @@ import '../components/link-tile-model-signature.wrapper.mjs';
 import '../components/marque.wrapper.mjs';
 import '../components/modal.wrapper.mjs';
 import '../components/model-signature.wrapper.mjs';
+import '../components/multi-select.wrapper.mjs';
+import '../components/multi-select-option.wrapper.mjs';
 import '../components/pagination.wrapper.mjs';
 import '../components/popover.wrapper.mjs';
 import '../components/radio-button-wrapper.wrapper.mjs';

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

@@ -30,6 +30,8 @@ import '../components/link-tile-model-signature.wrapper.mjs';
 import '../components/marque.wrapper.mjs';
 import '../components/modal.wrapper.mjs';
 import '../components/model-signature.wrapper.mjs';
+import '../components/multi-select.wrapper.mjs';
+import '../components/multi-select-option.wrapper.mjs';
 import '../components/pagination.wrapper.mjs';
 import '../components/popover.wrapper.mjs';
 import '../components/radio-button-wrapper.wrapper.mjs';

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

@@ -31,6 +31,8 @@ import '../components/link-tile-model-signature.wrapper.mjs';
 import '../components/marque.wrapper.mjs';
 import '../components/modal.wrapper.mjs';
 import '../components/model-signature.wrapper.mjs';
+import '../components/multi-select.wrapper.mjs';
+import '../components/multi-select-option.wrapper.mjs';
 import '../components/pagination.wrapper.mjs';
 import '../components/popover.wrapper.mjs';
 import '../components/radio-button-wrapper.wrapper.mjs';

package/ssr/esm/components-react/projects/react-ssr-wrapper/src/public-api.mjs

@@ -30,6 +30,8 @@ export { PLinkTileModelSignature } from './lib/components/link-tile-model-signat
 export { PMarque } from './lib/components/marque.wrapper.mjs';
 export { PModal } from './lib/components/modal.wrapper.mjs';
 export { PModelSignature } from './lib/components/model-signature.wrapper.mjs';
+export { PMultiSelect } from './lib/components/multi-select.wrapper.mjs';
+export { PMultiSelectOption } from './lib/components/multi-select-option.wrapper.mjs';
 export { PPagination } from './lib/components/pagination.wrapper.mjs';
 export { PPopover } from './lib/components/popover.wrapper.mjs';
 export { PRadioButtonWrapper } from './lib/components/radio-button-wrapper.wrapper.mjs';

package/ssr/esm/lib/components/index.d.ts

@@ -29,6 +29,8 @@ export * from './link-tile-model-signature.wrapper';
 export * from './marque.wrapper';
 export * from './modal.wrapper';
 export * from './model-signature.wrapper';
+export * from './multi-select.wrapper';
+export * from './multi-select-option.wrapper';
 export * from './pagination.wrapper';
 export * from './popover.wrapper';
 export * from './radio-button-wrapper.wrapper';

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

@@ -0,0 +1,23 @@
+import { type HTMLAttributes } from 'react';
+export type PMultiSelectOptionProps = Omit<HTMLAttributes<{}>, 'color'> & {
+    /**
+     * Disables the option.
+     */
+    disabled?: boolean;
+    /**
+     * The option value.
+     */
+    value: string;
+};
+export declare const PMultiSelectOption: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<{}>, "color"> & {
+    /**
+     * Disables the option.
+     */
+    disabled?: boolean;
+    /**
+     * The option value.
+     */
+    value: string;
+} & {
+    children?: import("react").ReactNode;
+} & import("react").RefAttributes<HTMLElement>>;

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

@@ -0,0 +1,104 @@
+import { type HTMLAttributes } from 'react';
+import type { MultiSelectDropdownDirection, BreakpointCustomizable, MultiSelectUpdateEvent, MultiSelectState, Theme } from '../types';
+export type PMultiSelectProps = Omit<HTMLAttributes<{}>, 'color'> & {
+    /**
+     * The description text.
+     */
+    description?: string;
+    /**
+     * Disables the multi-select
+     */
+    disabled?: boolean;
+    /**
+     * Changes the direction to which the dropdown list appears.
+     */
+    dropdownDirection?: MultiSelectDropdownDirection;
+    /**
+     * Show or hide label. For better accessibility it is recommended to show the label.
+     */
+    hideLabel?: BreakpointCustomizable<boolean>;
+    /**
+     * The label text.
+     */
+    label?: string;
+    /**
+     * The message styled depending on validation state.
+     */
+    message?: string;
+    /**
+     * The name of the control.
+     */
+    name: string;
+    /**
+     * Emitted when the selection is changed.
+     */
+    onUpdate?: (event: CustomEvent<MultiSelectUpdateEvent>) => void;
+    /**
+     * A Boolean attribute indicating that an option with a non-empty string value must be selected.
+     */
+    required?: boolean;
+    /**
+     * The validation state.
+     */
+    state?: MultiSelectState;
+    /**
+     * Adapts the select color depending on the theme.
+     */
+    theme?: Theme;
+    /**
+     * The selected values.
+     */
+    value?: string[];
+};
+export declare const PMultiSelect: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<{}>, "color"> & {
+    /**
+     * The description text.
+     */
+    description?: string;
+    /**
+     * Disables the multi-select
+     */
+    disabled?: boolean;
+    /**
+     * Changes the direction to which the dropdown list appears.
+     */
+    dropdownDirection?: MultiSelectDropdownDirection;
+    /**
+     * Show or hide label. For better accessibility it is recommended to show the label.
+     */
+    hideLabel?: BreakpointCustomizable<boolean>;
+    /**
+     * The label text.
+     */
+    label?: string;
+    /**
+     * The message styled depending on validation state.
+     */
+    message?: string;
+    /**
+     * The name of the control.
+     */
+    name: string;
+    /**
+     * Emitted when the selection is changed.
+     */
+    onUpdate?: (event: CustomEvent<MultiSelectUpdateEvent>) => void;
+    /**
+     * A Boolean attribute indicating that an option with a non-empty string value must be selected.
+     */
+    required?: boolean;
+    /**
+     * The validation state.
+     */
+    state?: MultiSelectState;
+    /**
+     * Adapts the select color depending on the theme.
+     */
+    theme?: Theme;
+    /**
+     * The selected values.
+     */
+    value?: string[];
+} & {
+    children?: import("react").ReactNode;
+} & import("react").RefAttributes<HTMLElement>>;

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

@@ -0,0 +1,6 @@
+import { Component } from 'react';
+import type { MultiSelectOptionInternalHTMLProps } from '@porsche-design-system/components/dist/utils';
+export declare class DSRMultiSelectOption extends Component<any> {
+    host: HTMLElement & MultiSelectOptionInternalHTMLProps;
+    render(): JSX.Element;
+}

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

@@ -0,0 +1,17 @@
+import { Component } from 'react';
+export declare class DSRMultiSelect extends Component<any> {
+    host: HTMLElement;
+    private isOpen;
+    private srHighlightedOptionText;
+    private hasFilterResults;
+    private nativeSelect;
+    private multiSelectOptions;
+    private inputContainer;
+    private inputElement;
+    private listElement;
+    private form;
+    private isWithinForm;
+    private preventOptionUpdate;
+    private get currentValue();
+    render(): JSX.Element;
+}

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

@@ -501,6 +501,12 @@ declare const SCROLL_INDICATOR_POSITIONS: readonly [
 /** @deprecated */
 export type ScrollerScrollIndicatorPosition = (typeof SCROLL_INDICATOR_POSITIONS)[number];
 export type ScrollerAlignScrollIndicator = ScrollerScrollIndicatorPosition;
+declare const SELECT_DROPDOWN_DIRECTIONS: readonly [
+    "down",
+    "up",
+    "auto"
+];
+export type SelectDropdownDirection = (typeof SELECT_DROPDOWN_DIRECTIONS)[number];
 declare const ALIGN_LABELS: readonly [
     "left",
     "right"
@@ -1006,6 +1012,12 @@ declare const MODEL_SIGNATURE_COLORS: readonly [
     "inherit"
 ];
 export type ModelSignatureColor = (typeof MODEL_SIGNATURE_COLORS)[number];
+export type MultiSelectState = FormState;
+export type MultiSelectDropdownDirection = SelectDropdownDirection;
+export type MultiSelectUpdateEvent = {
+    value: string[];
+    name: string;
+};
 declare const PAGINATION_NUMBER_OF_PAGE_LINKS: readonly [
     5,
     7