@porsche-design-system/components-react 3.24.0 → 3.25.0-rc.0

package/CHANGELOG.md

@@ -14,6 +14,24 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0),
 
 ### [Unreleased]
 
+### [3.25.0-rc.0] - 2025-01-21
+
+#### Added
+
+- `Sheet` ([#3704](https://github.com/porsche-design-system/porsche-design-system/pull/3704))
+- `Button`, `Button-Pure`: Add `form` prop to explicitly associate the component with a form, even when it's not
+  directly nested within it. ([#3648](https://github.com/porsche-design-system/porsche-design-system/pull/3648))
+
+#### Changed
+
+- `Table`: Enable `Table Head Cell` to be used within `Table Row` in addition to `Table Head Row` to further align with
+  table structure defined by W3C ([#3701](https://github.com/porsche-design-system/porsche-design-system/pull/3701))
+
+#### Fixed
+
+- `Textarea`, `Textarea Wrapper`, `Textfield Wrapper`: color contrast of `unit` prop and counter in `readonly` mode
+  meets WCAG 2.2 AA standard ([#3693](https://github.com/porsche-design-system/porsche-design-system/pull/3693))
+
 ### [3.24.0] - 2025-01-08
 
 ### [3.24.0-rc.1] - 2025-01-08

package/cjs/lib/components/button-pure.wrapper.cjs

@@ -6,13 +6,13 @@ var react = require('react');
 var hooks = require('../../hooks.cjs');
 var utils = require('../../utils.cjs');
 
-const PButtonPure = /*#__PURE__*/ react.forwardRef(({ active = false, alignLabel = 'end', aria, disabled = false, hideLabel = false, icon = 'arrow-right', iconSource, loading = false, name, size = 'small', stretch = false, theme, type = 'submit', underline = false, value, weight = 'regular', className, ...rest }, ref) => {
+const PButtonPure = /*#__PURE__*/ react.forwardRef(({ active = false, alignLabel = 'end', aria, disabled = false, form, hideLabel = false, icon = 'arrow-right', iconSource, loading = false, name, size = 'small', stretch = false, theme, type = 'submit', underline = false, value, weight = 'regular', className, ...rest }, ref) => {
     const elementRef = react.useRef(undefined);
     const WebComponentTag = hooks.usePrefix('p-button-pure');
-    const propsToSync = [active, alignLabel, aria, disabled, hideLabel, icon, iconSource, loading, name, size, stretch, theme || hooks.useTheme(), type, underline, value, weight];
+    const propsToSync = [active, alignLabel, aria, disabled, form, hideLabel, icon, iconSource, loading, name, size, stretch, theme || hooks.useTheme(), type, underline, value, weight];
     hooks.useBrowserLayoutEffect(() => {
         const { current } = elementRef;
-        ['active', 'alignLabel', 'aria', 'disabled', 'hideLabel', 'icon', 'iconSource', 'loading', 'name', 'size', 'stretch', 'theme', 'type', 'underline', 'value', 'weight'].forEach((propName, i) => (current[propName] = propsToSync[i]));
+        ['active', 'alignLabel', 'aria', 'disabled', 'form', 'hideLabel', 'icon', 'iconSource', 'loading', 'name', 'size', 'stretch', 'theme', 'type', 'underline', 'value', 'weight'].forEach((propName, i) => (current[propName] = propsToSync[i]));
     }, propsToSync);
     const props = {
         ...rest,

package/cjs/lib/components/button.wrapper.cjs

@@ -6,13 +6,13 @@ var react = require('react');
 var hooks = require('../../hooks.cjs');
 var utils = require('../../utils.cjs');
 
-const PButton = /*#__PURE__*/ react.forwardRef(({ aria, compact = false, disabled = false, hideLabel = false, icon = 'none', iconSource, loading = false, name, theme, type = 'submit', value, variant = 'primary', className, ...rest }, ref) => {
+const PButton = /*#__PURE__*/ react.forwardRef(({ aria, compact = false, disabled = false, form, hideLabel = false, icon = 'none', iconSource, loading = false, name, theme, type = 'submit', value, variant = 'primary', className, ...rest }, ref) => {
     const elementRef = react.useRef(undefined);
     const WebComponentTag = hooks.usePrefix('p-button');
-    const propsToSync = [aria, compact, disabled, hideLabel, icon, iconSource, loading, name, theme || hooks.useTheme(), type, value, variant];
+    const propsToSync = [aria, compact, disabled, form, hideLabel, icon, iconSource, loading, name, theme || hooks.useTheme(), type, value, variant];
     hooks.useBrowserLayoutEffect(() => {
         const { current } = elementRef;
-        ['aria', 'compact', 'disabled', 'hideLabel', 'icon', 'iconSource', 'loading', 'name', 'theme', 'type', 'value', 'variant'].forEach((propName, i) => (current[propName] = propsToSync[i]));
+        ['aria', 'compact', 'disabled', 'form', 'hideLabel', 'icon', 'iconSource', 'loading', 'name', 'theme', 'type', 'value', 'variant'].forEach((propName, i) => (current[propName] = propsToSync[i]));
     }, propsToSync);
     const props = {
         ...rest,

package/cjs/lib/components/sheet.wrapper.cjs

@@ -0,0 +1,29 @@
+"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 PSheet = /*#__PURE__*/ react.forwardRef(({ aria, disableBackdropClick = false, dismissButton = true, onDismiss, onMotionHiddenEnd, onMotionVisibleEnd, open = false, theme, className, ...rest }, ref) => {
+    const elementRef = react.useRef(undefined);
+    hooks.useEventCallback(elementRef, 'dismiss', onDismiss);
+    hooks.useEventCallback(elementRef, 'motionHiddenEnd', onMotionHiddenEnd);
+    hooks.useEventCallback(elementRef, 'motionVisibleEnd', onMotionVisibleEnd);
+    const WebComponentTag = hooks.usePrefix('p-sheet');
+    const propsToSync = [aria, disableBackdropClick, dismissButton, open, theme || hooks.useTheme()];
+    hooks.useBrowserLayoutEffect(() => {
+        const { current } = elementRef;
+        ['aria', 'disableBackdropClick', 'dismissButton', 'open', 'theme'].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.PSheet = PSheet;

package/cjs/public-api.cjs

@@ -50,6 +50,7 @@ var segmentedControlItem_wrapper = require('./lib/components/segmented-control-i
 var select_wrapper = require('./lib/components/select.wrapper.cjs');
 var selectOption_wrapper = require('./lib/components/select-option.wrapper.cjs');
 var selectWrapper_wrapper = require('./lib/components/select-wrapper.wrapper.cjs');
+var sheet_wrapper = require('./lib/components/sheet.wrapper.cjs');
 var spinner_wrapper = require('./lib/components/spinner.wrapper.cjs');
 var stepperHorizontal_wrapper = require('./lib/components/stepper-horizontal.wrapper.cjs');
 var stepperHorizontalItem_wrapper = require('./lib/components/stepper-horizontal-item.wrapper.cjs');
@@ -133,6 +134,7 @@ exports.PSegmentedControlItem = segmentedControlItem_wrapper.PSegmentedControlIt
 exports.PSelect = select_wrapper.PSelect;
 exports.PSelectOption = selectOption_wrapper.PSelectOption;
 exports.PSelectWrapper = selectWrapper_wrapper.PSelectWrapper;
+exports.PSheet = sheet_wrapper.PSheet;
 exports.PSpinner = spinner_wrapper.PSpinner;
 exports.PStepperHorizontal = stepperHorizontal_wrapper.PStepperHorizontal;
 exports.PStepperHorizontalItem = stepperHorizontalItem_wrapper.PStepperHorizontalItem;

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

@@ -17,6 +17,10 @@ export type PButtonPureProps = BaseProps & {
      * Disables the button. No events will be triggered while disabled state is active.
      */
     disabled?: boolean;
+    /**
+     * The id of a form element the button should be associated with.
+     */
+    form?: string;
     /**
      * Show or hide label. For better accessibility it is recommended to show the label.
      */
@@ -84,6 +88,10 @@ export declare const PButtonPure: import("react").ForwardRefExoticComponent<impo
      * Disables the button. No events will be triggered while disabled state is active.
      */
     disabled?: boolean;
+    /**
+     * The id of a form element the button should be associated with.
+     */
+    form?: string;
     /**
      * Show or hide label. For better accessibility it is recommended to show the label.
      */

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

@@ -4,13 +4,13 @@ import { forwardRef, useRef } from 'react';
 import { usePrefix, useTheme, useBrowserLayoutEffect, useMergedClass } from '../../hooks.mjs';
 import { syncRef } from '../../utils.mjs';
 
-const PButtonPure = /*#__PURE__*/ forwardRef(({ active = false, alignLabel = 'end', aria, disabled = false, hideLabel = false, icon = 'arrow-right', iconSource, loading = false, name, size = 'small', stretch = false, theme, type = 'submit', underline = false, value, weight = 'regular', className, ...rest }, ref) => {
+const PButtonPure = /*#__PURE__*/ forwardRef(({ active = false, alignLabel = 'end', aria, disabled = false, form, hideLabel = false, icon = 'arrow-right', iconSource, loading = false, name, size = 'small', stretch = false, theme, type = 'submit', underline = false, value, weight = 'regular', className, ...rest }, ref) => {
     const elementRef = useRef(undefined);
     const WebComponentTag = usePrefix('p-button-pure');
-    const propsToSync = [active, alignLabel, aria, disabled, hideLabel, icon, iconSource, loading, name, size, stretch, theme || useTheme(), type, underline, value, weight];
+    const propsToSync = [active, alignLabel, aria, disabled, form, hideLabel, icon, iconSource, loading, name, size, stretch, theme || useTheme(), type, underline, value, weight];
     useBrowserLayoutEffect(() => {
         const { current } = elementRef;
-        ['active', 'alignLabel', 'aria', 'disabled', 'hideLabel', 'icon', 'iconSource', 'loading', 'name', 'size', 'stretch', 'theme', 'type', 'underline', 'value', 'weight'].forEach((propName, i) => (current[propName] = propsToSync[i]));
+        ['active', 'alignLabel', 'aria', 'disabled', 'form', 'hideLabel', 'icon', 'iconSource', 'loading', 'name', 'size', 'stretch', 'theme', 'type', 'underline', 'value', 'weight'].forEach((propName, i) => (current[propName] = propsToSync[i]));
     }, propsToSync);
     const props = {
         ...rest,

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

@@ -13,6 +13,10 @@ export type PButtonProps = BaseProps & {
      * Disables the button. No events will be triggered while disabled state is active.
      */
     disabled?: boolean;
+    /**
+     * The id of a form element the button should be associated with.
+     */
+    form?: string;
     /**
      * Show or hide label. For better accessibility it is recommended to show the label.
      */
@@ -63,6 +67,10 @@ export declare const PButton: import("react").ForwardRefExoticComponent<import("
      * Disables the button. No events will be triggered while disabled state is active.
      */
     disabled?: boolean;
+    /**
+     * The id of a form element the button should be associated with.
+     */
+    form?: string;
     /**
      * Show or hide label. For better accessibility it is recommended to show the label.
      */

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

@@ -4,13 +4,13 @@ import { forwardRef, useRef } from 'react';
 import { usePrefix, useTheme, useBrowserLayoutEffect, useMergedClass } from '../../hooks.mjs';
 import { syncRef } from '../../utils.mjs';
 
-const PButton = /*#__PURE__*/ forwardRef(({ aria, compact = false, disabled = false, hideLabel = false, icon = 'none', iconSource, loading = false, name, theme, type = 'submit', value, variant = 'primary', className, ...rest }, ref) => {
+const PButton = /*#__PURE__*/ forwardRef(({ aria, compact = false, disabled = false, form, hideLabel = false, icon = 'none', iconSource, loading = false, name, theme, type = 'submit', value, variant = 'primary', className, ...rest }, ref) => {
     const elementRef = useRef(undefined);
     const WebComponentTag = usePrefix('p-button');
-    const propsToSync = [aria, compact, disabled, hideLabel, icon, iconSource, loading, name, theme || useTheme(), type, value, variant];
+    const propsToSync = [aria, compact, disabled, form, hideLabel, icon, iconSource, loading, name, theme || useTheme(), type, value, variant];
     useBrowserLayoutEffect(() => {
         const { current } = elementRef;
-        ['aria', 'compact', 'disabled', 'hideLabel', 'icon', 'iconSource', 'loading', 'name', 'theme', 'type', 'value', 'variant'].forEach((propName, i) => (current[propName] = propsToSync[i]));
+        ['aria', 'compact', 'disabled', 'form', 'hideLabel', 'icon', 'iconSource', 'loading', 'name', 'theme', 'type', 'value', 'variant'].forEach((propName, i) => (current[propName] = propsToSync[i]));
     }, propsToSync);
     const props = {
         ...rest,

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

@@ -47,6 +47,7 @@ export * from './segmented-control-item.wrapper';
 export * from './select.wrapper';
 export * from './select-option.wrapper';
 export * from './select-wrapper.wrapper';
+export * from './sheet.wrapper';
 export * from './spinner.wrapper';
 export * from './stepper-horizontal.wrapper';
 export * from './stepper-horizontal-item.wrapper';

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

@@ -0,0 +1,72 @@
+import type { BaseProps } from '../../BaseProps';
+import type { SelectedAriaAttributes, SheetAriaAttribute, SheetMotionHiddenEndEventDetail, SheetMotionVisibleEndEventDetail, Theme } from '../types';
+export type PSheetProps = BaseProps & {
+    /**
+     * Add ARIA attributes.
+     */
+    aria?: SelectedAriaAttributes<SheetAriaAttribute>;
+    /**
+     * If true, the sheet will not be closable via backdrop click.
+     */
+    disableBackdropClick?: boolean;
+    /**
+     * If false, the sheet will not have a dismiss button.
+     */
+    dismissButton?: boolean;
+    /**
+     * Emitted when the component requests to be dismissed.
+     */
+    onDismiss?: (event: CustomEvent<void>) => void;
+    /**
+     * Emitted when the sheet is closed and the transition is finished.
+     */
+    onMotionHiddenEnd?: (event: CustomEvent<SheetMotionHiddenEndEventDetail>) => void;
+    /**
+     * Emitted when the sheet is opened and the transition is finished.
+     */
+    onMotionVisibleEnd?: (event: CustomEvent<SheetMotionVisibleEndEventDetail>) => void;
+    /**
+     * If true, the sheet is open.
+     */
+    open: boolean;
+    /**
+     * Adapts the sheet color depending on the theme.
+     */
+    theme?: Theme;
+};
+export declare const PSheet: import("react").ForwardRefExoticComponent<import("react").DOMAttributes<{}> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "inert" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
+    /**
+     * Add ARIA attributes.
+     */
+    aria?: SelectedAriaAttributes<SheetAriaAttribute>;
+    /**
+     * If true, the sheet will not be closable via backdrop click.
+     */
+    disableBackdropClick?: boolean;
+    /**
+     * If false, the sheet will not have a dismiss button.
+     */
+    dismissButton?: boolean;
+    /**
+     * Emitted when the component requests to be dismissed.
+     */
+    onDismiss?: (event: CustomEvent<void>) => void;
+    /**
+     * Emitted when the sheet is closed and the transition is finished.
+     */
+    onMotionHiddenEnd?: (event: CustomEvent<SheetMotionHiddenEndEventDetail>) => void;
+    /**
+     * Emitted when the sheet is opened and the transition is finished.
+     */
+    onMotionVisibleEnd?: (event: CustomEvent<SheetMotionVisibleEndEventDetail>) => void;
+    /**
+     * If true, the sheet is open.
+     */
+    open: boolean;
+    /**
+     * Adapts the sheet color depending on the theme.
+     */
+    theme?: Theme;
+} & {
+    children?: import("react").ReactNode | undefined;
+} & import("react").RefAttributes<HTMLElement>>;

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

@@ -0,0 +1,27 @@
+"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 PSheet = /*#__PURE__*/ forwardRef(({ aria, disableBackdropClick = false, dismissButton = true, onDismiss, onMotionHiddenEnd, onMotionVisibleEnd, open = false, theme, className, ...rest }, ref) => {
+    const elementRef = useRef(undefined);
+    useEventCallback(elementRef, 'dismiss', onDismiss);
+    useEventCallback(elementRef, 'motionHiddenEnd', onMotionHiddenEnd);
+    useEventCallback(elementRef, 'motionVisibleEnd', onMotionVisibleEnd);
+    const WebComponentTag = usePrefix('p-sheet');
+    const propsToSync = [aria, disableBackdropClick, dismissButton, open, theme || useTheme()];
+    useBrowserLayoutEffect(() => {
+        const { current } = elementRef;
+        ['aria', 'disableBackdropClick', 'dismissButton', 'open', 'theme'].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 { PSheet };

package/esm/lib/types.d.ts

@@ -1250,6 +1250,13 @@ declare const DROPDOWN_DIRECTIONS: readonly [
 ];
 export type SelectWrapperDropdownDirection = (typeof DROPDOWN_DIRECTIONS)[number];
 export type SelectWrapperState = FormState;
+declare const SHEET_ARIA_ATTRIBUTES: readonly [
+    "aria-label",
+    "role"
+];
+export type SheetAriaAttribute = (typeof SHEET_ARIA_ATTRIBUTES)[number];
+export type SheetMotionVisibleEndEventDetail = TransitionEvent;
+export type SheetMotionHiddenEndEventDetail = TransitionEvent;
 declare const SPINNER_SIZES: readonly [
     "small",
     "medium",

package/esm/public-api.mjs

@@ -48,6 +48,7 @@ export { PSegmentedControlItem } from './lib/components/segmented-control-item.w
 export { PSelect } from './lib/components/select.wrapper.mjs';
 export { PSelectOption } from './lib/components/select-option.wrapper.mjs';
 export { PSelectWrapper } from './lib/components/select-wrapper.wrapper.mjs';
+export { PSheet } from './lib/components/sheet.wrapper.mjs';
 export { PSpinner } from './lib/components/spinner.wrapper.mjs';
 export { PStepperHorizontal } from './lib/components/stepper-horizontal.wrapper.mjs';
 export { PStepperHorizontalItem } from './lib/components/stepper-horizontal-item.wrapper.mjs';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@porsche-design-system/components-react",
-  "version": "3.24.0",
+  "version": "3.25.0-rc.0",
   "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.24.0"
+    "@porsche-design-system/components-js": "3.25.0-rc.0"
   },
   "peerDependencies": {
     "ag-grid-community": ">= 32.0.0 <33.0.0",