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

package/CHANGELOG.md

@@ -14,6 +14,19 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0),
 
 ### [Unreleased]
 
+### [3.19.0-rc.2] - 2024-10-01
+
+#### Added
+
+- `Carousel`: introduce `trimSpace` prop
+  ([#3496](https://github.com/porsche-design-system/porsche-design-system/pull/3496))
+- `Checkbox`: ([#3498](https://github.com/porsche-design-system/porsche-design-system/pull/3498))
+
+#### Fixed
+
+- `Checkbox Wrapper`, `Radio Button Wrapper`: rendering of `checked` state in Blink based Browsers when component is
+  rendered in high contrast mode ([#3488](https://github.com/porsche-design-system/porsche-design-system/pull/3488))
+
 ### [3.19.0-rc.1] - 2024-09-06
 
 #### Changed

package/cjs/lib/components/carousel.wrapper.cjs

@@ -6,15 +6,15 @@ var react = require('react');
 var hooks = require('../../hooks.cjs');
 var utils = require('../../utils.cjs');
 
-const PCarousel = react.forwardRef(({ activeSlideIndex = 0, alignHeader = 'start', aria, description, disablePagination, focusOnCenterSlide = false, gradientColor = 'none', heading, headingSize = 'x-large', intl, onCarouselChange, onUpdate, pagination = true, rewind = true, skipLinkTarget, slidesPerPage = 1, theme, width = 'basic', wrapContent, className, ...rest }, ref) => {
+const PCarousel = react.forwardRef(({ activeSlideIndex = 0, alignHeader = 'start', aria, description, disablePagination, focusOnCenterSlide = false, gradientColor = 'none', heading, headingSize = 'x-large', intl, onCarouselChange, onUpdate, pagination = true, rewind = true, skipLinkTarget, slidesPerPage = 1, theme, trimSpace = true, width = 'basic', wrapContent, className, ...rest }, ref) => {
     const elementRef = react.useRef();
     hooks.useEventCallback(elementRef, 'carouselChange', onCarouselChange);
     hooks.useEventCallback(elementRef, 'update', onUpdate);
     const WebComponentTag = hooks.usePrefix('p-carousel');
-    const propsToSync = [activeSlideIndex, alignHeader, aria, description, disablePagination, focusOnCenterSlide, gradientColor, heading, headingSize, intl, pagination, rewind, skipLinkTarget, slidesPerPage, theme || hooks.useTheme(), width, wrapContent];
+    const propsToSync = [activeSlideIndex, alignHeader, aria, description, disablePagination, focusOnCenterSlide, gradientColor, heading, headingSize, intl, pagination, rewind, skipLinkTarget, slidesPerPage, theme || hooks.useTheme(), trimSpace, width, wrapContent];
     hooks.useBrowserLayoutEffect(() => {
         const { current } = elementRef;
-        ['activeSlideIndex', 'alignHeader', 'aria', 'description', 'disablePagination', 'focusOnCenterSlide', 'gradientColor', 'heading', 'headingSize', 'intl', 'pagination', 'rewind', 'skipLinkTarget', 'slidesPerPage', 'theme', 'width', 'wrapContent'].forEach((propName, i) => (current[propName] = propsToSync[i]));
+        ['activeSlideIndex', 'alignHeader', 'aria', 'description', 'disablePagination', 'focusOnCenterSlide', 'gradientColor', 'heading', 'headingSize', 'intl', 'pagination', 'rewind', 'skipLinkTarget', 'slidesPerPage', 'theme', 'trimSpace', 'width', 'wrapContent'].forEach((propName, i) => (current[propName] = propsToSync[i]));
     }, propsToSync);
     const props = {
         ...rest,

package/cjs/lib/components/checkbox.wrapper.cjs

@@ -0,0 +1,28 @@
+"use client";
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
+var hooks = require('../../hooks.cjs');
+var utils = require('../../utils.cjs');
+
+const PCheckbox = react.forwardRef(({ checked = false, disabled = false, form, hideLabel = false, indeterminate = false, label = '', loading = false, message = '', name = '', onBlur, onUpdate, required = false, state = 'none', theme, value = 'on', className, ...rest }, ref) => {
+    const elementRef = react.useRef();
+    hooks.useEventCallback(elementRef, 'blur', onBlur);
+    hooks.useEventCallback(elementRef, 'update', onUpdate);
+    const WebComponentTag = hooks.usePrefix('p-checkbox');
+    const propsToSync = [checked, disabled, form, hideLabel, indeterminate, label, loading, message, name, required, state, theme || hooks.useTheme(), value];
+    hooks.useBrowserLayoutEffect(() => {
+        const { current } = elementRef;
+        ['checked', 'disabled', 'form', 'hideLabel', 'indeterminate', 'label', 'loading', 'message', 'name', 'required', 'state', 'theme', 'value'].forEach((propName, i) => (current[propName] = propsToSync[i]));
+    }, propsToSync);
+    const props = {
+        ...rest,
+        class: hooks.useMergedClass(elementRef, className),
+        ref: utils.syncRef(elementRef, ref)
+    };
+    // @ts-ignore
+    return jsxRuntime.jsx(WebComponentTag, { ...props });
+});
+
+exports.PCheckbox = PCheckbox;

package/cjs/public-api.cjs

@@ -9,6 +9,7 @@ var buttonPure_wrapper = require('./lib/components/button-pure.wrapper.cjs');
 var buttonTile_wrapper = require('./lib/components/button-tile.wrapper.cjs');
 var canvas_wrapper = require('./lib/components/canvas.wrapper.cjs');
 var carousel_wrapper = require('./lib/components/carousel.wrapper.cjs');
+var checkbox_wrapper = require('./lib/components/checkbox.wrapper.cjs');
 var checkboxWrapper_wrapper = require('./lib/components/checkbox-wrapper.wrapper.cjs');
 var contentWrapper_wrapper = require('./lib/components/content-wrapper.wrapper.cjs');
 var crest_wrapper = require('./lib/components/crest.wrapper.cjs');
@@ -91,6 +92,7 @@ exports.PButtonPure = buttonPure_wrapper.PButtonPure;
 exports.PButtonTile = buttonTile_wrapper.PButtonTile;
 exports.PCanvas = canvas_wrapper.PCanvas;
 exports.PCarousel = carousel_wrapper.PCarousel;
+exports.PCheckbox = checkbox_wrapper.PCheckbox;
 exports.PCheckboxWrapper = checkboxWrapper_wrapper.PCheckboxWrapper;
 exports.PContentWrapper = contentWrapper_wrapper.PContentWrapper;
 exports.PCrest = crest_wrapper.PCrest;

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

@@ -69,6 +69,10 @@ export type PCarouselProps = BaseProps & {
      * Adapts the color when used on dark background.
      */
     theme?: Theme;
+    /**
+     * Determines whether to trim spaces before/after the carousel if `focusOnCenterSlide` option is true.
+     */
+    trimSpace?: boolean;
     /**
      * Defines the outer spacings between the carousel and the left and right screen sides.
      */
@@ -148,6 +152,10 @@ export declare const PCarousel: import("react").ForwardRefExoticComponent<import
      * Adapts the color when used on dark background.
      */
     theme?: Theme;
+    /**
+     * Determines whether to trim spaces before/after the carousel if `focusOnCenterSlide` option is true.
+     */
+    trimSpace?: boolean;
     /**
      * Defines the outer spacings between the carousel and the left and right screen sides.
      */

package/esm/lib/components/carousel.wrapper.mjs

@@ -4,15 +4,15 @@ import { forwardRef, useRef } from 'react';
 import { useEventCallback, usePrefix, useTheme, useBrowserLayoutEffect, useMergedClass } from '../../hooks.mjs';
 import { syncRef } from '../../utils.mjs';
 
-const PCarousel = forwardRef(({ activeSlideIndex = 0, alignHeader = 'start', aria, description, disablePagination, focusOnCenterSlide = false, gradientColor = 'none', heading, headingSize = 'x-large', intl, onCarouselChange, onUpdate, pagination = true, rewind = true, skipLinkTarget, slidesPerPage = 1, theme, width = 'basic', wrapContent, className, ...rest }, ref) => {
+const PCarousel = forwardRef(({ activeSlideIndex = 0, alignHeader = 'start', aria, description, disablePagination, focusOnCenterSlide = false, gradientColor = 'none', heading, headingSize = 'x-large', intl, onCarouselChange, onUpdate, pagination = true, rewind = true, skipLinkTarget, slidesPerPage = 1, theme, trimSpace = true, width = 'basic', wrapContent, className, ...rest }, ref) => {
     const elementRef = useRef();
     useEventCallback(elementRef, 'carouselChange', onCarouselChange);
     useEventCallback(elementRef, 'update', onUpdate);
     const WebComponentTag = usePrefix('p-carousel');
-    const propsToSync = [activeSlideIndex, alignHeader, aria, description, disablePagination, focusOnCenterSlide, gradientColor, heading, headingSize, intl, pagination, rewind, skipLinkTarget, slidesPerPage, theme || useTheme(), width, wrapContent];
+    const propsToSync = [activeSlideIndex, alignHeader, aria, description, disablePagination, focusOnCenterSlide, gradientColor, heading, headingSize, intl, pagination, rewind, skipLinkTarget, slidesPerPage, theme || useTheme(), trimSpace, width, wrapContent];
     useBrowserLayoutEffect(() => {
         const { current } = elementRef;
-        ['activeSlideIndex', 'alignHeader', 'aria', 'description', 'disablePagination', 'focusOnCenterSlide', 'gradientColor', 'heading', 'headingSize', 'intl', 'pagination', 'rewind', 'skipLinkTarget', 'slidesPerPage', 'theme', 'width', 'wrapContent'].forEach((propName, i) => (current[propName] = propsToSync[i]));
+        ['activeSlideIndex', 'alignHeader', 'aria', 'description', 'disablePagination', 'focusOnCenterSlide', 'gradientColor', 'heading', 'headingSize', 'intl', 'pagination', 'rewind', 'skipLinkTarget', 'slidesPerPage', 'theme', 'trimSpace', 'width', 'wrapContent'].forEach((propName, i) => (current[propName] = propsToSync[i]));
     }, propsToSync);
     const props = {
         ...rest,

package/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/esm/lib/components/checkbox.wrapper.mjs

@@ -0,0 +1,26 @@
+"use client";
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef, useRef } from 'react';
+import { useEventCallback, usePrefix, useTheme, useBrowserLayoutEffect, useMergedClass } from '../../hooks.mjs';
+import { syncRef } from '../../utils.mjs';
+
+const PCheckbox = forwardRef(({ checked = false, disabled = false, form, hideLabel = false, indeterminate = false, label = '', loading = false, message = '', name = '', onBlur, onUpdate, required = false, state = 'none', theme, value = 'on', className, ...rest }, ref) => {
+    const elementRef = useRef();
+    useEventCallback(elementRef, 'blur', onBlur);
+    useEventCallback(elementRef, 'update', onUpdate);
+    const WebComponentTag = usePrefix('p-checkbox');
+    const propsToSync = [checked, disabled, form, hideLabel, indeterminate, label, loading, message, name, required, state, theme || useTheme(), value];
+    useBrowserLayoutEffect(() => {
+        const { current } = elementRef;
+        ['checked', 'disabled', 'form', 'hideLabel', 'indeterminate', 'label', 'loading', 'message', 'name', 'required', 'state', 'theme', 'value'].forEach((propName, i) => (current[propName] = propsToSync[i]));
+    }, propsToSync);
+    const props = {
+        ...rest,
+        class: useMergedClass(elementRef, className),
+        ref: syncRef(elementRef, ref)
+    };
+    // @ts-ignore
+    return jsx(WebComponentTag, { ...props });
+});
+
+export { PCheckbox };

package/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/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/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",

package/esm/public-api.mjs

@@ -7,6 +7,7 @@ export { PButtonPure } from './lib/components/button-pure.wrapper.mjs';
 export { PButtonTile } from './lib/components/button-tile.wrapper.mjs';
 export { PCanvas } from './lib/components/canvas.wrapper.mjs';
 export { PCarousel } from './lib/components/carousel.wrapper.mjs';
+export { PCheckbox } from './lib/components/checkbox.wrapper.mjs';
 export { PCheckboxWrapper } from './lib/components/checkbox-wrapper.wrapper.mjs';
 export { PContentWrapper } from './lib/components/content-wrapper.wrapper.mjs';
 export { PCrest } from './lib/components/crest.wrapper.mjs';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@porsche-design-system/components-react",
-  "version": "3.19.0-rc.1",
+  "version": "3.19.0-rc.2",
   "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.19.0-rc.1"
+    "@porsche-design-system/components-js": "3.19.0-rc.2"
   },
   "peerDependencies": {
     "react": ">=18.0.0 <19.0.0",