@porsche-design-system/components-react 3.9.0-rc.0 → 3.10.0-rc.0

package/CHANGELOG.md

@@ -14,6 +14,28 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 
 ### [Unreleased]
 
+### [3.10.0-rc.0] - 2023-12-07
+
+#### Added
+
+- **[EXPERIMENTAL]** `Flyout Navigation`
+  ([#2906](https://github.com/porsche-design-system/porsche-design-system/pull/2906))
+- Prop `submit-button` to show/hide a submit button for `Text Field Wrapper` `type="search"` if wrapped inside a form
+  ([#2908](https://github.com/porsche-design-system/porsche-design-system/pull/2908))
+
+#### Changed
+
+- `Accordion`: removed `border-bottom` if used standalone
+  ([#2911](https://github.com/porsche-design-system/porsche-design-system/pull/2911))
+- `display` css property can be overridden on all components, e.g. to make use of `display: none;` within media
+  queries  
+  ([#2913](https://github.com/porsche-design-system/porsche-design-system/pull/2913))
+- `Pagination`: Prop `maxNumberOfPageLinks` is deprecated and has no effect anymore, instead there is responsive
+  behavior out of the box with full SSR support
+  ([#2898](https://github.com/porsche-design-system/porsche-design-system/pull/2898))
+
+### [3.9.0] - 2023-11-24
+
 ### [3.9.0-rc.0] - 2023-11-23
 
 #### Added
@@ -45,6 +67,8 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 
 #### Fixed
 
+- `Select Wrapper`: Select dropdown is now visible if it overflows the `Table` component
+  ([#2885](https://github.com/porsche-design-system/porsche-design-system/pull/2885))
 - `Select Wrapper` keyboard and scroll behavior
   ([#2864](https://github.com/porsche-design-system/porsche-design-system/pull/2864))
 - Safari 15 default margin of button elements in several components

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

@@ -0,0 +1,25 @@
+'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 PFlyoutNavigationItem = react.forwardRef(({ identifier, label, className, ...rest }, ref) => {
+    const elementRef = react.useRef();
+    const WebComponentTag = hooks.usePrefix('p-flyout-navigation-item');
+    const propsToSync = [identifier, label];
+    hooks.useBrowserLayoutEffect(() => {
+        const { current } = elementRef;
+        ['identifier', 'label'].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.PFlyoutNavigationItem = PFlyoutNavigationItem;

package/cjs/lib/components/flyout-navigation.wrapper.cjs

@@ -0,0 +1,27 @@
+'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 PFlyoutNavigation = react.forwardRef(({ activeIdentifier, aria, onDismiss, onUpdate, open = false, theme, className, ...rest }, ref) => {
+    const elementRef = react.useRef();
+    hooks.useEventCallback(elementRef, 'dismiss', onDismiss);
+    hooks.useEventCallback(elementRef, 'update', onUpdate);
+    const WebComponentTag = hooks.usePrefix('p-flyout-navigation');
+    const propsToSync = [activeIdentifier, aria, open, theme || hooks.useTheme()];
+    hooks.useBrowserLayoutEffect(() => {
+        const { current } = elementRef;
+        ['activeIdentifier', 'aria', 'open', '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.PFlyoutNavigation = PFlyoutNavigation;

package/cjs/lib/components/pagination.wrapper.cjs

@@ -6,7 +6,7 @@ var react = require('react');
 var hooks = require('../../hooks.cjs');
 var utils = require('../../utils.cjs');
 
-const PPagination = react.forwardRef(({ activePage = 1, allyLabel, allyLabelNext, allyLabelPage, allyLabelPrev, intl = { root: 'Pagination', prev: 'Previous page', next: 'Next page', page: 'Page', }, itemsPerPage = 1, maxNumberOfPageLinks = { base: 5, xs: 7, }, onPageChange, onUpdate, showLastPage = true, theme, totalItemsCount = 1, className, ...rest }, ref) => {
+const PPagination = react.forwardRef(({ activePage = 1, allyLabel, allyLabelNext, allyLabelPage, allyLabelPrev, intl = { root: 'Pagination', prev: 'Previous page', next: 'Next page', page: 'Page', }, itemsPerPage = 1, maxNumberOfPageLinks, onPageChange, onUpdate, showLastPage = true, theme, totalItemsCount = 1, className, ...rest }, ref) => {
     const elementRef = react.useRef();
     hooks.useEventCallback(elementRef, 'pageChange', onPageChange);
     hooks.useEventCallback(elementRef, 'update', onUpdate);

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

@@ -6,14 +6,14 @@ var react = require('react');
 var hooks = require('../../hooks.cjs');
 var utils = require('../../utils.cjs');
 
-const PTextFieldWrapper = react.forwardRef(({ actionIcon, actionLoading = false, description = '', hideLabel = false, label = '', message = '', onAction, showCharacterCount, showCounter = true, showPasswordToggle = true, state = 'none', theme, 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', submitButton = true, theme, 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, showPasswordToggle, state, theme || hooks.useTheme(), unit, unitPosition];
+    const propsToSync = [actionIcon, actionLoading, description, hideLabel, label, message, showCharacterCount, showCounter, showPasswordToggle, state, submitButton, theme || hooks.useTheme(), unit, unitPosition];
     hooks.useBrowserLayoutEffect(() => {
         const { current } = elementRef;
-        ['actionIcon', 'actionLoading', 'description', 'hideLabel', 'label', 'message', 'showCharacterCount', 'showCounter', 'showPasswordToggle', 'state', 'theme', 'unit', 'unitPosition'].forEach((propName, i) => (current[propName] = propsToSync[i]));
+        ['actionIcon', 'actionLoading', 'description', 'hideLabel', 'label', 'message', 'showCharacterCount', 'showCounter', 'showPasswordToggle', 'state', 'submitButton', 'theme', 'unit', 'unitPosition'].forEach((propName, i) => (current[propName] = propsToSync[i]));
     }, propsToSync);
     const props = {
         ...rest,

package/cjs/public-api.cjs

@@ -18,6 +18,8 @@ var fieldsetWrapper_wrapper = require('./lib/components/fieldset-wrapper.wrapper
 var flex_wrapper = require('./lib/components/flex.wrapper.cjs');
 var flexItem_wrapper = require('./lib/components/flex-item.wrapper.cjs');
 var flyout_wrapper = require('./lib/components/flyout.wrapper.cjs');
+var flyoutNavigation_wrapper = require('./lib/components/flyout-navigation.wrapper.cjs');
+var flyoutNavigationItem_wrapper = require('./lib/components/flyout-navigation-item.wrapper.cjs');
 var grid_wrapper = require('./lib/components/grid.wrapper.cjs');
 var gridItem_wrapper = require('./lib/components/grid-item.wrapper.cjs');
 var heading_wrapper = require('./lib/components/heading.wrapper.cjs');
@@ -92,6 +94,8 @@ exports.PFieldsetWrapper = fieldsetWrapper_wrapper.PFieldsetWrapper;
 exports.PFlex = flex_wrapper.PFlex;
 exports.PFlexItem = flexItem_wrapper.PFlexItem;
 exports.PFlyout = flyout_wrapper.PFlyout;
+exports.PFlyoutNavigation = flyoutNavigation_wrapper.PFlyoutNavigation;
+exports.PFlyoutNavigationItem = flyoutNavigationItem_wrapper.PFlyoutNavigationItem;
 exports.PGrid = grid_wrapper.PGrid;
 exports.PGridItem = gridItem_wrapper.PGridItem;
 exports.PHeading = heading_wrapper.PHeading;

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

@@ -0,0 +1,11 @@
+import { type HTMLAttributes } from 'react';
+export type PFlyoutNavigationItemProps = Omit<HTMLAttributes<{}>, 'color'> & {
+    identifier: string;
+    label?: string;
+};
+export declare const PFlyoutNavigationItem: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<{}>, "color"> & {
+    identifier: string;
+    label?: string | undefined;
+} & {
+    children?: import("react").ReactNode;
+} & import("react").RefAttributes<HTMLElement>>;

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

@@ -0,0 +1,23 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef, useRef } from 'react';
+import { usePrefix, useBrowserLayoutEffect, useMergedClass } from '../../hooks.mjs';
+import { syncRef } from '../../utils.mjs';
+
+const PFlyoutNavigationItem = forwardRef(({ identifier, label, className, ...rest }, ref) => {
+    const elementRef = useRef();
+    const WebComponentTag = usePrefix('p-flyout-navigation-item');
+    const propsToSync = [identifier, label];
+    useBrowserLayoutEffect(() => {
+        const { current } = elementRef;
+        ['identifier', 'label'].forEach((propName, i) => (current[propName] = propsToSync[i]));
+    }, propsToSync);
+    const props = {
+        ...rest,
+        class: useMergedClass(elementRef, className),
+        ref: syncRef(elementRef, ref)
+    };
+    return jsx(WebComponentTag, { ...props });
+});
+
+export { PFlyoutNavigationItem };

package/esm/lib/components/flyout-navigation.wrapper.d.ts

@@ -0,0 +1,56 @@
+import { type HTMLAttributes } from 'react';
+import type { SelectedAriaAttributes, FlyoutNavigationAriaAttribute, FlyoutNavigationUpdateEvent, Theme } from '../types';
+export type PFlyoutNavigationProps = Omit<HTMLAttributes<{}>, 'color'> & {
+    /**
+     * Defines which flyout-navigation-item to be visualized as opened.
+     */
+    activeIdentifier?: string | undefined;
+    /**
+     * Add ARIA attributes.
+     */
+    aria?: SelectedAriaAttributes<FlyoutNavigationAriaAttribute>;
+    /**
+     * Emitted when the component requests to be dismissed.
+     */
+    onDismiss?: (event: CustomEvent<void>) => void;
+    /**
+     * Emitted when activeIdentifier is changed.
+     */
+    onUpdate?: (event: CustomEvent<FlyoutNavigationUpdateEvent>) => void;
+    /**
+     * If true, the flyout-navigation is visualized as opened.
+     */
+    open?: boolean;
+    /**
+     * Adapts the flyout-navigation color depending on the theme.
+     */
+    theme?: Theme;
+};
+export declare const PFlyoutNavigation: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<{}>, "color"> & {
+    /**
+     * Defines which flyout-navigation-item to be visualized as opened.
+     */
+    activeIdentifier?: string | undefined;
+    /**
+     * Add ARIA attributes.
+     */
+    aria?: SelectedAriaAttributes<"aria-label"> | undefined;
+    /**
+     * Emitted when the component requests to be dismissed.
+     */
+    onDismiss?: ((event: CustomEvent<void>) => void) | undefined;
+    /**
+     * Emitted when activeIdentifier is changed.
+     */
+    onUpdate?: ((event: CustomEvent<FlyoutNavigationUpdateEvent>) => void) | undefined;
+    /**
+     * If true, the flyout-navigation is visualized as opened.
+     */
+    open?: boolean | undefined;
+    /**
+     * Adapts the flyout-navigation color depending on the theme.
+     */
+    theme?: "light" | "dark" | "auto" | undefined;
+} & {
+    children?: import("react").ReactNode;
+} & import("react").RefAttributes<HTMLElement>>;

package/esm/lib/components/flyout-navigation.wrapper.mjs

@@ -0,0 +1,25 @@
+'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 PFlyoutNavigation = forwardRef(({ activeIdentifier, aria, onDismiss, onUpdate, open = false, theme, className, ...rest }, ref) => {
+    const elementRef = useRef();
+    useEventCallback(elementRef, 'dismiss', onDismiss);
+    useEventCallback(elementRef, 'update', onUpdate);
+    const WebComponentTag = usePrefix('p-flyout-navigation');
+    const propsToSync = [activeIdentifier, aria, open, theme || useTheme()];
+    useBrowserLayoutEffect(() => {
+        const { current } = elementRef;
+        ['activeIdentifier', 'aria', 'open', '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 { PFlyoutNavigation };

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

@@ -15,6 +15,8 @@ export * from './fieldset-wrapper.wrapper';
 export * from './flex.wrapper';
 export * from './flex-item.wrapper';
 export * from './flyout.wrapper';
+export * from './flyout-navigation.wrapper';
+export * from './flyout-navigation-item.wrapper';
 export * from './grid.wrapper';
 export * from './grid-item.wrapper';
 export * from './heading.wrapper';

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

@@ -30,7 +30,8 @@ export type PPaginationProps = Omit<HTMLAttributes<{}>, 'color'> & {
      */
     itemsPerPage?: number;
     /**
-     * The maximum number of page links rendered.
+     * Has no effect anymore
+     * @deprecated since v3.10.0, will be removed with next major release
      */
     maxNumberOfPageLinks?: BreakpointCustomizable<PaginationMaxNumberOfPageLinks>;
     /**
@@ -84,7 +85,8 @@ export declare const PPagination: import("react").ForwardRefExoticComponent<Omit
      */
     itemsPerPage?: number | undefined;
     /**
-     * The maximum number of page links rendered.
+     * Has no effect anymore
+     * @deprecated since v3.10.0, will be removed with next major release
      */
     maxNumberOfPageLinks?: BreakpointCustomizable<7 | 5> | undefined;
     /**

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

@@ -4,7 +4,7 @@ import { forwardRef, useRef } from 'react';
 import { useEventCallback, usePrefix, useTheme, useBrowserLayoutEffect, useMergedClass } from '../../hooks.mjs';
 import { syncRef } from '../../utils.mjs';
 
-const PPagination = forwardRef(({ activePage = 1, allyLabel, allyLabelNext, allyLabelPage, allyLabelPrev, intl = { root: 'Pagination', prev: 'Previous page', next: 'Next page', page: 'Page', }, itemsPerPage = 1, maxNumberOfPageLinks = { base: 5, xs: 7, }, onPageChange, onUpdate, showLastPage = true, theme, totalItemsCount = 1, className, ...rest }, ref) => {
+const PPagination = forwardRef(({ activePage = 1, allyLabel, allyLabelNext, allyLabelPage, allyLabelPrev, intl = { root: 'Pagination', prev: 'Previous page', next: 'Next page', page: 'Page', }, itemsPerPage = 1, maxNumberOfPageLinks, onPageChange, onUpdate, showLastPage = true, theme, totalItemsCount = 1, className, ...rest }, ref) => {
     const elementRef = useRef();
     useEventCallback(elementRef, 'pageChange', onPageChange);
     useEventCallback(elementRef, 'update', onUpdate);

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

@@ -45,6 +45,10 @@ export type PTextFieldWrapperProps = Omit<HTMLAttributes<{}>, 'color'> & {
      * The validation state.
      */
     state?: TextFieldWrapperState;
+    /**
+     * Show search button if wrapped inside a form.
+     */
+    submitButton?: boolean;
     /**
      * Adapts the color depending on the theme.
      */
@@ -103,6 +107,10 @@ export declare const PTextFieldWrapper: import("react").ForwardRefExoticComponen
      * The validation state.
      */
     state?: "none" | "success" | "error" | undefined;
+    /**
+     * Show search button if wrapped inside a form.
+     */
+    submitButton?: boolean | undefined;
     /**
      * Adapts the color depending on the theme.
      */

package/esm/lib/components/text-field-wrapper.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 PTextFieldWrapper = forwardRef(({ actionIcon, actionLoading = false, description = '', hideLabel = false, label = '', message = '', onAction, showCharacterCount, showCounter = true, showPasswordToggle = true, state = 'none', theme, 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', submitButton = true, theme, 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, showPasswordToggle, state, theme || useTheme(), unit, unitPosition];
+    const propsToSync = [actionIcon, actionLoading, description, hideLabel, label, message, showCharacterCount, showCounter, showPasswordToggle, state, submitButton, theme || useTheme(), unit, unitPosition];
     useBrowserLayoutEffect(() => {
         const { current } = elementRef;
-        ['actionIcon', 'actionLoading', 'description', 'hideLabel', 'label', 'message', 'showCharacterCount', 'showCounter', 'showPasswordToggle', 'state', 'theme', 'unit', 'unitPosition'].forEach((propName, i) => (current[propName] = propsToSync[i]));
+        ['actionIcon', 'actionLoading', 'description', 'hideLabel', 'label', 'message', 'showCharacterCount', 'showCounter', 'showPasswordToggle', 'state', 'submitButton', 'theme', 'unit', 'unitPosition'].forEach((propName, i) => (current[propName] = propsToSync[i]));
     }, propsToSync);
     const props = {
         ...rest,

package/esm/lib/types.d.ts

@@ -820,6 +820,14 @@ declare const FLYOUT_ARIA_ATTRIBUTES: readonly [
     "aria-label"
 ];
 export type FlyoutAriaAttribute = (typeof FLYOUT_ARIA_ATTRIBUTES)[number];
+declare const FLYOUT_NAVIGATION_ARIA_ATTRIBUTES: readonly [
+    "aria-label"
+];
+export type FlyoutNavigationAriaAttribute = (typeof FLYOUT_NAVIGATION_ARIA_ATTRIBUTES)[number];
+export type FlyoutNavigationUpdate = {
+    activeIdentifier: string;
+};
+export type FlyoutNavigationUpdateEvent = FlyoutNavigationUpdate;
 declare const GRID_DIRECTIONS: readonly [
     "row",
     "row-reverse",
@@ -1041,6 +1049,7 @@ declare const PAGINATION_NUMBER_OF_PAGE_LINKS: readonly [
     5,
     7
 ];
+/** @deprecated */
 export type PaginationMaxNumberOfPageLinks = (typeof PAGINATION_NUMBER_OF_PAGE_LINKS)[number];
 export type PaginationUpdateEvent = {
     page: number;

package/esm/public-api.mjs

@@ -16,6 +16,8 @@ export { PFieldsetWrapper } from './lib/components/fieldset-wrapper.wrapper.mjs'
 export { PFlex } from './lib/components/flex.wrapper.mjs';
 export { PFlexItem } from './lib/components/flex-item.wrapper.mjs';
 export { PFlyout } from './lib/components/flyout.wrapper.mjs';
+export { PFlyoutNavigation } from './lib/components/flyout-navigation.wrapper.mjs';
+export { PFlyoutNavigationItem } from './lib/components/flyout-navigation-item.wrapper.mjs';
 export { PGrid } from './lib/components/grid.wrapper.mjs';
 export { PGridItem } from './lib/components/grid-item.wrapper.mjs';
 export { PHeading } from './lib/components/heading.wrapper.mjs';

package/package.json

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