@porsche-design-system/components-react 2.14.0-rc.1 → 2.15.0-rc.0

package/CHANGELOG.md

@@ -9,6 +9,35 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 
 ### [Unreleased]
 
+### [2.15.0-rc.0] - 2022-08-16
+
+#### Fixed
+
+- `Popover` visual shadow bug in Safari
+- `Stepper Horizontal Item` bug where pseudo styles of the counter element were overridable
+
+### [2.15.0-beta.0] - 2022-08-05
+
+#### Fixed
+
+- `Tabs` & `Tabs Bar` `size` property when using `BreakpointCustomizable`
+
+#### Changed
+
+- `Modal` uses poly fluid sizing for outer spacing
+- `Banner` uses poly fluid sizing for outer spacing
+- `Content Wrapper` uses poly fluid sizing for inner spacing
+- `Modal` min-width is slightly updated to perfectly fit into content area of `Content Wrapper` at 320px viewport width
+
+#### Added
+
+- Validation of properties for all components
+- `Text Field Wrapper` with `input type="search"` is clearable via Escape key and custom clear button across browsers
+- `Text Field Wrapper` with `input type="search"` shows a "Locate me" button when `actionIcon="locate"` is set, emits
+  the `action` event on click and can be put into a loading state via `actionLoading="true"`
+
+### [2.14.0] - 2022-07-11
+
 ### [2.14.0-rc.1] - 2022-07-11
 
 ### [2.14.0-rc.0] - 2022-07-11

package/esm/public-api.js

@@ -1,7 +1,7 @@
 import { load } from '@porsche-design-system/components-js';
 export { componentsReady } from '@porsche-design-system/components-js';
 import { jsx } from 'react/jsx-runtime';
-import { createContext, useEffect, useMemo, useContext, useRef, useLayoutEffect, forwardRef } from 'react';
+import { createContext, useEffect, useContext, useRef, useMemo, useLayoutEffect, forwardRef } from 'react';
 
 // to warn users about missing PorscheDesignSystemProvider, we set the default values as undefined
 const PorscheDesignSystemContext = createContext({
@@ -150,7 +150,7 @@ const PButton = /*#__PURE__*/ forwardRef(({ aria, disabled = false, hideLabel =
     return jsx(Tag, { ...props });
 });
 
-const PButtonGroup = /*#__PURE__*/ forwardRef(({ direction = { base: 'column', xs: 'row', }, className, ...rest }, ref) => {
+const PButtonGroup = /*#__PURE__*/ forwardRef(({ direction = { base: 'column', xs: 'row' }, className, ...rest }, ref) => {
     const elementRef = useRef();
     const Tag = usePrefix('p-button-group');
     useBrowserLayoutEffect(() => {
@@ -786,13 +786,14 @@ const PText = /*#__PURE__*/ forwardRef(({ align = 'left', color = 'default', ell
     return jsx(Tag, { ...props });
 });
 
-const PTextFieldWrapper = /*#__PURE__*/ forwardRef(({ description = '', hideLabel = false, label = '', message = '', showCharacterCount = true, state = 'none', unit = '', unitPosition = 'prefix', className, ...rest }, ref) => {
+const PTextFieldWrapper = /*#__PURE__*/ forwardRef(({ actionIcon, actionLoading = false, description = '', hideLabel = false, label = '', message = '', onAction, showCharacterCount = true, state = 'none', unit = '', unitPosition = 'prefix', className, ...rest }, ref) => {
     const elementRef = useRef();
+    useEventCallback(elementRef, 'action', onAction);
     const Tag = usePrefix('p-text-field-wrapper');
-    const propsToSync = [description, hideLabel, label, message, showCharacterCount, state, unit, unitPosition];
+    const propsToSync = [actionIcon, actionLoading, description, hideLabel, label, message, showCharacterCount, state, unit, unitPosition];
     useBrowserLayoutEffect(() => {
         const { current } = elementRef;
-        ['description', 'hideLabel', 'label', 'message', 'showCharacterCount', 'state', 'unit', 'unitPosition'].forEach((propName, i) => (current[propName] = propsToSync[i]));
+        ['actionIcon', 'actionLoading', 'description', 'hideLabel', 'label', 'message', 'showCharacterCount', 'state', 'unit', 'unitPosition'].forEach((propName, i) => (current[propName] = propsToSync[i]));
     }, propsToSync);
     const props = {
         ...rest,