@porsche-design-system/components-react 3.1.0-rc.0 → 3.1.0-rc.2

package/CHANGELOG.md

@@ -9,12 +9,48 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 
 ### [Unreleased]
 
+### [3.1.0-rc.2] - 2023-06-09
+
+#### Changed
+
+- `Crest` replaced final assets and meta icons
+  ([#2595](https://github.com/porsche-design-system/porsche-design-system/pull/2595))
+
+#### Added
+
+- `Flyout` ([#2547](https://github.com/porsche-design-system/porsche-design-system/pull/2547))
+
+#### Fixed
+
+- Wrong validation during SSR hydration of `Link Tile` and `Select Wrapper`
+  ([#2588](https://github.com/porsche-design-system/porsche-design-system/pull/2588))
+- `Modal` scrollable modal does not jump to top on changes within dialog
+  ([#2574](https://github.com/porsche-design-system/porsche-design-system/pull/2574))
+- Unnecessary lifecycles are prevented when prop values do not change for complex values
+  ([#2574](https://github.com/porsche-design-system/porsche-design-system/pull/2574))
+
+### [3.1.0-rc.1] - 2023-06-02
+
+#### Added
+
+- **[EXPERIMENTAL]** Prop `showPasswordToggle` for `Text Field Wrapper` with `input type="password"`
+  ([#2586](https://github.com/porsche-design-system/porsche-design-system/pull/2586))
+- Prop `name` for `Icon` supports `heart`, `heart-filled`, `copy`, `fingerprint`, `tire`, `roof-open` and `roof-closed`
+  ([#2589](https://github.com/porsche-design-system/porsche-design-system/pull/2589))
+
+#### Fixed
+
+- `Select Wrapper` missing border on touch devices
+  ([#2579](https://github.com/porsche-design-system/porsche-design-system/pull/2579))
+- `Tabs Item` text content can be selected/highlighted
+  ([#2582](https://github.com/porsche-design-system/porsche-design-system/pull/2582))
+
 ### [3.1.0-rc.0] - 2023-05-24
 
 #### Added
 
 - `Marque` now has a `variant` property, including 75 years variant
-  [#2575](https://github.com/porsche-design-system/porsche-design-system/pull/2575)
+  ([#2575](https://github.com/porsche-design-system/porsche-design-system/pull/2575))
 
 ### [3.0.0] - 2023-05-11
 

package/esm/lib/components/flyout.wrapper.js

@@ -0,0 +1,23 @@
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef, useRef } from 'react';
+import { useEventCallback, usePrefix, useBrowserLayoutEffect, useMergedClass } from '../../hooks.js';
+import { syncRef } from '../../utils.js';
+
+const PFlyout = forwardRef(({ aria, onDismiss, open = false, position = 'right', theme = 'light', className, ...rest }, ref) => {
+    const elementRef = useRef();
+    useEventCallback(elementRef, 'dismiss', onDismiss);
+    const WebComponentTag = usePrefix('p-flyout');
+    const propsToSync = [aria, open, position, theme];
+    useBrowserLayoutEffect(() => {
+        const { current } = elementRef;
+        ['aria', 'open', 'position', 'theme'].forEach((propName, i) => (current[propName] = propsToSync[i]));
+    }, propsToSync);
+    const props = {
+        ...rest,
+        class: useMergedClass(elementRef, className),
+        ref: syncRef(elementRef, ref)
+    };
+    return jsx(WebComponentTag, { ...props });
+});
+
+export { PFlyout };

package/esm/lib/components/text-field-wrapper.wrapper.js

@@ -3,14 +3,14 @@ import { forwardRef, useRef } from 'react';
 import { useEventCallback, usePrefix, useBrowserLayoutEffect, useMergedClass } from '../../hooks.js';
 import { syncRef } from '../../utils.js';
 
-const PTextFieldWrapper = forwardRef(({ actionIcon, actionLoading = false, description = '', hideLabel = false, label = '', message = '', onAction, showCharacterCount, showCounter = true, state = 'none', theme = 'light', unit = '', unitPosition = 'prefix', className, ...rest }, ref) => {
+const PTextFieldWrapper = forwardRef(({ actionIcon, actionLoading = false, description = '', hideLabel = false, label = '', message = '', onAction, showCharacterCount, showCounter = true, showPasswordToggle = true, state = 'none', theme = 'light', unit = '', unitPosition = 'prefix', className, ...rest }, ref) => {
     const elementRef = useRef();
     useEventCallback(elementRef, 'action', onAction);
     const WebComponentTag = usePrefix('p-text-field-wrapper');
-    const propsToSync = [actionIcon, actionLoading, description, hideLabel, label, message, showCharacterCount, showCounter, state, theme, unit, unitPosition];
+    const propsToSync = [actionIcon, actionLoading, description, hideLabel, label, message, showCharacterCount, showCounter, showPasswordToggle, state, theme, unit, unitPosition];
     useBrowserLayoutEffect(() => {
         const { current } = elementRef;
-        ['actionIcon', 'actionLoading', 'description', 'hideLabel', 'label', 'message', 'showCharacterCount', 'showCounter', 'state', 'theme', 'unit', 'unitPosition'].forEach((propName, i) => (current[propName] = propsToSync[i]));
+        ['actionIcon', 'actionLoading', 'description', 'hideLabel', 'label', 'message', 'showCharacterCount', 'showCounter', 'showPasswordToggle', 'state', 'theme', 'unit', 'unitPosition'].forEach((propName, i) => (current[propName] = propsToSync[i]));
     }, propsToSync);
     const props = {
         ...rest,

package/esm/public-api.js

@@ -15,6 +15,7 @@ export { PFieldset } from './lib/components/fieldset.wrapper.js';
 export { PFieldsetWrapper } from './lib/components/fieldset-wrapper.wrapper.js';
 export { PFlex } from './lib/components/flex.wrapper.js';
 export { PFlexItem } from './lib/components/flex-item.wrapper.js';
+export { PFlyout } from './lib/components/flyout.wrapper.js';
 export { PGrid } from './lib/components/grid.wrapper.js';
 export { PGridItem } from './lib/components/grid-item.wrapper.js';
 export { PHeading } from './lib/components/heading.wrapper.js';

package/lib/components/checkbox-wrapper.wrapper.d.ts

@@ -10,7 +10,7 @@ export type PCheckboxWrapperProps = Omit<HTMLAttributes<{}>, 'color'> & {
      */
     label?: string;
     /**
-     * Disables the checkbox and shows a loading indicator.
+     * __Experimental__: Disables the checkbox and shows a loading indicator.
      */
     loading?: boolean;
     /**
@@ -36,7 +36,7 @@ export declare const PCheckboxWrapper: import("react").ForwardRefExoticComponent
      */
     label?: string;
     /**
-     * Disables the checkbox and shows a loading indicator.
+     * __Experimental__: Disables the checkbox and shows a loading indicator.
      */
     loading?: boolean;
     /**

package/lib/components/flyout.wrapper.d.ts

@@ -0,0 +1,48 @@
+import { HTMLAttributes } from 'react';
+import type { SelectedAriaAttributes, FlyoutAriaAttribute, FlyoutPosition, Theme } from '../types';
+export type PFlyoutProps = Omit<HTMLAttributes<{}>, 'color'> & {
+    /**
+     * Add ARIA attributes.
+     */
+    aria?: SelectedAriaAttributes<FlyoutAriaAttribute>;
+    /**
+     * Emitted when the component requests to be dismissed.
+     */
+    onDismiss?: (event: CustomEvent<void>) => void;
+    /**
+     * If true, the flyout is open.
+     */
+    open: boolean;
+    /**
+     * The position of the flyout
+     */
+    position?: FlyoutPosition;
+    /**
+     * Adapts the flyout color depending on the theme.
+     */
+    theme?: Theme;
+};
+export declare const PFlyout: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<{}>, "color"> & {
+    /**
+     * Add ARIA attributes.
+     */
+    aria?: SelectedAriaAttributes<FlyoutAriaAttribute>;
+    /**
+     * Emitted when the component requests to be dismissed.
+     */
+    onDismiss?: (event: CustomEvent<void>) => void;
+    /**
+     * If true, the flyout is open.
+     */
+    open: boolean;
+    /**
+     * The position of the flyout
+     */
+    position?: FlyoutPosition;
+    /**
+     * Adapts the flyout color depending on the theme.
+     */
+    theme?: Theme;
+} & {
+    children?: import("react").ReactNode;
+} & import("react").RefAttributes<HTMLElement>>;

package/lib/components/flyout.wrapper.js

@@ -0,0 +1,25 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
+var hooks = require('../../hooks.js');
+var utils = require('../../utils.js');
+
+const PFlyout = react.forwardRef(({ aria, onDismiss, open = false, position = 'right', theme = 'light', className, ...rest }, ref) => {
+    const elementRef = react.useRef();
+    hooks.useEventCallback(elementRef, 'dismiss', onDismiss);
+    const WebComponentTag = hooks.usePrefix('p-flyout');
+    const propsToSync = [aria, open, position, theme];
+    hooks.useBrowserLayoutEffect(() => {
+        const { current } = elementRef;
+        ['aria', 'open', 'position', 'theme'].forEach((propName, i) => (current[propName] = propsToSync[i]));
+    }, propsToSync);
+    const props = {
+        ...rest,
+        class: hooks.useMergedClass(elementRef, className),
+        ref: utils.syncRef(elementRef, ref)
+    };
+    return jsxRuntime.jsx(WebComponentTag, { ...props });
+});
+
+exports.PFlyout = PFlyout;

package/lib/components/index.d.ts

@@ -14,6 +14,7 @@ export * from './fieldset.wrapper';
 export * from './fieldset-wrapper.wrapper';
 export * from './flex.wrapper';
 export * from './flex-item.wrapper';
+export * from './flyout.wrapper';
 export * from './grid.wrapper';
 export * from './grid-item.wrapper';
 export * from './heading.wrapper';

package/lib/components/text-field-wrapper.wrapper.d.ts

@@ -37,6 +37,10 @@ export type PTextFieldWrapperProps = Omit<HTMLAttributes<{}>, 'color'> & {
      * Show or hide max character count.
      */
     showCounter?: boolean;
+    /**
+     * __Experimental__: Show or hide password toggle for `input type="password"`.
+     */
+    showPasswordToggle?: boolean;
     /**
      * The validation state.
      */
@@ -91,6 +95,10 @@ export declare const PTextFieldWrapper: import("react").ForwardRefExoticComponen
      * Show or hide max character count.
      */
     showCounter?: boolean;
+    /**
+     * __Experimental__: Show or hide password toggle for `input type="password"`.
+     */
+    showPasswordToggle?: boolean;
     /**
      * The validation state.
      */

package/lib/components/text-field-wrapper.wrapper.js

@@ -5,14 +5,14 @@ var react = require('react');
 var hooks = require('../../hooks.js');
 var utils = require('../../utils.js');
 
-const PTextFieldWrapper = react.forwardRef(({ actionIcon, actionLoading = false, description = '', hideLabel = false, label = '', message = '', onAction, showCharacterCount, showCounter = true, state = 'none', theme = 'light', unit = '', unitPosition = 'prefix', className, ...rest }, ref) => {
+const PTextFieldWrapper = react.forwardRef(({ actionIcon, actionLoading = false, description = '', hideLabel = false, label = '', message = '', onAction, showCharacterCount, showCounter = true, showPasswordToggle = true, state = 'none', theme = 'light', unit = '', unitPosition = 'prefix', className, ...rest }, ref) => {
     const elementRef = react.useRef();
     hooks.useEventCallback(elementRef, 'action', onAction);
     const WebComponentTag = hooks.usePrefix('p-text-field-wrapper');
-    const propsToSync = [actionIcon, actionLoading, description, hideLabel, label, message, showCharacterCount, showCounter, state, theme, unit, unitPosition];
+    const propsToSync = [actionIcon, actionLoading, description, hideLabel, label, message, showCharacterCount, showCounter, showPasswordToggle, state, theme, unit, unitPosition];
     hooks.useBrowserLayoutEffect(() => {
         const { current } = elementRef;
-        ['actionIcon', 'actionLoading', 'description', 'hideLabel', 'label', 'message', 'showCharacterCount', 'showCounter', 'state', 'theme', 'unit', 'unitPosition'].forEach((propName, i) => (current[propName] = propsToSync[i]));
+        ['actionIcon', 'actionLoading', 'description', 'hideLabel', 'label', 'message', 'showCharacterCount', 'showCounter', 'showPasswordToggle', 'state', 'theme', 'unit', 'unitPosition'].forEach((propName, i) => (current[propName] = propsToSync[i]));
     }, propsToSync);
     const props = {
         ...rest,

package/lib/types.d.ts

@@ -45,6 +45,7 @@ declare const ICON_NAMES: readonly [
     "co2-emission",
     "compare",
     "configurate",
+    "copy",
     "country-road",
     "cubic-capacity",
     "delete",
@@ -58,12 +59,15 @@ declare const ICON_NAMES: readonly [
     "exclamation",
     "external",
     "filter",
+    "fingerprint",
     "flash",
     "fuel-station",
     "garage",
     "gift",
     "globe",
     "grid",
+    "heart",
+    "heart-filled",
     "highway",
     "home",
     "horn",
@@ -143,6 +147,8 @@ declare const ICON_NAMES: readonly [
     "refresh",
     "replay",
     "reset",
+    "roof-closed",
+    "roof-open",
     "route",
     "rss",
     "save",
@@ -168,6 +174,7 @@ declare const ICON_NAMES: readonly [
     "switch",
     "tablet",
     "tachometer",
+    "tire",
     "truck",
     "upload",
     "user",
@@ -750,6 +757,15 @@ declare const FLEX_ITEM_FLEXS: readonly [
     "equal"
 ];
 export type FlexItemFlex = typeof FLEX_ITEM_FLEXS[number];
+declare const FLYOUT_POSITIONS: readonly [
+    "left",
+    "right"
+];
+export type FlyoutPosition = (typeof FLYOUT_POSITIONS)[number];
+declare const FLYOUT_ARIA_ATTRIBUTES: readonly [
+    "aria-label"
+];
+export type FlyoutAriaAttribute = (typeof FLYOUT_ARIA_ATTRIBUTES)[number];
 declare const GRID_DIRECTIONS: readonly [
     "row",
     "row-reverse",
@@ -1003,7 +1019,7 @@ declare const DROPDOWN_DIRECTIONS: readonly [
     "up",
     "auto"
 ];
-export type SelectWrapperDropdownDirection = typeof DROPDOWN_DIRECTIONS[number];
+export type SelectWrapperDropdownDirection = (typeof DROPDOWN_DIRECTIONS)[number];
 export type SelectWrapperState = FormState;
 declare const SPINNER_SIZES: readonly [
     "small",

package/package.json

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

package/public-api.js

@@ -17,6 +17,7 @@ var fieldset_wrapper = require('./lib/components/fieldset.wrapper.js');
 var fieldsetWrapper_wrapper = require('./lib/components/fieldset-wrapper.wrapper.js');
 var flex_wrapper = require('./lib/components/flex.wrapper.js');
 var flexItem_wrapper = require('./lib/components/flex-item.wrapper.js');
+var flyout_wrapper = require('./lib/components/flyout.wrapper.js');
 var grid_wrapper = require('./lib/components/grid.wrapper.js');
 var gridItem_wrapper = require('./lib/components/grid-item.wrapper.js');
 var heading_wrapper = require('./lib/components/heading.wrapper.js');
@@ -87,6 +88,7 @@ exports.PFieldset = fieldset_wrapper.PFieldset;
 exports.PFieldsetWrapper = fieldsetWrapper_wrapper.PFieldsetWrapper;
 exports.PFlex = flex_wrapper.PFlex;
 exports.PFlexItem = flexItem_wrapper.PFlexItem;
+exports.PFlyout = flyout_wrapper.PFlyout;
 exports.PGrid = grid_wrapper.PGrid;
 exports.PGridItem = gridItem_wrapper.PGridItem;
 exports.PHeading = heading_wrapper.PHeading;