npm - @porsche-design-system/components-react - Versions diffs - 3.6.1 → 3.7.0-rc.1 - Mend

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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (177) hide show

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

@@ -29,7 +29,10 @@ 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 './pin-code.wrapper';
 export * from './popover.wrapper';
 export * from './radio-button-wrapper.wrapper';
 export * from './scroller.wrapper';

package/ssr/esm/lib/components/modal.wrapper.d.ts CHANGED Viewed

@@ -10,7 +10,8 @@ export type PModalProps = Omit<HTMLAttributes<{}>, 'color'> & {
      */
     disableBackdropClick?: boolean;
     /**
-     * @deprecated since v3.0.0, will be removed with next major release, use `dismissButton` instead. If true, the modal will not have a dismiss button.
+     * If true, the modal will not have a dismiss button.
+     * @deprecated since v3.0.0, will be removed with next major release, use `dismissButton` instead.
      */
     disableCloseButton?: boolean;
     /**
@@ -48,7 +49,8 @@ export declare const PModal: import("react").ForwardRefExoticComponent<Omit<HTML
      */
     disableBackdropClick?: boolean;
     /**
-     * @deprecated since v3.0.0, will be removed with next major release, use `dismissButton` instead. If true, the modal will not have a dismiss button.
+     * If true, the modal will not have a dismiss button.
+     * @deprecated since v3.0.0, will be removed with next major release, use `dismissButton` instead.
      */
     disableCloseButton?: boolean;
     /**

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

@@ -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 ADDED Viewed

@@ -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/components/pin-code.wrapper.d.ts ADDED Viewed

@@ -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;
+    /**
+     * 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;
+} & {
+    children?: import("react").ReactNode;
+} & import("react").RefAttributes<HTMLElement>>;

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

@@ -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;
+    /**
+     * __Experimental__: Disables the radio button and shows a loading indicator.
+     */
+    loading?: boolean;
     /**
      * The message styled depending on validation state.
      */

package/ssr/esm/lib/dsr-components/carousel.d.ts CHANGED Viewed

@@ -8,5 +8,6 @@ export declare class DSRCarousel extends Component<any> {
     private btnNext;
     private paginationEl;
     private slides;
+    private get hasNavigation();
     render(): JSX.Element;
 }

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

@@ -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 ADDED Viewed

@@ -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/dsr-components/pin-code.d.ts ADDED Viewed

@@ -0,0 +1,9 @@
+import { Component } from 'react';
+export declare class DSRPinCode extends Component<any> {
+    host: HTMLElement;
+    private form;
+    private isWithinForm;
+    private hiddenInput;
+    private inputElements;
+    render(): JSX.Element;
+}

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

@@ -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",