@porsche-design-system/components-react 3.19.0-rc.1 → 3.19.0-rc.2

package/ssr/esm/lib/components/checkbox.wrapper.d.ts

@@ -0,0 +1,128 @@
+import type { BaseProps } from '../../BaseProps';
+import type { BreakpointCustomizable, CheckboxBlurEventDetail, CheckboxUpdateEventDetail, CheckboxState, Theme } from '../types';
+export type PCheckboxProps = BaseProps & {
+    /**
+     * Reflects the checkbox current checked state and allows setting the initial checked state.
+     */
+    checked?: boolean;
+    /**
+     * Marks the checkbox as disabled.
+     */
+    disabled?: boolean;
+    /**
+     * The id of a form element the checkbox should be associated with.
+     */
+    form?: string;
+    /**
+     * Show or hide label. For better accessibility it's recommended to show the label.
+     */
+    hideLabel?: BreakpointCustomizable<boolean>;
+    /**
+     * Marks the checkbox as indeterminate.
+     */
+    indeterminate?: boolean;
+    /**
+     * The label text.
+     */
+    label?: string;
+    /**
+     * @experimental Disables the checkbox and shows a loading indicator.
+     */
+    loading?: boolean;
+    /**
+     * The message styled depending on validation state.
+     */
+    message?: string;
+    /**
+     * The name of the checkbox.
+     */
+    name?: string;
+    /**
+     * Emitted when the checkbox has lost focus.
+     */
+    onBlur?: (event: CustomEvent<CheckboxBlurEventDetail>) => void;
+    /**
+     * Emitted when checkbox checked property is changed.
+     */
+    onUpdate?: (event: CustomEvent<CheckboxUpdateEventDetail>) => void;
+    /**
+     * Marks the checkbox as required.
+     */
+    required?: boolean;
+    /**
+     * The validation state.
+     */
+    state?: CheckboxState;
+    /**
+     * Adapts the color depending on the theme.
+     */
+    theme?: Theme;
+    /**
+     * The checkbox value. When a form is submitted, only a checkbox which is currently checked is included in the submission.
+     */
+    value?: string;
+};
+export declare const PCheckbox: import("react").ForwardRefExoticComponent<import("react").DOMAttributes<{}> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
+    /**
+     * Reflects the checkbox current checked state and allows setting the initial checked state.
+     */
+    checked?: boolean;
+    /**
+     * Marks the checkbox as disabled.
+     */
+    disabled?: boolean;
+    /**
+     * The id of a form element the checkbox should be associated with.
+     */
+    form?: string;
+    /**
+     * Show or hide label. For better accessibility it's recommended to show the label.
+     */
+    hideLabel?: BreakpointCustomizable<boolean>;
+    /**
+     * Marks the checkbox as indeterminate.
+     */
+    indeterminate?: boolean;
+    /**
+     * The label text.
+     */
+    label?: string;
+    /**
+     * @experimental Disables the checkbox and shows a loading indicator.
+     */
+    loading?: boolean;
+    /**
+     * The message styled depending on validation state.
+     */
+    message?: string;
+    /**
+     * The name of the checkbox.
+     */
+    name?: string;
+    /**
+     * Emitted when the checkbox has lost focus.
+     */
+    onBlur?: (event: CustomEvent<CheckboxBlurEventDetail>) => void;
+    /**
+     * Emitted when checkbox checked property is changed.
+     */
+    onUpdate?: (event: CustomEvent<CheckboxUpdateEventDetail>) => void;
+    /**
+     * Marks the checkbox as required.
+     */
+    required?: boolean;
+    /**
+     * The validation state.
+     */
+    state?: CheckboxState;
+    /**
+     * Adapts the color depending on the theme.
+     */
+    theme?: Theme;
+    /**
+     * The checkbox value. When a form is submitted, only a checkbox which is currently checked is included in the submission.
+     */
+    value?: string;
+} & {
+    children?: import("react").ReactNode | undefined;
+} & import("react").RefAttributes<HTMLElement>>;

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

@@ -6,6 +6,7 @@ export * from './button-pure.wrapper';
 export * from './button-tile.wrapper';
 export * from './canvas.wrapper';
 export * from './carousel.wrapper';
+export * from './checkbox.wrapper';
 export * from './checkbox-wrapper.wrapper';
 export * from './content-wrapper.wrapper';
 export * from './crest.wrapper';

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

@@ -195,4 +195,6 @@ export declare const PTextarea: import("react").ForwardRefExoticComponent<import
      * Handles wrapping behaviour of elements.
      */
     wrap?: TextareaWrap;
+} & {
+    children?: import("react").ReactNode | undefined;
 } & import("react").RefAttributes<HTMLElement>>;

package/ssr/esm/lib/dsr-components/checkbox.d.ts

@@ -0,0 +1,12 @@
+import { Component } from 'react';
+/**
+ * @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." }
+ * @slot {"name": "message", "description": "Shows a state message. Only [phrasing content](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Content_categories#Phrasing_content) is allowed." }
+ */
+export declare class DSRCheckbox extends Component<any> {
+    host: HTMLElement;
+    private internals;
+    private checkboxInputElement;
+    formResetCallback(): void;
+    render(): JSX.Element;
+}

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

@@ -715,6 +715,13 @@ export type CarouselUpdateEvent = {
     previousIndex: number;
 };
 export type CarouselUpdateEventDetail = CarouselUpdateEvent;
+export type CheckboxState = FormState;
+export type CheckboxUpdateEventDetail = {
+    name: string;
+    value?: string;
+    checked: boolean;
+};
+export type CheckboxBlurEventDetail = Event;
 export type CheckboxWrapperState = FormState;
 declare const CONTENT_WRAPPER_BACKGROUND_COLORS: readonly [
     "transparent",