@porsche-design-system/components-react 3.21.0 → 3.22.0-rc.1

package/CHANGELOG.md

@@ -14,6 +14,58 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0),
 
 ### [Unreleased]
 
+### [3.22.0-rc.1] - 2024-12-06
+
+#### Added
+
+- `Flyout Multilevel`: Supports infinite layers
+  ([3647](https://github.com/porsche-design-system/porsche-design-system/pull/3647))
+
+#### Fixed
+
+- Partials: error when using in projects without `react/jsx-runtime` as dependency
+  ([#3660](https://github.com/porsche-design-system/porsche-design-system/pull/3660))
+- `Textfield Wrapper`: text alignment of type `email` and `tel` values in RTL mode
+  ([3655](https://github.com/porsche-design-system/porsche-design-system/pull/3655))
+- `Popover`:
+  - Rendering bug of drop-shadow in Safari 18.x
+    ([3622](https://github.com/porsche-design-system/porsche-design-system/pull/3622))
+  - Positioning in RTL mode if rendered inside a table (in #top-layer)
+    ([3658](https://github.com/porsche-design-system/porsche-design-system/pull/3658))
+
+### [3.22.0-rc.0] - 2024-11-19
+
+#### Added
+
+- `Modal`, `Flyout`:
+  - `aria-label` is generated from slotted header contents if `aria` prop is not provided
+  - ARIA `role` to `aria` prop of `Modal` component to support setting `alertdialog` role
+    ([3618](https://github.com/porsche-design-system/porsche-design-system/pull/3618))
+- `Pin-Code`: Add `form` prop to explicitly associate the component with a form, even when it's not directly nested
+  within it. ([#3588](https://github.com/porsche-design-system/porsche-design-system/pull/3588))
+- `Segmented-Control`: Use ElementInternals API and add `form` prop to explicitly associate the component with a form,
+  even when it's not directly nested within it.
+  ([#3614](https://github.com/porsche-design-system/porsche-design-system/pull/3614))
+
+#### Changed
+
+- Angular: updated peer dependency to `>=19.0.0 <20.0.0`
+- `Pin-Code`:
+  - Remove native input and use ElementInternals API
+  - **Breaking Change**: `Pin-Code` component no longer support native validation due to the removal of the underlying
+    native `<input>` element. ([#3588](https://github.com/porsche-design-system/porsche-design-system/pull/3588))
+- `Styles`: `SCSS` variant uses `@forward/@use` internally to replace deprecated `@import`
+  ([#3623](https://github.com/porsche-design-system/porsche-design-system/pull/3623))
+
+#### Fixed
+
+- Partials: removed bundled `react/jsx-runtime` due to React 18/19 incompatibilities. When using `jsx` in the `format`
+  option, it is necessary to have `react/jsx-runtime` as a dependency in the project included.
+  ([#3613](https://github.com/porsche-design-system/porsche-design-system/pull/3613))
+- `Select`, `Multi-Select`: Ensure that dynamically changing the `disabled` property via `optgroups` persists the
+  `disabled` state for individual options within the group.
+  ([#3614](https://github.com/porsche-design-system/porsche-design-system/pull/3614))
+
 ### [3.21.0] - 2024-11-12
 
 ### [3.21.0-rc.0] - 2024-11-11
@@ -28,8 +80,8 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0),
   ([#3589](https://github.com/porsche-design-system/porsche-design-system/pull/3589))
 - `Button`, `Link`: `compact` prop is breakpoint customizable
   ([#3580](https://github.com/porsche-design-system/porsche-design-system/pull/3580))
-- `Select`, `Multi-Select`: Added `form` prop to explicitly associate these components with a specific form when they
-  are not directly nested within it. ([#3542](https://github.com/porsche-design-system/porsche-design-system/pull/3542))
+- `Select`, `Multi-Select`: Add `form` prop to explicitly associate these components with a specific form when they are
+  not directly nested within it. ([#3542](https://github.com/porsche-design-system/porsche-design-system/pull/3542))
 
 #### Changed
 

package/ag-grid/theme.css

@@ -1630,10 +1630,10 @@ ag-grid-aurelia {
   flex: 1 1 auto;
   align-self: stretch;
   align-items: center;
+  overflow: hidden;
 }
 
 .ag-header-cell-label {
-  overflow: hidden;
   text-overflow: ellipsis;
 }
 
@@ -1641,6 +1641,7 @@ ag-grid-aurelia {
   position: sticky;
   flex: none;
   max-width: 100%;
+  overflow: visible;
 }
 
 .ag-header-group-text {
@@ -1672,6 +1673,10 @@ ag-grid-aurelia {
   white-space: normal;
 }
 
+.ag-header-cell-comp-wrapper-limited-height > div {
+  overflow: hidden;
+}
+
 .ag-right-aligned-header .ag-header-cell-label {
   flex-direction: row-reverse;
 }
@@ -2590,7 +2595,7 @@ ag-grid-aurelia {
   position: absolute;
 }
 
-.ag-header-group-cell-no-group.ag-header-span-height .ag-header-cell-resize {
+.ag-header-group-cell-no-group.ag-header-span-height {
   display: none;
 }
 
@@ -3945,11 +3950,7 @@ button[class^=ag-]:focus {
 }
 
 .ag-row-highlight-above::after {
-  top: -1px;
-}
-
-.ag-row-highlight-above.ag-row-first::after {
-  top: 0;
+  top: 0px;
 }
 
 .ag-row-highlight-below::after {
@@ -5065,7 +5066,7 @@ button.ag-side-button-button:focus {
   margin-right: 4px;
 }
 
-.ag-header-row:not(:first-child) .ag-header-cell:not(.ag-header-span-height.ag-header-span-total),
+.ag-header-row:not(:first-child) .ag-header-cell:not(.ag-header-span-height.ag-header-span-total, .ag-header-parent-hidden),
 .ag-header-row:not(:first-child) .ag-header-group-cell.ag-header-group-cell-with-group {
   border-top: var(--ag-borders-critical) var(--ag-border-color);
 }
@@ -5936,6 +5937,14 @@ button.ag-side-button-button:focus {
   --ag-charts-justify: none !important;
 }
 
+.ag-charts-wrapper .ag-charts-proxy-legend-toolbar button:focus {
+  box-shadow: none;
+}
+
+.ag-charts-wrapper .ag-charts-proxy-legend-toolbar button:focus-visible {
+  box-shadow: var(--ag-input-focus-box-shadow);
+}
+
 .ag-date-time-list-page-title-bar {
   display: flex;
 }

package/cjs/lib/components/flyout-multilevel-item.wrapper.cjs

@@ -6,13 +6,13 @@ var react = require('react');
 var hooks = require('../../hooks.cjs');
 var utils = require('../../utils.cjs');
 
-const PFlyoutMultilevelItem = /*#__PURE__*/ react.forwardRef(({ identifier, label, className, ...rest }, ref) => {
+const PFlyoutMultilevelItem = /*#__PURE__*/ react.forwardRef(({ cascade = false, identifier, label, primary = false, secondary = false, className, ...rest }, ref) => {
     const elementRef = react.useRef();
     const WebComponentTag = hooks.usePrefix('p-flyout-multilevel-item');
-    const propsToSync = [identifier, label];
+    const propsToSync = [cascade, identifier, label, primary, secondary];
     hooks.useBrowserLayoutEffect(() => {
         const { current } = elementRef;
-        ['identifier', 'label'].forEach((propName, i) => (current[propName] = propsToSync[i]));
+        ['cascade', 'identifier', 'label', 'primary', 'secondary'].forEach((propName, i) => (current[propName] = propsToSync[i]));
     }, propsToSync);
     const props = {
         ...rest,

package/cjs/lib/components/link-tile-model-signature.wrapper.cjs

@@ -6,7 +6,7 @@ var react = require('react');
 var hooks = require('../../hooks.cjs');
 var utils = require('../../utils.cjs');
 
-const PLinkTileModelSignature = /*#__PURE__*/ react.forwardRef(({ aspectRatio = '3/4', description, heading, headingTag = 'h2', linkDirection = { base: 'column', xs: 'row' }, model = '911', weight = 'semi-bold', className, ...rest }, ref) => {
+const PLinkTileModelSignature = /*#__PURE__*/ react.forwardRef(({ aspectRatio = '3/4', description, heading, headingTag = 'h2', linkDirection = { base: 'column', xs: 'row', }, model = '911', weight = 'semi-bold', className, ...rest }, ref) => {
     const elementRef = react.useRef();
     const WebComponentTag = hooks.usePrefix('p-link-tile-model-signature');
     const propsToSync = [aspectRatio, description, heading, headingTag, linkDirection, model, weight];

package/cjs/lib/components/pin-code.wrapper.cjs

@@ -6,14 +6,14 @@ var react = require('react');
 var hooks = require('../../hooks.cjs');
 var utils = require('../../utils.cjs');
 
-const PPinCode = /*#__PURE__*/ react.forwardRef(({ description = '', disabled = false, hideLabel = false, label = '', length = 4, loading = false, message = '', name, onUpdate, required = false, state = 'none', theme, type = 'number', value = '', className, ...rest }, ref) => {
+const PPinCode = /*#__PURE__*/ react.forwardRef(({ description = '', disabled = false, form, hideLabel = false, label = '', length = 4, loading = false, message = '', name, onUpdate, required = false, state = 'none', theme, type = 'number', value = '', className, ...rest }, ref) => {
     const elementRef = react.useRef();
     hooks.useEventCallback(elementRef, 'update', onUpdate);
     const WebComponentTag = hooks.usePrefix('p-pin-code');
-    const propsToSync = [description, disabled, hideLabel, label, length, loading, message, name, required, state, theme || hooks.useTheme(), type, value];
+    const propsToSync = [description, disabled, form, hideLabel, label, length, loading, message, name, required, state, theme || hooks.useTheme(), type, value];
     hooks.useBrowserLayoutEffect(() => {
         const { current } = elementRef;
-        ['description', 'disabled', 'hideLabel', 'label', 'length', 'loading', 'message', 'name', 'required', 'state', 'theme', 'type', 'value'].forEach((propName, i) => (current[propName] = propsToSync[i]));
+        ['description', 'disabled', 'form', 'hideLabel', 'label', 'length', 'loading', 'message', 'name', 'required', 'state', 'theme', 'type', 'value'].forEach((propName, i) => (current[propName] = propsToSync[i]));
     }, propsToSync);
     const props = {
         ...rest,

package/cjs/lib/components/segmented-control.wrapper.cjs

@@ -6,15 +6,15 @@ var react = require('react');
 var hooks = require('../../hooks.cjs');
 var utils = require('../../utils.cjs');
 
-const PSegmentedControl = /*#__PURE__*/ react.forwardRef(({ backgroundColor, columns = 'auto', onSegmentedControlChange, onUpdate, theme, value, className, ...rest }, ref) => {
+const PSegmentedControl = /*#__PURE__*/ react.forwardRef(({ backgroundColor, columns = 'auto', disabled = false, form, name, onSegmentedControlChange, onUpdate, theme, value, className, ...rest }, ref) => {
     const elementRef = react.useRef();
     hooks.useEventCallback(elementRef, 'segmentedControlChange', onSegmentedControlChange);
     hooks.useEventCallback(elementRef, 'update', onUpdate);
     const WebComponentTag = hooks.usePrefix('p-segmented-control');
-    const propsToSync = [backgroundColor, columns, theme || hooks.useTheme(), value];
+    const propsToSync = [backgroundColor, columns, disabled, form, name, theme || hooks.useTheme(), value];
     hooks.useBrowserLayoutEffect(() => {
         const { current } = elementRef;
-        ['backgroundColor', 'columns', 'theme', 'value'].forEach((propName, i) => (current[propName] = propsToSync[i]));
+        ['backgroundColor', 'columns', 'disabled', 'form', 'name', 'theme', 'value'].forEach((propName, i) => (current[propName] = propsToSync[i]));
     }, propsToSync);
     const props = {
         ...rest,

package/esm/lib/components/flyout-multilevel-item.wrapper.d.ts

@@ -1,5 +1,9 @@
 import type { BaseProps } from '../../BaseProps';
 export type PFlyoutMultilevelItemProps = BaseProps & {
+    /**
+     * Private property set by the component itself.
+     */
+    cascade?: boolean;
     /**
      * Unique identifier which controls if this item should be shown when the active-identifier on the flyout-multilevel is set to this value.
      */
@@ -8,8 +12,20 @@ export type PFlyoutMultilevelItemProps = BaseProps & {
      * Label of the item.
      */
     label?: string;
+    /**
+     * Private property set by the component itself.
+     */
+    primary?: boolean;
+    /**
+     * Private property set by the component itself.
+     */
+    secondary?: boolean;
 };
 export declare const PFlyoutMultilevelItem: import("react").ForwardRefExoticComponent<import("react").DOMAttributes<{}> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
+    /**
+     * Private property set by the component itself.
+     */
+    cascade?: boolean;
     /**
      * Unique identifier which controls if this item should be shown when the active-identifier on the flyout-multilevel is set to this value.
      */
@@ -18,6 +34,14 @@ export declare const PFlyoutMultilevelItem: import("react").ForwardRefExoticComp
      * Label of the item.
      */
     label?: string;
+    /**
+     * Private property set by the component itself.
+     */
+    primary?: boolean;
+    /**
+     * Private property set by the component itself.
+     */
+    secondary?: boolean;
 } & {
     children?: import("react").ReactNode | undefined;
 } & import("react").RefAttributes<HTMLElement>>;

package/esm/lib/components/flyout-multilevel-item.wrapper.mjs

@@ -4,13 +4,13 @@ import { forwardRef, useRef } from 'react';
 import { usePrefix, useBrowserLayoutEffect, useMergedClass } from '../../hooks.mjs';
 import { syncRef } from '../../utils.mjs';
 
-const PFlyoutMultilevelItem = /*#__PURE__*/ forwardRef(({ identifier, label, className, ...rest }, ref) => {
+const PFlyoutMultilevelItem = /*#__PURE__*/ forwardRef(({ cascade = false, identifier, label, primary = false, secondary = false, className, ...rest }, ref) => {
     const elementRef = useRef();
     const WebComponentTag = usePrefix('p-flyout-multilevel-item');
-    const propsToSync = [identifier, label];
+    const propsToSync = [cascade, identifier, label, primary, secondary];
     useBrowserLayoutEffect(() => {
         const { current } = elementRef;
-        ['identifier', 'label'].forEach((propName, i) => (current[propName] = propsToSync[i]));
+        ['cascade', 'identifier', 'label', 'primary', 'secondary'].forEach((propName, i) => (current[propName] = propsToSync[i]));
     }, propsToSync);
     const props = {
         ...rest,

package/esm/lib/components/link-tile-model-signature.wrapper.mjs

@@ -4,7 +4,7 @@ import { forwardRef, useRef } from 'react';
 import { usePrefix, useBrowserLayoutEffect, useMergedClass } from '../../hooks.mjs';
 import { syncRef } from '../../utils.mjs';
 
-const PLinkTileModelSignature = /*#__PURE__*/ forwardRef(({ aspectRatio = '3/4', description, heading, headingTag = 'h2', linkDirection = { base: 'column', xs: 'row' }, model = '911', weight = 'semi-bold', className, ...rest }, ref) => {
+const PLinkTileModelSignature = /*#__PURE__*/ forwardRef(({ aspectRatio = '3/4', description, heading, headingTag = 'h2', linkDirection = { base: 'column', xs: 'row', }, model = '911', weight = 'semi-bold', className, ...rest }, ref) => {
     const elementRef = useRef();
     const WebComponentTag = usePrefix('p-link-tile-model-signature');
     const propsToSync = [aspectRatio, description, heading, headingTag, linkDirection, model, weight];

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

@@ -9,6 +9,10 @@ export type PPinCodeProps = BaseProps & {
      * Disables the Pin Code. No events will be triggered while disabled state is active.
      */
     disabled?: boolean;
+    /**
+     * The id of a form element the pin-code should be associated with.
+     */
+    form?: string;
     /**
      * Show or hide label and description text. For better accessibility it is recommended to show the label.
      */
@@ -67,6 +71,10 @@ export declare const PPinCode: import("react").ForwardRefExoticComponent<import(
      * Disables the Pin Code. No events will be triggered while disabled state is active.
      */
     disabled?: boolean;
+    /**
+     * The id of a form element the pin-code should be associated with.
+     */
+    form?: string;
     /**
      * Show or hide label and description text. For better accessibility it is recommended to show the label.
      */

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

@@ -4,14 +4,14 @@ import { forwardRef, useRef } from 'react';
 import { useEventCallback, usePrefix, useTheme, useBrowserLayoutEffect, useMergedClass } from '../../hooks.mjs';
 import { syncRef } from '../../utils.mjs';
 
-const PPinCode = /*#__PURE__*/ forwardRef(({ description = '', disabled = false, hideLabel = false, label = '', length = 4, loading = false, message = '', name, onUpdate, required = false, state = 'none', theme, type = 'number', value = '', className, ...rest }, ref) => {
+const PPinCode = /*#__PURE__*/ forwardRef(({ description = '', disabled = false, form, hideLabel = false, label = '', length = 4, loading = false, message = '', name, onUpdate, required = false, state = 'none', theme, 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 || useTheme(), type, value];
+    const propsToSync = [description, disabled, form, hideLabel, label, length, loading, message, name, required, state, theme || useTheme(), 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]));
+        ['description', 'disabled', 'form', 'hideLabel', 'label', 'length', 'loading', 'message', 'name', 'required', 'state', 'theme', 'type', 'value'].forEach((propName, i) => (current[propName] = propsToSync[i]));
     }, propsToSync);
     const props = {
         ...rest,

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

@@ -9,6 +9,18 @@ export type PSegmentedControlProps = BaseProps & {
      * Sets the amount of columns.
      */
     columns?: BreakpointCustomizable<SegmentedControlColumns>;
+    /**
+     * Disables the segmented-control.
+     */
+    disabled?: boolean;
+    /**
+     * The id of a form element the segmented-control should be associated with.
+     */
+    form?: string;
+    /**
+     * The name of the segmented-control.
+     */
+    name?: string;
     /**
      * @deprecated since v3.0.0, will be removed with next major release, use `update` event instead. Emitted when selected element changes.
      */
@@ -35,6 +47,18 @@ export declare const PSegmentedControl: import("react").ForwardRefExoticComponen
      * Sets the amount of columns.
      */
     columns?: BreakpointCustomizable<SegmentedControlColumns>;
+    /**
+     * Disables the segmented-control.
+     */
+    disabled?: boolean;
+    /**
+     * The id of a form element the segmented-control should be associated with.
+     */
+    form?: string;
+    /**
+     * The name of the segmented-control.
+     */
+    name?: string;
     /**
      * @deprecated since v3.0.0, will be removed with next major release, use `update` event instead. Emitted when selected element changes.
      */

package/esm/lib/components/segmented-control.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 PSegmentedControl = /*#__PURE__*/ forwardRef(({ backgroundColor, columns = 'auto', onSegmentedControlChange, onUpdate, theme, value, className, ...rest }, ref) => {
+const PSegmentedControl = /*#__PURE__*/ forwardRef(({ backgroundColor, columns = 'auto', disabled = false, form, name, onSegmentedControlChange, onUpdate, theme, value, className, ...rest }, ref) => {
     const elementRef = useRef();
     useEventCallback(elementRef, 'segmentedControlChange', onSegmentedControlChange);
     useEventCallback(elementRef, 'update', onUpdate);
     const WebComponentTag = usePrefix('p-segmented-control');
-    const propsToSync = [backgroundColor, columns, theme || useTheme(), value];
+    const propsToSync = [backgroundColor, columns, disabled, form, name, theme || useTheme(), value];
     useBrowserLayoutEffect(() => {
         const { current } = elementRef;
-        ['backgroundColor', 'columns', 'theme', 'value'].forEach((propName, i) => (current[propName] = propsToSync[i]));
+        ['backgroundColor', 'columns', 'disabled', 'form', 'name', 'theme', 'value'].forEach((propName, i) => (current[propName] = propsToSync[i]));
     }, propsToSync);
     const props = {
         ...rest,

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

@@ -6,7 +6,7 @@ export type PSelectProps = BaseProps & {
      */
     description?: string;
     /**
-     * Disables the select
+     * Disables the select.
      */
     disabled?: boolean;
     /**
@@ -60,7 +60,7 @@ export declare const PSelect: import("react").ForwardRefExoticComponent<import("
      */
     description?: string;
     /**
-     * Disables the select
+     * Disables the select.
      */
     disabled?: boolean;
     /**