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

package/CHANGELOG.md

@@ -9,6 +9,42 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 
 ### [Unreleased]
 
+### [3.0.0-rc.2] - 2023-05-09
+
+#### Fixed
+
+- `Checkbox Wrapper` Safari visual state change while hovering
+  [#2508](https://github.com/porsche-design-system/porsche-design-system/pull/2508)
+- `Checkbox Wrapper` keyboard arrow navigation
+  [#2508](https://github.com/porsche-design-system/porsche-design-system/pull/2508)
+- `Modal` fix hover state of dismiss button
+  ([#2510](https://github.com/porsche-design-system/porsche-design-system/pull/2510))
+- `Link Pure`, `Button Pure`: adjust offset of `:hover` and `active` styles
+  ([#2511](https://github.com/porsche-design-system/porsche-design-system/pull/2511))
+- `Tabs Bar`, `Tabs` ([#2521](https://github.com/porsche-design-system/porsche-design-system/pull/2521)):
+  - `focus` state of tabpanel
+  - Indicator bar height
+- Optimize icon/text alignment of `Link Pure` and `Button Pure` in Safari
+- `Select Wrapper` multiline option height and scaling behavior
+  ([#2524](https://github.com/porsche-design-system/porsche-design-system/pull/2524))
+- Fixed accessibility issues of `Tabs`, `Tabs Bar` and `Stepper Horizontal` to comply with v.4.7.0 of `axe-core`
+  ([#2530](https://github.com/porsche-design-system/porsche-design-system/pull/2530))
+- React: `patchRemixRunProcessBrowserGlobalIdentifier` binary now supports Remix 1.16.0
+  ([#2537](https://github.com/porsche-design-system/porsche-design-system/pull/2537))
+- Angular: added optional modifier to optional properties for better type checking in strict mode
+  ([#2544](https://github.com/porsche-design-system/porsche-design-system/pull/2544))
+
+#### Added
+
+- Deprecation warning to `Icon` component if `lazy` prop is used
+  ([#2521](https://github.com/porsche-design-system/porsche-design-system/pull/2521))
+- `aria` prop to `Scroller` component
+  ([#2530](https://github.com/porsche-design-system/porsche-design-system/pull/2530))
+
+#### Changed
+
+- Model signature asset of 718 model ([#2532](https://github.com/porsche-design-system/porsche-design-system/pull/2532))
+
 ### [3.0.0-rc.1] - 2023-04-19
 
 #### Added

package/bin/patchRemixRunProcessBrowserGlobalIdentifier.js

@@ -26,32 +26,41 @@ var fs__namespace = /*#__PURE__*/_interopNamespaceDefault(fs);
 
 const patchRemixRunProcessBrowserGlobalIdentifier = () => {
     const packageEntry = require.resolve('@remix-run/dev');
-    const compilerDirPath = path__namespace.resolve(packageEntry, '../compiler');
-    const [fileName] = fs__namespace
-        .readdirSync(compilerDirPath)
-        // file is currently called compileBrowser.js, but the other part is compilerServer.js
-        // that's why we also consider compilerBrowser.js to be on the safe side
-        .filter((fileName) => fileName.match(/^compiler?Browser\.js$/));
-    const filePath = path__namespace.resolve(compilerDirPath, fileName);
-    const filePathBackup = filePath.replace(/\.js$/, '-original$&');
-    if (!fs__namespace.existsSync(filePathBackup)) {
-        fs__namespace.copyFileSync(filePath, filePathBackup);
-    }
-    else {
-        fs__namespace.copyFileSync(filePathBackup, filePath);
-    }
-    const fileContent = fs__namespace.readFileSync(filePath, 'utf8');
-    // prepending should be safer than appending because JSON.stringify() might be multiline like in source
-    // https://github.com/remix-run/remix/blob/05ffb6e2db8f2a0e09caffad6e9b3c897c34cb7d/packages/remix-dev/compiler/compileBrowser.ts#L159-L163
-    const newFileContent = fileContent.replace(/"process\.env\.REMIX_DEV_SERVER_WS_PORT": JSON\.stringify\(.*/, '"process.browser": "true",\n      $&');
-    const prettyFilePath = filePath.replace(packageEntry.substring(0, packageEntry.indexOf('/node_modules')), '.');
-    if (newFileContent.includes('"process.browser": "true"')) {
-        console.log(`Successfully patched ${prettyFilePath}`);
-    }
-    else {
-        console.error(`Patching ${prettyFilePath} failed`);
-    }
-    fs__namespace.writeFileSync(filePath, newFileContent);
+    const compilerDirPaths = [
+        path__namespace.resolve(packageEntry, '../compiler'),
+        path__namespace.resolve(packageEntry, '../compiler/js'), // since 1.16.0 the file was moved into js sub-folder
+    ].filter(fs__namespace.existsSync);
+    const filePaths = compilerDirPaths
+        .map((compilerDirPath) => fs__namespace.readdirSync(compilerDirPath).map((fileName) => `${compilerDirPath}/${fileName}`))
+        .flat()
+        // file is currently called compileBrowser.js
+        // since 1.16.0 the file is called compiler.js
+        .filter((fileName) => fileName.match(/\/(?:compileBrowser|compiler)\.js$/));
+    filePaths.forEach((filePath) => {
+        const filePathBackup = filePath.replace(/\.js$/, '-original$&');
+        if (!fs__namespace.existsSync(filePathBackup)) {
+            fs__namespace.copyFileSync(filePath, filePathBackup);
+        }
+        else {
+            fs__namespace.copyFileSync(filePathBackup, filePath);
+        }
+        const fileContent = fs__namespace.readFileSync(filePath, 'utf8');
+        // we want to extend the define config
+        // https://github.com/remix-run/remix/blob/main/packages/remix-dev/compiler/js/compiler.ts#L221-L226
+        if (fileContent.match(/define: \{/)) {
+            // prepending should be safer than appending because JSON.stringify() might be multiline like in source
+            // https://github.com/remix-run/remix/blob/05ffb6e2db8f2a0e09caffad6e9b3c897c34cb7d/packages/remix-dev/compiler/compileBrowser.ts#L159-L163
+            const newFileContent = fileContent.replace(/"process\.env\.NODE_ENV": JSON\.stringify\(.*/, '"process.browser": "true", // added by Porsche Design System\'s patchRemixRunProcessBrowserGlobalIdentifier.js\n      $&');
+            const prettyFilePath = filePath.replace(packageEntry.substring(0, packageEntry.indexOf('/node_modules')), '.');
+            if (newFileContent.includes('"process.browser": "true"')) {
+                console.log(`Successfully patched ${prettyFilePath}`);
+            }
+            else {
+                console.error(`Patching ${prettyFilePath} failed`);
+            }
+            fs__namespace.writeFileSync(filePath, newFileContent);
+        }
+    });
 };
 patchRemixRunProcessBrowserGlobalIdentifier();
 

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

@@ -3,7 +3,7 @@ import { forwardRef, useRef } from 'react';
 import { usePrefix, useBrowserLayoutEffect, useMergedClass } from '../../hooks.js';
 import { syncRef } from '../../utils.js';
 
-const PIcon = forwardRef(({ aria, color = 'primary', lazy = false, name = 'arrow-right', size = 'small', source, theme = 'light', className, ...rest }, ref) => {
+const PIcon = forwardRef(({ aria, color = 'primary', lazy, name = 'arrow-right', size = 'small', source, theme = 'light', className, ...rest }, ref) => {
     const elementRef = useRef();
     const WebComponentTag = usePrefix('p-icon');
     const propsToSync = [aria, color, lazy, name, size, source, theme];

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

@@ -3,13 +3,13 @@ import { forwardRef, useRef } from 'react';
 import { usePrefix, useBrowserLayoutEffect, useMergedClass } from '../../hooks.js';
 import { syncRef } from '../../utils.js';
 
-const PScroller = forwardRef(({ alignScrollIndicator = 'center', gradientColor = 'background-base', gradientColorScheme, scrollIndicatorPosition, scrollToPosition, scrollbar = false, theme = 'light', className, ...rest }, ref) => {
+const PScroller = forwardRef(({ alignScrollIndicator = 'center', aria, gradientColor = 'background-base', gradientColorScheme, scrollIndicatorPosition, scrollToPosition, scrollbar = false, theme = 'light', className, ...rest }, ref) => {
     const elementRef = useRef();
     const WebComponentTag = usePrefix('p-scroller');
-    const propsToSync = [alignScrollIndicator, gradientColor, gradientColorScheme, scrollIndicatorPosition, scrollToPosition, scrollbar, theme];
+    const propsToSync = [alignScrollIndicator, aria, gradientColor, gradientColorScheme, scrollIndicatorPosition, scrollToPosition, scrollbar, theme];
     useBrowserLayoutEffect(() => {
         const { current } = elementRef;
-        ['alignScrollIndicator', 'gradientColor', 'gradientColorScheme', 'scrollIndicatorPosition', 'scrollToPosition', 'scrollbar', 'theme'].forEach((propName, i) => (current[propName] = propsToSync[i]));
+        ['alignScrollIndicator', 'aria', 'gradientColor', 'gradientColorScheme', 'scrollIndicatorPosition', 'scrollToPosition', 'scrollbar', 'theme'].forEach((propName, i) => (current[propName] = propsToSync[i]));
     }, propsToSync);
     const props = {
         ...rest,

package/lib/components/icon.wrapper.js

@@ -5,7 +5,7 @@ var react = require('react');
 var hooks = require('../../hooks.js');
 var utils = require('../../utils.js');
 
-const PIcon = react.forwardRef(({ aria, color = 'primary', lazy = false, name = 'arrow-right', size = 'small', source, theme = 'light', className, ...rest }, ref) => {
+const PIcon = react.forwardRef(({ aria, color = 'primary', lazy, name = 'arrow-right', size = 'small', source, theme = 'light', className, ...rest }, ref) => {
     const elementRef = react.useRef();
     const WebComponentTag = hooks.usePrefix('p-icon');
     const propsToSync = [aria, color, lazy, name, size, source, theme];

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

@@ -1,10 +1,14 @@
 import { HTMLAttributes } from 'react';
-import type { ScrollerAlignScrollIndicator, ScrollerGradientColor, ScrollerGradientColorScheme, ScrollerScrollIndicatorPosition, ScrollerScrollToPosition, Theme } from '../types';
+import type { ScrollerAlignScrollIndicator, SelectedAriaAttributes, ScrollerAriaAttribute, ScrollerGradientColor, ScrollerGradientColorScheme, ScrollerScrollIndicatorPosition, ScrollerScrollToPosition, Theme } from '../types';
 export type PScrollerProps = Omit<HTMLAttributes<{}>, 'color' | 'onChange'> & {
     /**
-     * Sets the vertical position of scroll indicator
+     * Sets the vertical position of scroll indicator.
      */
     alignScrollIndicator?: ScrollerAlignScrollIndicator;
+    /**
+     * Add ARIA role.
+     */
+    aria?: SelectedAriaAttributes<ScrollerAriaAttribute>;
     /**
      * Adapts the background gradient color of prev and next button.
      */
@@ -18,11 +22,11 @@ export type PScrollerProps = Omit<HTMLAttributes<{}>, 'color' | 'onChange'> & {
      */
     scrollIndicatorPosition?: ScrollerScrollIndicatorPosition;
     /**
-     * Scrolls the scroll area to the left either smooth or immediately
+     * Scrolls the scroll area to the left either smooth or immediately.
      */
     scrollToPosition?: ScrollerScrollToPosition;
     /**
-     * Specifies if scrollbar should be shown
+     * Specifies if scrollbar should be shown.
      */
     scrollbar?: boolean;
     /**
@@ -32,9 +36,13 @@ export type PScrollerProps = Omit<HTMLAttributes<{}>, 'color' | 'onChange'> & {
 };
 export declare const PScroller: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<{}>, "color" | "onChange"> & {
     /**
-     * Sets the vertical position of scroll indicator
+     * Sets the vertical position of scroll indicator.
      */
     alignScrollIndicator?: ScrollerAlignScrollIndicator;
+    /**
+     * Add ARIA role.
+     */
+    aria?: SelectedAriaAttributes<ScrollerAriaAttribute>;
     /**
      * Adapts the background gradient color of prev and next button.
      */
@@ -48,11 +56,11 @@ export declare const PScroller: import("react").ForwardRefExoticComponent<Omit<H
      */
     scrollIndicatorPosition?: ScrollerScrollIndicatorPosition;
     /**
-     * Scrolls the scroll area to the left either smooth or immediately
+     * Scrolls the scroll area to the left either smooth or immediately.
      */
     scrollToPosition?: ScrollerScrollToPosition;
     /**
-     * Specifies if scrollbar should be shown
+     * Specifies if scrollbar should be shown.
      */
     scrollbar?: boolean;
     /**

package/lib/components/scroller.wrapper.js

@@ -5,13 +5,13 @@ var react = require('react');
 var hooks = require('../../hooks.js');
 var utils = require('../../utils.js');
 
-const PScroller = react.forwardRef(({ alignScrollIndicator = 'center', gradientColor = 'background-base', gradientColorScheme, scrollIndicatorPosition, scrollToPosition, scrollbar = false, theme = 'light', className, ...rest }, ref) => {
+const PScroller = react.forwardRef(({ alignScrollIndicator = 'center', aria, gradientColor = 'background-base', gradientColorScheme, scrollIndicatorPosition, scrollToPosition, scrollbar = false, theme = 'light', className, ...rest }, ref) => {
     const elementRef = react.useRef();
     const WebComponentTag = hooks.usePrefix('p-scroller');
-    const propsToSync = [alignScrollIndicator, gradientColor, gradientColorScheme, scrollIndicatorPosition, scrollToPosition, scrollbar, theme];
+    const propsToSync = [alignScrollIndicator, aria, gradientColor, gradientColorScheme, scrollIndicatorPosition, scrollToPosition, scrollbar, theme];
     hooks.useBrowserLayoutEffect(() => {
         const { current } = elementRef;
-        ['alignScrollIndicator', 'gradientColor', 'gradientColorScheme', 'scrollIndicatorPosition', 'scrollToPosition', 'scrollbar', 'theme'].forEach((propName, i) => (current[propName] = propsToSync[i]));
+        ['alignScrollIndicator', 'aria', 'gradientColor', 'gradientColorScheme', 'scrollIndicatorPosition', 'scrollToPosition', 'scrollbar', 'theme'].forEach((propName, i) => (current[propName] = propsToSync[i]));
     }, propsToSync);
     const props = {
         ...rest,