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

package/esm/lib/components/pin-code.wrapper.d.ts

@@ -0,0 +1,120 @@
+import { type HTMLAttributes } from 'react';
+import type { BreakpointCustomizable, PinCodeLength, PinCodeUpdateEvent, PinCodeState, Theme, PinCodeType } from '../types';
+export type PPinCodeProps = Omit<HTMLAttributes<{}>, 'color'> & {
+    /**
+     * The description text.
+     */
+    description?: string;
+    /**
+     * Disables the Pin Code. No events will be triggered while disabled state is active.
+     */
+    disabled?: boolean;
+    /**
+     * 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;
+    /**
+     * Number of characters of the Pin Code.
+     */
+    length?: PinCodeLength;
+    /**
+     * Disables the Pin Code and shows a loading indicator. No events will be triggered while loading state is active.
+     */
+    loading?: boolean;
+    /**
+     * The message styled depending on validation state.
+     */
+    message?: string;
+    /**
+     * Name of the control.
+     */
+    name?: string;
+    /**
+     * Emitted when selected element changes.
+     */
+    onUpdate?: (event: CustomEvent<PinCodeUpdateEvent>) => void;
+    /**
+     * Marks the Pin Code as required.
+     */
+    required?: boolean;
+    /**
+     * The validation state.
+     */
+    state?: PinCodeState;
+    /**
+     * Adapts the color depending on the theme.
+     */
+    theme?: Theme;
+    /**
+     * Pin Code type.
+     */
+    type?: PinCodeType;
+    /**
+     * Sets the initial value of the Pin Code.
+     */
+    value?: string;
+};
+export declare const PPinCode: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<{}>, "color"> & {
+    /**
+     * The description text.
+     */
+    description?: string | undefined;
+    /**
+     * Disables the Pin Code. No events will be triggered while disabled state is active.
+     */
+    disabled?: boolean | undefined;
+    /**
+     * Show or hide label and description text. For better accessibility it is recommended to show the label.
+     */
+    hideLabel?: BreakpointCustomizable<boolean> | undefined;
+    /**
+     * The label text.
+     */
+    label?: string | undefined;
+    /**
+     * Number of characters of the Pin Code.
+     */
+    length?: 4 | 6 | undefined;
+    /**
+     * Disables the Pin Code and shows a loading indicator. No events will be triggered while loading state is active.
+     */
+    loading?: boolean | undefined;
+    /**
+     * The message styled depending on validation state.
+     */
+    message?: string | undefined;
+    /**
+     * Name of the control.
+     */
+    name?: string | undefined;
+    /**
+     * Emitted when selected element changes.
+     */
+    onUpdate?: ((event: CustomEvent<PinCodeUpdateEvent>) => void) | undefined;
+    /**
+     * Marks the Pin Code as required.
+     */
+    required?: boolean | undefined;
+    /**
+     * The validation state.
+     */
+    state?: "none" | "success" | "error" | undefined;
+    /**
+     * Adapts the color depending on the theme.
+     */
+    theme?: "auto" | "light" | "dark" | undefined;
+    /**
+     * Pin Code type.
+     */
+    type?: "number" | "password" | undefined;
+    /**
+     * Sets the initial value of the Pin Code.
+     */
+    value?: string | undefined;
+} & {
+    children?: import("react").ReactNode;
+} & import("react").RefAttributes<HTMLElement>>;

package/esm/lib/components/pin-code.wrapper.mjs

@@ -0,0 +1,24 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef, useRef } from 'react';
+import { useEventCallback, usePrefix, useBrowserLayoutEffect, useMergedClass } from '../../hooks.mjs';
+import { syncRef } from '../../utils.mjs';
+
+const PPinCode = forwardRef(({ description = '', disabled = false, hideLabel = false, label = '', length = 4, loading = false, message = '', name, onUpdate, required = false, state = 'none', theme = 'light', type = 'number', value = '', className, ...rest }, ref) => {
+    const elementRef = useRef();
+    useEventCallback(elementRef, 'update', onUpdate);
+    const WebComponentTag = usePrefix('p-pin-code');
+    const propsToSync = [description, disabled, hideLabel, label, length, loading, message, name, required, state, theme, type, value];
+    useBrowserLayoutEffect(() => {
+        const { current } = elementRef;
+        ['description', 'disabled', 'hideLabel', 'label', 'length', 'loading', 'message', 'name', 'required', 'state', 'theme', 'type', 'value'].forEach((propName, i) => (current[propName] = propsToSync[i]));
+    }, propsToSync);
+    const props = {
+        ...rest,
+        class: useMergedClass(elementRef, className),
+        ref: syncRef(elementRef, ref)
+    };
+    return jsx(WebComponentTag, { ...props });
+});
+
+export { PPinCode };

package/esm/lib/components/popover.wrapper.d.ts

@@ -34,7 +34,7 @@ export declare const PPopover: import("react").ForwardRefExoticComponent<Omit<HT
     /**
      * Adapts the popover color depending on the theme.
      */
-    theme?: "light" | "dark" | undefined;
+    theme?: "auto" | "light" | "dark" | undefined;
 } & {
     children?: import("react").ReactNode;
 } & import("react").RefAttributes<HTMLElement>>;

package/esm/lib/components/radio-button-wrapper.wrapper.d.ts

@@ -9,6 +9,10 @@ export type PRadioButtonWrapperProps = Omit<HTMLAttributes<{}>, 'color'> & {
      * The label text.
      */
     label?: string;
+    /**
+     * __Experimental__: Disables the radio button and shows a loading indicator.
+     */
+    loading?: boolean;
     /**
      * The message styled depending on validation state.
      */
@@ -31,6 +35,10 @@ export declare const PRadioButtonWrapper: import("react").ForwardRefExoticCompon
      * The label text.
      */
     label?: string | undefined;
+    /**
+     * __Experimental__: Disables the radio button and shows a loading indicator.
+     */
+    loading?: boolean | undefined;
     /**
      * The message styled depending on validation state.
      */
@@ -42,7 +50,7 @@ export declare const PRadioButtonWrapper: import("react").ForwardRefExoticCompon
     /**
      * Adapts the color depending on the theme.
      */
-    theme?: "light" | "dark" | undefined;
+    theme?: "auto" | "light" | "dark" | undefined;
 } & {
     children?: import("react").ReactNode;
 } & import("react").RefAttributes<HTMLElement>>;

package/esm/lib/components/radio-button-wrapper.wrapper.mjs

@@ -4,13 +4,13 @@ import { forwardRef, useRef } from 'react';
 import { usePrefix, useBrowserLayoutEffect, useMergedClass } from '../../hooks.mjs';
 import { syncRef } from '../../utils.mjs';
 
-const PRadioButtonWrapper = forwardRef(({ hideLabel = false, label = '', message = '', state = 'none', theme = 'light', className, ...rest }, ref) => {
+const PRadioButtonWrapper = forwardRef(({ hideLabel = false, label = '', loading = false, message = '', state = 'none', theme = 'light', className, ...rest }, ref) => {
     const elementRef = useRef();
     const WebComponentTag = usePrefix('p-radio-button-wrapper');
-    const propsToSync = [hideLabel, label, message, state, theme];
+    const propsToSync = [hideLabel, label, loading, message, state, theme];
     useBrowserLayoutEffect(() => {
         const { current } = elementRef;
-        ['hideLabel', 'label', 'message', 'state', 'theme'].forEach((propName, i) => (current[propName] = propsToSync[i]));
+        ['hideLabel', 'label', 'loading', 'message', 'state', 'theme'].forEach((propName, i) => (current[propName] = propsToSync[i]));
     }, propsToSync);
     const props = {
         ...rest,

package/esm/lib/components/scroller.wrapper.d.ts

@@ -66,7 +66,7 @@ export declare const PScroller: import("react").ForwardRefExoticComponent<Omit<H
     /**
      * Adapts the color when used on dark background.
      */
-    theme?: "light" | "dark" | undefined;
+    theme?: "auto" | "light" | "dark" | undefined;
 } & {
     children?: import("react").ReactNode;
 } & import("react").RefAttributes<HTMLElement>>;

package/esm/lib/components/segmented-control.wrapper.d.ts

@@ -46,7 +46,7 @@ export declare const PSegmentedControl: import("react").ForwardRefExoticComponen
     /**
      * Adapts the segmented-control color depending on the theme.
      */
-    theme?: "light" | "dark" | undefined;
+    theme?: "auto" | "light" | "dark" | undefined;
     /**
      * Sets the initial value of the segmented-control.
      */

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

@@ -74,7 +74,7 @@ export declare const PSelectWrapper: import("react").ForwardRefExoticComponent<O
     /**
      * Adapts the select color depending on the theme.
      */
-    theme?: "light" | "dark" | undefined;
+    theme?: "auto" | "light" | "dark" | undefined;
 } & {
     children?: import("react").ReactNode;
 } & import("react").RefAttributes<HTMLElement>>;

package/esm/lib/components/spinner.wrapper.d.ts

@@ -26,5 +26,5 @@ export declare const PSpinner: import("react").ForwardRefExoticComponent<Omit<HT
     /**
      * Adapts the spinner color depending on the theme.
      */
-    theme?: "light" | "dark" | undefined;
+    theme?: "auto" | "light" | "dark" | undefined;
 } & import("react").RefAttributes<HTMLElement>>;

package/esm/lib/components/stepper-horizontal.wrapper.d.ts

@@ -34,7 +34,7 @@ export declare const PStepperHorizontal: import("react").ForwardRefExoticCompone
     /**
      * Adapts the tag color depending on the theme.
      */
-    theme?: "light" | "dark" | undefined;
+    theme?: "auto" | "light" | "dark" | undefined;
 } & {
     children?: import("react").ReactNode;
 } & import("react").RefAttributes<HTMLElement>>;

package/esm/lib/components/switch.wrapper.d.ts

@@ -74,7 +74,7 @@ export declare const PSwitch: import("react").ForwardRefExoticComponent<Omit<HTM
     /**
      * Adapts the switch color depending on the theme.
      */
-    theme?: "light" | "dark" | undefined;
+    theme?: "auto" | "light" | "dark" | undefined;
 } & {
     children?: import("react").ReactNode;
 } & import("react").RefAttributes<HTMLElement>>;

package/esm/lib/components/table.wrapper.d.ts

@@ -34,7 +34,7 @@ export declare const PTable: import("react").ForwardRefExoticComponent<Omit<HTML
     /**
      * Adapts the color when used on dark background.
      */
-    theme?: "light" | "dark" | undefined;
+    theme?: "auto" | "light" | "dark" | undefined;
 } & {
     children?: import("react").ReactNode;
 } & import("react").RefAttributes<HTMLElement>>;

package/esm/lib/components/tabs-bar.wrapper.d.ts

@@ -62,7 +62,7 @@ export declare const PTabsBar: import("react").ForwardRefExoticComponent<Omit<HT
     /**
      * Adapts the color when used on dark background.
      */
-    theme?: "light" | "dark" | undefined;
+    theme?: "auto" | "light" | "dark" | undefined;
     /**
      * The text weight.
      */

package/esm/lib/components/tabs.wrapper.d.ts

@@ -62,7 +62,7 @@ export declare const PTabs: import("react").ForwardRefExoticComponent<Omit<HTMLA
     /**
      * Adapts the color when used on dark background.
      */
-    theme?: "light" | "dark" | undefined;
+    theme?: "auto" | "light" | "dark" | undefined;
     /**
      * The text weight.
      */

package/esm/lib/components/tag-dismissible.wrapper.d.ts

@@ -34,7 +34,7 @@ export declare const PTagDismissible: import("react").ForwardRefExoticComponent<
     /**
      * Adapts the color when used on dark background.
      */
-    theme?: "light" | "dark" | undefined;
+    theme?: "auto" | "light" | "dark" | undefined;
 } & {
     children?: import("react").ReactNode;
 } & import("react").RefAttributes<HTMLElement>>;

package/esm/lib/components/tag.wrapper.d.ts

@@ -34,7 +34,7 @@ export declare const PTag: import("react").ForwardRefExoticComponent<Omit<HTMLAt
     /**
      * Adapts the tag color depending on the theme.
      */
-    theme?: "light" | "dark" | undefined;
+    theme?: "auto" | "light" | "dark" | undefined;
 } & {
     children?: import("react").ReactNode;
 } & import("react").RefAttributes<HTMLElement>>;

package/esm/lib/components/text-field-wrapper.wrapper.d.ts

@@ -106,7 +106,7 @@ export declare const PTextFieldWrapper: import("react").ForwardRefExoticComponen
     /**
      * Adapts the color depending on the theme.
      */
-    theme?: "light" | "dark" | undefined;
+    theme?: "auto" | "light" | "dark" | undefined;
     /**
      * The unit text.
      */

package/esm/lib/components/text-list.wrapper.d.ts

@@ -30,7 +30,7 @@ export declare const PTextList: import("react").ForwardRefExoticComponent<Omit<H
     /**
      * Adapts the text color depending on the theme.
      */
-    theme?: "light" | "dark" | undefined;
+    theme?: "auto" | "light" | "dark" | undefined;
     /**
      * The list style type.
      */

package/esm/lib/components/text.wrapper.d.ts

@@ -54,7 +54,7 @@ export declare const PText: import("react").ForwardRefExoticComponent<Omit<HTMLA
     /**
      * Adapts the text color depending on the theme. Has no effect when "inherit" is set as color prop.
      */
-    theme?: "light" | "dark" | undefined;
+    theme?: "auto" | "light" | "dark" | undefined;
     /**
      * The weight of the text.
      */

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

@@ -66,7 +66,7 @@ export declare const PTextareaWrapper: import("react").ForwardRefExoticComponent
     /**
      * Adapts the color depending on the theme.
      */
-    theme?: "light" | "dark" | undefined;
+    theme?: "auto" | "light" | "dark" | undefined;
 } & {
     children?: import("react").ReactNode;
 } & import("react").RefAttributes<HTMLElement>>;

package/esm/lib/components/toast.wrapper.d.ts

@@ -10,5 +10,5 @@ export declare const PToast: import("react").ForwardRefExoticComponent<Omit<HTML
     /**
      * Adapts the toast color depending on the theme.
      */
-    theme?: "light" | "dark" | undefined;
+    theme?: "auto" | "light" | "dark" | undefined;
 } & import("react").RefAttributes<HTMLElement>>;

package/esm/lib/components/wordmark.wrapper.d.ts

@@ -42,5 +42,5 @@ export declare const PWordmark: import("react").ForwardRefExoticComponent<Omit<H
     /**
      * Adapts color depending on theme.
      */
-    theme?: "light" | "dark" | undefined;
+    theme?: "auto" | "light" | "dark" | undefined;
 } & import("react").RefAttributes<HTMLElement>>;

package/esm/lib/types.d.ts

@@ -448,9 +448,10 @@ export type BreakpointValues<T> = {
 export type BreakpointCustomizable<T> = T | BreakpointValues<T> | string;
 declare const THEMES: readonly [
     "light",
-    "dark"
+    "dark",
+    "auto"
 ];
-export type Theme = typeof THEMES[number];
+export type Theme = (typeof THEMES)[number];
 declare const TILE_ASPECT_RATIOS: readonly [
     "1:1",
     "4:3",
@@ -501,6 +502,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 +1013,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
@@ -1016,6 +1029,21 @@ export type PaginationUpdateEvent = {
     previousPage: number;
 };
 export type PaginationInternationalization = Partial<Record<"root" | "prev" | "next" | "page", string>> | string;
+declare const PIN_CODE_TYPES: readonly [
+    "number",
+    "password"
+];
+export type PinCodeType = (typeof PIN_CODE_TYPES)[number];
+declare const PIN_CODE_LENGTHS: readonly [
+    4,
+    6
+];
+export type PinCodeLength = (typeof PIN_CODE_LENGTHS)[number];
+export type PinCodeUpdateEvent = {
+    value: string;
+    isComplete: boolean;
+};
+export type PinCodeState = FormState;
 declare const POPOVER_DIRECTIONS: readonly [
     "top",
     "right",

package/esm/public-api.mjs

@@ -30,7 +30,10 @@ 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 { PPinCode } from './lib/components/pin-code.wrapper.mjs';
 export { PPopover } from './lib/components/popover.wrapper.mjs';
 export { PRadioButtonWrapper } from './lib/components/radio-button-wrapper.wrapper.mjs';
 export { PScroller } from './lib/components/scroller.wrapper.mjs';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@porsche-design-system/components-react",
-  "version": "3.6.1",
+  "version": "3.7.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.6.1"
+    "@porsche-design-system/components-js": "3.7.0-rc.1"
   },
   "peerDependencies": {
     "react": ">=17.0.0 <19.0.0",